Das könnte dich auch interessieren

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

Design

Die 7 goldenen Regeln des UI-Designs

    Die 7 goldenen Regeln des UI-Designs

Erik Kennedy ist UX-Designer – doch er hat schnell gemerkt, dass das beste User-Experience-Design ohne eine gute Bedienoberfläche wertlos ist. Also hat er sich daran gemacht, die goldenen Regeln des UI-Designs zu meistern. Seine Erfahrungen teilt er in diesem Gastartikel.

Dieser Artikel von Erik Kennedy ist zuerst auf Medium erschienen (Teil 1, Teil 2). Übersetzung: Anja Braun.

UI-Design: Digitale Ästhetik für Einsteiger

Okay, das Wichtigste zuerst: Diese Anleitung ist nicht für jeden gedacht, sondern richtet sich vor allem an:

  • Entwickler, die in der Lage sein wollen, notfalls ihr eigenes gutaussehendes User-Interface zu entwerfen.
  • UX-Designer, die wollen, dass ihr Portfolio besser aussieht als eine Pentagon-Powerpoint-Präsentation. Oder UX-Designer, die wissen, dass sie ein großartiges UX mit einer schönen Bedienoberfläche (UI) besser verkaufen können.

Wenn du zur Kunsthochschule gegangen bist oder dich selbst als Designer von Bedienoberflächen verstehst, wirst du diese Einführung vermutlich als eine Kombination aus a) langweilig, b) falsch und c) irritierend empfinden. Das ist in Ordnung. All deine Kritikpunkte sind berechtigt. Schließ den Tab und surf weiter.

Lass mich kurz erklären, was du in dieser Einführung findest. Anfangs war ich ein UX-Designer mit keinerlei Kenntnissen von Bedienoberflächen, aber ich habe schnell kapiert, dass es gute Gründe gibt, zu lernen, wie man eine Oberfläche schön gestaltet:

  • Mein Portfolio sah grauenhaft aus und spiegelte nur sehr dürftig meine Arbeiten und Denkprozesse wider.
  • Meine UX-Beratungs-Kunden würden lieber jemanden bezahlen, dessen Kompetenzen mehr umfassen, als nur Kästchen und Pfeile zu zeichnen.
  • Ich will niemals bei einem jungen Startup arbeiten – lieber werde ich Straßenkehrer!

Ich hatte viele Entschuldigungen. Ich habe keine Ahnung von Ästhetik. Ich habe einen technischen Abschluss gemacht – da ist es fast Ehrensache, eine hässliche Oberfläche zu gestalten.

„Dieser Artikel ist keine Theorie. Er ist reine Verwertung.“

Schlussendlich lernte ich die Ästhetik von Apps auf die gleiche Art, wie ich jede andere kreative Sache gelernt habe: durch kühle, knallharte Analyse. Und schamloses Kopieren von allem, was funktioniert. Ich habe zehn Stunden an einer Bedienoberfläche gearbeitet und eine in Rechnung gestellt. Die anderen neun gingen für wildes Herumprobieren drauf, verzweifelt Google und Pinterest nach etwas Verwertbarem durchsuchend. Diese „Regeln“ sind die Lehren dieser Stunden.

Ein Wort an die Nerds: Wenn ich jetzt nur halbwegs gut beim Gestalten von Bedienoberflächen bin, dann nur, weil ich die Dinge analysiert habe – nicht, weil ich mit einem intuitiven Gespür für Schönheit und Balance geboren bin.

Dieser Artikel ist keine Theorie. Er ist reine Verwertung. Du lernst hier nichts über den Goldenen Schnitt. Ich erwähne noch nicht mal die Farblehre. Nur das, was ich durch gewissenhaftes Üben gelernt habe.

Sieh es mal so: Judo hat sich aus Jahrhunderten japanischer Kampfkunst und philosophischen Traditionen entwickelt. Du nimmst Judo-Stunden, und neben den Kampftechniken erfährst du einiges über Energiefluss und Harmonie. Solche Sachen eben.

Krav Maga andererseits wurde von zähen Juden erfunden, die in den 1930er-Jahren in den Straßen der Tschechoslowakei gegen die Nazis kämpften. Es hat keinen künstlerischen Anspruch. In Krav-Maga-Stunden lernst du, wie du jemandem den Bleistift ins Auge stichst und abhaust.

Dies ist das Krav Maga der Bildschirme.

UI-Design: Die 7 goldenen Regeln

Hier sind sie:

  1. Licht kommt vom Himmel
  2. Schwarz-Weiß zuerst
  3. Verdopple deinen Weißraum
  4. Lerne, wie man Text auf Bilder legt
  5. Lass Text auf- und ab-poppen
  6. Verwende gute Schriftarten
  7. Alles nur geklaut

Also lass uns loslegen.

Regel 1: Licht kommt vom Himmel

Schatten geben dem menschlichen Gehirn unersetzliche Hinweise darauf, auf welche Interface-Elemente wir schauen.

Das ist vielleicht die wichtigste, nicht-offensichtliche Gesetzmäßigkeit, die man über UI-Design lernen kann: Licht kommt vom Himmel. Licht kommt so regelmäßig und beständig vom Himmel, dass es wirklich seltsam aussieht, wenn es mal von unten kommt.

UI_Design_Licht_kommt_vom_Himmel
Hui-Buuuuuhhh!

Wenn Licht vom Himmel kommt, dann beleuchtet es die Oberseite der Dinge und wirft Schatten darunter. Die Oberseiten der Elemente sind heller, die Unterseiten dunkler.

Das untere Augenlid des Menschen sieht eigentlich nicht schattig aus, aber leuchte mal mit der Taschenlampe drauf, dann siehst du auf einmal Gespenster.

Das gleiche gilt für die Bedienoberfläche. Genauso wie es Schatten auf allen Unterseiten unserer Gesichtszüge gibt, so findet man sie auch auf den Unterseiten aller UI-Elemente, die es gibt. Unsere Bildschirme sind flach, aber wir haben eine Menge Mühe darauf verwendet, alles darauf dreidimensional wirken zu lassen.

Meine Lieblingsstelle auf dieser Abbildung ist der Anstups-Finger unten rechts. (Grafik: Erik D. Kennedy)
Meine Lieblingsstelle auf dieser Abbildung ist der Anstups-Finger unten rechts. (Grafik: Erik D. Kennedy)

Zum Beispiel Schaltflächen. Sogar bei diesen relativ „flachen“ Buttons findet man noch eine Handvoll lichtbezogene Details:

  1. Die nicht gedrückte Schaltfäche (oben) hat eine dunkle untere Ecke. Die Sonne scheint hier nicht hin.
  2. Die nicht gedrückte Schaltfläche ist oben ein wenig heller als unten. Das kommt daher, dass hier eine leicht gewölbte Oberfläche imitiert wird. Genauso wie du einen Spiegel, den du vor dir hältst, ankippen musst, um die Sonne darin zu sehen, reflektieren Oberflächen, die nach oben geneigt sind, ein bisschen mehr Sonnenlicht.
  3. Die nicht gedrückte Schaltfläche wirft einen leichten Schatten – vielleicht besser zu erkennen in der Vergrößerung.
  4. Die gedrückte Schaltfläche, die immer noch unten dunkler als oben ist, ist insgesamt dunkler – das kommt daher, dass sie sich auf einer Ebene mit dem Bildschirm befindet und die Sonne sie nicht so leicht treffen kann. Man könnte darüber streiten, ob alle gedrückten Knöpfe in der realen Welt auch dunkler sind, weil unsere Hände das Licht verdecken.

Das war nur eine Schaltfläche, und dennoch sind dort vier kleine Lichteffekte zu sehen. Das ist meine Lektion. Wir übertragen das jetzt auf alles andere.

iOS6 ist ein bisschen aus der Mode gekommen, aber es ist ein gutes Studienobjekt in Sachen Licht. (Grafik: Erik D. Kennedy)
iOS6 ist ein bisschen aus der Mode gekommen, aber es ist ein gutes Studienobjekt in Sachen Licht. (Grafik: Erik D. Kennedy)

Hier sieht man ein paar iOS-Einstellungen - „Nicht stören“ und „Benachrichtigungen“. Keine große Sache, oder? Aber sieh mal, wie viele Lichteffekte es drumherum gibt.

  • Der obere Rand des eingebauten Kontrollfeldes wirft einen leichten Schatten.
  • Die Slider-Schiene ist ein bisschen vertieft.
  • Die Slider-Schiene ist konkav und der Boden reflektiert mehr Licht
  • Die Icons sind ein wenig erhaben. Siehst du den hellen Rand am oberen Ende? Er repräsentiert eine Oberfläche, die rechtwinklig zur Lichtquelle ist, und daher eine Menge Licht in deine Augen abstrahlt.
  • Die Trennlinie ist schattiert, wo sie von der Sonne abgewendet ist, und umgekehrt.
Eine Vergrößerung der Trennlinie. Aus einem alten Hubster-Konzept von mir. (Grafik: Erik D. Kennedy)
Eine Vergrößerung der Trennlinie. Aus einem alten Hubster-Konzept von mir. (Grafik: Erik D. Kennedy)

Elemente, die immer vertieft sind:

  • Texteingabefelder
  • gedrückte Schaltflächen
  • Slider-Schienen
  • Radio-Buttons (nicht ausgewählt)
  • Checkboxen

Elemente, die immer erhaben sind:

  • Schaltflächen (ungedrückt)
  • Slider-Knöpfe
  • Dropdown-Schaltfächen
  • Karten
  • Der Knopf eines ausgewählten Radio-Buttons
  • Popups

Jetzt, da du das weißt, wird es dir überall auffallen. Gern geschehen.

Warte mal, was ist mit Flat Design?

iOS7 verursachte mit seinem „Flat Design“ große Aufregung in der Entwickler-Community. Flat bedeutet hier, dass es buchstäblich flach ist. Es gibt keine vorgetäuschten Wölbungen oder Vertiefungen – nur Linien, Formen und Farbflächen.

Das Interface im Flat-Design hat keinerlei 3D-Anmutungen – nur Linien, Formen und Farbflächen. (Grafik: Erik D. Kennedy)
Das Interface im Flat-Design hat keinerlei 3D-Anmutungen – nur Linien, Formen und Farbflächen. (Grafik: Erik D. Kennedy)

Wie wir alle mag ich es clean und simpel, aber ich glaube nicht, dass das ein langanhaltender Trend ist. Die subtile 3D-Simulation in unseren Bedienelementen wirkt zu natürlich, als dass man sie völlig aufgeben sollte.

Wahrscheinlicher ist es, dass wir in Zukunft semi-flache Bedienoberflächen haben werden (ich rate dir, dich im Design nach diesem Prinzip fit zu machen). Ich werde mal vorausgehen und es „Flatty Design“ nennen. Immer noch clean, immer noch simpel, aber es wird ein paar Schatten und Hinweise darauf geben, wo man tippen/schieben oder klicken kann.

OS X Yosemite – Flatty, nicht Flat. (Screenshot: Erik D. Kennedy)
OS X Yosemite – Flatty, nicht Flat. (Screenshot: Erik D. Kennedy)

Während ich das hier schreibe, verpasst Google seinen Produkten gerade eine „Material Design“-Sprache. Es ist eine einheitliche visuelle Sprache, die – in ihrem Grundanspruch – versucht, die reale Welt zu imitieren.

Googles Material-Design-Guide illustriert für jedes Element, wie sich mit wenig Aufwand räumiche Tiefe vortäuschen lässt. (Grafik: <a title="Google Material Design Guide" href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#objects-in-3d-space-elevation" target="_blank">Google</a>)
Googles Material-Design-Guide illustriert für jedes Element, wie sich mit wenig Aufwand räumliche Tiefe vortäuschen lässt. (Grafik: Google)

Eine Illustration aus dem Material-Design-Guide zeigt, wie man verschiedene Tiefen mit verschiedenen Schattierungen erzeugt. Das ist der Trend, den ich kommen sehe: subtile Reale-Welt-Andeutungen zur Übermittlung von Informationen. Stichwort: Subtil.

Natürlich imitiert es die reale Welt, aber es ist auch nicht das Web von 2006. Es gibt keine Texturen, keine Verläufe, keine Reflexe. Flatty ist meiner Meinung nach die Zukunft. Flat? Pfft, das war gestern.

Dieses Flat-Design sieht aus heutiger Sicht echt heiß aus! (Screenshot: Erik D. Kennedy)
Dieses Flat-Design sieht aus heutiger Sicht echt heiß aus! (Screenshot: Erik D. Kennedy)

Regel 2: Schwarz-Weiß zuerst

In Graustufen zu gestalten, bevor man Farben hinzufügt, vereinfacht die komplexesten Teile des Visual Designs – und zwingt dich dazu, dich auf das Verteilen und Layouten der Elemente zu konzentrieren.

UX-Designer sind heutzutage voll auf der „Mobile-First“-Schiene. Das heißt, man macht sich Gedanken darüber, wie Seiten und Interaktionen auf dem Handy funktionieren, bevor man sie sich auf einem Zillionen-Pixel-Retina-Bildschirm vorstellt.

Diese Art Einschränkung ist gut. Sie reinigt das Denken. Man fängt mit dem schwierigeren Problem an (benutzbare App auf einem winzig kleinen Bildschirm), dann überträgt man diese Lösung auf das kleinere Problem (benutzbare App auf einem großen Bildschirm).

Hier kommt nun eine andere, ähnliche Beschränkung: Gestalte zuerst in Schwarz und Weiß. Fang mit der schwierigen Aufgabe an, die App schön und rundum benutzbar zu machen, aber ohne die Hilfe von Farbe. Füge Farben erst am Ende hinzu, und auch dann nur zweckgebunden.

Harald Thorleifssons Graustufen-Wireframes sehen so gut aus wie fertige Seiten gewöhnlicher Designer.  (Screenshot: www.ueno.co)
Harald Thorleifssons Graustufen-Wireframes sehen so gut aus wie fertige Seiten gewöhnlicher Designer. (Screenshot: www.ueno.co)

Es ist ein zuverlässiger und einfacher Weg, Apps clean und simpel zu halten. Zu viele Farben zu verwenden, kann leicht dazu führen, solch ein Design zu vermasseln. Schwarz-Weiß zwingt dich dazu, dich zuerst auf Dinge wie Abstände, Größen und Layout zu konzentrieren. Und das ist die Hauptsache bei cleanem und simplem Design.

Edle Graustufen bei Uber und Squarespace. (Screenshots: Uber und Squarespace)
Edle Graustufen bei Uber und Squarespace. (Screenshots: Uber und Squarespace)

Es gibt ein paar Fälle, in denen Schwarzweiß nicht so sinnvoll ist. Designs, die eine starke, spezifische Haltung haben – sportlich, schrill, comicartig etc. – brauchen einen Designer, der sehr gut mit Farben umgehen kann. Aber die meisten Apps haben keine spezielle Haltung außer clean und simpel. Diejenigen, die eine haben, sind zugegebenermaßen sehr viel schwieriger zu gestalten.

Schrille und lebhafte Designs von Julien Renvoye (links) und Cosmin Capitanu (rechts). Schwieriger als es aussieht.
Schrille und lebhafte Designs von Julien Renvoye (links) und Cosmin Capitanu (rechts). Schwieriger als es aussieht. (Screenshots: Julien Renvoye und Cosmin Capitanu)

Allen anderen bleibt Schwarz-Weiß.

Wie man Farbe hinzufügt

Am einfachsten ist es, nur eine Farbe hinzuzufügen.

Die Website von Uber verwendet auf der Startseite neben Schwarz-Weiß nur einen Farbe, (Screenshot: Uber)
Feines UI-Design: Die Website von Uber verwendet auf der Startseite neben Schwarz-Weiß nur einen Farbe.

Das zieht den Blick einfach und sehr effektiv an. Du kannst auch einen Schritt weitergehen: Graustufen + zwei Farben oder Graustufen + viele Farben eines Farbtons.

Farbcodes im Einsatz – halt, stopp: Was ist ein Farbton?

Das Web spricht über Farben im Großen und Ganzen in RGB Hex-Zahlen. Ich empfehle, das zu ignorieren. RGB ist kein gutes Framework, um Designs einzufärben. Viel besser geeignet ist HSB (was fast identisch mit HSV oder HSL ist).

HSB ist besser als RGB, weil es zu unserer natürlichen Auffassung von Farben passt, und man kann voraussagen, wie eine Änderung der HSB-Werte sich auf die Farbe, die man gerade sieht, auswirken wird. Wenn das Neuland für dich ist – hier gibt es eine gute HSB-Farbfibel.

Mono-Farbton-Gold-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Gold-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Blau-Schema von Smashing Magazine (Grafik: Smashing Magazine)
Mono-Farbton-Blau-Schema von Smashing Magazine (Grafik: Smashing Magazine)

Wenn man die Sättigung und Helligkeit eines einzelnen Farbtons verändert, lassen sich viele Farben generieren – Tiefen, Höhen, Hintergründe, Akzente, Eye-Catcher – aber es wird nicht zu anstrengend fürs Auge. Farbvarianten von einem oder zwei Grund-Farbtönen zu verwenden, ist der zuverlässigste Weg, um Elemente hervorzuheben oder zu neutralisieren, ohne das Design zu versauen.

Countdown-Timer von Kerem Suer (Screenshot: Kerem Suer)
Countdown-Timer von Kerem Suer (Foto: Kerem Suer)

Noch ein paar Anmerkungen zu Farben

Farben sind der komplizierteste Bereich des Visual Designs. Und obwohl eine Menge Zeug über Farben stumpfsinnig und nicht zielführend für die Vollendung des Designs, an dem du sitzt, ist, habe ich ein paar gute Sachen dazu gefunden:

Eine kleine Werkzeugkiste:

  • Never Use Black (Ian Storm Taylor). Er spricht darüber, dass völlig graue Flächen in der realen Welt nie vorkommen, und wie das Sättigen deiner grauen Schattierungen – besonders der dunklen Schattierungen – deinen Designs einen visuellen Reichtum verleiht. Außerdem imitieren gesättigte Grautöne eher die reale Welt.
  • Adobe Color CC: Ein tolles Werkzeug zum Finden, Bearbeiten und Erstellen von Farbschemata.
  • Dribbble search-by-color. Noch ein toller Weg, um herauszufinden, was zu einer bestimmten Farbe passt. Wenn du dich bereits für eine Farbe entschieden hast, kannst du hier sehen, was die weltbesten Designer damit machen oder womit sie sie kombinieren.

Regel 3: Verdopple deinen Weißraum

Um eine Bedienoberfläche designermäßig aussehen zu lassen, gib ihr viel Luft zum Atmen.

In Regel zwei habe ich gesagt, dass Schwarzweiß Designer dazu zwingt, über Abstände und Layout nachzudenken, bevor sie Farbe ins Spiel bringen, und warum das wichtig ist. Nun, jetzt ist es Zeit, über Abstände und Layout zu sprechen.

Wenn du HTML von Grund auf programmierst, dann weißt du vielleicht, wie HTML per Default auf der Seite ausgegeben wird:

Nacktes HTML sieht unter ästhetischen Gesichtspunkten furchtbar aus. (Screenshot: Erik D. Kennedy)
Nacktes HTML sieht unter ästhetischen Gesichtspunkten furchtbar aus. (Screenshot: Erik D. Kennedy)

Im Grunde quetscht sich alles gegen den oberen Teil der Seite. Die Schrift ist klein, es gibt überhaupt keinen Abstand zwischen den Zeilen. Ein klein wenig Platz gibt es zwischen den Absätzen, aber nicht viel. Die Absätze strecken sich über die ganze Breite, egal ob das 100 oder 10.000 Pixel sind.

Unter ästhetischen Gesichtspunkten ist das furchtbar. Wenn du ein UI gestalten willst, das designt aussieht, musst du viel Luft zum Atmen hinzufügen. Manchmal absurd viel.

Weißraum, HTML und CSS

Wenn du wie ich daran gewöhnt bist, mit CSS zu formatieren, wo null Weißraum voreingestellt ist, wird es Zeit, diese schlechte Angewohnheit loszuwerden. Fang an, Weißraum als den Ausgangszustand zu sehen – alles beginnt mit einer weißen Fläche, bis du mit einem ersten Seitenelement reinplatzt.

Klingt nach Zen? Ich denke, das gehört zu den Gründen, warum Leute immer noch Skizzen von so etwas machen. Mit einer leeren Seite zu starten heißt mit nichts als Weißraum. Gleich am Anfang denkt man über Ränder und Abstände nach. Alles, was man zeichnet, ist eine bewusste Entscheidung für die Entfernung von Weißraum.

Mit ein paar Zeilen ungestyltem HTML zu beginnen heißt, dass man mit dem Inhalt anfängt. Zwischenräume sind zweitrangig. Das muss man sich klar machen.

In Piotr Kwiatkowskis Studie für einen Music-Player gibt es viel Luft zum Atmen. (Screenshot: Piotr Kwiatkowski)
In Piotr Kwiatkowskis Studie für einen Music-Player gibt es viel Luft zum Atmen. (Screenshot: Piotr Kwiatkowski)
Die linke Sidebar.
Die linke Sidebar.

Hier zur Veranschaulichung ein Music-Player von Piotr Kwiatkowski. Achte mal auf die Navigationsleiste auf der linken Seite.

Der vertikale Abstand zwischen den Navigationselementen ist doppelt so hoch wie der Text an sich. Du siehst hier eine 12-Pixel-Font mit genau der gleichen Menge Abstand darüber und darunter.

Oder schau dir die Listenüberschriften an. Da sind 15 Pixel Abstand zwischen dem Wort „PLAYLISTS“ und dem dazugehörigen Unterstrich. Das ist mehr als die Versalhöhe der eigentlichen Schrift! Und wir reden hier noch gar nicht von den 25 Pixeln Abstand zwischen den Listen.

 

7rules_musicplayer-rechts
Die rechte Sidebar und Top-Navigation.

Die rechte Sidebar lässt viel Platz zwischen den Textzeilen und dem Rest. Noch mehr Platz befindet sich in der Top-Navigation. Der Text „Search all music“ hat 20 Prozent der Höhe der Leiste. Die Icons sind ähnlich proportioniert.

Piotr hat hier bewusst zusätzlichen Abstand eingefügt, und das zahlt sich aus. Obwohl das hier nur ein Konzept ist, das er (meines Wissens nach) aus Spaß zusammengebastelt hat, ist es schön genug, um es mit den besten Musikplayer-Oberflächen aufzunehmen.

Okay, großzügige Abstände können die miesesten Bedienoberflächen einladend und einfach aussehen lassen – wie zum Beispiel Foren.

Foren-Design von Matt Sisto (Screenshot: Matt Sisto)
Foren-Design von Matt Sisto (Screenshot: Matt Sisto)

Oder Wikipedia.

Wikipedia-Desgin-Konzept von Aurélien Salomon. (Screenshot: Aurélien Salomon)
Wikipedia-Desgin-Konzept von Aurélien Salomon. (Screenshot: Aurélien Salomon)

Man findet haufenweise Argumente dafür, dass das Wikipedia-Redesign Grundfunktionen für die Benutzung der Seite weglässt. Aber es ist definitiv gut, um daraus zu lernen!

Lass Abstand zwischen deinen Zeilen.

Lass Abstand zwischen deinen Elementen.

Lass Abstand zwischen deinen Elementgruppen.

Analysiere, was funktioniert.

Finde einen Job, den du liebst zum Thema Webdesign, Mediengestalter

20 Reaktionen
cifci
cifci

Unglaublich!!! Dieser Artikel ist so genial!!! Vielen lieben Dank fürs übersetzen! Ich würde mich sehr freuen, wenn ihr öfters solche Inhalte produziert.

Antworten

Iris
Iris

Super interessant, danke! Wir haben die Trends von 2015 was Webdesign betrifft hier zusammengefasst: https://www.1min30.com/de/internetseitenerstellung/webdesign-trends-fur-2015-teil-12-18113

Antworten

Samarpan
Samarpan

Super toller Artikel, vielen herzlichen Dank für die Weitergabe von so viel Erfahrung. Mir wurden viele Fragen endlich beantwortet.

Antworten

SYD
SYD

An alle, die dankbar für den Artikel sind: 1) Ihr tut mir ein bisschen leid und 2) Gerade Regel Nr. 7 "Alles nur geklaut" führt dazu, dass Vieles gleich aussieht. Das Gros hat eben keine (tiefgründige) Ahnung. Wahrscheinlich gibt es deswegen so viele schlechte UIs – damit meine ich nicht ästhetisch schlecht – wie es grauenhaft "programmierte" Apps oder Websites gibt. Es ist und bleibt Gesetz: 1) form follows function UND 2) Schuster, bleib bei deinen Leisten. Eins noch zur Aussage "[…] eigenen Stil finden und neue Trends erfinden.": Nur wer die Regeln kennt, kann sie brechen. Kinder, Kinder …

Antworten

ThomasLedermann
ThomasLedermann

Nicht nur für UI Design hilfreich! Danke für den tollen Beitrag und die klaren Statements.

Antworten

AdamHN
AdamHN

Keine Use Cases, Task Analyse, Wire Frames, Informationsarchitektur, Animation, Transition und mentale Modelle (Grad beim angesprochenen FlatDesign). Anordnung, Begründung für das Aussehen gibt es nicht. Zum Zeitgeist imitieren reicht das aber

Antworten

AdamHN
AdamHN

Ganz schönes Loblied...Muss ja wirklich wenig Talent haben

Antworten

Srrs
Srrs

Grandioser Artikel! Ein Artikel der einen auch mal zum Lachen bringt. Wunderbar! Vielen Dank.

Antworten

andi
andi

muss es statt
'dass völlig graue Flächen in der realen Welt nie vorkommen'
nicht
'dass völlig schwarze Flächen in der realen Welt nie vorkommen'
heißen?

Grüße

Antworten

Werner
Werner

Ein verdammt guter Artikel - inhaltlich ein absoluter Gewinn und sprachlich eine Freude. Ich bin seit 25 Jahren freiberuflicher Designer sowie Dozent für Grafikdesign und habe bisher noch nie das Thema UI und Gestaltung im allgemeinen so gut und kurzweilig auf den Punkt gebracht gelesen.

Antworten

Chris
Chris

Was für ein guter guter Artikel, so gut, dass dies meiner aller erster Kommentar unter einem Artikel ist. Danke!

Antworten

Marcus Woy
Marcus Woy

Ja ist denn heut schon weihnachten??
Danke für das lesbare Geschenk :)

Antworten

John Doe
John Doe

Danke für den Artikel Erik. Hinweis: Deine E-Mail Adresse ist nicht richtig verlinkt ganz am Ende.

Antworten

Steven
Steven

Da gebe ich kujulian Recht! Der Artikel ist wirklich schön und locker geschrieben. So bekommt man Lust auf's Lesen.

Antworten

kujulian
kujulian

Der Artikel ist ganz ganz groß! Super cool, locker geschrieben und kein mahnender Besserwisser-Zeigefinger der die ganze Zeit auf angebliche Ästhetikgrundlagen der Gestaltung hinweist. Meiner Meinung nach sollte ein erfolgreicher Guide für Design-Richtlinien genau so geschrieben sein, wie dieser hier ist: Nach Gefühl. Denn im Endeffekt kommt es bei der Betrachtung ja genau darauf an. Für mich hat der Artikel jedenfalls einen evernote-Platz ergattert. Weiter so!

Antworten

dazzle
dazzle

Schöner Artikel.

Ich finde gut, dass du dich nicht als Voll-Profi ausgibst, sondern z.B. zugibst, selbst Elemente zu klauen. Und ich habe bisher nur die erste Seite gelesen, aber mir ist kein Rechtschreibfehler aufgefallen. Finde ich beides für t3n-Verhältnisse sehr bemerkenswert.

Antworten

Ich
Ich

Vielen Dank für diesen tollen Artikel!!

Antworten

Alex Nowak
Alex Nowak

Super ausführlich behandelt und gut geschrieben. Vielen Dank dafür!

Antworten

kelkes
kelkes

Danke für den Artikel! Als Entwickler versuch ich mir schon länger vernünftiges UI/UX beizubringen damit ich nicht ständig auf einen Designer angewiesen bin und vor allem die guten Designer von den Schlechten trennen kann...

Antworten

Saenic
Saenic

Direkt mal in Pocket gespeichert, hier kann man immer mal nachschlagen :)
Ich bin auch ein Entwickler, der sich das Design selber beigebracht bzw. von anderen "inspiriren lassen" hat. Wenn ich etwas entwickle, dann schaue ich zuerst auf das GUI, denn was anderes werden die Benutzer nicht sehen.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen