Trainieren Sie Ihr Auge: Visual UX Design Tools für Nicht-Designer

Kerning und Kontrast und Hex, oh mein Gott

Google Glass 2.0

Bevor ich mich in UX bewegte, war das letzte Mal, als ich skizzierte, ein Abschluss in einer Set- oder Kostümdesign-Klasse. Am Anfang meiner UX-Erkundung war klar, dass ich meine Baskenmütze herausnehmen und meine Buntstifte und Feinstmarker abbürsten würde.

Ich fand die kostenlose 100-tägige Skizzenherausforderung von Krisztina Szerovay hier auf Medium und fing dort an. Es hat alles verändert. In nur wenigen Wochen habe ich mich nicht mehr darum gekümmert, Quadrate zu zeichnen, sondern wollte mir einen angehenden Grafikrecorder / Sketch Noter / Ink Factory-Praktikant vorstellen.

Ich meine, wie toll ist das Zeug? (Kein Bild von mir)

Ich habe viel mehr über visuelles Design für UX zu lernen und trage meine Kopfhörer mit Lynda.com und CreativeLive-Videos. Manchmal brauche ich etwas mehr… interaktives. Hier sind einige meiner Favoriten und Apps:

Pixel perfekt

Wie groß ist ein Pixel? Bist du sicher? Steigern Sie Ihre Prognose mit Pixactly, einem Online-Tool, mit dem Sie Maße für eine einfache Box zum Zeichnen angeben können. Je weiter Sie weg sind, desto mehr Punkte erhalten Sie. Einfach richtig? NEIN. ES IST NICHT. Aber es ist kostenlos.

Welp.

Kerning

Kern Type: Ein Lernspiel ist ein interaktives Spiel, mit dem Sie gute Typografie visualisieren (und erstellen) können. Ziehen Sie die Buchstaben einfach mit den Pfeiltasten auf Ihrem Desktop oder Laptop näher zusammen oder weiter auseinander. Öffnen Sie die Site auf Ihrem iPad für eine Multitouch-Version. Kostenlos.

Hergestellt von Mark MacKay und María Munuera

Serifen

I Shot the Serif ist ein zeitbasiertes Multi-Level-Spiel, das Ihr Auge auf diese kleinen Schriftenfüße sowie Ihre Reflexe prüft. Wählen Sie Ihr Designer-Level - Junior, Mittelgewicht oder Senior -, um zu beginnen. Dann schießen Sie auf die Serife (aber nicht auf die Sans Serif), um weiterzukommen, und vergleichen Sie Ihre hohen Werte. Hast du ein iPhone? Dafür gibt es eine App. Kostenlos.

Vielen Dank an To the Point

Schriftkennzeichnung

Wenn Sie Playfair nicht von Avenir wissen können, ist Hilfe unterwegs! What the Font ist eine magische Zeichensatzkennung, die durch tiefes Lernen ihre Sammlung von über 133.000 Schriftstilen durchsucht und die beste Übereinstimmung für die Schriftarten in Ihrem Foto findet. Laden Sie einfach ein Bild hoch, klicken Sie auf die Schriftart, die Sie identifizieren möchten, und checken Sie die Ergebnisse aus. Wenn Sie Schriftarten unterwegs identifizieren möchten, können Sie die App aus dem App Store oder Google Play herunterladen. Kostenlos.

Vielen Dank an MyFonts.com

Ressource für die Identifizierung von Bonus-Schriften: Lernen Sie alles, was Sie wollen und mehr mit einer großartigen Website von Fonts.com. Die Fontologie beginnt mit der Anatomie einzelner Zeichen und bietet eine Reihe von Links, die Sie in die Themenbereiche einführen, von der Gestaltung von Zahlen und Symbolen bis hin zum Verständnis einflussreicher Designfiguren.

Schriftpaarungen

Lassen Sie sich in Ihrem nächsten Design glücklich und zufrieden sein, indem Sie Briefformulare kombinieren, die garantiert unausgesprochenen Strom haben. Type Connection, ein typografisches Dating-Spiel, hilft Ihnen dabei, geeignete Paare für Ihre Arbeit zu finden, unabhängig davon, ob Gegensätze anziehen oder Schriftarten bevorzugen, die etwas gemeinsam haben. Und es ist nicht nur zum Spaß: Auf dem Weg dorthin erkunden Sie typografische Terminologie, lernen die Typenhistorie und vertiefen Ihre eigene Verbindung mit Typ. Nun, das ist Liebe. Nur Web Kostenlos.

Erstellt von Aura Seltzer

Lorem Ipsum

Der alte Standby-Modus eignet sich nicht immer für die Darstellung moderner Texte, aber nicht jeder kann den (reizvollen) Textgenerator Jeff Goldblum verwenden. Glücklicherweise hat das britische Content-Marketing-Unternehmen Boom einen alternativen Textgenerator für alle Ihre gefälschten Inhaltsanforderungen entwickelt! Geben Sie einfach Ihr Thema ein und geben Sie die Menge und den Typ der gewünschten Kopie an. Das Tool durchsucht Wikipedia nach Sätzen, die auffallende Ähnlichkeiten mit Ihren zukünftigen Inhalten aufweisen und keine Kunden alarmieren. Kostenlos.

Danke an Boom

Hex-Farben

Hex zu lernen ist wie das Erlernen einer neuen Sprache. Jede Farbe beginnt mit einem Hashtag, zum einen. Dann haben Sie sechs Ziffern, wobei das erste Paar Rot, das zweite Paar Grün und das dritte Paar Blau ist. Die Ziffern können zwischen 0 und 9 liegen, wobei 0 der kleinste Teil einer Farbe ist und 9 mehr von dieser Farbe, ODER von AF ist weiß und #FFFFFF ist schwarz). Glücklicherweise können Sie mit diesem geheimen Designwissen Punkte sammeln! Testen Sie Ihre Augäpfel mit Hex Invaders (machen Sie sich keine Sorgen, es gibt eine kurze Anleitung).

Danke an 352 Inc.

Farbkombinationen

Klar, jedes alte Pipettenwerkzeug kann Ihnen helfen, eine Farbe zu identifizieren. Aber welche Farben passen dazu? Der webbasierte Color Scheme Designer von Paletton bietet Ihnen Wählen Sie Ihre Farbe aus, finden Sie die ergänzende Farbe und sehen Sie Beispiele, wie sie in einem Webdesign zusammen aussehen. Kostenlos.

Danke an Paletton

Farbkontrast

Der Kontrast ist eines der Schlüsselelemente für die Lesbarkeit von Webeigenschaften. Wenn Sie nicht sicher sind, ob Ihre Inhalte für alle zugänglich sind, ist das Kontrastmittel ein praktisches Werkzeug. Sie geben Ihre Hintergrundfarbe und Textfarbe ein und das Werkzeug gibt Ihnen eine Lesbarkeitsbewertung.

Danke an Lea Verou

Zugänglichkeit

Zugänglichkeit ist natürlich mehr als nur Kontrast - und Sie möchten auch, dass sie schön ist. Um sicher zu gehen, dass Ihre Website für jeden einladend ist, machen Sie einen Abstecher zu Color Safe.

Tue das Richtige.

Welche Tools waren hilfreich für Sie, als Sie mit UX angefangen haben? Wenn Sie ein neuer UXer sind, welche Hilfe benötigen Sie? Lass es mich in den Kommentaren wissen!

Houli ist ein UX-Forscher und Designer mit Sitz in Austin, Texas. Verfolge meine Abenteuer hier oder auf Twitter unter @thejhoulihan. Vielen Dank an Andrea St. Clair, dass Sie mir viele dieser Ressourcen vorgestellt haben!