Erste Schritte mit UX Design in Sketch

Eine Einführung für neue UX-Designer und Designstudenten

Wir haben in den letzten zwei Jahren viel über Sketch-Tipps bei UX Power Tools geschrieben. Ich wollte sie so organisieren, dass sie Designern helfen, die gerade erst in UX einsteigen.

Ich sollte auch erwähnen, dass ich nicht diskutieren werde, welches Tool das beste ist - ich gehe nur davon aus, dass Sie bereits erkannt haben, dass Sketch das beste ist (im Moment), und dass Sie wissen möchten, wie man es als UX Designer verwendet

Ich habe unsere Artikel in fünf Abschnitte unterteilt, die zeigen, wie sich meiner Meinung nach neue Designer vom Anfänger zum Meister entwickeln:

  • Ideen rausholen
  • Loslegen
  • Schneller werden
  • Smarter werden
  • Visualisierung

Ideen rausholen

Das UX-Design beginnt, bevor Sie zu den Tools gelangen - es beginnt, wenn Sie Ideen aus dem Kopf bekommen (… es beginnt tatsächlich viel früher mit Nachforschungen, aber lassen Sie uns diesen Artikel unter 20 Minuten belassen).

Zugegeben, ich springe ziemlich früh direkt in die digitalen Werkzeuge. Das liegt aber vor allem daran, dass ich mehr im Kopf habe und gemeinsam mit meinem Designteam auf einem Whiteboard skizziere. UX-Designer, die gerade erst anfangen, sollten wirklich in Low-Fidelity-Qualität bleiben, während sie den Problembereich erkunden und Fehler machen.

Sobald Sie bereit sind, etwas auf den Bildschirm zu bringen, gibt es meines Erachtens zwei Tools, die dies sehr gut ermöglichen. Das erste ist ein InVision-Tool namens Freehand, das wir überprüft haben:

Das zweite Tool, das diese Phase des Entwurfs erleichtert, ist eine Reihe von Premium-Bibliotheken für Sketch mit dem Namen Flowkit von Matt D. Smith. Es ist den Preis von 29 US-Dollar wert.

Es eignet sich nicht nur hervorragend für Wireframing mit niedriger Wiedergabetreue, sondern kann auch in späteren Phasen Ihres Designs verwendet werden, wenn Sie wichtige Workflows in hoher Wiedergabetreue abbilden müssen, um Ihr Design zu kommunizieren.

Loslegen

Bei weitem die größte Stärke von Sketch for UX Design ist die Betonung der Wiederholbarkeit und Schnelligkeit.

Es ist immer noch ziemlich alarmierend zu sehen, wie viele Skizzendesigner Dinge nicht so einfach und leistungsstark wie freigegebene Stile oder neuere Fortschritte wie verschachtelte Symbole verwenden. Ich vermute, das liegt daran, dass Designer ungeduldig werden und einfach nur etwas rausholen wollen. Ich verstehe es total.

Aber gutes Design ist nur so gut, wie ein Designer organisiert ist. Wir mögen die Metapher des Kochens:

Außerdem erweitern wir gerne das Konzept von Stylesheets vom Code zum Design (seit wir das geschrieben haben, sind Design-Systeme in der Szene explodiert, aber die meisten dieser Techniken sind bis heute relevant):

Und zum Schluss noch eine Fülle von Artikeln darüber, wie man ein Projekt in Sketch startet, das alles abdeckt (bis hin zur Ordnerstruktur):

Mit einem Bonusartikel zum Einrichten von Layouts in Sketch:

Schneller werden

Ok, jetzt, da Sie wissen, wie Sie ein Sketch-Projekt effektiv starten können, ist es an der Zeit, mit dem Tool schneller zu werden. Persönlich finde ich es geradezu beleidigend, wenn ein Designer beim Entwerfen keine Abkürzungen verwendet - ich meine, es tut meiner Seele wirklich weh. Sei nicht dieser Typ / dieses Mädel:

Seit wir diesen Artikel geschrieben haben, sind ungefähr eineinhalb Millionen neuer Tools und Plugins herausgekommen, aber ehrlich gesagt, haben sich die besten Begleiter für Sketch meiner Meinung nach nicht wirklich geändert (Nudg.it wird jetzt in Sketch, Anima, nativ unterstützt ist auch dann noch nützlich, wenn ein Teil davon in die Layoutfunktionalität von Sketch integriert wurde):

Tipps und Tricks

Jon Moore hat seine Power-User-Weisheit in ein paar Artikeln vermittelt, die Sie in ihrer Einfachheit und Kraft umhauen werden:

Smarter werden

Sie wissen, wie man ein Projekt einrichtet, wie man mit Sketch schneller wird und jetzt ist es an der Zeit, all dies auf UX-Design anzuwenden.

Wie ich bereits sagte, eignet sich Sketch perfekt für UX-Design, da es Wiederholungen, Konsistenz und Modularität vereinfacht. Hier sind einige Beispiele, wie Sie mit Sketch UI-Elemente intelligent gestalten können (und alle enthalten Werbegeschenke ):

Effizienter Umgang mit Symbolen und Grafiken

Wir werden uns im nächsten Abschnitt mit dem visuellen Design von UX befassen, aber der Umgang mit Grafiken liegt häufig außerhalb des Steuerhauses eines UX-Designers. Anstatt sich Gedanken über das Erstellen von Symbolen zu machen, lernen Sie, wie Sie sie verwenden:

Verschachtelte Symbole können tatsächlich einiges automatisieren:

Schließlich wäre es mir ein Rätsel, wenn ich nicht auf Sketch 'größten Fortschritt in den letzten 12 Monaten hingewiesen hätte - Bibliotheken:

Visualisierung

Als ob all das nicht genug wäre, müssen UX-Designer heute einen viel höheren Standard erfüllen, wenn es um visuelles Design geht.

Als ich mit dem UX-Design anfing, fand ich es schwierig, mich mit den „Materialien“ vertraut zu machen, mit denen ich arbeiten musste: Seitenverhältnisse, Schriftgrößen, Gewichte, Farbkontraste usw.

Um besser zu werden, habe ich zunächst vorhandene Produkte kopiert, um ein Gefühl dafür zu bekommen, wie die Benutzeroberfläche aufgebaut ist.

Wir haben das letzte Jahr behandelt und Links zu einigen gängigen Produkten bereitgestellt, die in Sketch neu erstellt wurden (obwohl einige von ihnen seitdem neu gestaltet wurden):

Von da an können Sie wirklich anfangen, einige kleine Techniken anzuwenden, um Ihren Entwürfen ein wenig Flair zu verleihen:

Vergessen Sie jedoch nicht, dass genaue Probendaten für die visuelle Gestaltung genauso wichtig sind wie die Grafiken selbst:

* Wir haben Teil 2 nie geschrieben

Zu guter Letzt müssen Sie irgendwann in Ihrer Karriere ein Dashboard entwerfen, und es ist oft einer der größten Albträume für einen UX-Designer. Persönlich stelle ich fest, dass Dashboards nur einen geringen Wert für die Tabelle haben. Daher möchte ich nicht tagelang dafür sorgen, dass die Diagramme gut aussehen:

Es waren erstaunliche 18 Monate, die der Design-Community mit UX Power Tools geholfen haben. Und obwohl Sketch sicherlich nicht das einzige Werkzeug ist, das ein Designer in seinem Arsenal haben sollte, ist es sicherlich das mächtigste. Ich hoffe, dieser Anhang wird all jenen von Ihnen helfen, die gerade erst in eine UX-Karriere eingestiegen sind oder für Ihren Design-Workflow auf Sketch umsteigen.

Wenn Sie an einem Vanille-Design-System interessiert sind, das sich perfekt für den Start neuer Projekte eignet, würden wir uns freuen, wenn Sie sich die von uns erstellten ansehen. Sie sparen Ihnen Tausende von Stunden an Entwicklungszeit:

Wenn ich keine Sketch-Artikel auf Medium sammle, arbeite ich bei UX Power Tools an Sketch-Designtools, um Sie zu einem besseren und effizienteren Designer zu machen.

Folgen Sie UX Power Tools auf Twitter
Folge mir auf Twitter