So verbessern Sie Ihre UI / UX-Kenntnisse als Entwickler

Foto von Alice Achterhof auf Unsplash

Wenn Sie mich vor vier Jahren, als ich ein CS-Absolvent war, gefragt hätten, auf welchem ​​Karriereweg ich mich befand, hätte ich Ihnen wahrscheinlich die Java-Back-End-Entwicklung oder ähnliches gesagt. Ich war nie kreativ, in der Art, dass Farbe auf Leinwand trifft, und habe daher nicht wirklich über einen Karriereweg nachgedacht, der Front-End-Entwicklung und -Design umfasst.

Wie wir alle wissen, ändern sich die Dinge. Im Laufe meiner Karriere habe ich mich immer mehr für die Entwicklung und das Design von Benutzeroberflächen interessiert. Ich hatte das Glück, in meinem Job die Front-End-Entwicklung kennenzulernen und Zeit in die Verbesserung der Fähigkeiten zu investieren, die erforderlich sind, um ein Front-End-Entwickler zu sein.

In den letzten 12 Monaten habe ich mich bemüht, mein Verständnis von UI / UX-Design zu verbessern, sowohl aus persönlichem Interesse als auch um die Arbeit mit Designern effektiver zu gestalten.

In diesem Beitrag möchte ich die Lektionen, die ich gelernt habe, die Ressourcen, die ich gesammelt habe, und die Fehler, die ich in der Hoffnung gemacht habe, dass andere Entwickler von meiner Reise lernen können, mitteilen.

Inhaltsverzeichnis

  • Es ist nicht nur Talent
  • Schauen Sie, denken Sie, stehlen Sie
  • Lerne die Theorie
  • Baue etwas
  • Gib nicht auf
  • Ressourcen
  • Fazit

Es ist nicht nur Talent

Dieser scheint mir jetzt offensichtlich zu sein, aber es gab eine Zeit, in der ich dachte, dass Designer Zauberer waren, die mit der Fähigkeit geboren wurden, erstaunlich aussehende Apps und Websites zu erstellen.

Es stellt sich heraus, dass dies nicht der Fall ist. Sie haben gerade hart gearbeitet, um ihr Handwerk zu perfektionieren. So wie es für manche Menschen einfacher ist, Code zu lernen, gibt es Menschen, die ein natürliches Talent für Design haben, aber Talent bedeutet ohne harte Arbeit nicht viel.

Design kann man lernen. Machen Sie nicht den Fehler, den ich gemacht habe, und schreiben Sie sich ab, weil Sie im herkömmlichen Sinne nicht kreativ sind. Das Lösen von Programmierproblemen erfordert Kreativität. Überlegen Sie sich, die Designherausforderungen auf die gleiche Weise zu lösen.

Schauen Sie, denken Sie, stehlen Sie

So wie das Lesen von gutem Code Ihnen hilft, ein besserer Entwickler zu werden, hilft das Lernen von dem, was andere erstellt haben, Ihnen, ein besserer Designer zu werden.

Wenn Sie das nächste Mal eine Website besuchen oder eine App verwenden, schauen Sie sich diese an und überlegen Sie genau, warum sie so aussieht und sich so verhält. Warum werden die Elemente dort platziert, wo sie sich befinden? Warum ist dieser Knopf eine bestimmte Farbe? Warum müssen Sie Aktionen in einer bestimmten Reihenfolge ausführen?

Nehmen Sie zum Beispiel den Applaus-Knopf von Medium. Warum haben sie nicht einfach wie jede andere Social-Media-Website einen "Gefällt mir" -Button verwendet? Meiner Meinung nach war es eine kluge Entscheidung, dies nicht zu tun. Stattdessen können sie die Idee der Community, die die Site antreibt, durch sorgfältiges Entwerfen einer Interaktion verstärken. Das Versenden eines Artikels oder einer Antwort in fünfzig Klatschversuchen nimmt dem Benutzer Zeit in Anspruch, hilft ihm jedoch dabei, sich wirklich mit dem angezeigten Inhalt und der Person, die ihn erstellt hat, zu verbinden.

Sites wie Awwwards und Dribbble haben sich im letzten Jahr für mich als unschätzbar erwiesen. Viele der Entwürfe, die ich erstellt habe, haben sich liberal von den Kreationen anderer großer Designer inspirieren lassen.

Lerne die Theorie

Als ich anfing, eigene Entwürfe zusammenzustellen, konnte ich nicht herausfinden, warum sie so schlecht aussahen und sich so schlecht verhielten. Die Abläufe waren umständlich, die Farben stimmten nicht überein und die Layouts waren inkonsistent.

Ich dachte, ich könnte sofort loslegen und mein Entwicklungswissen zusammen mit meinem Grundwissen darüber, wie Websites als Benutzer funktionieren sollten, nutzen, und es würde gut funktionieren.

Ich habe mich sehr, sehr geirrt. Am Ende habe ich Entwürfe aus Entwicklersicht erstellt, anstatt die Designtheorie als Grundlage zu verwenden.

Entwickler wissen, wie eine Site funktioniert, Designer wissen jedoch, wie sich eine Site verhält und anfühlt. Es gibt eine große Lücke, die Sie nur schließen können, wenn Sie sich eine Grundlage für Designkenntnisse schaffen.

Um ein grundlegendes Verständnis der Designtheorie zu erlangen, habe ich hauptsächlich Medium und Udemy verwendet. Links zu den Ressourcen, die ich verwendet habe, finden Sie im folgenden Abschnitt.

Baue etwas

Jeder Entwickler oder CS-Professor wird Ihnen sagen, dass der beste Weg, ein besserer Programmierer zu werden, darin besteht, Code zu schreiben. Das gleiche Prinzip gilt für das Design.

Es spielt keine Rolle, was Sie entwerfen, solange Sie daraus lernen. Betrachten Sie es als echtes Projekt: Denken Sie an die Benutzer. Erstellen Sie Drahtmodelle, Modelle und Prototypen. Durchlaufen Sie das ursprüngliche Design, um es zu verbessern. Sie können Websites wie Reddit verwenden, um Feedback zu Ihrer Erstellung zu erhalten.

Sie können es sogar mit der Verbesserung Ihrer Entwicklungsfähigkeiten kombinieren. Die meisten meiner jüngsten Nebenprojekte waren von dem gemeinsamen Wunsch motiviert, sowohl meine Fähigkeiten in der Webentwicklung als auch in der Gestaltung zu verbessern. Nachdem Sie Ihr Projekt entworfen haben, können Sie es entwickeln und beide Seiten der Medaille sehen.

Hier sind einige Ideen, um Ihnen den Einstieg zu erleichtern:

  • Entwerfen Sie eine Interaktion. Verwenden Sie die Applaus-Schaltfläche von Medium, um sich inspirieren zu lassen.
  • Entwerfen Sie eine App für Ihre Lieblings-Wohltätigkeitsorganisation. Denken Sie an die verschiedenen Arten von Benutzern: potenzielle, seltene und regelmäßige Benutzer.
  • Gestalten Sie Ihren Lebenslauf. Überlegen Sie, welche Farben Sie verwenden und was diese bedeuten. Überlegen Sie, wie Ihr Lebenslauf verwendet wird. Wird es nur auf einem Bildschirm angezeigt oder ausgedruckt? Wie wirkt sich das auf das Design aus?
  • Neugestaltung einer vorhandenen Website. Dies kann Ihr lokaler Transportanbieter oder eine globale Marke sein. Vergleichen Sie Ihr Design mit dem Original und denken Sie über die Unterschiede aus Anwendersicht nach.
  • Entwerfen Sie etwas Physisches, beispielsweise ein neues Transportmittel oder eine Alternative zu etwas Einfachem wie einer Gabel oder einem Stuhl. Ich habe das Nachdenken über das Gestalten alltäglicher Dinge als eine wirklich nützliche Methode empfunden, um in die Denkweise zu gelangen, etwas Intuitives zu entwerfen.

Gib nicht auf

Wenn ich auf das zurückblicke, was ich vor einem Jahr geschaffen habe, ist es schwer, nicht zusammenzucken. Aber jeder fängt irgendwo an. Es lohnt sich, den Fortschritt in dem zu sehen, was Sie erschaffen. Solange Sie von dem, was Sie tun, lernen, wird Ihre Zeit gut investiert.

Es kann hilfreich sein, in regelmäßigen Abständen den Überblick über das zu behalten, was Sie gelernt haben. Jeden Monat schaue ich auf einige Dinge zurück, an denen ich gearbeitet habe, und versuche, aus den Erfahrungen so viel wie möglich zu machen. Auch wenn es nur darum geht, einige kleine Informationen zu erkennen, die Sie beim Lesen eines Artikels erfasst haben, ist der Vorgang noch nicht abgeschlossen.

Einige Entwürfe, die ich vom ältesten (links) zum neuesten (rechts) erstellt habe

Ressourcen

Unten finden Sie eine kleine Sammlung meiner bevorzugten Tools, Artikel und Kurse. Sie finden viele weitere, die ich hier und hier nicht aufgeführt habe.

Werkzeuge

Figma - Design und Prototyping in Zusammenarbeit.

FramerX - Ähnlich wie Figma, jedoch mit zusätzlichen React- und erkennbaren Komponenten.

Kühler - Entdecken und generieren Sie Farbpaletten.

WebAIM Contrast Checker - Stellen Sie sicher, dass Ihre Farben verfügbar sind.

Archetype - Typografiesystem Editor und Generator.

Artikel

7 Praktische Tipps zum Betrügen bei Design

10 Cheat-Codes zum Entwerfen von Benutzeroberflächen

10 kleine Designfehler, die wir immer noch machen

Bessere Formulare entwerfen

Eine vollständige Liste der UX-Ergebnisse

Die psychologischen Prinzipien, die jeder UI / UX-Designer kennen muss

Verwendung von Farben im UI-Design

16 Zitate, die Sie als UX Designer lesen müssen

Artikel Design Prinzipien in einer einzelnen Karte

Kurse

User Experience Design-Grundlagen - Udemy

Der komplette App Design Kurs - UX, UI und Design Thinking - Udemy

UXTraining.com

Fazit

Ich hoffe, Sie haben etwas von meiner Reise mitnehmen können. Wenn Sie Design-Tipps oder Ressourcen haben, die Ihnen beim Lernen geholfen haben, würde ich sie gerne in den Antworten hören.

Danke fürs Lesen!