Entwicklung & Design

Die 7 goldenen Regeln des UI-Designs

Seite 3 / 3

Regel 6: Verwende gute Schriftarten

Manche Schriftarten sind gut. Setz sie ein.

Achtung: In diesem Abschnitt finden sich keine Strategien oder Lerninhalte. Ich liste nur ein paar hübsche, kostenlose Fonts für dich auf, die du herunterladen und verwenden kannst.

Auf Sites mit einem sehr individuellen Ansatz lassen sich sehr individuelle Schriftarten einsetzen. Aber für die meisten Bedienoberflächen sucht man nur etwas, das clean und simpel ist. Ja, mein Freund, lass die Finger von der Wisdom Script.

Außerdem empfehle ich nur freie Schriftarten. Warum? Dies ist eine Anleitung für Leute, die lernen. Es gibt dort draußen mehr als genug zum Nulltarif. Machen wir also Gebrauch davon!

Ich rate dir, sie alle jetzt gleich herunterzuladen und sie durchzugehen, wenn du die Gestaltung für dein Projekt anfängst.

Die Font-Book-Kategorie „User“ ist praktisch, um nachzusehen, welche Fonts du heruntergeladen hast. (Screenshot: Apple)

Die Font-Book-Kategorie „User“ ist praktisch, um nachzusehen, welche Fonts du heruntergeladen hast. (Screenshot: Apple)

Ubuntu (Grafik: Erik D. Kennedy)

Ubuntu (Grafik: Erik D. Kennedy)

Ubuntu. Viele Schriftstärken. Vielleicht ein wenig zu markant für manche Anwendungen – aber genau richtig für andere. Bei Google Fonts erhältlich.

Open Sans.  (Grafik: Erik D. Kennedy)

Open Sans. (Grafik: Erik D. Kennedy)

Open Sans. Ein leicht lesbarer, beliebter Font. Gut geeignet für Fließtext. Bei Google Fonts erhältlich.

Bebas Neue.  (Grafik: Erik D. Kennedy)

Bebas Neue. (Grafik: Erik D. Kennedy)

Bebas Neue. Gut für Überschriften. Nur Großbuchstaben. Erhältlich bei Fontfabric – dort gibt es auch eine tolle Galerie mit Anwendungsbeispielen.

Montserrat.  (Grafik: Erik D. Kennedy)

Montserrat. (Grafik: Erik D. Kennedy)

Montserrat. Nur zwei Schriftstärken, aber gut genug, um es in die Auswahl zu schaffen. Auf jeden Fall die beste kostenlose Alternative zu Gotham und Proxima Nova, aber nicht annähernd so gut wie die beiden. Bei Google Fonts erhältlich.

Raleway.  (Grafik: Erik D. Kennedy)

Raleway. (Grafik: Erik D. Kennedy)

Raleway. Gut für Überschriften, vielleicht ein wenig zu heftig für Fließtext (die Ws!). Hat eine wirklich nette Ultralight (nicht im Bild). Bei Google Fonts erhältlich.

Cabin.  (Grafik: Erik D. Kennedy)

Cabin. (Grafik: Erik D. Kennedy)

Cabon. Bei Google Fonts erhältlich.

Lato  (Grafik: Erik D. Kennedy)

Lato (Grafik: Erik D. Kennedy)

Lato. Bei Google Fonts erhältlich.

PT Sans  (Grafik: Erik D. Kennedy)

PT Sans (Grafik: Erik D. Kennedy)

PT Sans. Bei Google Fonts erhältlich.

Entypo Social  (Grafik: Erik D. Kennedy)

Entypo Social (Grafik: Erik D. Kennedy)

Entypo Social (siehe oben). Das ist ein Icon-Font, und ja, wenn du ihn erst einmal einsetzt, wirst du ihn überall wiedererkennen, aber die Social Icons sind Gold wert. Du hast keine Lust, Zillionen von Social-Media-Logos in kleinen, bunten Kreisen nachzuzeichnen? Schön, ich auch nicht. Erhältlich bei Entypo.com.

Zum Schluss noch ein paar weitere Quellen:

  • Beautiful Google web fonts. Ein großartiger Showcase, der veranschaulicht, wie gut Google Fonts aussehen können. Ich habe diese Seite bestimmt schon ein Dutzendmal besucht, um mich inspirieren zu lassen.
  • FontSquirrel. Eine Sammlung der besten, für kommerziellen Einsatz erhältlichen Schriftarten – alle kostenlos.
  • Typekit. Wenn du in der Adobe Creative Cloud arbeitest (beispielsweise im Abo-Modell von Photoshop oder Illustrator) hast du freien Zugriff auf Massen toller Schriften. Und ja, Proxima Nova ist mit dabei.

Regel 7: Alles nur geklaut

Als ich das erste Mal am Design eines App-Elements saß – Button, Tabelle, Diagramm, ein Popup oder was auch immer – wurde mir auch das erste Mal bewusst, wie wenig ich davon verstand, dieses Element gut zu gestalten. Aber zum Glück musste ich kein einziges User-Interface-Element neu erfinden. Denn ich konnte mir immer anschauen, wie andere das vor mir gelöst haben, und mir die Rosinen herauspicken.

Aber wo finde ich die Rosinen? Hier sind die ergiebigsten Quellen, bei denen ich während meiner Design-Aufträge fündig geworden bin, in absteigender Reihenfolge:

1. Dribbble

Diese Show-and-Tell-Website für Designer hat schlechthin die besten UI-Arbeiten online. Du findest dort tolle Beispiele für alles mögliche.

Du kannst mir gern auf Dribbble folgen. Und hier sind noch mehr Leute, die du auch mit auf deine Liste nehmen solltest:

  • Victor Erixon. Hat einen sehr individuellen, persönlichen Stil – und der ist großartig. Wunderschöne, cleane Flat Designs. Der Typ ist erst seit drei Jahren Designer und schon ganz oben.
  • Focus Lab. Diese Leute gehören zu den „Dribbble-Promis“ und ihre Arbeiten rechtfertigen das. Sehr facettenreich, immer erstklassig.
  • Cosmin Capitanu. Ein toller Joker. Er lässt Dinge verrückt und futuristisch aussehen, ohne schrill zu sein. Sehr gut im Umgang mit Farbe. Allerdings konzentriert er sich weniger auf UX – was auch ein allgemeiner Kritikpunkt bei Dribbble ist.

2. Flat UI Pinboard

Ich habe keine Ahnung, wer „warmarc“ ist, aber seine Pinnwand mit Telefon-Interfaces war irre nützlich für mich, um verschiedene Beispiele für schöne Bedienoberflächen zu finden.

warmaracs inspirierende Phone-UI-Entwürfe auf Pinterst (Screenshot: Pinterest)

warmarcs inspirierende Phone-UI-Entwürfe auf Pinterest (Screenshot: Pinterest)

3. Pttrns

Ein Verzeichnis von Screenshots mobiler Apps. Das Tolle an Pttrns ist, dass die ganze Website in – Trommelwirbel – UX-Strukturen aufgeteilt ist. An welchem Bedienelement du auch gerade arbeitest – Log-in, Benutzerprofil oder Suchergebnisse –, es ist sehr einfach, die Site danach zu durchsuchen.

Auf Pttrns findet man zu jedem erdenklichen Bedienelement tolle Beispiele. (Screenshot: pattrns)

Auf Pttrns findet man zu jedem erdenklichen Bedienelement tolle Beispiele. (Screenshot: pattrns)

Ich glaube fest daran, dass jeder Künstler so lange ein Plagiator sein sollte, bis er gut darin ist, die Besten zu imitieren. Erst dann sollte er seinen eigenen Stil finden und neue Trends erfinden.

Bis dahin mach es wie die Diebe.

Passend zum Thema dieses Abschnitts habe ich die Überschrift „Alles nur geklaut“ (Steal Like an Artist) aus dem gleichnamigen Buch geklaut, das ich gar nicht gelesen habe – vor allem, weil der Titel anscheinend alles verrät, was auf den Seiten enthalten ist.

Fazit

Ich habe das hier aufgeschrieben, weil ich es vor nicht langer Zeit selbst gern gelesen hätte. Ich hoffe, es hilft dir. Wenn du ein UX-Designer bist, mach ein gutes Modell, nachdem du deine Wireframes fertig hast. Wenn du ein Entwickler bist, dann nimm dein nächstes Nebenprojekt und verpass ihm einen guten Look. Ich möchte nicht, dass jemand glaubt, man brauche magische Kunsthochschul-Kenntnisse, um eine Bedienoberfläche anständig zu gestalten. Nur Beobachtung, Imitation und Weitererzählen, was funktioniert. Wie auch immer – das ist nur, was ich bisher gelernt habe, und ich bin immer ein Anfänger.

Wenn du immer noch mitliest, hast du mehr als 5.000 Wörter gelesen und etliche Illustrationen und Screenshots angeschaut. Aber ich bin noch nicht tot, also ist es auch noch nicht vorbei. Abonniere meinen Design-Newsletter, wenn du mehr gestalterische Analysen und ähnliches Zeugs lesen möchtest.

Und zuletzt: Ich bestreite damit meinen Lebensunterhalt. Suchst du nach einem UX/UI-Freelancer? Heuer mich an!

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

21 Kommentare
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
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
Alex Nowak

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

Antworten
Ich
Ich

Vielen Dank für diesen tollen Artikel!!

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
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
Steven

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

Antworten
John Doe

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

Antworten
Marcus Woy

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

Antworten
Chris
Chris

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

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
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
Srrs
Srrs

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

Antworten
AdamHN
AdamHN

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

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
ThomasLedermann
ThomasLedermann

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

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
Samarpan

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

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
Kürsat Cifci
Kürsat 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
muschko
muschko

Ein wirklich guter Artikel! Danke!

Falls du weitere Infos für die besten Tools bekommen möchtest, lies doch hier nach:
https://medium.com/@muschko/freelance-ui-ux-designer-diese-tools-solltest-du-nutzen-59eb715ceb73

Antworten

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