20 astuces rapides pour les UI/UX Designer



L’expérience Utilisateur, nous en parlons souvent mais pourtant pas assez. Sur la toile, il est extrêmement important de prendre en compte l’utilisateur et lui faciliter la vie (pour un ROI, il ne faut pas se leurrer) pour toute sa navigation. Pour cela, l’UI (user interface) est au service de l’UX (user experience).

Un designer américain Steve Schoger a eu la bonne idée de twitter des « petites » astuces rapide pour aider à prendre les bons choix dans la conception graphique. Des petites astuces faciles à mettre en place pour améliorer l’expérience. Un choix de couleurs, une bonne mise en page, des espaces bien gérés. Autant d’astuces que vous allez pouvoir apprécier et qui vous aidera surement dans une conception de sites web, applications mobiles et autres…

1 – Call to action subtil pour les liens négatifs

Un bouton de suppression ou d’annulation est considéré comme un lien négatif. Sans pour autant le mettre en tout petit, il faut qu’il soit visible sans le mettre forcément en avant.

2 -Un alignement des textes impeccable

L’alignement des textes, en particularité quand ils sont accompagnés d’icônes doivent créer l’espace par leur alignement. et non pas forcer le lecteur à « revenir en arrière » pour continuer sa lecture.

3 – Moins de bordure

Les bordures surchargent clairement le design quand il y en a trop. Il arrive un temps où on peut s’en passer au profit d’un simple fond de couleurs en transparence.

4 – Des dégradés plus chaud pour plus attirer l’oeil

5 – Une ombre sur un texte pour augmenter la lisibilité

Regardez la petite ombre sur le texte fait totalement ressortir alors qu’à la base, la lisibilité est bonne. Là elle est encore plus flagrante.

6 – Désaturation de photo + Couleur = Création d’une zone à contraste

Créer une zone de texte grâce à de la couleur et une désaturation + Colorisation permet un contraste fort.

7 – Superposition des blocs

Cette superposition des blocs aide à la lecture, donne du dynamisme et accompagne l’internaute à scroller.

8 – Ombre portée orientée vers le bas pour un rendu plus « cool »

9 – Effet de texte sur un background

10 – Icon plus claire que le texte pour une meilleur lisibilité

Les icônes aident à la compréhension du texte. Ici, il ne faut pas que cela prenne trop le pas sur le texte du menu. On voit bien qu’une icône un peu plus claire aide à attirer l’oeil sur le texte du menu.

11 – Remplacer les « listes à puces » par des « checks »

Les listes à puce c’est bien mais qu’elles soient remplacé par des icônes donne un aspect coloré, améliore la compréhension (ici, cela insinue que c’est inclus)

12 – Une barre de 4px en haut de site pour une meilleure création d’univers

Complètement adepte de ce genre de mini-barre en haut de site, elle donne une vrai vie au site et contribue à la création d’univers.

13 – Utiliser des contrastes de couleurs plutot qu’un HR

14 – Taille de Typo, voyez en grand

Nos yeux sont fatigués, pensez-y pour que tout le monde puisse lire correctement. Une typo un peu plus grande aidera les internautes à lire plus facilement vos contenus et a y rester plus longtemps.

15 – L’interlettrage des titres en majuscules augmenté

Donne une vrai consistance à un titre. On voit clairement la différence et ce que cela apporte.

16 – Les petits détails dans les formulaires

17 – Des séparateurs pour condenser les contenus

Créer des zones d’action, au lieu que cela « flotte », cela structure le site et la zone.

18 – Structurer la hiérarchie par des espacements

19 – 2/3 1/3 pour les formulaires

20 – Saturation, Bold, des petits rien qui changent tout

Bien garder en tête que multiplier les tailles de typo va complexifier la lecture. Dès fois, rien qu’une désaturation ou un « gras » permet de changer la donne.



Vous Allez Aimer Ces Articles

17.3kFans
5.1kFollowers
390Followers
246Followers
La newsletter Olybop.fr

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.