9 großartige UI-Designs

Beim Webdesign geht es bei einer großartigen Benutzeroberfläche oder einem UI-Design darum, dem Benutzer zu helfen, eine bestimmte Aufgabe so einfach und effizient wie möglich zu erledigen. Während das Erscheinungsbild unbestreitbar wichtig ist, ist der Kern einer großartigen Benutzeroberfläche die Funktion: In Bezug auf die Navigation sollte sie so intuitiv sein, dass sie unsichtbar ist. Sobald ein Benutzer verloren geht oder nicht herausfinden kann, wohin er gehen soll, erledigt die Benutzeroberfläche ihre Aufgabe nicht mehr, und es gibt zahlreiche Beispiele dafür schmerzhafte Benutzeroberfläche schlägt fehl um zu demonstrieren, was Sie nicht tun sollten.

Diese Liste von Websites und Apps hat möglicherweise unterschiedliche Gestaltungsprinzipien und Funktionen, aber eines haben sie gemeinsam: ein effektives UI-Design, das alle oben genannten und weitere Anforderungen erfüllt. Lesen Sie weiter, um herauszufinden, warum sie so erfolgreich sind.

01. Montreux Jazz Festival

UI-Design: Montreux Jazz Festival



Hier ist eine fantastische Möglichkeit, mit ein paar Wischbewegungen Ihr eigenes maßgeschneidertes Festivalprogramm zusammenzustellen(Bildnachweis: Montreux Jazz Festival)

Es gibt nichts Schöneres als auf einem Festival zu sein, um deine FOMO-Levels durch das Dach zu bringen. Sicher, Sie werden vielleicht die Handlung genießen, die Sie jetzt sehen, aber vielleicht passiert eine andere, noch bessere, die Sie anderswo nicht einmal kennen. Egal wie oft Sie die lange Liste der Darsteller durchkämmen, es gibt bestimmt ein paar absolute Juwelen, die Sie vermissen. Dieses großartige UI-Design für das Montreux Jazz Festival soll Ihnen dabei helfen, das Beste aus Ihrer Zeit dort herauszuholen.

wie man ein Comicbuch veröffentlicht

Es hält die Dinge schön einfach und bietet Ihnen sechs binäre Optionen, die Sie nach links oder rechts wischen können, um einen Eindruck von Ihrer musikalischen Präferenz zu erhalten. Bevorzugen Sie beispielsweise DJs gegenüber Bands? - und wenn Sie fertig sind, erhalten Sie ein individuelles Programm, das auf Ihren Vorstellungen basiert und Links zum Kauf von Tickets enthält.

UI-Design: Montreux Jazz Festival

Lizzo! Woher wussten sie das?(Bildnachweis: Montreux Jazz Festival)

Es ist einfach und intuitiv und obwohl Sie zweifellos das gesamte Programm überprüfen möchten, um sicherzustellen, dass Sie definitiv nichts verpasst haben, ist es eine hervorragende Möglichkeit, schnell viele Informationen zu durchsuchen, um Ergebnisse zu finden.

02. Kippbürste

Die virtuelle Realität ist für UI und UX ein Grenzgebiet. Es sind Designer und Entwickler, die sich im Laufe der Zeit etwas ausdenken müssen, mit natürlich gemischten Ergebnissen. Was auf einem Flachbildschirm funktioniert, funktioniert in VR nicht unbedingt so gut, und die Erstellung einer effektiven und nützlichen VR-App, die Sie stundenlang verwenden können, ohne an Reisekrankheit zu erkranken, kann eine ziemliche Herausforderung sein.

Es ist also großartig, ein VR-Produkt wie das von Google zu sehen Kippbürste - mit dem Sie 3D-Bilder in einer virtuellen Umgebung erstellen können - das funktioniert nicht nur, sondern ist auch so intuitiv zu bedienen und mit so großartigen Ergebnissen, dass Künstler es bereits in ihre kreativen Workflows integrieren. Gehe in diese Richtung Hier finden Sie einige hervorragende Tipps für Profis, wie Sie mit dieser bahnbrechenden kreativen App beginnen können.

03. Musterung

UI-Design: Strukturierung

Der kreisförmige, minimale Ansatz von Patterning erleichtert das Rollen Ihrer Beats [Bild: Olympia Noise Co]

IOS-Drumcomputer von Olympia Noise Co, Musterung ist anders als alles, was Sie zuvor gesehen haben, und das aus gutem Grund. Anstatt Ihren Rhythmus wie jede andere Musik-App in einem Raster zu sequenzieren, verwendet Patterning eine kreisförmige Oberfläche für das Grundgeschäft, Ihre Beats mit farbcodierten Drums zu gestalten, damit Sie leicht sehen können, was was ist.

Über die Grundlagen hinaus macht die intelligente, aber minimale Benutzeroberfläche von Patterning das kompliziertere Sequenzieren längerer Songs aus einzelnen Mustern weniger schwierig. So können Sie auf einfache Weise Variationen von Mustern erstellen und dann alles zusammenfügen. Ähnlich einfach ist es, alles besser klingen zu lassen. Sowohl der Mixer als auch die FX-Oberfläche sind sorgfältig mit kühnen visuellen Hinweisen versehen, die Ihnen helfen, den gewünschten Sound zu erzielen, ohne sich zwischen unergründlichen Steuerelementen zu verlieren.

04. MailChimp

UI-Design: MailChimp

Das Design von MailChimp ist klar und flach und weitgehend typografisch [Bild: MailChimp]

Die Erstellung und Verwaltung von Newslettern ist möglicherweise nicht die aufregendste Aufgabe der Welt, sondern das schön gestaltete, intuitive Design der Benutzeroberfläche von MailChimp macht es so viel schmackhafter. Seit der jüngsten Neugestaltung ist die Web-Benutzeroberfläche sauber, flach und hauptsächlich typografisch.

Wenn Ihr Konto zum ersten Mal eingerichtet wird, wird das klassische Problem des 'leeren Kontos' vor dem Start Ihrer ersten Kampagne durch hilfreiche, visuell ansprechende Benutzerhandbücher ausgeglichen. Es gibt viel Leerraum und klare Handlungsaufforderungen führen neue Benutzer durch jeden Schritt des Prozesses - in einigen Fällen sogar mit einem subtil animierten Zeiger, der angibt, wo sie klicken sollen.

Design der Benutzeroberfläche: MailChimp

Hilfreiche Handlungsaufforderungen verhindern, dass Sie sich in MailChimp verlieren [Bild: MailChimp]

05. Papier für iPad

UI-Design: Papier für iPad

Papier ist intuitiv zu bedienen [Bild: FiftyThree]

Eine mehrfach preisgekrönte App, mit der Benutzer auf intuitivere und natürlichere Weise kreativ werden können. Papier Sie können mit Ihren Fingerspitzen mit einer überraschenden Detailgenauigkeit zeichnen - obwohl es auch mit einem Stift funktioniert, wenn mehr Präzision erforderlich ist.

Das UI-Design von Paper wurde ausschließlich für Berührungen entwickelt und enthält keine Schaltflächen oder Einstellungen, über die Sie sich Sorgen machen müssen - nur eine Reihe spezialisierter Tools. Das vielseitige Zeichenwerkzeug im Füllfederhalter-Stil ist kostenlos erhältlich, während Sketch (weicher Stift), Outline (fette Markierung), Write (Tintenstift), Color (Aquarellpinsel) und Mixer (Color Blender) als In-App-Käufe erhältlich sind.

UI-Design: Papier für iPad

Papier verfügt nicht über Schaltflächen, sondern über eine Reihe spezialisierter Werkzeuge [Bild: FiftyThree].

06. Dinge

Verfügbar für Mac und iOS, Dinge ist eine beliebte Aufgabenverwaltungs-App mit einem preisgekrönten Design, das intuitiv und einfach zu erlernen ist und auf dem bekannten To-Do-Listen-Konzept basiert. Wie die Macher von Cultured Code hervorheben, geht es schließlich darum, Ihnen das Leben zu erleichtern.

Das übersichtliche Design der Benutzeroberfläche ist in Listen unterteilt, die Ihnen bei der Kategorisierung Ihrer Aufgaben helfen: Dringende Dinge werden in 'Heute' angezeigt, etwas weniger Dringliche können bis 'Weiter' warten, während 'Zeitplan' weiter im Voraus geplant wird. Jeder Eintrag erfasst wichtige Informationen auf einmal - Titel, Notizen und Fälligkeitsdatum sowie Tags, falls erforderlich, um die Kategorisierung zu erleichtern. Das Beste ist, dass das Schnelleingabefenster über eine einfache Tastenkombination von überall aus zugänglich ist - und alles automatisch über Desktop, iPhone und iPad synchronisiert wird.

07. Kampagnenmonitor: Weltanschauung

UI-Design: Campaign Monitor Worldview

Worldview legt komplexe Daten auf zugängliche Weise fest(Bildnachweis: Kampagnenmonitor)

Eine wunderbar originelle Idee, die den E-Mail-Abonnementdaten eine ansprechende Note verleiht. Kampagnenmonitor: Weltanschauung Überlagert Informationen zu Personen, die Ihre Mitteilungen auf einer Google Map in Echtzeit öffnen, anklicken und freigeben, um sowohl geografische als auch persönliche Einblicke zu erhalten.

Einschränkungen der Adobe Premiere Pro CC-Testversion

Auf der Zielseite wird das Konzept sofort visuell vorgestellt, wobei Beispielstifte auf eine Weltkarte fallen - und die Anwendungsoberfläche selbst ist erfrischend sauber und dreht sich um die Karte und einige grundlegende Menüs zur Steuerung der Einstellungen. Ein großartiges Beispiel für UI-Design mit einfacher Ikonographie und Farbcodierung, die verschiedene Kategorien der Benutzerinteraktion auf einen Blick identifiziert.

08. Abbildung

UI-Design: Abbildung

Die Figur soll dir helfen, unterwegs Musik zu machen [Bild: Propellerhead]

Ein weiteres Beispiel für ein flaches Design, bei dem ein möglicherweise sehr kompliziertes UI-Design sehr sauber und intuitiv aussieht. Zahl ist ein Synthesizer und ein Drumcomputer für iOS des schwedischen Entwicklers Propellerhead, der auch hinter der Desktop-Musikproduktionssoftware Reason steht.

Sie können auf die Touchscreen-Pads tippen, Ihren Finger gedrückt halten und die Rhythmusräder für eine Reihe verschiedener Sounds bewegen oder über den Bildschirm streichen, um verschiedene Noten in der Skala abzuspielen. Es gibt auch Räder, mit denen Sie den Notenbereich steuern können, mit dem Sie arbeiten müssen, die Anzahl der Noten in Melodien und Basslinien sowie verschiedene Registerkarten, um den Klang auf verschiedene Arten zu optimieren.

09. Kennedy

UI-Design: Kennedy

Kennedy fügt Ihren Erinnerungen Kontext hinzu [Bild: Brendan Dawes]

Es gibt nichts Schöneres, als durch eine Menge Ihrer alten Twitter-Updates zu scrollen und sich zu fragen, woran zum Teufel Sie gedacht haben, als Sie das Ding vor sechs Monaten gepostet haben. Mangelnder Kontext kann oft dazu führen, dass etwas, das zu dieser Zeit vollkommen sinnvoll war, Monate oder Jahre später bedeutungslos wird.

Kennedy , eine Tagebuch-App von der immer ausgezeichneten Brendan Dawes , wurde entwickelt, um Ihren Erinnerungen Kontext hinzuzufügen. Sie können damit Textnotizen zu Ihren Aktivitäten erstellen, genau wie Sie sie in Facebook oder Twitter eingeben, und den Notizen möglicherweise Fotos hinzufügen, während Sie gerade dabei sind. Die clevere Sache ist jedoch, dass Kennedy dann eine zusätzliche Kontextebene hinzufügt, indem er Ihren Standort, das Datum und die Uhrzeit, die aktuellen Wetterbedingungen, eine Schlagzeile und, wenn Sie gerade Musik auf Ihrem Telefon hören, hinzufügt. Der Name des Titels, den Sie gerade hören.

UI-Design: Kennedy

Kennedys zusätzliche Details sind eine reichhaltige Alternative zu trockenen Noten [Bild: Brendan Dawes]

Das Ergebnis ist, dass Sie anstelle einer trockenen Notiz, die auf der ganzen Linie nicht viel bedeutet, einen bestimmten Moment mit einem umfassenderen Kontext festhalten, einschließlich zahlreicher Eingabeaufforderungen, die dazu beitragen können, eine Erinnerung detaillierter wiederherzustellen. Das klare Design und die intelligente Benutzeroberfläche von Dawes sorgen dafür, dass alles einfach und gut aussieht.

Zum Thema passende Artikel: