Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Kenne deine Formeln – Mit Geometrie zum perfekten UI-Design

(Foto: Shutterstock)

Einfache Geometrie gehört zum Handwerkszeug eines guten Designers, behauptet Matej Latin. An einem einfachen Beispiel erklärt der UI- und UX-Designer, wie das funktioniert.

Weil automatisches Ausrichten manchmal einfach nicht funktioniert.

Mir ist aufgefallen, dass ich ziemlich häufig Geometrie verwende, wenn ich Bedienoberflächen gestalte - also habe ich beschlossen, ein einfaches Beispiel zu teilen, an dem ich vor ein paar Tagen gearbeitet habe. Die Ausrichtung von Eingabeelementen in Photoshop ist einfach, da sie mit voreingestellten Ausrichtungsoptionen daherkommt. Und für 95 Prozent der Anwender ist das völlig ausreichend. Was kann man aber bei den 5 Prozent der Beispiele tun, bei denen man diese Hilfsmittel nicht verwenden kann? Tja, das kommt ganz darauf an, woran man arbeitet. Lass uns ein spezifisches Beispiel anschauen.

Ausrichtung eines Icons im Zentrum eines ...

Viertelkreises. Das war das neueste Beispiel, bei dem ich Geometrie verwenden musste, um ein pixelgenaues UI-Element zu erhalten.

Ich arbeitete an einem Bestätigungsfenster, das sich in einem Kreis befand. Stimmt, bei Wondermags probieren wir alle Arten von coolen Sachen aus. Hier wollten wir den Nutzer fragen, ob er eine Aktion wirklich ausführen möchte. Wir erklären ihm, was passieren wird, und bieten ihm Optionen zum Bestätigen oder Abbrechen.

Hier ist eine kleine Skizze des Fensters:

geometrie-skizze
Die grobe Skizze zeigt, wie in den unteren Viertelkreisen die Buttons für Bestätigen und Abbrechen positioniert werden sollen.

Wir versuchen hier das Problem zu lösen, zwei Icons vernünftig zur Mitte des jeweiligen Buttons auf der unteren Hälfte auszurichten (bestätigen oder abbrechen). Wenn man die Funktion zum vertikal und horizontal zentrierten Ausrichten von Photoshop verwendet, kommt das hier dabei raus:

geometrie-fail
Nach der Positionierung mit Photoshops Bordmitteln sitzen die Buttons offensichtlich nicht korrekt im Zentrum der Viertelkreise.

Das sieht nicht richtig und gelinde gesagt sehr merkwürdig aus. Photoshop positioniert es so, weil es das Element wie ein Rechteck behandelt, und nicht wie einen Viertelkreis – für Photoshop macht das keinen Unterschied.

geometrie-photoshop-fail
Die gepunktete Linie zeigt das Rechteck, das Photoshop als Grundlage für die vermeintlich zentrierte Positionierung nimmt.

Die Viereckfläche als Antwort

Ich habe überlegt, was der einfachste und genaueste Weg wäre, es exakt zum wirklichen Zentrum zu positionieren. Und hier kommt die Geometrie ins Spiel. Ich habe herausgefunden, dass der Schlüssel die quadratische Fläche innerhalb des Viertelkreises sein könnte. Alles, was ich tun musste, war, die quadratische Fläche davon zu ermitteln und ein Rechteck mit der gleichen Fläche zu zeichnen, das man als Hilfe verwendet. Aber vorher musste ich herausfinden, welche Abmessungen ich verwenden musste.

geometrie-square-area
Die gestreifte Fläche ist die, um die es in den folgenden Berechnungen geht.

Die Formel, um die Quadratfläche eines Kreises zu ermitteln, lautet A=π*r^2. Aber in meinem Fall nutzte ich nur ein Viertel des Kreises. Also lautete meine Formel:

A = π * r^2 / 4

π ist ein Standardwert mit 3,1416 und r ist der Radius, der in meinem Fall 145 Pixel beträgt, also die halbe Breite des Kreises.

Die quadratische Fläche innerhalb des Rechtecks, die ich zeichnen musste, besteht demnach aus 16.513 Pixeln.

Aber die Quadratflächen-Info half mir nicht viel weiter. Ich kann in Photoshop kein Rechteck zeichnen, indem ich seine Quadratfläche angebe. Was ich brauche, ist die Breite des Rechtecks. Um sie zu erhalten, musste ich einfach nur die Quadratwurzel zu meiner Formel hinzufügen.

A = √(π * r^2 / 4)

Das Endergebnis lautet 128,5 und eine Menge Dezimalstellen. Jetzt konnte ich auf meinem Viertelkreis ein Quadrat mit einer Breite von 128 Pixeln zeichnen und es an der oberen linken Ecke ausrichten.

geometrie-right-square-area
Das errechnete Rechteck hat nun die gleiche Quadratfläche wie der Viertelkreis.

Ich richtete das Icon horizontal und vertikal zentriert zum Hilfsrechteck auf meinem Viertelkreis aus.

geometrie-right-center
Das Kreuz zeigt das Zentrum des Hilfsvierecks - hier sollten unsere Buttons positioniert werden.

Ich führte den selben Prozess für den anderen Button aus und das war's. Pixelgenaue Positionierung, pixelgenaues User-Interface-Design.

geometrie-perfect
Nimmt man das errechnete Rechteck zugrunde, wirken die Buttons perfekt zentriert.

Hier ist der Vergleich von vorher und nachher:

geometrie_im_ui_design_richtig_falsch
Vorher und Nachher: falsch und richtig.

Fazit

Ich möchte gern zwei Hauptaspekte dieses Artikel herausheben. Einer ist, dass Geometrie und Mathematik einem im Allgemeinen eine Menge Hilfe bei pixelgenauem User-Interface- und Web-Design leisten. Man muss nur den richtigen Dreh finden.

Der andere ist: Wenn du etwas tust, dann mach es richtig. Wenn du ein Interface gestalten musst, dann strebe nach Pixelgenauigkeit oder lass es bleiben. Das unterscheidet durchschnittliche Interface-Designer von den besten. Investiere ein paar Überstunden dafür, mehr als nötig, wenn du es kannst.

Try, fail, think, learn.

Kennt jemand andere Methoden um das zu erreichen? Verwendet ihr auch Geometrie und Mathematik beim UI- oder Webdesign?

Schreibt uns eure Meinung in die Kommentare!

Dieser Artikel erschien zuerst auf medium.com.

Bitte beachte unsere Community-Richtlinien

14 Reaktionen
GottZ

Math.sqrt(Math.PI * Math.pow(100, 2) / 4) => 88.6226925452758

das ist ein prozent wert.

/me flies away

Petra

Rechnerei schön und gut, aber die „mathematisch“ exakte Mitte entspricht nicht in jedem Fall der doch wohl angestrebten „optischen“ (gestalterisch optimalen) Mitte. Bin da ganz bei Scorch. Gestaltung ist unbedingt mehr als nur Rechnerei.

Robert

Mathematische Grundlagen können bei der Arbeit im Grafik Design helfen. Sie sollten allerdings das koginitive Empfinden lediglich ergänzen. Da geht mit der Artikel zu sehr ab. Die ganze Rechnerei wird zum Kostenfaktor Zeit, wenn das Endresultat immer noch nicht optimiert aussieht. Die gewählten Icons würden ich ebenfalls überdenken.

Marc

Die Frage bleibt ja immer, ob die errechnete Mitte überhaupt der harmonischste Ort ist. Usw. Usw.
Gerade bei Lösch-Bestätigungen würde ich nebenbei von Haken+Grün und X+Rot abraten. Das erfordert ggf. Denkarbeit. Eindeutiger wären zwei Schaltflächen mit Löschen + Rot und Behalten + Grau.

Webzeugmacher

Einmal Kreis skalieren (goldener Schnitt) und zwei Winkelhalbierende einzeichnen. Selbst wenn ich Mathe mag: warum rechnen, wenn es magnetische Hilfslinien gibt ;)

http://imageshack.com/a/img910/8713/WcGpLQ.jpg

Markus

Vielen Dank für diese interessante und abwechslungsreiche Betrachtung. Allgemein finde ich, dass analytische, ja teilweise auch wissenschaftliche, Herangehensweisen im Online Business teilweise noch zu kurz kommen.

James Braun

Die Beschriftung sitzt noch immer zu tief. Wahrscheinlich würde ich sogar noch ein Stück näher zusammenrücken.

Hassel fatz

war auch genau mein Gedanke. Das Blickfeld ist irgendwie noch nicht angenehm fürs Auge. Naja manche arbeiten Solche details nach ihrem Gefühl und andre machens eben mit dem Taschenrechner - beim gefühl bleibt halt eine individuelle Note.

Suba

find ich auch zu tief. Das mathematische Gestalten und das kognitive Empfinden gehen wohl auseinander. Ich denke da an an die mathematische Mitte versus "optische Mitte" oder an Farbe/Helligkeit, die je nach Kombinationen dem Betrachter anders erscheinen. Interessant wäre es, ob "Formeln" existieren, die das Menschliche mit einbeziehen. Wie z.B. bei der JPEG-Komprimierung.

Maurus

Ich würde bei diesem Lösungsansatz nicht unbedingt von Richtig und Falsch sprechen - eher von Falsch und 'nicht ganz so falsch'. Mit der Quadratur des Kreises einen passenden Mittelpunkt zu finden ist nicht viel Besser als von Auge auf der Winkelhalbierenden des Viertelkreises zu positionieren (ja, Geometrie kommt auch da ins Spiel;-).
Ein geometrischer Ansatz wäre noch die Ermittlung des Schwerpuntkes des Viertelkreises (http://de.wikipedia.org/wiki/Geometrischer_Schwerpunkt#Kreisausschnitt). Ob dabei aber wirklich ein design-technisch besserer Punkt ermittelt werden kann scheint mir bei dem Aufwand sehr fraglich.

Carsten

Bei Sketch wäre das mit einem Tastendruck erledigt. Vielen Dank für die Bestätigung.

Jos

Also wenn das jetzt hier 'Designer' lesen und die Erkenntnis kommt: "Mensch, das ist ja eine interessante Herangehensweise", dann rate ich dringend den Beruf zu wechseln!
Es sollte die Kernkompetenz eines jeden Designers sein, Produkte, Interfaces, etc. in eine Definition zerlegen zu können!

Jörn

Ich verwende primär mein Auge und mein Gespür wenn es um die Positionierung geht. Geometrie und Mathematik können aber für das ungeübte Auge eine gute Hilfe sein.

David Hellmann

Word. Wer das nicht sieht was oben in dem Beispiel bzw. wem das nicht komisch vorkommt der hat nicht das Auge dafür. Sicher kann man das alles lernen und sogar mathematisch berechnen… Aber ich weiß ja nicht :)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst