Einführung in die Proportion

Die Proportion hat eine lange Tradition in der Definition von Schönheit in Kunst und Design. Die alten Ägypter benutzten ein Rastersystem für ihre Wandmalereien, um Maßstäbe und Proportionen festzulegen und Hierarchien darzustellen. Die alten Griechen waren von den Proportionen des menschlichen Körpers fasziniert. Der Goldene Schnitt wurde verwendet, um „perfekte“ Proportionen für die Gutenberg-Bibel zu schaffen. Es gibt viele Beispiele dafür, dass Proportionen sorgfältig berücksichtigt wurden.

Heute ist die Proportion ein wichtiges Gestaltungsprinzip, das dazu beiträgt, Konsistenz, Hierarchie, Rhythmus und allgemeine Schönheit im Design zu schaffen. In dieser Lektion werden wir besprechen, wie man Proportionen im UI-Design verwendet.

Größe vs. Maßstab vs. Proportion

Um die Vorteile der Proportion im UI-Design nutzen zu können, müssen wir zunächst die Unterschiede zwischen Größe, Maßstab und Proportion verstehen. Alle drei Begriffe sind miteinander verwandt, aber es gibt einige klare Unterscheidungen zu beachten.

Größe ist die tatsächliche Größe eines Elements, oft gemessen in px, pt, em, rem usw.

Zum Beispiel ist die Größe dieses Logos 75px hoch und 275px breit.

Die Skalierung ist die relative Größe eines Elements, die oft in Prozenten oder Vielfachen gemessen wird.

Ein Element kann zum Beispiel so skaliert werden, dass es größer oder kleiner als seine ursprüngliche Größe ist.

Proportion ist das harmonische Verhältnis zwischen zwei oder mehr Elementen in der gleichen Größenordnung.

Wenn zum Beispiel ein Element größer wird, sollten auch die übrigen Elemente in gleichem Maße wachsen, um proportional zu bleiben.

Proportion im UI-Design

Ein Vergleich zwischen einem proportionalen und einem unproportionalen Logo ist eine Sache, aber Sie fragen sich wahrscheinlich: „Wie funktioniert das beim UI-Design?“ Schließlich ist es bei unterschiedlichen Bildschirmgrößen und Geräten nicht möglich, eine proportionale Benutzeroberfläche beizubehalten, oder? Die Antwort auf diese Frage lautet: „Ja und Nein.“

UIs enthalten in der Regel eine Kombination aus statischen und flüssigen Elementen.

  • Statische Elemente bleiben gleich groß, unabhängig davon, wie groß oder klein der Bildschirm ist.
  • Fluide Elemente skalieren auf einen bestimmten Prozentsatz ihres Containers.

Der Definition nach würde der Vergleich von statischen Elementen mit fluiden Elementen niemals zu einem proportionalen Design führen, da sie nicht mit der gleichen Geschwindigkeit skalieren. Allerdings wechseln die Benutzer in der Regel nicht das Gerät, während sie Ihre Benutzeroberfläche erleben.

In Anbetracht dessen ist es möglich, Proportionen im UI-Design zu verwenden. Aber vielleicht nicht so, wie Sie es erwarten.

Maßeinheiten im UI-Design

Sie haben wahrscheinlich schon einmal den Begriff „Pixel“ gehört, der am häufigsten als Maßeinheit für digitale Produkte verwendet wird. Dies war allgemein akzeptabel, bis Apple 2010 das Retina Display einführte.

Das Retina Display änderte die Art und Weise, wie wir über „Größe“ nachdachten, indem es doppelt so viele Pixel pro Quadratzoll des Displays unterbrachte. Während die Größe eines Elements auf einem Retina- und einem Nicht-Retina-Display gleich zu sein scheint, ist die Gesamtzahl der Pixel, aus denen das Element besteht, sehr unterschiedlich. So ist beispielsweise eine Schaltfläche, die auf einem normalen Display 48 Pixel groß ist, auf einem Retina-Display aufgrund der Pixeldichte 96 Pixel groß.

Seitdem sind viele verschiedene Bildschirme mit hoher Pixeldichte (High Pixel Density, HPD) für viele verschiedene Marken und Geräte erhältlich. Glücklicherweise werden HPD-Bildschirme in der Regel dadurch definiert, wie viele Pixel mehr pro Quadratzoll passen als bei der Standardanzeige mit 1X Pixeldichte.

Die meisten Bildschirme haben zum Beispiel eine 1-fache, 2-fache oder 3-fache Pixeldichte.

Der Begriff „Pixel“ ist immer noch allgemein akzeptiert, um die Größe eines Elements zu beschreiben. Um jedoch Verwirrung zu vermeiden, ziehen es viele Designer vor, den Begriff „Punkt“ oder „pt“ zu verwenden, der die Größe unabhängig von der Pixeldichte des Bildschirms beschreibt.

Für den Rest dieser Lektion werden wir die Begriffe „pt“ und „px“ austauschbar als Maßeinheit verwenden, um die Beziehungen zwischen den Elementen in unserem Design zu beschreiben.

Das 8pt-Rastersystem

Bei der Arbeit mit Designsoftware wie Illustrator, Photoshop, Sketch, XD, Figma usw. ist es für Designer sehr üblich, Raster oder Spalten zu verwenden, um ihre Designbemühungen zu unterstützen. Viele der in diesem Kurs besprochenen Gestaltungsprinzipien lassen sich mit Hilfe von Rastern oder Spalten verwirklichen, und so ist es nicht verwunderlich, dass sie ein beliebtes Werkzeug im Werkzeugkasten des Designers sind.

Es gibt jedoch eine bestimmte Strategie, die sich besonders gut für Proportionen eignet. Diese Strategie ist bekannt als das 8pt Grid System.

Das 8pt Grid System wurde erstmals von Googles Material Design Spezifikation eingeführt. Glücklicherweise ist es recht einfach zu verstehen. Im Wesentlichen geht es darum, ein Raster zu verwenden, das aus 8 x 8-Punkt-Quadraten besteht. Wenn Sie auf diesem Raster entwerfen, müssen Sie sicherstellen, dass alle Elemente am Raster einrasten.

Daraus ergeben sich Elemente mit Abmessungen, die immer durch 8 teilbar sind. Durch diese Art der Gestaltung ist es einfach, die Proportionen der Elemente beizubehalten und gleichzeitig einen vertikalen Rhythmus im gesamten Entwurf zu schaffen.

Warum 8 Punkte?

Das 8-Punkt-System ist aus zwei Gründen am weitesten verbreitet:

  • Die gängigsten Bildschirmabmessungen sind durch 8 teilbar, so dass Ihre Entwürfe auf den meisten Geräten sehr klar und deutlich sind (keine geteilten Pixel).
  • Die empfohlene Grundschriftgröße im Web beträgt 16 Pixel. Dies ermöglicht es Entwicklern, Elemente auf einer Webseite in REM-Einheiten zu skalieren und dabei dem Rastersystem treu zu bleiben.

Insgesamt gibt es mehr Vorteile für die Verwendung von 8 Punkten als für jede andere Zahl für das Raster. Sie können jedoch auch eine Zahl wie 10pt oder 12pt verwenden, wenn es Ihnen besser passt.

Warum nicht 4 Punkte?

Die Google Material Design Spezifikation empfiehlt die Verwendung von 4pt für „kleinere Komponenten, wie Ikonographie und Typographie“. Allerdings kann die Mehrheit der UI-Elemente immer noch mit dem 8-Punkt-System gehandhabt werden, so dass es für den Anfang beliebter ist.

Der Goldene Schnitt

Das 8-Punkt-Rastersystem hat seine klaren Vorteile im UI-Design, aber wenn Sie eine schnelle Google-Suche nach „Proportion im UI-Design“ durchführen, werden Sie mit einer Titelseite voller Ergebnisse über den Goldenen Schnitt konfrontiert.

Der Goldene Schnitt ist 1:1,618 und gilt als Schnittpunkt von Mathematik und ästhetischer Schönheit. Viele Designer ignorieren Gittersysteme zugunsten einer Proportionierung mit dem Goldenen Schnitt.

Es gibt viele Beispiele dafür, wie der Goldene Schnitt für alles verwendet wurde, von der Gutenberg-Bibel über das moderne Logodesign bis hin zu Erscheinungen in der Natur. Es gibt jedoch auch andere, die glauben, dass die Schönheit des Goldenen Schnitts einfach nur ein Mythos ist.

Ungeachtet dessen lässt sich nicht leugnen, dass viele vom Goldenen Schnitt begeistert sind, so dass er in dieser Lektion sicherlich eine Erwähnung wert ist.

Verwendung des Goldenen Schnitts im UI-Design

In Lektion 4 dieses Kurses haben wir besprochen, dass ein Design nicht mehr als 3 bis 4 Hierarchieebenen in einem bestimmten Bereich der Benutzeroberfläche haben sollte. In diesem Sinne können Sie den Goldenen Schnitt in Ihrem Design anwenden, indem Sie die folgenden einfachen Schritte ausführen:

Bestimmen Sie die Höhe eines Rechtecks und multiplizieren Sie diese Zahl mit 1,618, um die Breite zu ermitteln. So entsteht ein „Goldenes Rechteck“

Im obigen Beispiel ist unsere Ausgangszahl 350pt, aber Sie können jede beliebige Zahl verwenden.

Teilen Sie Ihr Goldenes Rechteck in perfekte Quadrate auf. Jedes perfekte Quadrat ergibt ein neues, kleineres Goldenes Rechteck.

Teilen Sie das Goldene Rechteck weiter auf, bis Sie 3-4 verschiedene perfekte Quadrate in unterschiedlichen Größen haben.

Verwenden Sie die Größe jedes Quadrats als „Platzhalter“, um Ihr Layout aufzulockern und die Hierarchie in Ihrem Design zu vermitteln.

Gesamt ist das Ergebnis ein ästhetisches und angemessenes Design. Werfen Sie einen Blick auf dieses Beispiel von Prototypr.io.

Starting With Constraints

Nachdem wir nun einige Methoden zur Festlegung von Proportionen im UI-Design behandelt haben, lassen Sie uns nun einige gute Ausgangspunkte diskutieren. Wenn Sie zuerst mit Einschränkungen beginnen, ist es einfacher, Ihre Benutzeroberfläche um diese Einschränkungen herum aufzubauen.

Mobile First Design

Der Begriff „Mobile First“ wurde von Luke Wroblewski in seinem gleichnamigen Buch geprägt. Der Begriff wurde bei Designern populär, um den Drang zu bekämpfen, immer mehr Dinge in eine Benutzeroberfläche zu packen, nur weil es genügend Platz dafür gibt.

Durch die Konzentration auf mobiles Design müssen Designer die Einschränkungen mobiler Geräte umgehen und sich auf das konzentrieren, was wirklich wichtig ist. Das Ergebnis ist, dass die Benutzererfahrung auf allen Geräten gleich bleibt, da der Hauptzweck der Benutzeroberfläche im Mittelpunkt steht.

Schriftgröße

Wie bereits erwähnt, beträgt die Standardschriftgröße für Text im Web bei den meisten gängigen Browsern 16 Pixel. Alles, was kleiner ist, kann auf mobilen Apple-Geräten ein unerwartetes Zoomverhalten auslösen. Daher wird im Allgemeinen empfohlen, 16px als Basisschriftgröße zu belassen und die übrigen Schriftgrößen (Überschriften, kleiner Text, Bildunterschriften, Beschriftungen usw.) entsprechend festzulegen.

Wir können diese Schriftgrößen mit Blick auf die Proportionen definieren, indem wir uns an die Design-Spezifikationen von Google Material halten und Größen in Schritten von 4pt wählen, wie z. B. den Styleguide von Bootstrap für die Schriftgröße.

Hinweis: Die Erhöhung der Schriftgröße durch den Goldenen Schnitt wird nicht empfohlen, da die Unterschiede zwischen den einzelnen Schriftgrößen viel zu groß wären. Wenn Sie beispielsweise mit einer Basisschriftgröße von 16 beginnen und jede Überschriftsebene mit 1,618 multiplizieren, würde dies zu einer H1-Überschrift von 177,4 pts führen, was die Lesbarkeit sehr erschweren würde.

Schaltflächengröße

Ein weiterer einschränkender Faktor, den Sie berücksichtigen müssen, ist die Genauigkeit der Eingabemethode, die für Ihren Entwurf verwendet wird. In diesem speziellen Fall beziehen wir uns auf Finger, Daumen, Cursor und Stylus-Stifte.

Finger und Daumen sind viel breiter und weniger präzise als Cursor oder Eingabestifte. Aus diesem Grund ist es wichtig, dass die Größen für Ihre Schaltflächen, Eingaben, Symbole oder andere Berührungspunkte sorgfältig ausgewählt werden, um diese Einschränkungen zu berücksichtigen.

Google’sMaterial Design empfiehlt, dass Berührungspunkte auf mobilen Geräten mindestens 48pt hoch und 48pt breit sein sollten, mit nicht weniger als 8pt dazwischen.

Inhaltsbreite

Inhalt ist fließend, was bedeutet, dass er so viel horizontalen und vertikalen Raum ausfüllt, wie er kann. Trotz dieser Eigenschaft ist es sinnvoll, eine Mindest- und eine Höchstbreite für den Inhalt festzulegen.

Die Mindestbreite des Inhalts kann durch die minimale Bildschirmbreite bestimmt werden, die Ihr Design unterstützt. Die kleinste Bildschirmauflösung, die von den meisten Designern unterstützt wird, ist 320px (das ist bei 1X) breit. Sie sollten Ihre Mindestbreite jedoch auf der Grundlage echter Nutzerdaten wählen, wenn Sie diese erhalten können. Google Analytics ist ein guter Ort, um nach dieser Art von Daten zu suchen.

Während die Breite des Inhalts den gesamten Bildschirm ausfüllen kann, ist es im Allgemeinen nicht empfehlenswert, dass Ihr Inhalt mehr als 52 Zeichen pro Zeile umfasst. Dies würde bedeuten, dass die maximale Breite Ihres Inhalts bestimmt werden kann, indem Sie tatsächlichen Text in seiner normalen Schriftgröße verwenden und eine bequeme Inhaltsbreite finden, die in diesen Bereich passt.

Abschluss

Abschließend ist die Proportion ein nützliches Gestaltungsprinzip. Trotz einer Kombination aus statischen und fließenden Elementen kann eine proportionale Benutzeroberfläche durch die Verwendung eines 8pt-Rastersystems, des Goldenen Schnitts oder einer anderen Methode erreicht werden. Wenn Sie mit der Definition der Abmessungen von Elementen beginnen, ist es gängige Praxis, mit Ihren Einschränkungen zu beginnen, wie z. B. Gerät, Schriftgröße, Schaltflächengröße und Inhaltsbreite. Nachdem die Basisgrößen definiert sind, ist es viel einfacher, die Elemente entsprechend zu skalieren.

Nächste Lektion
Grundsätze der Gestaltung: Weißraum

Vorherige Lektion
Gestaltungsgrundsätze: Hervorhebung

Feedback

Wie kann diese Lektion verbessert werden? Bitte hinterlassen Sie unten Ihr Feedback!