Inhalt
Als ich meine Karriere begann, war ich Webdesigner. Ich habe vier Jahre im Bereich Webdesign gearbeitet, angefangen bei Websites für kleine Unternehmen bis hin zu größeren Kunden. Ich fand heraus, dass mich weder Grafikdesign interessierte noch für größere Markennamen arbeitete. Ich interessierte mich mehr für Paginierungsmuster, die Art und Weise, wie Menschen mit Formularen interagierten, und Dinge wie die wahrgenommene Leistung als für das visuelle Design einer Webseite.
Wenn ich mir Science-Fiction-Filme ansah, schaute ich mir die Schnittstellen an. Und wenn ich Videospiele spielte, beobachtete ich die Anordnung der Menüs. Wenn Ihnen eine dieser Eigenschaften bekannt vorkommt, sind Sie möglicherweise auch ein UI-Designer.
Ich kündigte meinen Agenturjob und gründete meine eigene Firma. Auf meiner LinkedIn-Seite habe ich versucht, mein neues Karriereziel zusammenzufassen: die bestmögliche Software zu entwickeln. Es ist vier Jahre her, seit ich als Freiberufler angefangen habe, und meine Reise hat nicht aufgehört. In diesen Tagen helfe ich bei der Leitung einer kleinen UI-Designfirma namens Mono. Wir haben kürzlich unser viertes Teammitglied begrüßt.
In diesem Artikel möchte ich beschreiben, wie es ist, ein UI-Designer zu sein, einschließlich dessen, was genau der Job beinhaltet, wo man die besten Lernressourcen findet und wie man sein Handwerk verbessert.
Was macht ein UI-Designer?
Ich finde, dass Sie die Arbeit eines Benutzeroberflächendesigners im Allgemeinen in vier Kategorien einteilen können. Sie kommunizieren mit dem Kunden, Sie recherchieren, Sie entwerfen und prototypisieren und Sie kommunizieren mit den Entwicklern. Schauen wir uns jede dieser Phasen genauer an.
Kundenkommunikation
Bei der Kundenkommunikation geht es darum, das Problem des Kunden zu verstehen. Ziel ist es, das Geschäft Ihres Kunden in den Griff zu bekommen. Daher ist der Beginn eines Projekts in der Regel eine Menge Gesprächsstoff. Es ist in Ordnung, zu Beginn nicht zu viel über die Domain Ihres Kunden zu wissen. Sie können das Geschäft Ihres Kunden auf eine neue Art und Weise betrachten, während Sie sich mögliche Designlösungen vorstellen.
Um ein guter UI-Designer zu sein, müssen Sie in der Lage sein, mit dem Geschäft Ihres Kunden mitzudenken. Zum Beispiel könnte Ihr Kunde in der Luftfahrt sein. Wenn Sie für sie arbeiten, werden Sie sich irgendwann ziemlich gut mit dieser Branche auskennen. Ein Tipp für Ihr eigenes Glück ist also, die Branchen, für die Sie arbeiten, mit Bedacht auszuwählen, damit Sie kein Experte für etwas sind, das Sie nicht interessiert oder an dem Sie kein Interesse haben.
Während eines Projekts wird die Kommunikation nicht unterbrochen. Als Designer präsentieren Sie Ihre Arbeiten ständig. In unserem Unternehmen sind wir ein entferntes Team, daher haben wir nicht viele persönliche Besprechungen. Stattdessen nutzen wir die Bildschirmfreigabe durch Videokonferenzen in hohem Maße. Kommunikationsmittel wie Skype und Slack werden täglich verwendet.
Es ist nützlich, synchrone und asynchrone Kommunikationsmethoden zu kombinieren. Ein Anruf ist großartig, wenn Sie schnell viele Informationen benötigen, aber gleichzeitig da sein müssen. Wir betrachten Slack als unseren „virtuellen Wasserkühler“ und verwenden Basecamp, um komplexe Designprojekte zu verwalten. Wenn wir Prototypen mit HTML und CSS entwerfen, verwenden wir GitHub-Probleme, um Code direkt zu diskutieren.
Forschung
Neben der Kundenkommunikation werden Sie viel recherchieren. Dies kann Feldstudien, Workshops mit dem Kunden, die Analyse des Wettbewerbs oder die Definition einer Strategie umfassen - im Wesentlichen fast alles, was Ihnen hilft, das vorliegende Problem zu verstehen.
Forschung ist das, was Ihre Designentscheidungen beeinflusst. Es ist ein Artikel, den Sie einmal gelesen haben, oder das neue, was Apple gerade veröffentlicht hat. Wenn es an der Zeit ist zu erklären, warum Sie eine bestimmte Designentscheidung getroffen haben, unterstützt Sie Ihre Forschung.
Die Forschung kann sehr breit sein. Ich teste häufig neue Geräte zu Forschungszwecken oder melde mich bei einer neuen Web-App an, um deren Benutzeroberfläche zu untersuchen.
Design und Prototyping
Als Designer werden Sie wahrscheinlich die meiste Zeit mit Design- und Prototyping-Arbeiten verbringen. Ein UI-Designprojekt kann auf verschiedene Arten voranschreiten, vom Skizzieren über das detaillierte Design bis hin zur Codierung.
Die von Ihnen verwendete Methode hängt weitgehend von der Art des Projekts ab. Was entwirfst du? Ist es eine Website oder möchten Sie es lieber eine App nennen? Verwendet es native Technologie? Ist es eine Neugestaltung oder fangen Sie bei Null an?
In unserem Unternehmen gibt es keinen festen Prozess, aber die meisten Projekte folgen der gleichen groben Reihenfolge: Sie beginnen mit Skizzen und Drahtgittern, gehen zum detaillierten visuellen und Interaktionsdesign über und enden mit einem Prototyp.
Als Designer verbringen wir viel Zeit damit, über unsere Werkzeuge nachzudenken. Gute Werkzeuge sind zwar wichtig, aber nicht das Wichtigste. Die kompetente Verwendung der Adobe Creative Suite und von Apps wie Sketch entspricht der Verwendung eines Bleistifts zum Zeichnen oder eines Pinsels zum Malen. Sie müssen das Bild noch machen.
Trotzdem ist ein gesundes Interesse an Werkzeugen eine gute Sache. Ich liebe es, neue Tools auszuprobieren, die mir helfen können, produktiver zu sein. Mein Lieblingswerkzeug zur Vektorbearbeitung ist Illustrator, aber die meisten meiner visuellen Entwurfsarbeiten werden heutzutage in Sketch ausgeführt. Andere Teammitglieder haben auf neuere Tools wie Affinity Designer umgestellt.
Werkzeuge sind eine sehr persönliche Wahl. Solange wir problemlos zusammenarbeiten können, kann jeder seine eigene Wahl treffen. Um es einfacher zu machen, mit Kunden über unsere Designs zu sprechen, stellen wir mit InVision Prototypen her. Für fortgeschrittenes Prototyping verwenden wir jedoch HTML und CSS. Das Werkzeug, das Sie alle benötigen, hängt von der Arbeit ab, die Sie damit ausführen möchten.
Entwicklerkommunikation
Ein oft vergessener Teil der Arbeit eines UI-Designers ist die Entwicklerkommunikation. Heutzutage können Sie nicht mehr davonkommen, Ihre Entwürfe einfach an die Entwickler zu senden und zu hoffen, dass sie korrekt implementiert werden. Die besten Designer wissen, dass die Herausforderung nicht darin besteht, das Design zu erstellen, sondern es zu kommunizieren - nicht nur den Stakeholdern, die ihre Zustimmung erteilen müssen, sondern auch den Entwicklern, die es implementieren müssen.
Die Kommunikation eines Entwurfs erfolgt in vielfältiger Form: detaillierte Spezifikationen, Bereitstellung von Ressourcen, gemeinsame Überprüfung des Entwurfs. Was in jedem Fall sinnvoll ist, hängt weitgehend davon ab, ob es sich bei dem Projekt um eine native oder eine Webanwendung handelt.
Der traditionelle Ansatz besteht darin, Assets neben Bildschirmdesigns bereitzustellen. Mithilfe der Bildschirmdesigns können Sie sehen, wie das Design insgesamt aussehen wird, während die Assets gebrauchsfertige PNGs und SVGs von Symbolen sind, sodass sich die Entwickler nicht mit einem Grafikeditor befassen müssen.
In unserem Unternehmen sind wir Befürworter, mehr als das zu liefern. Wir verwenden Stilrichtlinien für Komponenten, um die Konsistenz unserer Designs zu gewährleisten. Wenn es sich um ein Webprojekt handelt, liefern wir detaillierte HTML- und CSS-Sätze, die Stück für Stück dokumentiert und zur Implementierung bereit sind. Ich glaube, dass ein Designauge in jeder Phase der Softwareentwicklung der einzige Weg ist, um mein Ziel zu erreichen, erstklassige Software zu entwickeln.
Web gegen native Apps
Wenn Sie eine native App für eine Plattform (z. B. iOS oder Android) entwerfen, halten Sie sich in der Regel an bestimmte Richtlinien. Wenn Sie für das Web entwerfen, gibt es nicht so viele Anleitungen. In der Regel verfügt Ihr Kunde über eine Reihe grafischer Richtlinien für seine Marke, die festlegen, wie die Dinge aussehen sollen.
Diese Richtlinien sind jedoch in der Regel auf Marketing-Websites zugeschnitten, und was darin enthalten ist, führt nicht immer zu guten Entscheidungen für die Benutzeroberfläche. Schriftarten werden in der Regel aus Marketinggründen und nicht aus Gründen der Lesbarkeit ausgewählt. Farben können fett und auffällig sein, was in einer Werbekampagne funktioniert, aber nicht in einer App, die Sie täglich verwenden. Diese Anleitungen müssen interpretiert werden.
Es gibt nur wenige UI-Richtlinien für das Web. Man könnte argumentieren, dass das Web ein Schmelztiegel verschiedener Stile ist. Wenn Sie etwas erstellen, das sich eher wie eine App als wie eine Website anfühlt, müssen Sie sich mit weit verbreiteten Frameworks wie Bootstrap und ZURB Foundation auskennen. Das Framework legt fest, wie die Dinge aussehen sollen, da Sie das Rad nicht neu erfinden möchten. Und das ist wahrscheinlich eine gute Sache.
In unserem Unternehmen verwenden wir gerne Bootstrap. Es bietet sinnvolle Standardgrößen für gängige UI-Elemente wie Schaltflächen, Datentabellen und Modalitäten.
Beim Webdesign sind Sie stärker von den technischen Kapazitäten des Webs abhängig. Früher war es schwierig, einfache visuelle Schnörkel wie abgerundete Ecken auf einer Website zu implementieren. Diese Zeiten sind lange vorbei - Sie können jetzt Benutzeroberflächen mit vielen Schatten, Übergängen, Animationen und sogar 3D zeichnen.
Als Designer ist es viel realistischer, die Kontrolle über den Prozess und das Design im Browser zu übernehmen. Ich habe nicht viele UI-Designer gesehen, die die UI-Programmierung einer nativen App übernommen haben, aber ein Designer, der HTML und CSS einer Web-App ausführt, kommt häufig vor. Wenn Sie Ihre eigenen Designs codieren können, haben Sie einen Vorteil gegenüber Ihren nicht codierenden Kollegen. Für mich ist dies die einzige Möglichkeit, die Funktionsweise des Webs wirklich zu verstehen.
Webeinschränkungen
Sie werden bald feststellen, dass nicht alle coolen Tricks, die Sie lernen, in jedem Browser unterstützt werden, und das ist die Realität beim Entwerfen für das Web. Es ist gut, bekannten Prinzipien wie der progressiven Verbesserung zu folgen, bei denen Sie, wann immer möglich, erweiterten Inhalt laden, aber auch darüber nachdenken, wie sich der Inhalt verschlechtert.
In letzter Zeit ist das Schneiden des Senfs populär geworden. Dies wird vom Webteam der BBC unterstützt und beinhaltet die Unterscheidung zwischen "guten" und "schlechten" Browsern sowie die Bereitstellung einer begrenzten Erfahrung für "schlechte" Browser. Es funktioniert jedoch wirklich nur für Inhaltsseiten.
Wenn es um anwendungsähnliche Erlebnisse geht, beschränken viele Leute die Unterstützung nur auf einige wenige führende Browser, um die Entwicklung zu vereinfachen. Leider bringt uns dies zurück zu der Situation von 1996, in der Sie einen bestimmten Browser benötigen, um Inhalte anzuzeigen.
Verbessern Sie Ihre Fähigkeiten
Wie halten Sie sich mit der schnelllebigen Webbranche auf dem Laufenden und verbessern Ihre Fähigkeiten? Schauen wir uns einige verschiedene Methoden an, um Ihre Fähigkeiten zu verbessern ...
Plattformwissen
Ein wesentlicher Teil des Arsenals eines Designers ist das Plattformwissen. Sie sollten über die verschiedenen Betriebssysteme und deren Verwendung Bescheid wissen. Als Designer tendieren wir dazu, Macs zu verwenden, aber dann vergisst man leicht, dass die Mehrheit der Leute da draußen Windows-Boxen verwendet, um ihre Arbeit zu erledigen.
Ich glaube, Sie können etwas nur wirklich verstehen, wenn Sie es selbst verwenden. Ich bevorzuge es, meinen Mac zum Entwerfen zu verwenden, verbringe aber viel Zeit damit, mich über die Entwicklung verschiedener anderer Plattformen zu informieren. Ich habe mehrere Windows-Kopien als virtuelle Maschinen auf meinem Mac installiert. Ich war damit beschäftigt, neue Builds von Windows 10 mit dem Insider-Programm von Microsoft zu testen, um die verschiedenen Änderungen in der Benutzeroberfläche zu überprüfen.
Ich kaufe auch regelmäßig neue Hardware, um zu testen, wie es funktioniert. Ich habe eine Apple Watch gekauft, um die Plattform zu testen. Ich habe es dann verkauft, weil ich das Gefühl hatte, dass es nicht so viel zu meinem Leben beiträgt.
Darüber hinaus kann das Web als eigenes Betriebssystem angesehen werden. Es wird ständig weiterentwickelt, und jede Woche werden jedem Browser-Anbieter neue Funktionen hinzugefügt. Es lohnt sich sehr, die technischen Aspekte von Browsern zu kennen, insbesondere die CSS- und Grafikfähigkeiten. Sie müssen wissen, was SVG und WebGL sind und wie Sie die Webanimations-API verwenden können.
Jede Plattform entwickelt sich im Laufe der Zeit weiter und als Benutzeroberflächendesigner ist es Ihre Aufgabe, auf dem neuesten Stand zu bleiben. Schließlich lebt alles, was Sie entwerfen, nicht isoliert, sondern ist Teil eines größeren Software-Ökosystems.
Gehen Sie zurück zu den Grundlagen
Was wir heute zu kämpfen haben, unterscheidet sich nicht so sehr von dem, womit wir vor 20 Jahren zu kämpfen hatten. Es gibt eine Menge guter Ratschläge in Büchern. Probieren Sie zunächst Defensive Design for the Web von Jason Fried und Matthew Linderman und lassen Sie mich zunächst nicht von Steve Krug nachdenken.
Wenn Sie sich mit Konzepten wie Modalität und Erschwinglichkeit nicht auskennen, müssen Sie nachlesen. Sie sollten in der Lage sein zu erklären, was das Gesetz von Fitts ist. Das Gestaltgesetz der Nähe? Dies ist das A und O des UI-Designs.
Lassen Sie sich von Spielen und Filmen inspirieren
Als UI-Designer greife ich bei meiner Arbeit auf andere Inspirationsquellen zurück. Ich finde viel Inspiration in Spielen. Einige Spiele sind sehr komplex, und die UI-Designer mussten dieselben komplexen Schnittstellenprobleme lösen wie UI-Designer, die an Geschäftsprojekten arbeiten.
Spiele können auch Trends anzeigen. Der Minimalismus in den Menüs der Colin McRae Rally erinnert mich an die Richtung von iOS7. In gewisser Weise tauchte das UI-Animationsdesign, das jetzt im Trend liegt, vor Jahren in Spielen auf. Der Übergang vom Skeuomorphismus zu nackten, funktionalen Schnittstellen und „flachem Design“ wurde auch in Spielen deutlich. Vergleichen Sie das Vergessen von 2006 mit dem von Skyrim von 2011. Beide Spiele sind RPGs in derselben Serie, aber der Unterschied ist auffällig.
Die futuristischen Schnittstellen in Marvel-Filmen wie Iron Man haben mich ebenfalls inspiriert. Sie sind keine genau verwendbaren Beispiele, aber sie lassen mich mehr über das Rechnen als Ganzes nachdenken. Wollen wir eine Zukunft der Bildschirme oder wollen wir, dass die Bildschirme verschwinden? Dies ist wahrscheinlich eine gute Frage, die Sie in einem Pub voller Designer stellen sollten.
Sie wachsen als Designer durch harte Arbeit, Ausdauer, Gespräche mit Kollegen und viel Lesen. Vor ungefähr einem Jahr las ich in der New York Times einen Artikel über Menschen bis in die 80er Jahre, die ihr Handwerk weiter verbessern. Ich habe das Gefühl, ich fange erst an. Was ist mit dir?
