Advertisement
  1. Web Design
  2. UI Design

Schneller Tipp: Abgerundete Ecken richtig gemacht

Scroll to top
Read Time: 2 min

German (Deutsch) translation by Jaques Donnez (you can also view the original English article)

Für viele von Ihnen wird dies ein Kinderspiel sein, aber ich sehe es so oft, dass ich dachte, es lohnt sich, darauf einzugehen. Wir nennen dieses Problem falsch verschachtelte Ecken; ein kleines Detail, das ein ansonsten brillantes Design ruinieren kann!

Wer ist pedantisch?

Falsch verschachtelte Ecken finden sich in Designs aller Art, aber ich sehe sie am häufigsten in Symbolen und Schnittstellen. Wenn Sie immer noch keine Ahnung haben, wovon ich spreche, schauen Sie sich diese beiden Bilder eines Leuchtkastenmodells an - welches lässt mich meine Zähne knirschen?

Ja, es ist die zweite, bei der ich den Schlaf verliere.

Einfach ausgedrückt; Wenn zwei abgerundete Ecken parallel verlaufen, sollte die äußere Ecke einen größeren Radius haben, der um die innere Ecke "fließt".

Versuchen Sie, einen zentralen Punkt, den "Ursprung", zu visualisieren, um den sich Ihr erster Radius krümmt, ohne auf maThemetische Formeln eingehen zu wollen (hat jemand Kuchen gesagt?). Verwenden Sie nun denselben Punkt, um Ihre äußere Ecke abzurunden:

Bilden Sie Ihre Kurven auf diese Weise und Sie werden feststellen, dass das Endergebnis für das Auge viel einfacher ist.

Rohrbiegen

Stellen Sie sich den Effekt vor, den Sie erzeugen, als würden Sie ein Rohr biegen:

Handwerker, der ein Rohr biegt

Du machst die Mathematik

In HTML/CSS erstellte Schnittstellen können ebenso an falsch verschachtelten Ecken schuld sein. Denken Sie an Formularelemente in einem Feldsatz oder an Schaltflächen in einem Warnfeld.

Es ist jedoch nicht schwer, absolut genau damit umzugehen. Der Unterschied im Randradius Ihrer beiden Objekte sollte gleich dem Abstand zwischen ihnen sein. Einfach!

Und das kann auch flexibel sein, zum Beispiel:

Perfekt gebogenes Rohr (siehe Demo).

Ausnahmen

Wie bei allen Fragen im Design gibt es keine konkreten Regeln - Sie werden immer Ausnahmen finden. Es ist eine Frage des Instinkts.

Nehmen Sie zum Beispiel diese Schnittstelle; Der Spalt zwischen dem Kontaktknopf und dem Dropdown sieht nicht wie ein verbogenes Rohr aus. Davon abgesehen haben alle Ecken in dieser Benutzeroberfläche einen einheitlichen Radius, sodass nichts fehl am Platz aussieht:

Dropdown-Menü-Navigation - UI/UX mit CSS3 von Joathan Moreira

Leute, die es richtig machen

Ich denke, Sie haben wahrscheinlich genug davon, mir zuzuhören und sich über etwas so Triviales zu wundern. Anstatt auf Beispiele aufmerksam zu machen, bei denen ich es als unangenehm empfunden habe, werfen wir jetzt einen Blick auf einige inspirierende Arbeiten von Dribbblern, die es richtig machen!

Snooker Table Symbol von JJ-Maxer
Postale Icon App von Aditya Nugraha Putra
Symbol von chnvan
Gefundene Benutzeroberfläche von Martin Karasek
Veggie Meals App Symbol von Max Rudberg
Upload-Button von Fares Farhan
BPM Lock Button (ON) von Paul Flavius Nechita
Anmeldebutton von Brad Haynes
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.