{"id":18742,"date":"2020-05-20T10:30:02","date_gmt":"2020-05-20T08:30:02","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=18742"},"modified":"2025-08-20T17:23:35","modified_gmt":"2025-08-20T15:23:35","slug":"ux-ui-design-regles-valoriser-creations","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/ux-ui-design-regles-valoriser-creations\/","title":{"rendered":"UX\/UI Design\u00a0: 5 r\u00e8gles pour valoriser vos cr\u00e9ations"},"content":{"rendered":"

L\u2019UX<\/a> et l\u2019UI design<\/a> sont maintenant des composants essentiels de toute cr\u00e9ation d\u2019application ou de page web.<\/p>\n

Voici les r\u00e8gles de base \u00e0 suivre pour que ces derni\u00e8res soient \u00e0 la fois pratiques et agr\u00e9ables \u00e0 regarder. Si, si, on peut \u00eatre beau et intelligent, vous verrez.<\/p>\n

 <\/p>\n

1. Dirigez correctement la lumi\u00e8re<\/h2>\n

D\u2019o\u00f9 vient la lumi\u00e8re, dans la vraie vie\u00a0? D\u2019en haut. Si le soleil est en dessous de vous, c\u2019est que vous n\u2019\u00eates pas en train de marcher sur la plan\u00e8te Terre.<\/p>\n

\"\"<\/p>\n

Il en est de m\u00eame sur les \u00e9crans. Et on en vient ainsi tr\u00e8s rapidement aux ombres. L\u2019ombre d\u2019un bouton, d\u2019une fen\u00eatre, ou qui sert \u00e0 mettre en \u00e9vidence un texte ou une photo\u2026 Elle sera sous l\u2019\u00e9l\u00e9ment choisi. Parce que son \u00e9clairage vient d\u2019en haut.<\/p><\/blockquote>\n

\u00c9videmment, si vous cherchez un effet extra-terrestre, vous pouvez tenter l\u2019option inverse. Mais, en r\u00e8gle g\u00e9n\u00e9rale, ce n\u2019est pas conseill\u00e9. D\u2019autant qu\u2019ajouter un soup\u00e7on d\u2019ombre rendra l\u2019effet visuel plus naturel, plus intuitif\u2026 et donc plus pratique pour l\u2019utilisateur.<\/p>\n

\u00c0 lire aussi : Web design : le guide du mode sombre<\/a><\/p><\/blockquote>\n

 <\/p>\n

2. Pensez en noir et blanc<\/h2>\n

Tracez en priorit\u00e9 le plan de vos pages en noir et blanc. De une, parce que c\u2019est plus facile (vous pourrez vous pr\u00e9occuper plus tard de la nuance de vert \u00e0 appliquer). De deux, parce que cette technique vous oblige \u00e0 vous focaliser sur l\u2019essentiel.<\/p>\n

\"\"<\/p>\n

En noir et blanc, vous rep\u00e9rerez plus rapidement les \u00e9l\u00e9ments forts et faibles, les endroits qui sont le plus mis en valeur. Vous \u00eatre oblig\u00e9 d\u2019\u00eatre plus concentr\u00e9. Et donc plus efficace.<\/p>\n

Et quand vous ajouterez enfin de la couleur, vous pourrez penser en termes de contrastes.<\/a> Un simple mot en couleur sur un fond en noir et blanc attire tout de suite l\u2019attention. De m\u00eame que du noir et blanc bien nets transmettent plus d\u2019\u00e9motion que des niveaux de gris.<\/p>\n

\u00c0 lire aussi : 9 conseils pour utiliser la couleur noire dans vos cr\u00e9ations print et web<\/a> <\/p><\/blockquote>\n

 <\/p>\n

3. Visez l\u2019hyper espace<\/h2>\n

Il est temps de vous pencher sur les espaces blancs.<\/p>\n

\"\"<\/p>\n

En avez-vous pr\u00e9vu dans votre design\u00a0? Autre question\u00a0: en avez-vous pr\u00e9vu suffisamment ?\u00a0Car l\u2019espace vide est ce qui vous aidera \u00e0 mettre en valeur vos diff\u00e9rents \u00e9l\u00e9ments, textuels ou visuels.<\/p>\n

N\u2019ayez pas peur d\u2019en mettre trop\u00a0: en r\u00e9alit\u00e9, la nature n\u2019a pas horreur du vide. Au contraire, plus vous laisserez respirer votre design, plus il semblera agr\u00e9able \u00e0 regarder. L\u2019espace blanc, c\u2019est la version du luxe en webdesign.<\/p><\/blockquote>\n

\u00c0 lire aussi :\u00a0Web design : 5 raisons de laisser des espaces blancs<\/a> <\/p><\/blockquote>\n

 <\/p>\n

4. \u00c9crivez lisiblement sur vos photos<\/h2>\n

Nous vivons dans une \u00e8re visuelle. Donc, vous ne pouvez pas vous contenter de pr\u00e9senter une page juste avec du texte. Vous y ajouterez des images, des photos. Et, parfois, vous \u00e9crirez sur ces derni\u00e8res.<\/p>\n

\"\"<\/p>\n

Attention : Il y a un seul probl\u00e8me\u00a0: si vos mots ne sont pas lisibles, ils ne servent \u00e0 rien. On parle toujours d\u2019am\u00e9liorer l\u2019exp\u00e9rience de l\u2019utilisateur. Et il faut bien reconna\u00eetre que simplement ajouter ces derniers sur une photo, cela ne fonctionne pas \u00e0 tous les coups. D\u00e8s que l\u2019arri\u00e8re-plan est clair, vos mots en blanc se fondront dans le d\u00e9cor.<\/p><\/blockquote>\n

Voil\u00e0 quelques techniques pour contourner ce probl\u00e8me\u00a0:<\/p>\n