Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Tools für den neuen Workflow

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein neuer Workflow braucht neue Tools bzw. eine neue Rolle für klassische Tools wie Photoshop. Glücklicherweise gibt es davon einige: von StyleTyles über Atomic Web Design bis hin zu Tools fürs Prototyping.

Transkript

Wenn wir einen neuen Workfloor brauchen, brauchen wir auch neue Tools, und auch einen anderen Umgang mit Photoshop. Was ist denn das Problem mit Photoshop? Erst einmal vorweg, Photoshop ist derzeit wahrscheinlich immer noch das häufigst benutzte Tool, um Layouts zu entwickeln für Webseiten. Was ist daran problematisch? Zum Einen ist problematisch, dass Sie, wenn Sie mit Photoshop ein Dokument anlegen, dieses für eine bestimmte Größe erstellen. Sie müssen die Größe hier vorgeben. Und wir haben es heute ja mit ganz unterschiedlichen Größen zu tun. Das heißt genau genommen, mit unendlich vielen Größen. Man behilft sich da in vielen Fällen, dass man sagt, na ja, okay, dann mach ich halt nicht ein Layout, sondern ich mache vier Layouts oder ich mache drei Layouts. Problematisch daran ist, dass natürlich vier Layouts auch nicht genügen, wenn wir uns diese Situation anschauen. Angenommen vier Layouts würden genügen, bedeutet das aber natürlich auch schon, dass man sehr, sehr viele Layouts erstellen muss. Weil beispielsweise wollen Sie auch verschiedene Varianten zeigen. Oder es gibt auch unterschiedliche Seitentypen, und dann wird das natürlich richtig, richtig viel. Außerdem gibt es eine Reihe von weiteren Problemen mit Photoshop. So kann Photoshop natürlich verschiedene Dinge gar nicht abbilden. Beispielsweise Interaktionen oder wie sich Webseiten beim Scrollen verändern. Und wenn Sie ein Layout in Photoshop erstellen, dann versuchen Sie natürlich die Webseite möglichst ähnlich zu machen. Aber Photoshop ist ja ein eigenes Tool, und kann bestimmte Dinge nicht, die Webseiten automatisch können. Und so ist es natürlich dann die falsche Herangehensweise. Inzwischen sagen Leute auch deshalb, Photoshop ist tot. Hier ganz anschaulich. Was gibt es denn für Alternativen, wenn wirklich Photoshop tot ist? Das würde natürlich bedeuten, dass wir direkt im Browser designen müssen. Und es gibt immer wieder diese Forderungen. Das Problem am Designen im Browser ist, dass für viele Leute, das ihre Kreativität eher hemmt, weil sie sich dann so konzentrieren müssen mit CSS, HTML alles richtig zu machen. Und damit in einem anderen Modus sind, also wenn sie in Photoshop etwas entwickeln. Es gibt jetzt Möglichkeiten Photoshop weiterhin einzusetzen. Das Entscheidende ist aber, dass Photoshop nicht mehr für Layouts verwendet wird. Ein Ansatz sind diese Style Tiles. Was sind diese Style Tiles? Sie können hier die Templates herunterladen. Das sind Photoshop-Vorlagen. Und hier sehen Sie auf der Webseite, wann soll man diese verwenden. Style Tiles sind das Richtige, wenn ein Moodboard zu vage ist, und Layouts oder Mockups zu genau. Und dann sind Style Tiles so in der Mitte. Und was bedeutet das? Man entwickelt. Eine Stimmung zeigt, wie einzelne Komponenten aussehen können. Aber es handelt sich dabei immer nicht um ein Layout. Das kann man dann natürlich daraus entwickeln. Aber ganz entscheidend, es wird nicht ein Layout entwickelt, sondern es werden einzelne Komponenten gestaltet. Ähnlich sind auch die Element-Collagen. Die funktionieren so, dass sie in Photoshop ein sehr großes Dokument anlegen. Am besten nicht in den typischen Ausmaßen einer Webseite, damit es gar nicht erst zu Missverständnissen führt. Und dann zeigen sie dort, wie einzelne Komponenten aussehen können. Und irgendwo kann man durch auch solche Chrome eines Handys oder so einfügen, um auch zu zeigen, wie das da aussehen könnte. Aber es ist immer klar, es handelt sich jetzt hier nicht um ein Layout. Ein sehr guter Ansatz kommt auch von Brad Frost. Das ist das "Atomic Web Design". Da geht es auch darum, dass man nicht die fertigen Seiten layoutet, sondern bei den kleineren Bestandteilen anfängt. Zuerst mal bei den Atomen. Das können zum Beispiel Atome sein. Die Atome können dann Moleküle bilden, und diese wiederum bilden einen Organismus. Und aus verschiedenen Organismen kann man dann Templates bilden, und daraus wiederum Webseiten. Hilfreich, wenn Sie sich überlegen, wie sich eine Einzelkomponente verhalten soll. Beim responsiven Webdesign sind auch die "Responsive Patterns" von Brad Frost. Wichtig ist natürlich so oder so, dass man im responsiven Webdesign wesentlich früher im Browser auch gestaltet und entwickelt. Und dabei helfen dann Tools zum Prototyping, wie beispielsweise Foundation oder auch das sehr bekannte Bootstrap. Entscheidend ist also, beim responsiven Webdesign brauchen wir einen anderen Umgang mit Photoshop. Wie das funktionieren kann, zeigen sehr schön die Style Tiles. Und hilfreich für die rasche Umsetzung sind natürlich dann auch Frameworks, wie Foundation oder Bootstrap.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!