10 grandes feuilles de triche de conception UX / UI

Aide-mémoire UX/UI à enregistrer

Tout le monde a parfois besoin d'un peu d'aide, même les pros. Il est difficile de se souvenir de chaque petit détail. De temps en temps, vous finissez par rechercher des bases que vous avez momentanément oubliées. Quelle perte de temps cela peut être. Nous avons donc recherché et collecté des feuilles de triche de conception populaires pour vous aider tout au long de votre journée et vous aider à avoir les meilleures stratégies UX.

Si ces stratégies sont utiles, n'oubliez pas de consulter également ces conseils lors de l'amélioration de la conception UX de votre site Web.

1. Feuille de triche de conception iOS 7

La sortie d'iOS 7 a apporté de nombreux changements à l'interface et les concepteurs devront adapter leur langage visuel pour s'adapter au nouveau design plat d'iOS. Les systèmes de grille, les dimensions, la typographie et l'iconographie ont tous été mis à jour par Apple. Ivo Mynttinen a eu la gentillesse de créer une feuille de triche (mise à jour) pour les développeurs et les concepteurs couvrant toutes les informations dont vous aurez besoin pour l'iOS 7, notamment :

• • Résolutions sur tous les appareils
  • Afficher les informations sur tous les appareils
  • Dimensions de l'icône de l'application (y compris des informations sur les modifications apportées à la conception des coins arrondis et où obtenir un modèle car Apple n'en a pas encore publié un pour iOS7)
  • Détails sur les modifications de l'interface utilisateur
  • Une courte liste d'autres ressources que vous trouverez utiles lors de la conception d'une application

Cela vous fera gagner du temps et des efforts maintenant que vous n'aurez plus à chercher chaque petit détail. En utilisant cela, vous n'aurez pas à compiler votre propre liste. De plus, c'est l'une des fiches les plus complètes sur le sujet et elle est merveilleusement organisée.

2. Feuille de triche de conception Android

Bien sûr, nous incluons également une feuille de triche de conception Android similaire pour vous. Il s'agit d'une magnifique infographie conçue par Meghan Dever, un concepteur mobile chez Double Encore, Inc. Le guide de conception pour Android contient ces informations, mais il est beaucoup plus facile de les trouver et de les lire dans cette jolie feuille de triche.

Il a été créé pour un usage interne dans l'entreprise mais ils ont pensé que c'était un gain de temps tellement utile qu'ils ont voulu le partager avec toute la communauté. Cela vient avec :

• • Champs de texte Android, barres de recherche, spinners, sélecteurs, commutateurs et leurs cas d'utilisation
  • Actifs à 9 patchs, avec l'ajout de capacités de mise en page des limites optiques
  • Tailles des appareils Android et tailles des éléments associés
  • Le rembourrage approprié pour les éléments de l'interface utilisateur
  • Spécificités de la barre d'action, de l'icône contextuelle et du lanceur
  • Conversions dp en px

3. Infographie sur la psychologie de la couleur

Ok, il y a donc plus qu'assez de tableaux qui couvrent la psychologie des couleurs, mais celui-ci est mon préféré car il est beaucoup plus complet que les autres. Au lieu de couvrir uniquement les bases (rouge, jaune, bleu, violet, vert), il vous donne une description de 50 couleurs différentes. Il couvre non seulement les émotions et les idées positives, mais également les émotions négatives auxquelles différentes couleurs peuvent être associées.

4. Aide-mémoire HTML5

Mise à jour 09/09/16 : Cette fiche n'est plus disponible.

Il s'agit d'une excellente feuille de référence au cas où vous venez d'apprendre HTML5 ou que vous venez d'avoir un pet cérébral et que vous avez oublié une balise. Il s'agit d'une longue liste qui vous donne vraiment beaucoup d'informations utiles en plus des balises. Il entre dans des détails supplémentaires concernant l'endroit où les balises peuvent être utilisées et quels navigateurs prennent en charge quoi, même sur les appareils. Il est livré avec:

• • Nouveaux tags sortis pour HTML5
  • Balises existantes de HTML4 qui sont toujours disponibles pour HTML5
  • Anciennes balises obsolètes en HTML5
  • Les attributs et ce qui est ancien et nouveau pour eux aussi
  • Un tableau de préparation du navigateur

5. Aide-mémoire Ninja UX

Pour l'étape de recherche du processus UX, vous pouvez jeter un œil à cette feuille de triche cool faite par Hilary Little pour son discours d'ouverture CodeFest. Ce sont quelques bonnes pratiques à garder à l'esprit lors du test des utilisateurs.

Ceci est un autre excellent rappel des bases pour les pros et parfait pour toute personne nouvelle et ayant besoin de bons conseils et astuces. Vous pouvez également consulter sa présentation du discours d'ouverture ici. Cela complétera assez bien la feuille de triche et donnera au premier concepteur ou entrepreneur UX une bonne direction.

6. Conception de formulaire Web de feuille de triche

Smashing Magazine nous a apporté cette beauté afin que nous puissions l'utiliser et la partager. Il s'agit d'une feuille de triche descriptive pour concevoir de superbes formulaires. Les concepteurs de cette feuille de berceau connaissent bien la conception et les tests de formulaires.

Ils ont décidé de trouver les problèmes les plus courants et de décrire comment ils les résolvent, puis de tout mettre dans cette excellente feuille de triche de concepteur. Ils voulaient créer quelque chose pour améliorer les formulaires de chacun. Il contient un modèle Omnigraffle, ainsi que des exemples Photoshop (PSD) et PDF à télécharger. Il est livré avec d'excellents conseils, des choses à faire et à ne pas faire, et quelques exemples de mise en page que vous pouvez utiliser.

7. Aide-mémoire jQuery

Il s'agit d'une liste organisée impressionnante d'éléments jQuery que vous pouvez utiliser comme référence lorsque vous ne vous souvenez pas de quelque chose. Il a été réalisé par Oscar Otero, un concepteur et développeur Web qui sait à quel point ces choses peuvent être pratiques. Il est livré avec:

• Sélecteurs
• Attributs/CSS
• Manipulation
• Traversant
• Événements
• Effets
• Ajax
• Cœur

Cette feuille de triche de conception particulière est également livrée avec une fonction de recherche impressionnante. Vous pouvez sélectionner la version de jQuery que vous recherchez et rechercher des options spécifiques. C'est un excellent outil à avoir sous la main comme référence rapide et facile.

8. Terminologie UX

En tant que concepteur UX, vous interagissez avec de nombreuses personnes différentes au sein d'une organisation et tout le monde ne connaît pas le jargon. Ne serait-ce pas formidable si vous n'aviez pas à vous expliquer constamment ? C'est à vous de le distribuer à vos collègues pour les aider à comprendre de quoi vous parlez. Il vous a été présenté par Bride Trozelli et comprend :

• Pratique UX
• Rôles UX
• Activités UX
• Termes de l'interface utilisateur
• Livrables UX

9. Feuille de triche des icônes JQuery

Il s'agit d'une incroyable liste rapide d'icônes que vous pouvez créer avec jQuery. Beaucoup d'entre vous en connaissent peut-être déjà un tas, mais allez !

Nous ne pouvons pas tous mémoriser chacun d'eux. Cela sera utile pour ceux d'entre nous qui ont du mal à se rappeler des informations en tête. Il est également idéal pour les débutants.

Cela vous a été présenté par Pete Freitag de Foundeo Inc. Personnellement, c'est ma préférée de toutes les feuilles de triche de concepteur.

10. Feuilles de triche WordPress

Le lecteur Mike Wallagher de Startbloggingonline.com a partagé ces feuilles de triche WordPress qu'il a développées. Ceux-ci sont parfaits pour les débutants et les utilisateurs avancés car il propose les deux versions. Vérifie-les! Et si vous avez besoin d'assistance technique, obtenez de l' aide WordPress auprès de WP Buffs !

Vous avez des feuilles de triche de conception cool que vous souhaitez partager? Faites-le nous savoir dans les commentaires ci-dessous.