10 großartige UX/UI-Design-Spickzettel

UX/UI-Spickzettel zum Speichern

Jeder braucht manchmal ein wenig Hilfe, sogar die Profis. Es ist schwer, sich an jedes einzelne kleine Detail zu erinnern. Hin und wieder sucht man nach Basics, die man kurzzeitig vergessen hat. Was für eine Zeitverschwendung das sein kann. Also haben wir einige beliebte Design-Spickzettel gesucht und gesammelt, um Ihnen durch den Tag zu helfen und Ihnen zu helfen, die besten UX-Strategien zu entwickeln.

Wenn diese Strategien hilfreich sind, vergessen Sie nicht, sich auch diese Tipps anzusehen, wenn Sie das UX-Design Ihrer Website verbessern.

1. iOS 7 Design-Spickzettel

Die Veröffentlichung von iOS 7 brachte viele Änderungen an der Benutzeroberfläche mit sich, und Designer müssen ihre visuelle Sprache an das neue flache Design von iOS anpassen. Die Rastersysteme, Abmessungen, Typografie und Ikonografie wurden alle von Apple aktualisiert. Ivo Mynttinen war so freundlich, einen Spickzettel (aktualisiert) für Entwickler und Designer zu erstellen, der alle Informationen enthält, die Sie für iOS 7 wissen müssen, einschließlich:

• • Auflösungen auf allen Geräten
  • Zeigen Sie Informationen auf allen Geräten an
  • Abmessungen der App-Symbole (einschließlich Informationen zu Änderungen für das Design mit abgerundeten Ecken und wo eine Vorlage erhältlich ist, da Apple noch keine für iOS7 veröffentlicht hat)
  • Details zu Änderungen in der Benutzeroberfläche
  • Eine Auswahlliste anderer Ressourcen, die Sie beim Entwerfen einer App hilfreich finden werden

Dies spart Ihnen Zeit und Mühe, da Sie nicht nach jedem kleinen Detail suchen müssen. Wenn Sie dies verwenden, müssen Sie keine eigene Liste erstellen. Außerdem ist es eines der umfangreichsten Blätter zum Thema und wunderbar gegliedert.

2. Android-Design-Spickzettel

Natürlich fügen wir Ihnen auch einen ähnlichen Android -Design-Spickzettel bei. Dies ist eine wunderschöne Infografik, die von Meghan Dever, einem Mobile Designer bei Double Encore, Inc., entworfen wurde. Der Designleitfaden für Android enthält diese Informationen, aber es ist viel einfacher, sie in diesem süßen Spickzettel zu finden und zu lesen.

Es wurde für den internen Gebrauch im Unternehmen erstellt, aber sie hielten es für eine so nützliche Zeitersparnis, dass sie es mit der gesamten Community teilen wollten. Dies kommt mit:

• • Android-Textfelder, Suchleisten, Spinner, Picker, Schalter und ihre Anwendungsfälle
  • 9-Patch-Assets mit zusätzlichen Layoutfunktionen für optische Grenzen
  • Android-Gerätegrößen und die zugehörigen Elementgrößen
  • Die richtige Polsterung für UI-Elemente
  • Besonderheiten der Aktionsleiste, des Kontexts und des Launcher-Symbols
  • Umwandlungen von Dp in px

3. Psychologie der Farbinfografik

Ok, es gibt mehr als genug Diagramme, die die Farbpsychologie abdecken, aber das ist mein Favorit, da es viel umfangreicher ist als die anderen. Anstatt nur die Grundlagen (Rot, Gelb, Blau, Lila, Grün) abzudecken, gibt es Ihnen eine Beschreibung von 50 verschiedenen Farben. Es umfasst auch nicht nur positive Emotionen und Ideen, sondern auch die negativen, mit denen verschiedene Farben in Verbindung gebracht werden können.

4. HTML5-Spickzettel

Update 9.9.16: Dieses Blatt ist nicht mehr verfügbar.

Dies ist ein großartiges Referenzblatt, falls Sie gerade HTML5 lernen oder zufällig einen Hirnfurz hatten und ein Tag vergessen haben. Dies ist eine umfangreiche Liste und gibt Ihnen neben den Tags wirklich eine Menge nützlicher Informationen. Es geht besonders detailliert darauf ein, wo die Tags verwendet werden können und welche Browser was unterstützen, sogar auf Geräten. Es kommt mit:

• • Neue Tags, die für HTML5 herausgekommen sind
  • Vorhandene Tags aus HTML4, die weiterhin für HTML5 verfügbar sind
  • Alte Tags, die in HTML5 veraltet sind
  • Attribute und was für sie alt und neu ist
  • Ein Browser-Bereitschaftsdiagramm

5. Ninja UX-Spickzettel

Für die Forschungsphase des UX-Prozesses können Sie sich diesen coolen Spickzettel ansehen, den Hilary Little für ihre CodeFest-Keynote erstellt hat. Dies sind einige Best Practices, die Sie beim Testen von Benutzern beachten sollten.

Dies ist eine weitere großartige Erinnerung an die Grundlagen für die Profis und perfekt für alle, die neu sind und gute Ratschläge und Tipps benötigen. Sie können sich auch ihre Präsentation von der Keynote hier ansehen. Dies wird den Spickzettel sehr gut ergänzen und dem ersten UX-Designer oder Unternehmer eine großartige Richtung geben.

6. Spickzettel-Webformular-Design

Das Smashing Magazine hat uns diese Schönheit gebracht, damit wir sie nutzen und teilen können. Es ist ein beschreibender Spickzettel zum Entwerfen großartiger Formulare. Die Designer dieses Spickzettels sind versiert im Entwerfen und Testen von Formularen.

Sie beschlossen, die häufigsten Probleme zu finden und zu beschreiben, wie sie sie beheben, und dann alles in diesen großartigen Designer-Spickzettel zu packen. Sie wollten etwas schaffen, um die Formulare aller zu verbessern. Es enthält eine Omnigraffle-Vorlage sowie Beispiele für Photoshop (PSD) und PDF, die Sie herunterladen können. Es enthält ausgezeichnete Ratschläge, Gebote und Verbote sowie einige Layoutbeispiele, die Sie verwenden können.

7. jQuery-Spickzettel

Dies ist eine großartige organisierte Liste von jQuery-Elementen, die Sie als Referenz verwenden können, wenn Sie sich an etwas nicht erinnern können. Es wurde von Oscar Otero erstellt, einem Webdesigner und -entwickler, der weiß, wie praktisch diese Dinge sein können. Es kommt mit:

• Selektoren
• Attribute/CSS
• Manipulation
• Überqueren
• Veranstaltungen
• Auswirkungen
• Ajax
• Kern

Dieser spezielle Design-Spickzettel verfügt auch über eine fantastische Suchfunktion. Sie können die gesuchte Version von jQuery auswählen und nach bestimmten Optionen suchen. Dies ist ein großartiges Werkzeug, das Sie als schnelles und einfaches Nachschlagewerk zur Hand haben sollten.

8. UX-Terminologie

Als UX-Designer interagierst du mit vielen verschiedenen Menschen innerhalb einer Organisation und nicht jeder kennt den Jargon. Wäre es nicht toll, wenn man sich nicht ständig erklären müsste? Sie können es Ihren Kollegen aushändigen, damit sie verstehen, wovon Sie sprechen. Es wurde Ihnen von Bride Trozelli präsentiert und beinhaltet:

• UX-Praxis
• UX-Rollen
• UX-Aktivitäten
• Begriffe der Benutzeroberfläche
• UX-Ergebnisse

9. Spickzettel für JQuery-Symbole

Dies ist eine unglaublich schnelle Liste von Symbolen, die Sie mit jQuery erstellen können. Viele von Ihnen kennen vielleicht schon ein paar davon, aber komm schon!

Nicht jeder von uns kann sich jeden einzelnen von ihnen merken. Dies wird für diejenigen von uns nützlich sein, die es schwer haben, sich Informationen aus dem Kopf zu holen. Es ist auch super für Anfänger.

Dies wurde Ihnen von Pete Freitag von Foundeo Inc. präsentiert. Persönlich ist dies mein Favorit unter allen Designer-Spickzetteln.

10. WordPress-Spickzettel

Leser Mike Wallagher von Startbloggingonline.com hat diese von ihm entwickelten WordPress-Spickzettel geteilt. Diese sind sowohl für Anfänger als auch für Fortgeschrittene großartig, da er beide Versionen anbietet. Schau sie dir an! Und wenn Sie technische Unterstützung benötigen, holen Sie sich WordPress-Hilfe von WP Buffs!

Haben Sie coole Design-Spickzettel, die Sie teilen möchten? Lassen Sie es uns in den Kommentaren unten wissen.