Beginnen Sie mit dem UI-Design mit diesen Tipps, um Ihren Workflow zu beschleunigen

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Dieser Artikel richtet sich an Anfänger von UI-Designern, die lernen möchten, wie sie ihre Designs konsistenter und benutzerfreundlicher gestalten können. Sie brauchen nicht viel Erfahrung, um den darin geteilten Tipps und Tricks folgen zu können, also lassen Sie uns gleich loslegen!

Wenn Sie an einem Design arbeiten, ringen Sie mit all den Möglichkeiten, z. B. ob Sie einen Textblock vergrößern oder verkleinern oder den Weißraum um ein Element vergrößern (oder verkleinern) sollen. Und was ist mit dieser Farbe: Soll es dunkler sein, oder vielleicht heller?

In diesem Artikel geht es um das Erstellen von Grenzen und Regeln, die während des gesamten Designprozesses befolgt werden müssen. Es gibt eine unbegrenzte Anzahl von Möglichkeiten, wie Sie Elemente in einer Benutzeroberfläche kombinieren können – und daher müssen Sie einige Regeln und Grenzen festlegen, sonst könnte der Design-Workflow zu einer unangenehmen Pflicht werden. Möglicherweise kämpfen Sie mit all den Möglichkeiten und versuchen, aus vielen „richtigen“ Optionen die beste Option auszuwählen. Indem Sie einige grundlegende Regeln festlegen (und befolgen), lassen Sie Ihr Design auch konsistenter aussehen.

Das Setzen von Grenzen und Regeln hilft bei der Gestaltung — Ein System zu haben ist wichtig!

Die Bedeutung eines konsistenten Benutzeroberflächendesigns

Beginnen wir ganz am Anfang. Sie möchten, dass Ihr Design gut und vertrauenswürdig aussieht, und Sie müssen Chaos um jeden Preis vermeiden. Damit dies geschieht, ist es sehr wichtig, ein System für Ihre Designarbeit zu haben.

Auch Ihre Entwickler werden ein System zu schätzen wissen – sie werden die Tatsache lieben, dass Ihr Design Ordnung hat und dass Sie ihre Arbeit erleichtern.

Ein System zum Ändern der Größe um eine vorbestimmte Größe

Es spielt keine Rolle, ob Sie die Größe eines Textblocks ändern, die Größe eines Bilds ändern oder einige Leerzeichen anpassen möchten. Sie müssen entscheiden, wie groß jedes Element sein wird. Und ich wette, Sie waren in dieser Situation: Haben Sie schon einmal eine Größe für ein Element ausgewählt und nach fünf Minuten ändern Sie es und dann wieder und vielleicht immer wieder?

Welche Größe ist perfekt? Es könnte einer von denen sein, die Sie versucht haben, oder? Sie müssen diese endlose Zeitverschwendungsfalle vermeiden!

Beginnen Sie mit der Auswahl der Grundeinheit: Das 8-Pixel-Gitter

Damit das ganze Design sauberer aussieht, ist es hilfreich, zuerst den Messwert festzulegen, der dann alle Größen bestimmt. Es liegt ganz bei Ihnen, welchen Wert Sie wählen, aber oft ist es am besten, sich an ein paar bewährte Regeln zu halten. Und eine dieser Regeln besteht darin, Elemente in der Größe zu ändern und um genau acht Pixel zu verschieben. Diese Regel vereinfacht Ihre Entscheidungsfindung.

Hinweis zu px im Vergleich zu dp : *Neben Pixeln (px) haben Sie vielleicht schon von dem Begriff dp gehört, der im Screendesign und Prototyping verwendet wird. Die dp -Einheit ist die Abkürzung für „density-independent pixel“. Die Einheit ist relativ zu einem 160-dpi-Bildschirm, also entspricht 1 dp 1 Pixel auf einem 160-dpi-Bildschirm und 2 Pixeln auf einem 320-dpi-Bildschirm und so weiter. Die Formel für den numerischen Wert lautet px = dp * (dpi/160) .*

Denken Sie immer daran, dass es bei der Arbeit mit kleineren Elementen oder Objekten auch in Ordnung ist, 4-Pixel-Schritte anstelle von 8 zu verwenden. Gelegentlich können Sie bei Bedarf weitere Anpassungen vornehmen.

Aber warum genau 8 Pixel?

Dass acht hier oft wie eine „magische Zahl“ wirkt, hat einige Gründe:

Acht Pixel sind ein ausreichender minimaler „Sprung“.
Acht ist eine große Zahl, weil sie durch vier und zwei teilbar ist.
Wenn Sie acht verwenden, können Sie jedes Element problemlos skalieren, ohne am Ende halbe Pixel zu haben, da 8 / 2 = 4, 4 / 2 = 2 und 2 / 2 = 1. Wenn Sie andererseits mit 10 beginnen, Sie erhalten am Ende 5 Pixel, dann 2,5 Pixel, dann 1,25 Pixel. Wenn Sie für den Bildschirm entwerfen, möchten Sie halbe Pixel so weit wie möglich vermeiden. Durch die Verwendung ganzer Pixel werden Elemente im Design an präzisen Pixelgrenzen ausgerichtet und sehen so schärfer aus.
Vielfache von acht (8, 16, 24, 32, 40, 48, 56, 64, 72, 80 usw.) werden mit binären Werten (1, 2, 4, 8, 16, 32, 64, 128, 256) verflochten , 512 usw.).
Schließlich sind die Zahlen leicht zu merken.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Was sind die Vorteile der Verwendung eines 8-Pixel-Rasters?

Als Designer ist Ihre Entscheidungszeit kostbar. Dadurch werden Sie schneller und effizienter.
Wenn Sie mit einem Entwickler zusammenarbeiten, können Sie ein System erstellen, das Ihnen und Ihrem Team hilft. Wenn der Entwickler schnell Änderungen vornehmen muss, kann er die Werte in 8-Pixel-Schritten anpassen. Dies sorgt für Konsistenz und Ordnung.
Personen, die Ihre Website nutzen, werden sich wohl fühlen, wenn sie sie besuchen. Sie werden der Website vertrauen und es wird einfacher für sie sein, die Benutzeroberfläche zu verwenden.

unter Verwendung eines 8-Pixel-Rasters — Das Ergebnis der Verwendung eines 8px-Rasters

Arbeiten Sie mit einem Raster, um alle Elemente anzuordnen

Horizontale Harmonie

Ich bin mir sicher, dass Sie beim Entwerfen von Websites bereits ein Raster verwendet haben. Die Verwendung eines Rasters hilft Ihnen, alle Elemente genau auf der digitalen Leinwand zu platzieren.

Das Raster bildet das Skelett Ihrer Benutzeroberfläche und bestimmt, wo Sie Elemente platzieren können. Die Vorlage enthält die Komposition und definiert klare Grenzen, damit Ihr Design konsistenter wird. Jetzt können Sie leichter entscheiden, wo Sie die Elemente platzieren möchten. Wenn Sie mehr Erfahrung sammeln, können Sie die Grenzen nach Bedarf aktualisieren.

Aber wie erstellt man dieses Raster? Wir werden die Einzelheiten als nächstes behandeln. Grundsätzlich kann die Anzahl und Größe der Spalten beliebig sein und hängt von Ihren Bedürfnissen ab. Je detaillierter Ihr Design ist, desto mehr Spalten benötigt das Raster. Wenn Sie zögern, bitten Sie einen erfahrenen Kollegen um Hilfe.

Außerdem empfehle ich Ihnen, „Ein umfassender Leitfaden zum UI-Design“ zu lesen, der Ihnen helfen soll, das Design von Benutzeroberflächen etwas tiefer zu verstehen.

horizontale Harmonie — Horizontale Harmonie

Vertikale Harmonie

Ähnlich wie bei der Aufrechterhaltung der horizontalen Harmonie ist es wichtig, auch die vertikalen Abstände in einem Design konsistent zu halten. Wie die Zeilen in einer Tabellenkalkulation helfen sie Ihnen, den Text in gleichmäßigen Abständen zu halten.

Wie groß sollen diese Reihen sein? Auch hier liegt es an Ihnen. Ich empfehle jedoch die Verwendung von 8 Pixeln oder Vielfachen von 8 (z. B. 16). Definieren Sie Grenzen neu, an denen Elemente oder Text ausgerichtet werden sollen.

Schriftgrößen richtig auswählen

Wenn Sie sich einige gut gestaltete Designs ansehen, werden Sie Konsistenz in den Schriftgrößen feststellen. Dies hat einen Grund.

Hinweis : Denken Sie auch daran, dass Sie nur zwei, vielleicht drei Schriftarten in Ihrem Design benötigen. Die Auswahl der richtigen Schriftarten und deren Zusammenwirken würde jedoch den Rahmen dieses Tutorials sprengen.

Beginnen Sie mit der Definition einiger wichtiger Schriftgrößen, die im gesamten Projekt verwendet werden sollen. (Zum Beispiel wäre es dumm, 30, 31 und 32 Pixel zu verwenden. Kombinieren Sie stattdessen diese drei sehr ähnlichen Größen zu einer.)

Standardschriftgrößen bringen zwei Vorteile:

Ihr Design wird einheitlicher und eleganter.
Es beschleunigt den Designprozess und macht Sie effizienter.

Schriftgrößen

Achten Sie beim Definieren von Schriftgrößen darauf, die Größe nicht um die gleiche Schrittweite zu erhöhen. Wenn Sie Text vergrößern, sollte er nicht linear sein. Das bedeutet, je größer der Text ist, den Sie erstellen, desto größer sollte das Inkrement sein.

Angenommen, Sie haben einen Textblock mit einer Schriftgröße von 12 Pixel und möchten ihn vergrößern. Sie probieren 14 Pixel aus und sind zufrieden. Aber stellen Sie sich dann vor, Sie haben eine große Überschrift (40 Pixel) und möchten diese vergrößern. Würden Sie die Größe nur um 2 Pixel von 40 auf 42 erhöhen? Natürlich nicht. Optisch bedarf der Text einer deutlich größeren Änderung. Möglicherweise müssen Sie es um 24 Pixel erhöhen, sodass Sie eine größere 64-Pixel-Überschrift erhalten.

Kurz gesagt bedeutet dies, je größer der Text sein soll, desto größer ist das Inkrement, das Sie verwenden müssen. Dieses sehr einfache Prinzip gilt nicht nur für Text, sondern auch für die Größe von Schaltflächen, Leerraum und alles andere.

Sie basiert typischerweise auf einer geometrischen Progression. Hier ist ein sehr nützliches Diagramm, das die Schriftskalierung zeigt:

geometrischer Verlauf — Geometrischer Verlauf

Für die Typografie wird jedoch eine bewährte Skala mit Schriftgrößen verwendet, an der Sie für immer festhalten möchten. Die Skala ist 12, 14, 16, 18, 20, 24, 30, 36, 48, 60 und 72 Pixel.

typografische Skala — Bewährte Typografieskala für Größen

Textzeilenhöhe

Nachdem Sie alle Schriftgrößen definiert haben, sollten Sie sich um den Zeilenabstand kümmern. Verwenden Sie für die Zeilenhöhe wieder Schritte von 4 Pixeln. Stellen Sie beispielsweise für 16-Pixel-Text die Zeilenhöhe auf 24 Pixel ein. Wenn Sie möchten, dass der Text mehr atmet, erhöhen Sie die Zeilenhöhe um 4 Pixel auf 28.

Definieren Sie die Farben Ihres Projekts

Wissen Sie, wie viele Farbkombinationen es gibt? Viel! Sie verlieren zu viel Zeit, wenn Sie Farbtöne nicht vordefinieren. Sie können sich nicht auf Schwarz, Weiß und, sagen wir, Blau beschränken. Für jede Farbe benötigen Sie andere Schattierungen, und es ist wichtig, sie im Voraus festzulegen, damit die Schattierungen während Ihres gesamten Designprojekts konsistent sind. Wir wollen kein Chaos im Design erzeugen. Streben Sie 5 bis 10 Farbtöne für jede Farbe an. Ich ziehe es vor, 9 Farbtöne für jede Farbe zu definieren.

Schauen wir uns die Farbtöne genauer an.

Warum 9 Schattierungen von jeder Farbe?

Der erste Vorteil ist die Farbbenennung. Egal, ob Sie einen Grafikeditor oder CSS-Code verwenden, Sie werden von diesem Tipp auf jeden Fall profitieren. Jedem Farbton würde eine Nummer zugewiesen, z. B. 100, 200, 300, 400, 500, 600, 700, 800 und 900. (Warum Hunderte? Typischerweise werden auch Schnitte von Schriften so organisiert.)
Zweitens ist 9 eine praktische Zahl zum Definieren von Farben. Der beste Weg, diese Schattierungen vorzubereiten, besteht darin, eine Reihe von 9 Quadraten vorzubereiten und die Quadrate mit Farben zu füllen. Die in der Mitte ist die Grundfarbe . Dann definieren Sie den hellsten Farbton (ganz links) und den dunkelsten Farbton (ganz rechts). Der nächste Schritt besteht darin, die Farbtöne dazwischen auszuwählen.

neun Schattierungen von jeder Farbe — Neun Farbtöne von jeder Farbe

Bereiten Sie die verschiedenen Größen, Typen und Zustände der Elemente vor

Wenn Sie an einem Design arbeiten, arbeiten Sie normalerweise mit unzähligen Symbolen, Schaltflächen und anderen Komponenten. Auch hier ist es eine gute Idee, im Voraus mehrere Größen für sie vorzubereiten und die Optionen auf so wenige wie möglich zu beschränken. Fügen Sie während des Designprozesses keine anderen Größen hinzu und versuchen Sie nicht, die Größe der Komponenten an Ihre Bedürfnisse anzupassen. Verwenden Sie stattdessen einfach die, die Sie bereits definiert haben, und das gesamte Design wird konsistenter und sauberer.

Betrachten wir als Beispiel Schaltflächen. Zu Beginn müssen Sie ihre hierarchische Struktur definieren. Erstellen Sie dazu eine Schaltfläche mit einer primären Aktion, eine Schaltfläche mit einer sekundären Aktion und vielleicht eine weitere Schaltfläche mit einer weniger wichtigen Aktion. Legen Sie für jede Schaltfläche ihren Status (aktiv, inaktiv) und die Farbvariante fest. Versuchen Sie immer, die Anzahl der Elemente auf die wichtigsten zu reduzieren.

Definieren Sie die Eigenschaften anderer Elemente

Designer von Benutzeroberflächen verwenden häufig Schatten in ihrer Designarbeit. Für weniger erfahrene Designer können Schatten jedoch manchmal ein Kampf sein. Beim Erstellen eines Schattens müssen Sie den Abstand des Schattens entlang der x- und y-Achse sowie den Weichzeichnungsradius, die Farbe und die Transparenz festlegen. Die Feinabstimmung von Schatten kann viel Zeit in Anspruch nehmen, weshalb Sie sie vorbereiten sollten, bevor Sie in das Design eintauchen. Es ist hilfreich, eine Reihe von Schatten vorzubereiten (mit der gleichen Methode wie für Farben) und diese dann während des gesamten Designprozesses anzuwenden.

Beachten Sie auch alle anderen Eigenschaften von Elementen, mit denen Sie arbeiten werden, wie z. B. Eckenradius, Transparenz und Farbverläufe.

Weißer Raum

Das richtige Anpassen von Leerraum ist wichtig. Egal, ob Sie Elemente von außen (Margin) oder von innen (Padding) versetzen, Sie sollten sich wieder auf die magische Zahl 8 verlassen. Erhöhen Sie den Versatz um 8 Pixel (4 für kleine Elemente). Wie bei der Schriftgröße gilt: Je größer der gewünschte Abstand ist, desto größer muss das Inkrement sein (auch hier müssen Sie diese Inkremente im Voraus definieren).

Fazit

Um Ihre Designs sauber und konsistent zu gestalten, definieren Sie einige Grenzen und einen klaren Pfad durch den Prozess.

Beachten Sie bei der Arbeit an jedem Element Ihres Designs Folgendes:

Sehen Sie, ob Sie es bereits irgendwo in Ihrem Design verwendet haben. Wenn ja, können Sie dieses Element einfach kopieren.
Folgen Sie einem horizontalen und vertikalen Rhythmus und passen Sie die Größe der Elemente mit den Schritten an, die Sie ganz am Anfang definiert haben.
Vermeiden Sie komplizierte Entscheidungen und endlose Kämpfe mit Pixeln. Habe ein System.
Erstellen Sie dasselbe Element nicht zweimal. Wenn Ordnung in Ihrem Design ist, wird Ihre Arbeit besser und effizienter, Sie können schneller iterieren und einfacher mit den Entwicklern kommunizieren. Die Entwickler werden Variablen festlegen, die Ihren Stilen folgen, also definieren Sie sie klar. Sie erhalten ein sauberes Design und die Entwickler können besseren und nachhaltigeren Code erstellen. Alle werden glücklich sein.