Bremer Design Insider №2

Moini Leser:in,
Wir arbeiten noch an der Regelmäßigkeit, aber hier ist er, der bremen.design Newsletter Ausgabe Zwei! Und um dem Rechnung zu tragen, zweitveröffentlichen wir einen Text aus Jonas ihm seinem Blog, der zurzeit nicht mehr online ist, also richtig exklusiv! Zwei entzückende Fundsachen warten unten auf euch und los geht's mit einem Event, dessen Location wir zweimal ändern mussten, aber nun freuen wir uns umso mehr auf:

DesignTreff №31

Am 11. April verwöhnt uns mal wieder ein Donnerstag mit der exklusiven Möglichkeit, über Design, Gestaltung und alles drumrum und indrin mit bekannten und unbekannten, aber in jedem Fall spannenden Menschen zu plaudern.

Langsam wurden schon wirklich viele Kneipen mit unserer Anwesenheit geehrt, aber wir haben noch eine gefunden, in der wir noch nie waren: Das Urlaub. Wer selbigen nötig hat, findet beim DesignTreff vielleicht auch jemanden zum mitnehmen, denn es kommen immer wieder neue coole Leute und wir freuen uns über jedes neue Gesicht. Ja, sogar über deins!

Wo und wann?
Donnerstag, 11. April ab 20 Uhr
Urlaub
Bermuda Dreieck
Fehrfeld 28
28203 Bremen
Meld dich gerne noch auf bremen.design an!

Ein wenig Nerd-Talk über abgerundete Ecken

Jetzt folgt ein etwas älterer Text aus Jonas Blog, der zurzeit leider aufgrund von, hust, Umbauarbeiten auf seiner Website nicht mehr online ist. Wir haben ihn noch mal ein wenig aufgefrischt und recyclen ihn hier jetzt mal ganz schamlos.

"Round Rectangles are everywhere" sagte Steve Jobs der Überlieferung nach im Jahr 1981, und überredete den Programmier Bill Atkinson dazu, das Betriebssystem des allerersten Macintoshs um die Funktion zu erweitern, abgerundete Rechtecke zu zeichnen, obwohl Atkinson das erst für unmöglich hielt. Und so hatte schon die (fast) erste grafische Benutzeroberfläche eines Computer-Betriebssystems abgerundete Rechtecke.

Seit dem gehören sie fest zu unserem Bild von grafischen Benutzeroberflächen. Was wäre der Homescreen des iPhones ohne abgerundete Rechtecke? Woran würden wir Knöpfe auf dem Bildschirm erkennen? Wo wären 90% der Interface-Entwürfe bei Dribbble? Abgerundete Rechtecke sind ubiquitär. Aber warum, was bringen sie uns, was macht sie so attraktiv für Gestalter*innen und warum kommen wir nicht mehr ohne sie aus?

Zuerst einmal sind sie zurzeit einfach im Trend. Modernes UI-Design soll oft weich und freundlich wirken, da passen abgerundete Ecken natürlich prima rein, und darum sehen wir sie in den meisten Programmen, auf vielen Webseiten und halt insgesamt in vielen Interfaces.

Eigenschaften

Aber warum wirken sie weich und freundlich? Unser Gehirn verbindet mit runderen Formen automatisch auch weichere Eigenschaften wie freundlich oder vertrauenswürdig, weil es diese Formen aus der Natur und unserer Umgebung entlehnt: Weiche Sachen sind oft Rund, um spitze Gegenstände macht man lieber einen großen runden Bogen.

Das geht so weit, dass wir diese Charakteristika auf Namen und Klänge ausweiten. Eine Katharina ist für unser Gehirn ein geradliniger und strengerer Mensch als eine Barbara, und auch auf erwartete Körperformern und Gesichtszüge hat das Auswirkungen. Das Phänomen hat sogar einen Namen: Bouba/Kiki-Effekt. So schreiben die meisten Personen dem Wort Kiki eine eckige Form zu, während Bouba mit einer runden Form verbunden wird. Und so wirkt dann ein Design mit vielen Kanten sehr nüchtern und direkt, eines mit runden Ecken dagegen deutlich einladender und freundlicher. Und die neue Technikwelt möchte natürlich möglichst freundlich und zugänglich wirken, was eine Erklärung ist für die recht abgerundeten Erscheinungen von Apps, Websites und Co.

Apropos zugänglich: In einem normalen Rechteck sind Inhalte für unser Auge schwer zu erreichen, weil die Ecken wie Pfeile vom Inhalt weg zeigen. Unser Auge wird von den weglaufenden Linien irritiert und kann sich schlechter auf das Innere konzentrieren. Und dabei ist Content doch König! Runden wir die Kanten unseres Rechtecks hingegen ab, sorgen die Kurven dafür, dass wir die Linien des Kastens als eine Lange wahrnehmen, die den Inhalt einkreist.

Auch in einer anderen Hinsicht ist dieser Effekt nützlich: Die durch die Kurve geschlossene Form eines Kasten grenzt ihn automatisch gegen die ähnlich verlaufenden Kanten anderer Kästen ab. Dieser stärkere Kontrast ist vor allem bei Layouts mit mehreren Rechtecken unter- und übereinander hilfreich, also beispielsweise bei mehreren Karten nebeneinander oder Buttons untereinander, die vom Auge dann einfacher unterschieden werden können.

Das kann man sich für Listen oder verschiedene Optionen sehr gut zunutze machen, was ja auch überall passiert. Karten mit abgerundeten Ecken sind im Web oder in Apps ein sehr beliebtes Mittel, um Inhalte klar voneinander abzugrenzen und dennoch zu gruppieren.

So verhält sich das auch bei mehreren Buttons. Bei Buttons ist aber nicht nur der Kontrast zu anderen Buttons entscheidend, sondern auch ihre Erkennbarkeit als Buttons. Und hier spielt die Gewohnheit eine große Rolle: Eine Zeile Text in einem Kasten mit runden Ecken? Das muss ein Button sein! Da arbeitet unser Hirn recht effizient. Und es erhöht die Lesbarkeit eines Interfaces ungemein, wenn man Buttons als Buttons erkennt. Das war jetzt sehr oft das Wort Button, uff.

Umsetzung

In den gängigen Design Programmen wie Figma, Sketch oder Adobe XD kann man Rechtecken easy abgerundete Ecken verpassen, das dürfte jeder hinbekommen. In Photoshop geht das mit dem Formen-Tool auch, aber wer zum Henker designt Interfaces in Photoshop? Und wenn man es direkt im Web umsetzen will, gibt es seit CSS3 die CSS-Eigenschaft Border-Radius. Vorher musste man das mit an den Ecken positionierten PNGs lösen. Wow, wir leben in guten Zeiten.

Dennoch gibt es auch mit modernen Design-Techniken ein paar Fallstricke:

Erstens: Viel zu große runde Ecken! Die nehmen viel Platz weg und oft kommen dann die Kurven dem Inhalt in die Quere, und alles sieht irgendwie gequetscht aus. So große Kurven ziehen auch unnötig die Aufmerksamkeit auf sich, und es geht in so einem Layout ja meistens um den Inhalt, und nicht um die krassesten Kurven. Wenn man in seinem Design entscheidet, die Ecken der Kästen abzurunden, dann sollte man sich genau Gedanken machen, welche Größe die Kurve, also welchen Radius sie hat. Einfach den Regler auf irgendeinen Wert zu ziehen ist ja auch nicht designen, sondern halt Regler auf irgendwelche Werte ziehen.

Im Idealfall nutzt das eigene Layout ja eh ein Raster-System, an dem man den Radius ausrichten könnte. Wo mit wir beim zweiten Punkt wären: Den Abständen! Wie gesagt, ist eine Kurve zu groß kommt sie gerne mal dem Inhalt in die Quere, das sie ja, verglichen mit einer normalen Ecke, den inneren Platz zum Inhalt hin verkleinert. Folgt man seinem Rastersystem mit Sorgfalt, richtet man die abstände ja eh danach aus und achtet darauf, dass sich der Inhalt bestenfalls optisch nicht innerhalb der runden Ecke befindet, sondern sich beispielsweise horizontal und vertikal an dem Anfand dieser ausrichtet.

Was man auch mit Sorgfalt machen sollte, ist abgerundete Rechtecke innerhalb von anderen abgerundeten Rechtecken zu platzieren. Hier muss der Radius der inneren Kurven kleiner sein als der der Äußeren, damit der Abstand der Kurven konstant bleibt und die Kurven parallel zu einander verlaufen.

Smooth Corners

Ein Problem mit abgerundeten Ecken ist, dass sie, huch, oft nicht wirklich rund aussehen. Bei größeren Radien und nicht ganz so hoch aufgelösten Displays kann die Rundung eines Rechtecks, besonders an den Punkten, wo es zur Geraden übergeht, sehr hakelig aussehen. Schuld daran ist wieder einmal, trommelwirbel, unser Gehirn. Auf den alten Schlawiner wirken solche exakten Kreis-zu-Gerade-Übergange nämlich irgendwie unnatürlich.

Aber wie lässt man sie natürlicher wirken? Wer diesen Artikel gerade auf einem Apple-Gerät liest, kann sich das jetzt selber anschauen: in iOS und macOS, aber auch bei der Hardware auf der diese Systeme laufen, kommen keine exakten abgerundeten Ecken zum Einsatz.

Bei einer handelsüblichen abgerundeten Ecke haben wir die Gerade, die einen Radius von 0 hat, weil sie halt eine Gerade ist, und den Viertelkreis, der mit seinem Radius von, sagen wir einfach mal 7 Pixel, direkt an die Gerade angesetzt wird. Da besteht also ein harter Übergang zwischen dem Radius 0 der Gerade und dem Radius 7px des Kreises.

Die Kurven an und im iPhone haben hingegen einen weichen Übergang zwischen dem 0-Radius, und dem maximalen Radius der Kurve.

Die Abrundung wird also langsam stärker, bis sie bei 7px ist, um dann wieder abzuflachen bis der Radius wieder bei null ist. Da liegt kein perfekter Kreis an der Geraden an, sondern eine weiche Kurve. Als hätte man die normale Rundung mit Schleifpapier geglättet.

Kritik

Bei all der Aufgeräumtheit, Weichheit, Übersichtlichkeit und so weiter, haben aber auch abgerundete Ecken ihre, sorry, Ecken und Kanten:

Wie schon erwähnt haben vor allem extrem viele Entwürfe für Smartphone Apps bei Dribbble, Behance oder Instagram häufig abgerundete Rechtecke, bei den vielen Mockups nebeneinander wirken die dadurch schnell austauschbar. Nicht jedes Interface, in dem alles schön abgerundet ist, und dass dann noch eine kleine Welle oder einen Farbverlauf hat, ist originell.

Im Gegenteil, mit dem Neobrutalismus und anderen Grafikdesign-Trends gibt es eine eindeutige Gegenbewegung zur glatten, runden Dribbble-Optik. Es wird auf scharfe Kanten gesetzt und nach anderen Lösungen für gestalterische Herausforderungen gesucht, wie comicartige dicke, schwarze Linien, Schatteneffekte oder starke Typografie.

Kurven sind eben ein Stilmittel, und wie alle Stilmittel sollten sie in Maßen eingesetzt werden. Listen oder Blöcke können auch ohne Rundungen übersichtlich und hübsch sein, es muss halt zum Charakter des UIs passen. Überall Abgerundete Ecken auf der Website eines Messerherstellers? Ich könnte mir passenderes vorstellen.

Fazit

Aber dennoch: Abgerundete Ecken sind ein wichtiges Tool im Werkzeugkasten jedes Gestaltenden. Nicht nur im UI-Design, auch im klassischen Industrie-Design, im Print, überall begegnet man den Dingern. Zu recht, sie können Inhalt übersichtlicher machen, Kästen ihre optische Dominanz nehmen und ein Design freundlicher und weniger technisch aussehen lassen.

Werden sie behutsam, mit Verstand und einem Auge für die Details eingesetzt, sind sie ein spannendes und praktisches Stilmittel. Und es ist wie bei allen Design-Stilmitteln: Man sollte sich damit auseinandersetzen, warum etwas an genau dieser Stelle Sinn ergibt oder eben nicht.

Fundsachen

Spannende Sachen, die uns in letzter Zeit aufgefallen sind.

№1 In einem Blog-Eintrag erläutert Marcel Wichmann die Verschmelzung von Design und Entwicklung im Design Engineer und warum diese programmierenden Designer*innen besonders im Frontend Design richtig coole Leute sein können.

№2 Zufällig gerade ein Urlaub in Dessau geplant? Dann übernachte doch im Bauhaus. Gar nicht teuer und angenehm entschleunigt, so ganz ohne WLAN, Fernseher oder eigenes Bad.

Und wieder eine Newsletter rum. Für nächsten Monat gibts es bereits exciting Pläne, aber ungelegte Eier, ihr wisst schon, die sind noch zu roh um mit ihnen zu werfen. Bis dahin sehen wir uns auf bremen.design oder beim nächsten DesignTreff.

Viel Spaß beim Designen, Gestalten und cool drauf sein!