10 Webdesign-Gebote für jedes Projekt

Haben Sie ein Regelwerk für das Design von Websites? Es gibt einige Regeln, die für so ziemlich jedes Webdesign-Projekt gelten - nennen wir sie die „Webdesign-Gebote“.

Egal wie groß oder klein die Website ist, diese Regeln sind die Grundlage für gutes Design. Wenn Sie diese grundlegenden Richtlinien befolgen und sie für jedes Projekt, das Sie starten, zu einem Teil Ihres Denkens machen, vermeiden Sie viele der Fallstricke, in die Designer geraten können!

1. Du sollst konsequent sein

Machen Sie das Design für Benutzer so einfach wie möglich

Konsistentes Design ist einfach zu verwenden und Design zu verstehen. Benutzereingriffe und -aktionen sowie visuelle Elemente sollten in Aussehen und Verwendung in einem einzelnen Design ähnlich sein.

Dies bedeutet, dass Schaltflächen dieselbe Farbe haben und dieselben Schwebezustände verwenden, damit Benutzer wissen, wie sie interagieren sollen, Überschriften dieselbe Größe haben und im gesamten Design dieselbe Schriftart verwenden und Elemente wie Farben einer Palette folgen, die identifizierbar und zugeordnet ist die Marke.

Andere visuelle Elemente sollten ebenfalls einem einheitlichen Stil folgen und einen Stil- und Verwendungsplan für Elemente wie Symbole oder Fotografie, Video oder Illustrationen enthalten. Das Design sollte eine Stimme haben, die für Kopierblöcke verwendet wird, die der Gesamtästhetik entsprechen.

Alle diese Konsistenzelemente tragen zur allgemeinen Benutzerfreundlichkeit bei und machen das Design für Benutzer so einfach wie möglich.

2. Du sollst Leerzeichen verwenden

Zusätzlicher Platz um Elemente herum kann dazu beitragen, eine Trennung zu schaffen und die Lesbarkeit zu verbessern.

Es ist nicht erforderlich, jedes einzelne Element in den Raum über der Schriftrolle zu stopfen. Verwenden Sie Leerzeichen, um Rhythmus und Fluss festzulegen, visuelle Hierarchien zu erstellen und Benutzern zu helfen, sich durch das Design zu bewegen.

Wenn der Inhalt gut ist, werden sie scrollen.

Und Leerzeichen können tatsächlich dazu beitragen, diese Benutzeraktion zu fördern, indem Sie das Auge über den Bildschirm ziehen.

Leerzeichen sind umso wichtiger, je kleiner die Bildschirmgrößen werden. Zusätzlicher Platz um Elemente herum kann dazu beitragen, eine Trennung zu schaffen und die Lesbarkeit zu verbessern. (Überlegen Sie, wie nützlich ein wenig mehr Platz sein kann, wenn Sie mühelos auf Tasten tippen möchten.)

Sie sind sich nicht sicher, wo Sie Leerzeichen in das Design aufnehmen sollen? Fang hier an:

• Um Schaltflächen oder andere interaktive Elemente
• Als Zeilenabstand zwischen Zeilen des Typs, um das Lesen zu erleichtern
• Zwischen den Elementen sind Töne nach Osten zu unterscheiden, z. B. das Einwickeln von in Textblöcke eingebetteten Fotos
• In Formularfeldern, damit sie einfach auf mobile Bildschirme tippen können
• Um jedes Element, auf das sich Benutzer konzentrieren sollen

3. Du sollst ein Gitter verwenden

Ein Raster ist die Grundlage für die Benutzererfahrung. Wenn Sie mit einem Raster entwerfen, ist die endgültige Website präziser, konsistenter und die Elemente werden in einer Reihenfolge platziert, die visuell sinnvoll ist.

Gitter sind sowohl horizontal als auch vertikal, obwohl das bekannteste Webdesign-Gitter das vertikale Spaltenraster mit 12 Spalten zum Ausrichten von Elementen sein kann.

Das Raster ist etwas, das nur Sie im Entwurfsprozess sehen. Wenn Sie Probleme haben, Platzierungen für Elemente zu finden oder eine organisierte Gliederung zu erstellen, kann ein Raster ein totaler Lebensretter sein.

4. Du sollst Benutzermuster nicht vergessen

Benutzer tun Dinge auf eine bestimmte Art und Weise und erwarten bestimmte Dinge von Ihrem Design. Um so viel Erfolg wie möglich zu haben, sollte das Design allgemein akzeptierte Benutzermuster (wiederkehrende Lösungen für Designprobleme) verwenden, damit die Benutzer genau wissen, wie das Design funktioniert.

Zu den gängigen Benutzermustern gehören:

• Reihenfolge der Informationen in Formularen, beginnend mit einem Namen oder einer E-Mail und endend mit "Senden"
• Platzierung von Navigationsmenüs
• Position und Klickbarkeit des Warenkorbsymbols für den E-Commerce
• Wie Benachrichtigungen funktionieren
• Unter anderem Symbole für Suche und Chat

UI-Entwurfsmuster enthält eine lange Liste von Benutzermustern für alle Arten von Entwurfssituationen.

5. Sie sollen Ähnlichkeit in UI-Aktionen verwenden

Jedes Element in einem Website-Design sollte wie jedes andere Element des gleichen Typs funktionieren. Diese Elemente sollten auch eine visuelle Identität haben, damit Benutzer auf einen Blick wissen, was sie sind und was sie tun.

Es gibt so viele Benutzeroberflächenaktionen, die in ein Design integriert werden können, dass die Einhaltung des Gestaltprinzips der Ähnlichkeit ein Muss ist. Die Gruppierung visueller Elemente und Aktionen, damit sie visuell identifizierbar sind, trägt zu einer besseren Gesamterfahrung für Benutzer bei.

6. Du sollst Typografie gut verwenden

Treten Sie vom Design zurück und prüfen Sie, ob der Schriftzug aus der Ferne gut lesbar ist.

Sie müssen kein Meistertypograf sein, aber es hilft definitiv.

So viel von dem, was gutes Design ausmacht, basiert auf Lesbarkeit und Lesbarkeit. Und diese Konzepte hängen davon ab, wie Sie Schriften auswählen und verwenden.

Entscheiden Sie sich im Zweifelsfall für einfache Schriftpaare wie Serife und Sans Serif. Treten Sie vom Design zurück und prüfen Sie, ob der Schriftzug aus der Ferne gut lesbar ist. Schauen Sie sich dann den Schriftzug auf einer kleinen Leinwand an, z. B. auf einem Telefonbildschirm, um sicherzustellen, dass er auch dort auf einen Blick gut lesbar ist.

Versuchen Sie, Schrift in einer kontrastreichen Umgebung zu verwenden, z. B. helle Schrift auf dunklem Hintergrund oder dunkle Schrift auf hellem Hintergrund, damit jedes Wort leicht zu lesen ist.

7. Du sollst Retina-Bildschirme nicht vergessen

Selbst die kleinsten Bildschirme können Elemente und Bilder nahezu pixelgenau rendern.

Sie müssen überlegen, wie Sie mit Bildern, Symbolen und anderen Elementen umgehen, damit unabhängig von der Bildschirmgröße alles schön gerendert wird. Wenn möglich, kann die Verwendung eines Vektorformats die ideale Lösung sein. Dies ist einer der Gründe, warum SVG immer beliebter wird.

Wenn Sie kein Bild haben, dessen Auflösung den üblichen Bildschirmgrößen entspricht, verwenden Sie es nicht. Kein Bild ist besser als ein schlechtes oder pixeliges Bild.

8. Du sollst ehrlich sein

Ihr Design sollte Ihrem kleinen Unternehmen, Ihrer Information oder Ihrer Marke entsprechen und transparent sein, was Sie tun. Stehlen Sie kein Design oder Bild, füllen Sie keine falschen Schlüsselwörter, um den Datenverkehr zu fördern, und bleiben Sie dem treu, um wen und worum es bei Ihren Inhalten geht.

Bei so viel Web-Unordnung möchten Benutzer mit authentischen Designs interagieren. Es sollte gegen Ihren persönlichen Ethikkodex verstoßen, Benutzer dazu zu bringen, etwas zu tun oder sich für ein Produkt oder eine Dienstleistung anzumelden oder sie nur über ein Thema oder Informationen irrezuführen. Nehmen Sie keine Projekte an, die dies vom Design erwarten.

9. Du sollst die Zugänglichkeit nicht ignorieren

Das Web sollte von möglichst vielen Menschen genutzt werden können. Und obwohl es schwierig klingt, sicherzustellen, dass das Design zugänglich ist, ist es nicht so kompliziert, wie Sie vielleicht denken.

Google hat einen großartigen Leitfaden zur Barrierefreiheit von Websites, den es wie folgt definiert:

Wenn wir sagen, dass eine Website zugänglich ist, bedeutet dies im Allgemeinen, dass der Inhalt der Website verfügbar ist und ihre Funktionalität von buchstäblich jedem bedient werden kann. Als Entwickler kann man leicht davon ausgehen, dass alle Benutzer eine Tastatur, eine Maus oder einen Touchscreen sehen und verwenden können und auf die gleiche Weise mit Ihrem Seiteninhalt interagieren können wie Sie. Dies kann zu einer Erfahrung führen, die für manche Menschen gut funktioniert, aber Probleme schafft, die von einfachen Ärgernissen bis zu Show-Stoppern für andere reichen.

Barrierefreiheit bezieht sich also auf die Erfahrung von Benutzern, die sich möglicherweise außerhalb des engen Bereichs des „typischen“ Benutzers befinden und möglicherweise anders als erwartet auf Dinge zugreifen oder mit ihnen interagieren. Insbesondere betrifft es Benutzer, die unter irgendeiner Art von Beeinträchtigung oder Behinderung leiden - und bedenken Sie, dass diese Erfahrung möglicherweise nicht physisch oder vorübergehend ist.

Viele der Prinzipien guten Designs wie Größe, Kontrast und Platz tragen zur allgemeinen Zugänglichkeit bei.

WebAIM verfügt über eine Checkliste sowie andere Tools, mit denen Sie feststellen können, ob auf Ihr Design zugegriffen werden kann. Die Checkliste deckt vier Bereiche ab, die sich auf die Zugänglichkeit beziehen: Ist das Design wahrnehmbar, bedienbar, verständlich und robust?

10. Du sollst reagieren

Es sollte 2018 so ziemlich selbstverständlich sein, aber Ihre Website muss reaktionsschnell sein. Dies umfasst alle Elemente, von Text über Bilder und Schaltflächen bis hin zum Gesamtrahmen.

Jedes Design muss auf jedem Gerät funktionieren. Zeitraum.

Fazit

Ein solides Regelwerk kann Ihnen helfen, schneller in ein Designprojekt einzusteigen und konsistenter zu arbeiten. Beachten Sie, dass keines dieser Gebote Ihnen sagt, wie ein Projekt aussehen soll. Sie basieren auf der Theorie, wie Sie jede Website skizzieren und erstellen.

Haben Sie zusätzliche Webdesign-Regeln, die Sie diesen Geboten hinzufügen können? Lassen Sie uns wissen, was sie in den sozialen Medien sind. Stellen Sie einfach sicher, dass Sie Design Shack markieren!