Designprinzipien für Entwickler: Prozesse und CSS-Tipps für besseres Web Design

Es ist technisch gesehen richtig, dass jeder kochen kann. Aber es gibt einen Unterschied zwischen dem tatsächlichen Wissen, wie man eine köstliche Mahlzeit zubereitet, und der Hoffnung, dass alles gut geht, wenn man ein paar Zutaten in einen Topf wirft. Genau wie bei der Webentwicklung kennst du vielleicht die Zutaten – <span>, background-color, .heading-1 –, aber nicht jeder weiß, wie man diese Zutaten in eine schöne, einfach zu bedienende Website verwandelt.

Immer wenn du HTML und CSS verwendest, designst du – du gibst dem Inhalt Form und Struktur, damit er von jemand anderem verstanden werden kann. Menschen designen seit Jahrhunderten und haben dabei Prinzipien entwickelt, die heute auf digitale Schnittstellen anwendbar sind. Diese Prinzipien manifestieren sich in drei Schlüsselbereichen: wie Wörter angezeigt werden (Typografie), wie Inhalte angeordnet werden (Abstände) und wie Persönlichkeit hinzugefügt wird (Farbe). Entdecke, wie du jede dieser Webdesign-Zutaten durch die Denkweise eines Entwicklers mit CSS-Eigenschaften und Richtlinien verwendest, um das Rätselraten beim Webdesign zu beenden.

Typografie

Websites, die leicht zu lesen sind, entstehen nicht zufällig. Taimur Abdaal hat tatsächlich einen ganzen Artikel zu diesem Thema geschrieben, der voller Ratschläge für Entwickler ist, die mit Typografie arbeiten. Wir werden uns speziell auf zwei grundlegende Designprinzipien konzentrieren, die dir helfen können, Wörter auf visuell ansprechendere und leichter lesbare Weise darzustellen: Wiederholung und Hierarchie.

Wiederholung für Konsistenz und Wartbarkeit nutzen

Wiederholung ist im Web ziemlich natürlich, dank der Bedeutung der Wiederverwendbarkeit in der Software. Zum Beispiel ermöglichen CSS-Klassen, einen bestimmten Stil für Text zu definieren und diesen Stil dann auf der gesamten Website wiederzuverwenden. Dies führt zu sich wiederholenden, konsistenten Textstilen für ähnliche Inhalte, was den Nutzern hilft, die Website zu navigieren.

Wenn du zum Beispiel an Stilen für einen neuen Absatz arbeitest, überlege zuerst, ob es bereits vorhandene Inhalte gibt, die einen ähnlichen Stil haben, und versuche, dieselbe CSS-Klasse zu verwenden. Wenn nicht, kannst du eine neue Klasse mit einem generischen Namen erstellen, die anderswo auf deiner Website wiederholt werden kann. Denke an .paragraph--emphasize im Gegensatz zu .footer__paragraph--emphasize oder .heading-1 im Gegensatz zu .hero__site-title. Die ersten Beispiele können auf deiner gesamten Website verwendet werden, im Gegensatz zu den zweiten, die auf bestimmte Komponenten beschränkt sind. Du kannst sogar ein Präfix wie text- hinzufügen, um anzuzeigen, dass die Klasse speziell für Textstile verwendet wird. Diese Methode reduziert die Größe und Komplexität der CSS-Datei und erleichtert zukünftige globale Stiländerungen erheblich.

Im Design gibt es unendlich viele Möglichkeiten, mit Stilen zu experimentieren. Designer können manchmal mit ihren Schriftstilen verrückt werden und zahlreiche leichte Variationen ähnlicher Stile erstellen. Im Code ist es jedoch wertvoll, Textstile auf ein Minimum zu beschränken. Entwickler sollten Designer drängen, ähnliche Stile zu kombinieren, um das Codegewicht zu reduzieren und die Wiederverwendbarkeit und Konsistenz zu erhöhen.

Hierarchie sorgt für eine klare visuelle Ordnung der Inhalte

Hierarchie bemerkt man eigentlich nur, wenn sie fehlt. In der Typografie bezieht sich Hierarchie auf den visuellen Unterschied zwischen verschiedenen Textstücken. Sie ist die Unterscheidung zwischen Überschriften, Absätzen, Links und anderen Textstilen. Diese Unterscheidung wird durch die Wahl unterschiedlicher Schriftarten, Farben, Größen, Groß-/Kleinschreibung und anderer Eigenschaften für jeden Textinhaltstyp getroffen. Gute Hierarchie erleichtert die Verdauung komplexer Informationen und leitet die Benutzer durch deine Inhalte.

Aus dem Stand bietet HTML bereits eine gewisse Hierarchie (z. B. wie die Schriftgröße von Überschriften von <h1> zu <h6> kleiner wird), aber CSS eröffnet Türen für noch mehr Kreativität. Indem du <h1>-Tags eine noch größere Schriftgröße gibst, kannst du schnell einen größeren Größenunterschied zwischen den Überschriftenebenen – und damit mehr Hierarchie – herstellen. Um mehr Vielfalt zu schaffen, kannst du auch die Eigenschaften color, text-align und text-transform ändern.

Ein Hinweis zur Auswahl von Schriftarten

Bei der Typografie müssen wir sicherstellen, dass sie so gut wie möglich lesbar ist. Der wichtigste Faktor für die Lesbarkeit ist die Schriftart, die du wählst – ein riesiges Thema. Es gibt viele Faktoren, die bestimmen, wie „lesbar“ eine Schriftart ist. Einige Schriften sind speziell für Überschriften oder kurze Textzeilen gedacht; diese werden „Display“-Schriften genannt und haben oft mehr Persönlichkeit als Schriften, die für Text gedacht sind. Einzigartige Verzierungen und Eigenheiten machen Display-Schriften bei kleinen Größen und in großen Absätzen schwerer lesbar. Als Faustregel gilt: Verwende für Text eine geradlinigere Schriftart und Display-Schriften nur für Überschriften.

Wenn du unter Zeitdruck stehst und eine lesbare Schriftart benötigst, versuche es mit Google Fonts. Füge einen Absatz Text in das Vorschaufeld ein und passe die Größe ungefähr so an, wie er auf deiner Website angezeigt werden soll. Du kannst dann deine Ergebnisse auf Serif oder Sans-Serif eingrenzen und die Liste der Schriften nach einer durchsuchen, die gut lesbar ist. Roboto, Noto Sans, Merriweather und PT Serif sind alle sehr gut lesbare Optionen.

CSS-Eigenschaften für bessere Lesbarkeit

• Die Hauptschriftgröße des Absatzes font-size sollte zwischen 16px und 18px (1em und 1.25em) liegen, je nach gewählter Schriftart.
• Setze die line-height (den vertikalen Abstand zwischen zwei Textzeilen) manuell, um deinen Text weniger gedrängt und leichter lesbar zu machen. Beginne mit line-height: 1.25 (das ist das 1,25-fache der font-size) für Überschriften und mindestens 1.5 für Absätze (aber nicht mehr als 1.9) und passe von dort aus an. Je länger die Textzeile, desto größer sollte die line-height sein. Um deinen Text flexibel zu halten, vermeide es, eine Einheit zu deiner line-height hinzuzufügen. Ohne Einheit wird die von dir eingestellte line-height proportional zu deiner font-size sein. Zum Beispiel würden line-height: 1.5 und font-size: 18px eine Zeilenhöhe von 27 Pixeln ergeben. Wenn du deine Schriftgröße auf kleineren Bildschirmen auf font-size: 16px änderst, würde die berechnete Zeilenhöhe automatisch auf 24 Pixel geändert.

• Achte darauf, wie viele Zeichen in einer Textzeile enthalten sind, und strebe eine Länge von 45 bis 75 Zeichen an (einschließlich Satzzeichen und Leerzeichen). Dies reduziert die Ermüdung deiner Nutzer, indem es die Augen- und Kopfbewegungen begrenzt, die erforderlich sind, um einer Textzeile zu folgen. Aufgrund der variablen Natur des Webs ist es unmöglich, die Zeilenlänge vollständig zu kontrollieren, aber du kannst max-width-Werte und Breakpoints verwenden, um zu verhindern, dass Textzeilen zu lang werden. Generell gilt: Je kürzer die Textzeile, desto schneller kann sie zum schnellen Lesen gescannt werden. Und mache dir keine zu großen Sorgen um das Zählen der Zeichen in jeder Zeile. Sobald du es ein paar Mal gemacht hast, entwickelst du ein Gefühl dafür, was gut aussieht.

Abstände

Nachdem du die Typografie betrachtet hast, kannst du einen Schritt zurücktreten und das Layout oder die Abstände deines Inhalts untersuchen. Bewegung und Nähe sind zwei Designprinzipien, die sich auf Abstände beziehen.

Bewegung dreht sich um den Content-Flow

Bewegung bezieht sich darauf, wie dein Auge über die Seite wandert oder wie die Seite fließt. Du kannst Bewegung nutzen, um das Auge eines Benutzers zu lenken, um eine Geschichte zu erzählen, auf ein Hauptaktionselement hinzuweisen oder ihn zum Scrollen zu ermutigen. Dies geschieht durch die Strukturierung des Inhalts innerhalb einzelner Komponenten und die anschließende Anordnung dieser Komponenten, um das Layout der Seite zu bilden. Indem du darauf achtest, wie dein Auge durch den Inhalt wandert, kannst du den Benutzern helfen zu wissen, wohin sie schauen sollen, während sie die Seite überfliegen.

Im Gegensatz zu Büchern, die oft eine sehr lineare Struktur haben, können Websites kreativer mit ihrem Layout umgehen – auf buchstäblich endlose Weisen. Es ist wichtig, sicherzustellen, dass du die Anordnung deiner Inhalte intentional gestaltest und dies auf eine Weise tust, die die Benutzer so einfach wie möglich durch deine Inhalte leitet.

Betrachte diese drei Beispiele oben. Welches ist am einfachsten zu verfolgen? Die Anordnung auf der linken Seite zieht dein Auge aufgrund der Positionierung des Bildes vom Bildschirm nach links ab, was es schwierig macht, den Button zu finden. Bei der mittleren Option kann man die Überschrift leicht übersehen, da das Bild im Vergleich zu groß ist. Auf der rechten Seite zieht die Überschrift zuerst deine Aufmerksamkeit auf sich und das Bild ist so komponiert, dass es auf das Hauptaktionselement – den Button – zeigt.

Weißraum ist ein hilfreiches Werkzeug, um starke Bewegung zu erzeugen, aber es ist leicht, zu viel oder zu wenig davon zu verwenden. Überlege, wie du ihn verwendest, um das Auge des Benutzers zu lenken und deine Inhalte zu trennen. Gut eingesetzt, werden die Benutzer den Weißraum selbst nicht bemerken, aber besser auf die von dir präsentierten Inhalte fokussieren können. Zum Beispiel kannst du Weißraum verwenden, um Inhalte zu trennen (anstatt einer farbigen Box), was zu einem weniger überladenen Layout führt.

Nähe schafft Beziehungen

Wenn Objekte näher beieinander liegen, werden sie als zusammengehörig wahrgenommen. Indem du die Abstände um Elemente herum kontrollierst, kannst du Beziehungen zwischen ihnen herstellen. Es kann hilfreich sein, ein System für Abstände zu schaffen, um durch Wiederholung Konsistenz aufzubauen und die Verwendung zufälliger Zahlen zu vermeiden. Dieses System basiert auf der Standard-Browser-Schriftgröße (1rem oder 16px) und verwendet eindeutige Werte, die die meisten Szenarien abdecken.

• 0.25rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4rem (64px)

Du kannst Sass oder CSS-Variablen verwenden, damit die Werte projektübergreifend konsistent bleiben. Ein System könnte so aussehen – aber verwende, womit du dich wohlfühlst, denn Dinge zu benennen ist schwer.

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

Farbe vermittelt Persönlichkeit und erregt Aufmerksamkeit

Farbe beeinflusst die Persönlichkeit einer Website stark. Gut eingesetzt, verleiht sie Seiten Leben und Emotion; schlecht eingesetzt, kann sie vom Inhalt ablenken oder, schlimmer noch, ihn unzugänglich machen. Farbe geht Hand in Hand mit den meisten Designprinzipien. Sie kann verwendet werden, um Bewegung zu erzeugen, indem sie die Augen der Benutzer lenkt, und um Betonung zu schaffen, indem sie die wichtigsten Aktionselemente hervorhebt.

Ein Hinweis zur Farbauswahl

Bei Farben kann es schwer sein zu wissen, wo man anfangen soll. Um zu helfen, kannst du einen vierstufigen Prozess verwenden, um deine Farbauswahl zu leiten und eine Farbpalette für die Website zu erstellen.

Schritt 1: Kenne deine Stimmung

Du musst die Stimmung oder Haltung deiner Website und Marke kennen, bevor du Farben auswählst. Betrachte deine Inhalte und entscheide, was du kommunizieren möchtest. Ist es lustig, informativ, retro, laut, düster? Typischerweise kannst du die Stimmung deiner Website auf ein paar Adjektive reduzieren. Zum Beispiel könntest du The North Face als abenteuerlich und robust zusammenfassen, während Apple minimalistisch und schön wäre.

Schritt 2: Finde deine Hauptfarbe

Denke an deine Stimmung und versuche, dir eine Farbe vorzustellen, die sie repräsentiert. Beginne mit der Sättigung der Farbe (wie intensiv die Farbe ist) und der Helligkeit (wie nah die Farbe an Weiß oder Schwarz ist). Wenn deine Stimmung fröhlich oder auffällig ist, ist eine hellere (saturiertere) Farbe wahrscheinlich am besten. Wenn deine Stimmung ernst oder zurückhaltend ist, ist eine dunklere (weniger gesättigte) Farbe besser.

Wähle als Nächstes einen Farbton. Farbton bezieht sich darauf, was die meisten Leute unter Farben verstehen – wo liegt er auf der Drehung des Farbrads? Der Farbton einer Farbe gibt ihr die meiste Bedeutung. Menschen neigen dazu, Farbtöne mit bestimmten Ideen zu assoziieren. Zum Beispiel wird Rot oft mit Macht oder Gefahr assoziiert und Grün mit Geld oder Natur. Es kann hilfreich sein, ähnliche Websites oder Marken zu betrachten, um zu sehen, welche Farben sie verwenden – obwohl du ihrem Beispiel nicht folgen musst. Habe keine Angst zu experimentieren!

Schritt 3: Unterstützende Farben hinzufügen

Manchmal sind zwei oder drei Hauptfarben notwendig, aber das ist nicht zwingend. Denke an die Farben verschiedener Marken. Einige verwenden eine einzige Farbe, andere haben eine Hauptfarbe und ein oder zwei, die sie unterstützen. Coca-Cola verwendet sein unverwechselbares Rot. IKEA ist hauptsächlich blau mit etwas Gelb. Tide ist orange mit etwas Blau und Gelb. Je nach Stimmung deiner Website benötigst du vielleicht ein paar Farben. Versuche, ein Tool wie Adobe Color oder Coolors zu verwenden, die es dir beide ermöglichen, eine Hauptfarbe hinzuzufügen und dann verschiedene Farbebeziehungen, wie komplementär oder monochromatisch, auszuprobieren, um schnell zu sehen, ob etwas gut funktioniert.

Schritt 4: Erweitere deine Palette

Nachdem du die Auswahl eingegrenzt und deine Hauptfarbe(n) gefunden hast, ist es Zeit, deinen Umfang mit einer Palette zu erweitern, die deinem Projekt Vielseitigkeit und Einschränkung verleiht – hier ist eine Methodik, die ich hilfreich fand. Tönungen und Schattierungen sind hier der Trick. Tönungen werden durch das Mischen deiner Hauptfarbe(n) mit Weiß hergestellt, und Schattierungen werden durch das Mischen mit Schwarz hergestellt. Du kannst schnell ein organisiertes System mit Sass-Farbfunktionen erstellen.

$main-color:          #9AE799;

$main-color-lightest: lighten($main-color, 20%);
$main-color-lighter:  lighten($main-color, 15%);
$main-color-light:    lighten($main-color, 10%);

$main-color-dark:     darken($main-color, 40%);
$main-color-darker:   darken($main-color, 50%);
$main-color-darkest:  darken($main-color, 60%);

Um deine Palette abzurunden, benötigst du noch ein paar Farben, wie ein Weiß und ein Schwarz. Versuche, ein „kräftiges Schwarz“ zu erstellen, indem du einen dunklen, fast schwarzen Farbton deiner Hauptfarbe verwendest, und am anderen Ende des Spektrums wähle ein paar helle Grautöne, die mit deiner Hauptfarbe getönt sind. Das Tönen von Weiß und Schwarz verleiht deiner Seite etwas mehr Persönlichkeit und schafft ein zusammenhängendes Erscheinungsbild.

Zu guter Letzt, wenn du an einem interaktiven Produkt arbeitest, solltest du Farben für Erfolgs-, Warn- und Fehlerzustände hinzufügen. Typischerweise funktionieren Grün, Gelb und Rot für diese, aber überlege, wie du den Farbton anpassen kannst, damit sie besser zu deiner Palette passen. Wenn deine Stimmung zum Beispiel freundlich ist und deine Grundfarbe Grün, möchtest du vielleicht die Fehlerzustandsfarben entsättigen, damit das Rot weniger negativ wirkt.

Das kannst du mit der Sass-Farbfunktion `mix` machen, indem du deine Grundfarbe, die Standard-Fehlerfarbe und den Prozentsatz der Grundfarbe angibst, den du mit der Fehlerfarbe mischen möchtest. Das Hinzufügen von Entsättigungsfunktionen hilft, die Farben abzumildern.

$success: mix($base-color, desaturate(green, 50%), 50%);
$warning: mix($base-color, desaturate(yellow, 30%), 5%);
$error:   mix($base-color, desaturate(red, 50%), 20%);

Wenn es um das Web geht, gibt es ein Farbprinzip, dem du besondere Aufmerksamkeit schenken musst: Kontrast. Das werden wir als Nächstes behandeln.

Kontrast

Farbkontrast – der Unterschied in Sättigung, Helligkeit und Farbton zwischen zwei Farben – ist ein wichtiges Designprinzip, um sicherzustellen, dass das Web für Menschen mit Sehschwäche oder Farbenblindheit zugänglich ist. Indem du sicherstellst, dass genügend Kontrast zwischen deinem Text und dem Hintergrund auf deiner Website vorhanden ist, wird diese für alle sehenden Benutzer zugänglicher. Achte bei der Barrierefreiheit auf die Farbkontrastrichtlinien der W3C-Web Content Accessibility Guidelines (WCAG). Es gibt viele Werkzeuge, die dir helfen können, diese Richtlinien zu befolgen, einschließlich des Inspektionsfensters in den Entwicklertools von Chrome.

---

Jetzt ist es an der Zeit, diese Prinzipien in die Praxis umzusetzen! Du kannst diese Prozesse und CSS-Tipps nutzen, um das Rätselraten beim Design zu beenden und bessere Lösungen zu schaffen. Beginne mit dem, was du kennst, und schließlich werden die hier genannten Designprinzipien zur zweiten Natur.

Wenn du auf der Suche nach noch mehr praktischen Tipps bist, haben Adam Wathan und Steve Schoger über einige ihrer Favoriten geschrieben.