Annäherung an den Website-Designprozess vom Browser aus

„Auf die Verrückten, die Außenseiter, die Rebellen, die Unruhestifter, die runden Stifte in den eckigen Löchern … diejenigen, die die Dinge anders sehen – sie mögen keine Regeln … Sie können sie zitieren, ihnen widersprechen, sie verherrlichen oder verleumden sie, aber das Einzige, was man nicht tun kann, ist sie zu ignorieren, weil sie die Dinge verändern …“ – Apples Think Different -Kampagne, Steve Jobs, 1997.

Meistens erstellen Designer während des Website-Designprozesses immer noch statische Mock-ups von Bildschirmen mit traditionellen Design-Tools. Aber einige Designer machen einen großen Sprung und umgehen sie, indem sie direkt zum Code übergehen, Designs im Browser erstellen und anpassen und ihre Designs so testen, wie sie den Menschen in Echtzeit erscheinen würden. Sind sie die Verrückten, die Außenseiter, die Rebellen?

Typischerweise umfasst der traditionelle Website-Entwicklungsprozess viele Phasen, darunter Planung, Inhaltsstrategie, Design, Wireframing, Prototyping, Testen, Entwickeln, Veröffentlichen und so weiter. Aber könnte es während der Designphase eine andere Möglichkeit geben, „pixelgenaue“ responsive Website-Designs zu erstellen und Design-Tools vollständig zu umgehen?

Mit dem Aufkommen von responsivem Design und der Vielfalt der verwendeten Geräte (Handys, Tablets, Laptops, Desktops, Uhren) ist es viel schwieriger, alles konsistent zu halten – und mit mehr beweglichen Teilen, die berücksichtigt werden müssen, der Ansatz zum Entwerfen von Websites und Schnittstellen verändert sich.

Obwohl es nicht notwendig ist, dass ein Designer ein Programmierexperte wird, besteht eine Lösung für Designer darin, direkt mit dem Code zu arbeiten, der eine Website antreibt. Designer, die Code mit nur wenig HTML und CSS bearbeiten können, werden sich als große Bereicherung für jedes Team erweisen und insgesamt einen massiven Vorteil haben.

Warum? Bei einem responsiven Website-Designprojekt mit all seinen Komplexitäten haben Designer normalerweise nicht die Zeit, ein statisches Design einer Komponente (z. B. einer Kopf- oder Fußzeile) über 10 verschiedene Auflösungen und Darstellungsbereiche hinweg zu erstellen. Selbst wenn sie nur für die beliebtesten Geräte entwerfen, müssen sie immer noch 4-5 Bildschirme mit unterschiedlichen Seitenverhältnissen, Bildschirmdichten und Bildschirmabmessungen in Betracht ziehen. Keine leichte Aufgabe, um es gelinde auszudrücken.

Herausforderungen beim Website-Design zuerst mit Stift und Papier lösen

Lassen Sie uns einen anderen Website-Design-Ansatz und Planungsprozess untersuchen.

Die erste Phase beginnt mit einer Kundenbefragung, die allgemeine Projektziele aus Unternehmenssicht, die Zielgruppe, Conversion-Strategien, verschiedene Leistungserwartungen usw. abfragt. Dies geschieht vor Beginn der eigentlichen Entwurfsphase, um die Bedürfnisse des Kunden und das Projekt insgesamt besser zu verstehen und später effizienter zu sein.

Der nächste Schritt besteht darin, eine Projektskizze zu verfassen, um zu bestätigen, dass das Briefing verstanden wurde. Dies ist hilfreich, wenn Sie an Projekten in einer Nische arbeiten, in der Sie möglicherweise nicht über viel Erfahrung oder Fachwissen verfügen. Nennen Sie es eine funktionale Spezifikation – aber weniger technisch.

Dies hilft bei der Definition von Terminologien, Schlüsselwörtern und Prozessen. Abhängig von der Komplexität des Projekts ist es eine gute Idee, mehrere Szenarien und Benutzerabläufe durchzuführen – normalerweise der Onboarding-Flow, das Suchen und Navigieren auf einer Website oder ein „In den Einkaufswagen“- und Checkout-Flow, wenn es sich um eine E-Commerce-Website handelt.

Wireframing und Prototyping

Das Prototyping ist die nächste Phase im Website-Designprozess. Das Erstellen von schnellen Wireframes, um über das Seitenlayout, die Funktionen und das Aussehen der Website-Seiten auf verschiedenen Geräten zu sprechen, ist ein guter Anfang. Es braucht nicht viel Zeit, um Dutzende von Wireframes verschiedener Vorlagen und Komponenten zu erstellen. Daraus kann ein einfacher Website-Prototyp erstellt werden und je nach Komplexität des Projekts können Prototyping-Tools wie InVision, Adobe XD, Balsamiq, Moqups oder Axure verwendet werden.

Moodboards und Schnittstelleninventar

Der nächste Schritt besteht darin, ein Moodboard zusammenzustellen: eine Sammlung von Dingen, die dem Designer, dem Kunden und anderen Beteiligten auf anderen Websites gefallen könnten – Layouts, Look-and-Feel, Farben oder Schriftarten, Symbole, Bilder und so weiter. Dies wird dazu beitragen, das allgemeine Erscheinungsbild der Website zu definieren. Wenn der Kunde über einen Branding-Styleguide verfügt, sollte dieser berücksichtigt und in das neue Website-Design integriert werden.

Sobald verschiedene Artefakte genehmigt sind – Wireframes, Prototypen, Mockups, Moodboards usw. – ist es eine gute Idee, eine Schnittstelleninventur durchzuführen.

Ein Schnittstelleninventar ist eine umfassende Sammlung der Kleinigkeiten, aus denen Ihre Schnittstelle besteht.

Brad Frost

Wenn Sie responsives Webdesign von Grund auf neu erstellen, schreiben Sie zunächst alle Komponenten und Elemente auf, aus denen das Projekt aufgebaut wird. Eine ungeordnete Liste reicht vollkommen aus und ist definitiv besser als nichts. Zum Beispiel Tabellen, Schaltflächen, Bilder, Typografie, Medien, Formulare, Navigation, Komponenten usw.

Entwerfen im Browser

„Designen im Browser“ ist ein Begriff, der mit dem Aufkommen des responsiven Webdesigns populär wurde. Um die Stunden, die mit Designprogrammen wie Sketch verbracht werden, zu minimieren, wurden Designer aufgefordert, die Designphase in den Browser zu verlagern und CSS für Layout und Styling zu verwenden. Dieser Website-Design-Ansatz erweist sich als effizienter, da er viele Schritte einspart.

Indem man sich auf das HTML-Mockup konzentriert und Designideen „im Browser“ mit CSS testet, kann Zeit eingespart werden, die normalerweise für das Erstellen statischer Mockups von Seiten in anderen Designtools wie Sketch aufgewendet wird. Es ist eine gute Idee für Designer, sich einen guten Code-Editor zu besorgen und eine gute Browser-Aktualisierungsmethode zu entwickeln, damit sie Änderungen in Echtzeit sehen können. Sublime Text und Codekit zum Beispiel sind eine großartige Kombination.

HTML und CSS, so strukturiert wie sie sind, zwingen Sie dazu, über Muster nachzudenken und halten Sie in Schach. Es ist einfacher, über Modularität nachzudenken, wenn HTML-Komponenten erstellt werden, die einfach kopiert, dupliziert und mit dynamischen Daten gefüllt werden können, während die gleiche Struktur beibehalten wird. Wenn Sie eine bestimmte Änderung erstellen möchten, müssen Sie dieses Element explizit anvisieren oder eine andere CSS-Klasse hinzufügen.

Wenn Sie Überschriften formatieren, sind sie auf der gesamten Website konsistent, sofern sie nicht überschrieben werden. Gleiches gilt für andere Elemente. Diese Art des Denkens zwingt Sie dazu, zu standardisieren, gemeinsame Elemente zu gruppieren, bereits gestaltete Elemente so weit wie möglich wiederzuverwenden und vor allem alles modular zu halten.

Mit einer einzigen CSS-Deklaration können Sie die Auffüllung von Schaltflächen für bessere Berührungsziele ändern und direkt auf einem Mobiltelefon, Tablet und Desktop testen. Dies ist in Photoshop oder Sketch nicht einfach, da andere Elemente im Layout einander nicht kennen und Sie jedes Mal, wenn Sie die Größe ändern, Objekte neu organisieren müssen.

Möchten Sie ein anderes Header-Farbschema ausprobieren? Durch die Arbeit mit nur wenigen Zeilen CSS-Code sind Änderungen sofort an allen HTML-Vorlagen, auf allen Geräten und Bildschirmen sichtbar. Diese Art von Flexibilität lässt sich nicht einfach emulieren, wenn Sie 20 statische Mockups haben. Zugegeben, Sie könnten „Symbole“ in Sketch oder Adobe XD für wiederverwendbare Komponenten verwenden, aber sie sind nicht so vielseitig wie CSS.

In dieser Phase müssen mehrere technische Entscheidungen getroffen werden. Fragen, die beantwortet werden müssen, sind:

• Werden Sie einen CSS-Präprozessor verwenden? (empfohlen)
• Welche Art von responsivem Raster werden Sie für das Layout verwenden?
• Sind die Schriftarten, die Sie verwenden möchten, käuflich zu erwerben? Verfügt der Kunde über das Budget für Premium-Webfonts oder werden Sie auf verfügbare kostenlose Webfonts zurückgreifen?
• Werden Sie mehrfarbige oder einfarbige Symbole verwenden? Wird die Größe auf der Website variieren? Verlassen Sie sich im Folgenden auf benutzerdefinierte Symbole oder auf ein bereits vorhandenes Symbolpaket? Welche Größen müssen Ihre Symbole aufnehmen können?

Das Problem mit Schriftarten und Responsive Webdesign

Die Auswahl von Schriftarten für ein responsives Webdesign-Projekt kann eine Herausforderung sein. Es gibt viele Möglichkeiten und ebenso viele Fallstricke. Da das Design im Browser verwendet wird, ist dies der beste Ort, um sie auszuprobieren. Die Lesbarkeit von Schriften kann je nach Größe, Gewicht, Farben und Wiedergabe variieren. Durch das direkte Ausprobieren von Schriften im Browser können Designer also sicherstellen, dass alles richtig aussieht und die gewünschten Erwartungen erfüllt werden.

Es gibt viele Online-Tools zum Auswählen und Testen von Schriftarten und zum Ausprobieren von Schriftkombinationen. Auf Typetester und Typecast können verschiedene Schriftarten von verschiedenen Diensten und Herstellern gefunden und getestet werden. Bei der Arbeit mit einem bestimmten Abonnementdienst für Schriftarten wie Typekit oder Fonts.com können Designer Schriftarten generieren und direkt auf ihren Seitenvorlagen testen. Das Generieren eines Typekit-Pakets mit neuen Schriftarten ist einfach und schnell, und Sie können leicht erkennen, wie sich bestimmte Schriftarten auf die Leistung von Webseiten auswirken.

Symbole, die zum Markenstil passen

Beim Zeichnen benutzerdefinierter Symbole müssen Größe, Raster und Stil definiert werden. In Illustrator würde beispielsweise jede Zeichenfläche ein Symbol darstellen. Symbole können einfach aus Illustrator als SVG oder PNG exportiert werden, die später mit Diensten wie Icomoon in eine Symbolschrift umgewandelt werden können. Es wird empfohlen, Vektorsymbole (SVG) zu verwenden, da Vektoren auflösungsunabhängig sind, sodass es keine Bedenken hinsichtlich ihrer Anzeige auf hochauflösenden (Retina) Bildschirmen gibt.

Ein Styleguide und CSS, um den Website-Designprozess in Schach zu halten

Selbst wenn wir im Browser entwerfen, könnten wir bei Dutzenden von Vorlagen und Komponenten möglicherweise den Überblick verlieren, wo und auf welche Weise etwas verwendet wird. Es ist eine gute Idee, einen Styleguide aller Komponenten als zentrales Repository aufzubauen. Spezifische Seitenvorlagen werden aus diesem Styleguide erstellt, indem UI-Komponenten und -Elemente zu Webseiten kombiniert werden.

UI-Komponenten können Dinge wie Paginierung, Produktliste, Bildergalerie, modale Fenster, Formularelemente usw. sein und werden als Bausteine ​​für Vorlagen verwendet. Alles an einem Ort zu halten ist wirklich praktisch, wenn es an der Zeit ist, eine bestimmte UI-Komponente zu testen.

Bei CSS hat es sich bewährt, die Komponentenstile in separate Dateien aufzuteilen. Beispielsweise befindet sich das Paginierungsdesign in _pagination.scss , Formularelemente in _form.scss , und alle diese Dateien werden in einer einzigen SCSS-Datei mit anderen Dateien (Variablen, Mixin usw.) enthalten sein.

Obwohl style.scss aus Dutzenden von „kleinen Dateien“ bestehen kann, wenn mehrere Personen an demselben Projekt arbeiten, ist es einfacher, den Überblick über Änderungen zu behalten (unabhängig davon, ob Sie die Quellcodeverwaltung verwenden oder nicht), wenn alles in kleinere Teile unterteilt ist. Es ist wichtig, den Styleguide auch nach der Produktion des Website-Designprojekts weiter zu pflegen, da das Team jede Website-Komponente im Auge behalten muss.

Verwenden von Stylesheets – Modulares CSS

Aus Sicht der Entwicklung gibt es viele Ansätze zum Schreiben von modularem CSS. Die bekanntesten sind SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​und OOCSS (Object Oriented CSS). Es gibt eine Menge zu lernen, auch wenn Sie am Ende Ihren eigenen Ansatz entwickeln. An diesem Punkt sollten Sie über eine schöne Sammlung von UI-Komponenten und Webseiten verfügen, mit denen Sie ganz einfach neue Webseiten erstellen können. Sie können Elemente aus dem Styleguide kopieren und einfügen und sie nach Bedarf neu anordnen.

Da alles modular aufgebaut ist, müssen Sie sich keine Gedanken über Design und Codekonsistenz machen; aber vergessen Sie nicht, dass Sie, wenn Sie eine UI-Komponente systemweit anpassen, den Styleguide mit den Änderungen aktualisieren (oder die neue Komponente hinzufügen) müssen. Um alles organisiert zu halten, ist es am besten, eine Art Vorlagen-/Automatisierungsansatz für die Arbeit an Webseiten wie Gulp oder Grunt zu verwenden.

Was kommt als nächstes? Entwerfen im Browser

Jetzt haben Sie ein zentrales Repository von UI-Komponenten, jedes Element ist dokumentiert und Webseiten, die aus diesen Komponenten erstellt wurden. Von diesem Zeitpunkt an ist es mehr als wahrscheinlich, dass Designer ihre bevorzugten Designtools nicht mehr öffnen müssen, da der größte Teil des „Designs“ direkt im Code ausgeführt und im Browser in der Vorschau angezeigt wird.

Sie sind sich nicht ganz sicher, wie sich eine bestimmte Änderung auf das Design auswirkt? Jetzt können Sie Ihr Design auf verschiedenen Geräten und Browsern gleichzeitig in der Vorschau anzeigen, um zu sehen, wie sich eine Schriftart in einer Überschrift geändert hat oder wie sich die Änderung der Größe und Farbe einer Schaltfläche auf das Design auswirkt.

Wie wirkt sich das Hinzufügen weiterer Schriftartenstärken auf die Seitenladeleistung aus, wenn Sie benutzerdefinierte Webschriftarten verwenden? Wir können die Leistung von laufenden Webseiten mit Diensten wie WebPageTest testen und anhand der tatsächlichen Ergebnisse fundierte Entscheidungen treffen. Das können wir definitiv nicht in Photoshop oder Sketch machen.

Das Arbeiten mit HTML und CSS und das Arbeiten im Browser ist möglicherweise nicht jeder Designer während eines Website-Designprozesses. Aber wenn es Designern wirklich wichtig ist, wie ihre Arbeit auf verschiedenen Geräten und Bildschirmgrößen aussieht, müssen sie sicherstellen, dass sie jedes Mal perfekt ist. Etwas, das als statisches Design-Mockup erstaunlich aussieht, sieht möglicherweise weniger wünschenswert aus, wenn es in einem Webbrowser auf einem mobilen Gerät angezeigt wird. Es ziemt sich für versierte Designer, Webdesigns in einer Umgebung zu erstellen und zu testen, in der jeder sie sehen kann … im Browser.

Weiterführende Literatur im Toptal Design Blog:

• Responsive Design – Best Practices und Überlegungen
• So gestalten Sie eine effektive Landing Page
• Der ultimative Leitfaden für das Design von E-Commerce-Websites
• Die Grundlagen des Website-Redesigns – Eine Fallstudie
• Die treibenden Kräfte des Designs – Eine Fallstudie zum Redesign einer Website