Responsive Webdesign: Workflow

Schritt 5: Style Tile / Atomic Design

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Anschließend geht es zur Designphase, für die hier drei verschiedene Ansätze vorgestellt werden.

Transkript

Kommen wir nun zum Hertzstück des Responsive Webdesign Prozesses. Während die meisten Menschen mit den zuvor erläuterten Stufen kein Problem haben, scheiden sich hier die Geister. Viele Leute sagen: Ja, alles schön und gut, aber hier müssen wir anders arbeiten. Der Kunde verlangt von uns ein Photoshop-Layout und das sogar als allererstes Artefakt in einem Projekt. Das stimmt. Aber Kunden haben auch vor nicht all so langer Zeit noch Disketten verlangt und tun das jetzt nicht mehr. Das heißt, Ihnen obliegt es nun, den Kunden von dem neuen Workflow zu überzeugen. Aber natürlich erst nachdem Sie ihn selbst verinnerlicht haben, denn er hat es in sich. Grundsätzlich beginnen wir nicht mit Layouts. Layouts sind immer das Ergebnis. Am Ende eines Responsive Webdesign Prozesses steht ein Layout und dieses können Sie gerne als Screenshot dem Kunden schicken, wenn er eins haben will. Allerdings ist der Zeitpunkt ein anderer. Eben am Ende. Am Anfang muss ich erst einmal herausbekommen, wohin will der Kunde überhaupt. Der Kunde weiß das selbst nicht! Der Kunde kann diese Entscheidungen, die ein Layout bedingen, überhaupt nicht treffen. Auf einem normalen Layout werden 200 bis 300 kleine Mikroentscheidungen von Kunden verlangt. Diese kann er gar nicht treffen. Dazu sind Menschen letztlich nicht in der Lage. Was sie aber können, ist erstmal eine grobe Richtung zu geben, wohin soll das Ganze führen. Wir beginnen beispielsweise mit einem Mood Board. Das Mood Board, also Englisch mood wie Stimmung und board wie Tafel, ist ein wichtiges Arbeits- und Präsentationsmittel in Komunikation- und Designberufen. Im Laufe des Projekts unterstützt es die Entwicklung, die Vermittlung gegebenenfalls Verkauf und schließlich Referenz, von Konzept geträumte Umsetzungen, visueller und visuell darstellbarer Ideen. Das Mood Board hilft bei der Darstellung des Look and Feels von Seiteninhalten, Navigationselementen und anderen User-Interface-Elementen. Hier macht das Mood Board die Elemente erklärbar, erfahrbar, es klärt die Zusammenhänge zwischen verschiedenen Elementen und lässt dabei Raum für die Vorstellungskraft und neue Ideen. Zudem können Elemente problemlos zugefügt, entfernt oder neu angeordnet werden. Das heißt, ich illustriere zunächst den visuellen Stil und vielleicht sogar die Stilrichtung. Danach gehe ich in Richtung Typographie, Bildwelten, Farben und Stile. Und schließlich stelle ich dort das Look and Feel der Website inklusive der Elemente dar, wie beispielsweise Navigation und Überschriften. Wir haben anfangs gesagt, dass wir vor dem Beginn des Prozesses unbedingt ein Mood-Board-Briefing brauchen. Das heißt, wir gehen zum Kunden und fragen ihn: Wie soll die Webseite gestaltet werden? Welche Attribute sind dir wichtig? Es geht nicht um Farben oder metallisch und grau, es geht um Adjektive. Soll sie überzeugend, soll sie vertrauensvoll rüberkommen? Soll sie frech rüberkommen die Seite? Will ich mit großen Flächen arbeiten? Mit plakativen Elementen? Will ich eine Bilderwelt installieren? Soll sehr viel Text dort stehen? All das kann ich am Anfang im Briefing abholen. Selbstverständlich gibt es Design-Manuals, Corporate-Design-Manuals oder Corporate-Identity und die muss ich natürlich umsetzen. Aber grundsätzlich kann ich in ein Mood-Board Breafing bereits abholen, in welche Richtung die Webseite geht und im Mood Board selbst dann dieses realisieren. Wichtig ist aber, es werden nur die Elemente designed und niemals und zu keiner Zeit ein fertiges Layout. Gehen wir zur nächstmöglichen Verfahrensweise. Mood Boards sind sehr vage, Style Tiles werden schon etwas konkreter. Wenn man gemeinsam mit einem neuen Kunden ein Webdesign-Projekt plant, möchte man einerseits ein ansprechendes visuelles Konzept ausarbeiten, andererseits aber möglich wenig Zeit mit konkreten Entwürfen verbringen. Da diese letztlich im RWD ohnehin nicht möglich sind und zudem auch noch sehr viel Zeit kosten. Hier setzen die sogenannten Style Tiles von Samantha Warren an. Diese füllen genau die Lücke zwischen ungenauen Techniken, wie eben Mood Boards, und detaillierteren Techniken, wie eben Layouts. Beispielsweise kann man dort ein PSD runterladen, ein Photoshop-Dokument, welches schon bestimmte Platzhalter enthält. Also Logo auf der linken Seite, dann beispielsweise mögliche Farben darunter, dann Texturen, Bilder, auf der rechten Seite Überschriften, Fließtext und ähnliche Sachen. Und dann kann man beginnen diese langsam zu füllen. Hier ein Entwurf, der ungefähr ein Drittel fertig ist, in dem man beispielsweise schon das Logo reingetan hat und ein paar Farben. Und so nährt man sich dem Kunden und sagt: Geht das schon in die Richtung? Sind das deine Farben? Sind das deine Überschriften? Gefallen sie dir? Wirken sie so, wie du das dir vorgestellt hast? Und Ähnliches. Dieses Template, wie gesagt, gibt es zum Download. Ein Beispiel, welches auf der stiletil.de Seite zu finden ist, ist die Website des Examiners zu einer Kampangen- Aktion vor ein paar Jahren. Es wurden dort drei verschiedene Style Tiles entwickelt. Hier ein Style Tile, der ein bisschen edler wirkt. Dann ein Style Teil, der ein bisschen mehr mit Farben arbeitet, mit Schatten, mit großen Flächen. Und ein anderer, der etwas klarer hervorkommt und auch etwas konservativer. Draus entstanden ist eine Webseite, die letztlich keinen der drei Style Tiles exakt gleicht, aber von allen Style Tiles die besten Elemente verwendet. So ist es möglich auch ohne Layout, zu einer ansprechenden Darstellung zu gelangen. Die nächste Stufe ist das sogenannte Atomic Design von Brad Frost. Josh Duck hat seiner Zeit alle Elemente, die es in HTML gibt, in ein Periodensystem gepackt. Ganz links HTML, darunter Head, Title und so weiter. Dies über Table, TR, TD und Ähnliches. Alle 106 Elemente des HTML5-Standards. Brad Frost hat diese Tabelle gesehen und dachte sich: Die Analogie ist gar nicht so schlecht. Eine Webseite bestehend aus Atomen. Und so hat er das sogenannte Atomic Design erfunden. Das Atomic Design ist eine Vorgehensweise um Designsysteme zu erstellen. Und hier gibt es fünf unterschiedliche Stufen. Die Atome, die Moleküle, die Organismen, die Templates und am Ende die Pages. Und letztlich sind Moleküle aus Atomen aufgebaut, Organismen aus Molekülen, Templates aus Organismen und Pages aus Templates. Schauen wir uns dieses einmal genauer an. Atome sind die grundlegenden Bausteine um User Interfaces zu erstellen. Damit stellen Sie die Elemente dar, aus den größere Einheiten bestehen. Beispielsweise sehen wir hier ein Label, ein Inputfeld und ein Button. Dies kann man designen und dem Kunden vorlegen. Und mit ihm darüber sprechen, ob das in die Anmutung geht, in die Richtung geht, die man sich vorstellt. Wenn das abgeklärt ist, geht man zum nächsten Schritt. Man erstellt Moleküle. Moleküle sind Gruppen von Atomen und bilden bereits einzelne verwendbare Einheiten. Diese sollten so klein und universell einsetzbar wie möglich gehalten werden. Hier sehen wir zum Beispiel ein komplettes Suchmolekül. Es hat ein Label, ein Inputfeld und ein Button. Und ist damit an verschiedenen Stellen auf der Webseite einsetzbar. Die nächste Stufe sind die sogenannten Organismen. Organismen sind Gruppen von Molekülen, die zusammen gefasst wurden um ein relativ komplexen individuellen Abschnitt der Webseite oder des User Interfaces zu realisieren. Hier haben wir auf der linken Seite im Stil des Wireframes, wahrscheinlich ein Logo und die Navigation. Und auf der rechten Seite bereits das Molekül. Das Ganze wirkt nun wie ein Organismus. An dieser Stelle rechts ist der bereits fertig, links wird noch dran gearbeitet. Weiter geht es zum vierten Schritt, den sogenannten Templates. In den Templates werden Gruppen von Organismen zusammengefügt. Hier sehen wir erstmals, wie sich die Elemente zueinander auf einer seitenähnlichen Struktur verhalten. Und Pages schließlich sind die spezifischen Instanzen der Templates. Platzhalter werden nun, wenn vorhanden, mit realem Content ersetzt. Aber hier sollten wir uns bereits in einem Prototyp befinden und nicht mehr im Photoshop. Hier hat Brad Frost eben das sogenannte pattern lab erfunden. Das pattern lab ist eine Basis, mit der ich direkt Prototypen erstellen kann und somit eben Atome, Moleküle, Organismen, Templates und Pages sowohl strukturieren, verwalten, wie auch direkt im HTML ausgeben kann. Dies ist alles kostenfrei erhältlich auf GitHub.

Responsive Webdesign: Workflow

Machen Sie sich die Prozesse, die hinter Responsive Webdesign stehen, zu Eigen und werden Sie zum erfolgreichen Projektleiter, Kunden oder Auftraggeber.

1 Std. 34 min (19 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!