Lernen Sie in 5 Minuten das grundlegende UI-Design

Wenn Sie ein grundlegendes Verständnis von HTML und CSS haben und im Browser gut aussehende Benutzeroberflächen erstellen möchten, sind Sie hier genau richtig! In diesem Artikel verbessern Sie Ihre UI-Designfähigkeiten, indem Sie die folgenden sieben Grundlagen kennenlernen:

  • Leerraum
  • Ausrichtung
  • Kontrast
  • Rahmen
  • Typografie
  • Farbe
  • visuelle Hierarchie

Dieser Artikel baut auf einem kostenlosen Scrimba-Kurs auf, der von dem brillanten Gary Simon, auch bekannt als DesignCourse, erstellt wurde. Der Kurs bietet eine Reihe interaktiver Tutorials, die Sie in Ihrem eigenen Tempo absolvieren und sogar wiederholen können, um Ihr Lernen wirklich einzubetten.

Kursstart: UI Design Fundamentals lernen?

Wir sind der Meinung, dass alle Front-End-Entwickler über grundlegende UI-Designfähigkeiten verfügen sollten. Also hier? Natürlich lehrt Sie @designcoursecom das. Alles ohne Design-Tools, nur HTML & CSS.

RTs geschätzt? // t.co/mT9fDjShUd # 100daysofcode

- Scrimba (@scrimba), 28. Januar 2020

Wenn Sie in diesem Artikel mehr wollen, lesen Sie unbedingt den Kurs. Jetzt lass uns hineinspringen!

Leerraum

Das erste grundlegende Design, das wir uns ansehen werden, ist White Space , auch als negativer Raum bekannt. Wie der Name schon sagt, ist dies der Abstand zwischen den Elementen auf der Seite.

.

Elemente, die auf einer Seite ohne Leerzeichen zusammengedrückt werden, sehen nicht nur unattraktiv aus, sondern sind auch schwer zu navigieren und schwierig zu lesen.

Wir können den Leerraum auf verschiedene Arten anpassen, einschließlich Polsterung, Rand und Linienhöhe. Schauen Sie sich das Vorher- und Nachher-Bild unten an, um zu sehen, welchen Unterschied ein effektiver Leerraum machen kann.

Vor und nach der Leerzeicheneinstellung

Ausrichtung

Als nächstes kommt die Ausrichtung . Auf diese Weise wird sichergestellt, dass jedes Element in Bezug auf andere Elemente korrekt positioniert ist, z. B. indem sichergestellt wird, dass die Spalten auf der Seite ausgerichtet sind.

.

Wie Sie den folgenden Bildern entnehmen können, ist die erste Seite mit Elementen in zahlreichen verschiedenen Spalten (schwache Ausrichtung) weitaus weniger attraktiv und lesbar als die zweite Seite mit starker Ausrichtung

Seite mit schwacher AusrichtungSeite mit starker Ausrichtung

Kontrast

Es ist wichtig, beim Erstellen einer Seite oder Anwendung auch den Kontrast zu berücksichtigen . Der Kontrast ist der Unterschied zwischen Farben, die auf der Seite nebeneinander angezeigt werden.

.

Wie Sie diesem Beispiel entnehmen können, sind Seiten mit geringem Kontrast schwer zu lesen und die Elemente fallen nicht auf.

Seite mit schlechtem Kontrast

Seiten mit gutem Kontrast, wie die folgende, sehen nicht nur viel besser aus, sondern sind auch benutzerfreundlicher und zugänglicher.

Beispiel für guten Kontrast

Um Ihren Kontrast genau richtig zu machen, schlagen die WCAG (Web Content Accessibility Guidelines) ein Mindestkontrastverhältnis (AA) von mindestens 4,5: 1 oder 3: 1 für großen Text oder ein verbessertes Kontrastverhältnis (AAA) von 7 vor : 1 oder 4,5: 1 für großen Text. Es gibt eine Reihe von Plugins oder Websites, um dies zu überprüfen.

Rahmen

Die Skalierung ist auch ein wesentlicher Bestandteil der Benutzeroberfläche. Berücksichtigen Sie daher die Größe jedes Elements sorgfältig. Beispielsweise sollten Elemente im Verhältnis zur Seite groß genug sein (also keine großen Lücken). Außerdem sollten Elemente mit höherer Bedeutung, wie z. B. Überschriften, größer sein als Elemente mit geringerer Bedeutung.

.

Schauen Sie sich die Bilder vor und nach an und sehen Sie, wie viel besser die Seite aussieht, wenn sie richtig skaliert ist.

Seite mit schlechtem MaßstabBeispiel für eine gute Skala

.

Typografie

Typografie hat auch einen großen Einfluss auf die Benutzeroberfläche. Es gibt viele Möglichkeiten, dies anzupassen, einschließlich Schriftauswahl, Schriftgröße, Ausrichtung, Buchstabenabstand, Zeilenhöhe, Schriftstilen, Farbe und Kontrast.

.

Verwenden Sie in der Regel nicht mehr als zwei Schriftfamilien auf einer Seite und stellen Sie sicher, dass die verschiedenen Aspekte zusammenarbeiten, um die Reihenfolge der Wichtigkeit festzulegen. Dies wird als visuelle Hierarchie bezeichnet , auf die wir weiter unten näher eingehen werden.

.

Wenn Sie diese Tipps befolgen, sieht Ihre Seite folgendermaßen aus:

Beispiel für gute Typografie

Und nicht verwirrend und unlesbar wie folgt:

Seite mit schlechter Typografie

Farbe

Das grundlegende Design der Benutzeroberfläche, das zuerst die Benutzererfahrung beeinflusst, ist die Farbe . Farbpsychologie bedeutet, dass jede Farbe für bestimmte Personen eine Bedeutung hat - zum Beispiel kann Rot Gefahr bedeuten, während Weiß Sauberkeit und Gelassenheit hervorrufen kann.

Seien Sie jedoch vorsichtig mit der Farbe. Die Bedeutungen variieren zwischen den Kulturen. Machen Sie also immer Ihre Recherchen und berücksichtigen Sie Ihre Zielgruppe bei der Auswahl der Farben.

.

Es ist auch wichtig zu bedenken, dass zu viele Farben eine schlechte Benutzeroberfläche erzeugen können und die Farben, die Sie verwenden, sich ergänzen sollten. Als Faustregel gilt, dass Sie nichts falsch machen können, wenn Sie hellere oder dunklere Variationen desselben Farbtons nebeneinander verwenden. Schauen Sie sich nur an, wie viel einfacher das zweite Bild unten im Vergleich zum ersten ist!

Seite mit schlechter FarbauswahlGute Verwendung von Farbe

.

Visuelle Hierarchie

Das letzte Element in unserer Liste der Entwurfsgrundlagen ist die visuelle Hierarchie . Einige Elemente einer Benutzeroberfläche sind wichtiger als andere. Die visuelle Hierarchie ermöglicht es uns, diese Bedeutung festzustellen.

Dies kann mit Position, Kontrast, Farbe, Skalierung, Stil oder einer Kombination der oben genannten erfolgen, wie im zweiten Bild unten gezeigt, das eine viel bessere visuelle Hierarchie als das erste aufweist.

Seite mit schlechter visueller HierarchieVerwenden von Typografie und Farbe zum Erstellen einer visuellen Hierarchie

Einpacken

In diesem Artikel haben wir die sieben wichtigsten Designgrundlagen behandelt: Leerraum, Farbe, Kontrast, Skalierung, Ausrichtung, Typografie und visuelle Hierarchie. Sie sind alle für die Benutzeroberfläche gleich wichtig. Wenn eines dieser Elemente fehlt, leidet die gesamte Benutzererfahrung. Stellen Sie daher sicher, dass Sie sie alle beim Erstellen Ihrer UI-Designs berücksichtigen.

Der UI Design Fundamentals Kurs

Wenn Sie mehr über diese Themen erfahren möchten, lesen Sie bitte den kostenlosen UI Design Fundamentals-Kurs bei Scrimba. Darin lernen Sie die Grundlagen viel detaillierter kennen.

Viel Glück und viel Spaß beim Codieren :)