Haben Sie ein Regelwerk, wenn es um das Website-Design geht? Es gibt einige Regeln, die für so ziemlich jedes Webdesign-Projekt gelten - nennen wir sie "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 beginnen, zu einem Teil Ihres Denkens machen, vermeiden Sie viele der Fallstricke, in die Designer stolpern können!
1. Du wirst beständig sein
Gestalten Sie das Design so einfach wie möglich für die Benutzer Konsistentes Design ist einfach zu bedienen und zu verstehen. Benutzereingriffe und Aktionen sowie visuelle Elemente sollten in einem einzigen Design in Aussehen und Verwendung ähnlich sein.
Dies bedeutet, dass Schaltflächen dieselbe Farbe haben und dieselben Hover-Status verwenden, damit Benutzer wissen, wie sie interagieren, Schlagzeilen dieselbe Größe haben und im gesamten Design die gleiche Schriftart verwenden. Elemente wie Farben folgen einer Palette, die identifizierbar und zugeordnet ist die Marke.
Andere visuelle Elemente sollten ebenfalls einem einheitlichen Stil folgen, mit einem Stil- und Nutzungsplan für Elemente wie Symbole, Fotos, Videos oder Illustrationen. Das Design sollte eine Stimme haben, die für Kopierblöcke verwendet wird, die der Gesamtästhetik entsprechen.
Alle diese Elemente der Konsistenz tragen zur allgemeinen Nutzbarkeit bei und machen es den Benutzern so einfach wie möglich, mit ihnen zu interagieren.
2. Du wirst Whitespace verwenden
Durch zusätzlichen Platz um Elemente kann eine Trennung geschaffen und die Lesbarkeit verbessert werden. Es ist nicht notwendig, jedes einzelne Element über der Schriftrolle in den Raum zu stopfen. Verwenden Sie Leerzeichen, um Rhythmus und Fluss festzulegen, visuelle Hierarchie zu erstellen und Benutzern zu helfen, sich durch das Design zu bewegen.
Wenn der Inhalt gut ist, werden sie durchlaufen.
Whitespace kann tatsächlich dazu beitragen, dass die Benutzer aktiv werden, indem sie den Bildschirm nach unten zieht.
Whitespace ist umso wichtiger, je kleiner die Bildschirme werden. Durch zusätzlichen Platz um Elemente kann eine Trennung geschaffen und die Lesbarkeit verbessert werden. (Überlegen Sie, wie vorteilhaft ein bisschen mehr Platz sein kann, wenn Sie mit Leichtigkeit auf Tasten tippen.)
Sie sind sich nicht sicher, wo Whitespace in das Design eingefügt werden soll? 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 die Unterschiede nach Osten zu unterscheiden, z. B. das Umbrechen von in Textblöcken eingebetteten Fotos
- In Formularfeldern sind sie leicht auf mobile Bildschirme zu tippen
- Um jedes Element, auf das sich die Benutzer konzentrieren sollen
3. Du sollst ein Gitter benutzen
Ein Raster ist die Grundlage der Benutzererfahrung. Wenn Sie mit einem Raster entwerfen, ist die endgültige Website präziser, konsistenter und die Elemente werden in eine Reihenfolge gebracht, die visuell sinnvoll ist.
Raster sind sowohl horizontal als auch vertikal, obwohl das bekannteste Webdesign-Raster möglicherweise das 12-Spalten-Vertikalraster von Spalten zum Ausrichten von Elementen ist.
Das Raster ist nur etwas, das Sie nur im Entwurfsprozess sehen. Wenn Sie Probleme bei der Suche nach Platzierungen für Elemente oder beim Erstellen einer organisierten Gliederung haben, kann ein Raster den gesamten Lebensretter sparen.
4. Sie dürfen Benutzermuster nicht vergessen
Benutzer machen Dinge auf eine bestimmte Art und Weise und erwarten bestimmte Dinge von Ihrem Design. Um möglichst viel Erfolg zu haben, sollte das Design allgemein akzeptierte Benutzermuster verwenden (wiederkehrende Lösungen für das Design von Problemen), damit die Benutzer genau wissen, wie das Design funktioniert.
Häufige Benutzermuster sind:
- Reihenfolge der Informationen in Formularen, beginnend mit einem Namen oder einer E-Mail und endend mit "Senden".
- Platzierung von Navigationsmenüs
- Standort und anklickbare Art des Einkaufswagen-Symbols für E-Commerce
- Wie funktionieren Benachrichtigungen?
- Icons für Suche und Chat, unter anderem
UI Design Patterns enthält eine lange Liste von Benutzermustern für alle Arten von Designsituationen.
5. Du sollst Ähnlichkeit in UI-Aktionen verwenden
Jedes Element in einem Website-Design sollte wie jedes andere Element desselben Typs funktionieren. Diese Elemente sollten auch eine visuelle Identität aufweisen, damit die Benutzer auf einen Blick wissen, was sie sind und was sie tun.
Es gibt so viele Benutzeroberflächenaktionen, die in ein Design eingebaut werden können, dass das Einhalten des Gestaltprinzips der Ähnlichkeit ein Muss ist. Das Gruppieren von visuellen Elementen und Aktionen, so dass sie visuell identifizierbar sind, wird dazu beitragen, die Benutzererfahrung insgesamt zu verbessern.
6. Sie werden die Typografie gut einsetzen
Gehen Sie vom Design zurück und sehen Sie, ob die Beschriftung aus der Ferne gut lesbar ist. Sie müssen kein Meistertypograf sein, aber es hilft auf jeden Fall.
Was gutes Design ausmacht, beruht auf Lesbarkeit und Lesbarkeit. Diese Konzepte hängen davon ab, wie Sie Schriftarten auswählen und verwenden.
Im Zweifelsfall entscheiden Sie sich für einfache Schriftpaare wie Serifen und Sans Serifen. Gehen Sie vom Design zurück und sehen Sie, ob die Beschriftung aus der Ferne gut lesbar ist. Sehen Sie sich die Beschriftung auf einer kleinen Leinwand an, z. B. einem Telefonbildschirm, um sicherzustellen, dass sie auch auf einen Blick gut lesbar ist.
Verwenden Sie type in einer kontrastreichen Umgebung, z. B. helle Art auf dunklem Hintergrund oder dunkle Art auf hellem Hintergrund, damit jedes Wort leicht lesbar ist.
7. Sie werden die Retina-Bildschirme nicht vergessen
Selbst kleinste Bildschirme können Elemente und Bilder nahezu pixelgenau rendern.
Sie müssen überlegen, wie Sie mit Bildern, Symbolen und anderen Elementen umgehen, so dass alles unabhängig von der Bildschirmgröße schön dargestellt 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 nicht über ein Bild verfügen, dessen Auflösung den üblichen Bildschirmgrößen entspricht, verwenden Sie es nicht. Kein Bild ist besser als ein schlechtes oder pixeliertes Bild.
8. Du wirst ehrlich sein
Ihr Design sollte Ihrem kleinen Unternehmen, Ihren Informationen oder Ihrer Marke entsprechen und transparent sein, was Sie tun.Stehlen Sie kein Design oder Bild, stecken Sie keine falschen Keywords ein, um den Traffic zu erhöhen, und geben Sie an, wer und was Ihren Inhalt betrifft.
Mit so viel Web-Clutter möchten Benutzer mit authentischen Designs interagieren. Benutzer dazu zu bringen, etwas zu tun oder sich für ein Produkt oder eine Dienstleistung zu registrieren oder sie einfach zu einem Thema oder einer Information in die Irre zu führen, sollte gegen Ihren persönlichen Ethikkodex verstoßen. Nehmen Sie keine Projekte auf, die dies vom Design erwarten.
9. Sie werden die Barrierefreiheit nicht ignorieren
Das Web sollte für möglichst viele Menschen nutzbar sein. Es mag zwar schwierig sein, sicherzustellen, dass das Design zugänglich ist, aber es ist nicht so kompliziert, wie Sie vielleicht denken.
Google hat einen guten Leitfaden für den Zugriff auf Websites, den es wie folgt definiert:
Wenn wir sagen, dass auf eine Website zugegriffen werden kann, meinen wir damit, dass der Inhalt der Website verfügbar ist und deren Funktionalität von buchstäblich jedermann bedient werden kann. Als Entwickler ist es leicht anzunehmen, dass alle Benutzer eine Tastatur, eine Maus oder einen Touchscreen sehen und verwenden können und mit Ihrem Seiteninhalt auf dieselbe Weise interagieren können. Dies kann zu einer Erfahrung führen, die für manche Menschen gut funktioniert, jedoch zu Problemen führt, die von einfachen Ärgernissen bis hin 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 auf Dinge zugreifen oder mit ihnen interagieren, als Sie erwarten. Dies betrifft insbesondere Benutzer, die an einer Art von Beeinträchtigung oder Behinderung leiden - und bedenken, dass diese Erfahrung nicht physisch oder vorübergehend sein kann.
Viele Prinzipien eines guten Designs, wie Größe, Kontrast und Platz, tragen zur allgemeinen Zugänglichkeit bei.
WebAIM bietet eine Checkliste sowie weitere Tools, mit denen Sie feststellen können, ob auf Ihr Design zugegriffen werden kann. Die Checkliste umfasst vier Bereiche, die die Barrierefreiheit betreffen: Ist das Design wahrnehmbar, bedienbar, verständlich und robust?
10. Du sollst reagieren
2018 sollte dies selbstverständlich sein, aber Ihre Website muss ansprechend sein. Dazu gehört jedes Element, von Text über Bilder zu Schaltflächen bis hin zum gesamten Rahmen.
Jedes Design muss auf jedem Gerät funktionieren. Zeitraum.
Fazit
Ein solides Regelwerk kann Ihnen helfen, schneller in ein Konstruktionsprojekt einzusteigen und einheitlicher zu arbeiten. Beachten Sie, dass keines dieser Gebote Ihnen sagt, wie ein Projekt aussehen sollte. Sie wurzeln in der Theorie, wie Sie jede Website umreißen und erstellen.
Haben Sie zusätzliche Regeln für das Webdesign, um diese Gebote hinzuzufügen? Lassen Sie uns wissen, was sie in den sozialen Medien sind. Achten Sie darauf, Design Shack zu kennzeichnen!