Conseils de conception Web simples pour de bons résultats

Il existe une infinité de façons de concevoir un site Web. Dans cet esprit, il existe également des moyens infinis de tout gâcher. Il existe deux méthodes principales pour éviter de tomber dans la deuxième catégorie: apprendre les principes fondamentaux de la conception et les appliquer en conséquence. Vous devez également être suffisamment expérimenté pour avoir appris ce qui fonctionne bien et ce qui ne fonctionne pas.

Tous les designers empruntent des parcours d'apprentissage différents et se trouvent souvent à des étapes différentes de leur parcours. Si vous lisez ceci, j'espère que vous essayez également d'améliorer encore votre travail et de produire de meilleurs designs.

Malheureusement, il n'y a aucun moyen d'intégrer toutes les connaissances nécessaires en 1500 mots. Au lieu de cela, nous allons simplement cibler quelques astuces pour vous faire repenser la façon dont vous pouvez aborder les éléments UX / UI. Idéalement, cette façon de penser peut également être appliquée à d'autres domaines de votre travail de conception.

Commencez par une bonne compréhension du produit / site

Il est extrêmement difficile de faire de la conception lorsque vous ne comprenez pas parfaitement le contenu / site Web. Maintenant, vous n'avez pas besoin d'étudier la médecine pour créer un site Web médical, ce n'est pas le but. Cependant, vous devez savoir comment un utilisateur accèderait aux informations dont il / elle pourrait avoir besoin.

Si vous souhaitez concevoir une application de création musicale, vous devez d'abord en prendre quelques-unes, jouer avec elles pour vous en faire une idée, en savoir plus sur la théorie qui la sous-tend et sur le fonctionnement de certains éléments.

Idéalement, vous devriez travailler avec votre client, qui devrait également être très impliqué dans le projet et vouloir vous aider à mettre en œuvre une meilleure UX pour ses utilisateurs.

Cependant, si vous n'avez pas une compréhension fondamentale de ce qu'est le site et du problème qu'il résout, vous pouvez paralyser l'expérience utilisateur ou vous forcer à suivre les solutions existantes et simplement les redessiner (ce qui fonctionne parfois).

Pour les sites Web, vous devez avoir le plan du site devant vous afin de travailler sur une navigation appropriée et de prendre des décisions sur les éléments qui conviendraient bien à certaines pages de destination. Si vous faites une conception d'une «chocolaterie», vous pouvez présenter visuellement le processus de fabrication ou faire un vidage d'informations. Tout dépend des objectifs du site.

Toutes ces informations sont nécessaires à l'avance pour avoir un taux de réussite plus élevé. Compte tenu de la complexité de cette situation, cela pourrait vous arriver si vous êtes un designer indépendant débutant, il est donc préférable de poser beaucoup de questions dès le début. Si vous travaillez en équipe, n'oubliez pas de consulter les membres de votre équipe sur le contenu, l'expérience utilisateur, l'objectif et plus encore.

Trucs et astuces spécifiques à la conception:

Voyons maintenant quelques astuces UI / UX spécifiques que vous pouvez utiliser dans votre prochaine conception:

1 - Contraste!

Il est si facile de gâcher le contraste sur un site. Un moyen rapide de repérer un concepteur moins expérimenté serait de vérifier le contraste global. Voir cet exemple:

La source

Vous voyez à quel point le texte est léger partout? Les boutons verts avec du texte blanc, le texte gris clair?. Comparons-le à une interface utilisateur plus contrastée:

La source

Une grande partie de la police est noire (ou presque noire) avec juste des informations moins importantes légèrement plus grises. Le vert est plus foncé, ce qui permet désormais du texte blanc sur le dessus.

Le conseil ici est - lorsque vous travaillez avec du texte, commencez par Noir sur blanc ou blanc sur noir. Au fur et à mesure que vous ajoutez d'autres éléments et que vous devez les séparer avec une hiérarchie visuelle, essayez d'abord de mettre en gras ou de modifier la taille de la police. Seulement après cela, si cela ne fonctionne pas, optez pour des changements de couleur, mais idéalement pas plus de 30 à 40% de différence (généralement l'opacité est réglée à 70%).

2 - Espace blanc cohérent

Une autre erreur courante serait d'avoir un espacement incohérent autour des éléments. En fait, il est si courant que la plupart des concepteurs continuent de se débattre avec cela après des années de travail et c'est tout à fait compréhensible - nous déplaçons les boîtes avec la souris. Il est facile de glisser un peu et de le déplacer d'un pixel ou deux sur le côté. Ou vous n'avez peut-être pas encore suffisamment formé votre œil pour repérer directement cette différence.

Dans l'exemple suivant, regardez comment les différents composants ont différents espaces blancs autour d'eux. Certains sont encombrés, certains sont beaucoup espacés. Cela n'a pas l'air très cohérent visuellement.

En revanche, voici un exemple avec une quantité plus ou moins similaire de contenu / type de composants mais avec un aspect plus cohérent:

La source

Il existe différentes façons d'y parvenir, mais la plupart du temps, cela ne fonctionne pas uniquement avec des mesures. C'est souvent une «sensation» quand vous le regardez. At-il l'air équilibré? Si vous avez des boîtes, vous pouvez toujours mesurer quelque chose comme 30px sur les côtés, 30px sous le titre, 15px sous sous-titre, etc. Et c'est une bonne approche! Mais avec des éléments visuels plus volumineux comme les titres ou les images, vous voudrez peut-être l'augmenter un peu pour compenser l'élément le plus lourd.

3 - Couleur

Un autre élément fondamental d'un bon design. Les couleurs doivent bien fonctionner ensemble. Une façon simple d'aborder les sites Web est de s'en tenir à une seule couleur primaire et de garder le reste monochromatique.

L'exemple suivant suit les trois suggestions jusqu'à présent - Bon contraste, équilibre et utilisation de la couleur:

La source

Un moyen simple de commencer avec les couleurs est de suivre certains schémas de couleurs bien reçus de sites comme https://colorhunt.co/ ou de s'inspirer de Dribbble pour les combinaisons. Travailler avec la roue chromatique est utile pour comprendre les combinaisons, mais il faut souvent une petite touche supplémentaire de la part des concepteurs pour déterminer les meilleures combinaisons. Les roues chromatiques ne produisent souvent pas les couleurs parfaites à appliquer dans un dessin.

Exemple de la roue chromatique d'Adobe:

La source

Une belle couleur verte au milieu mais un peu difficile à utiliser les résultats du côté gauche / droit.

4 - Respectez un style sur tout le site

Créer l'ambiance d'un site Web est l'une des tâches principales du concepteur. Bien que l'idée de «joli» soit très difficile à définir, d'autant plus que les gens ont souvent une vision différente de ce qui est beau et de ce qui ne l'est pas. . Au lieu de vous en soucier, concentrez-vous sur la cohérence et restez fidèle au style.

Qu'est-ce que ça veut dire? Eh bien, concevons un bouton. Nous définissons la taille de la police, la police, la couleur, l'arrière-plan, l'espacement, etc. Et nous obtenons quelque chose comme ceci:

Maintenant, si nous devons ajouter une image et un titre, nous pouvons peut-être réaliser quelque chose comme ceci:

Voir les coins. Tous les coins parfaits à 90 degrés, sans arrondi. Maintenant, cela signifie que notre conception suivra principalement des angles vifs. Et cela semble plus cohérent si l'image a aussi ces coins parfaits. Tout comme si nous ajoutions des entrées, ils auraient tous ces coins plus nets. Ajoutons un élément de plus:

Nous avons ajouté une grille de cases dans les coins supérieur droit et inférieur gauche. Celles-ci auraient pu être des cercles, mais pour conserver un aspect net, nous les avons placées en carrés. La même réflexion devrait être maintenue sur l'ensemble du site. Si vous commencez à changer des éléments, vous risquez de commencer à en perdre la sensation, ce qui entraînerait à son tour un design incohérent et affaiblirait la marque.

Voici le même design d'en haut mais avec un look arrondi:

C'est pareil, mais c'est tellement différent maintenant.

5 - Conception avec composants

Des composants existent dans tous les outils de conception modernes tels que Figma et Adobe XD. Ils sont là pour une très bonne raison: les développeurs implémentent les sites de manière à ce qu'ils puissent être réutilisés autant que possible.

Si vous créez un élément comme celui ci-dessus, vous voulez simplement le «copier-coller» sur une autre page et cela fonctionnera simplement. Pas besoin de le coder à nouveau avec de légères différences. En tant que concepteur, vous souhaiteriez idéalement réutiliser vos composants de la même manière.

Si vous créez une page d'accueil avec 3 articles d'affilée, vous pouvez peut-être simplement réutiliser le même article depuis la page d'accueil. Cela vous fait gagner du temps, fait gagner du temps au développeur et maintient la conception cohérente pour les utilisateurs.

La source

Imaginez que vous faites un titre de section. Si vous avez besoin de 8 sections avec un titre, la concevriez-vous à chaque fois ou vous copieriez-coller la précédente? Idéalement, vous souhaitez le réutiliser. Mais que se passe-t-il si vous devez le changer de centré à aligné à gauche? Peut-être changer un peu la taille, peut-être la couleur? Le conseil de ceci est d'essayer et de NE PAS faire cela. Essayez de le garder comme l'original. Si vous avez vraiment besoin de vues différentes (en dehors de l'alignement gauche / centré / droit), essayez de faire une seule variation. Pas cinq ou dix d'entre eux.

Exemple par DevriX

En résumé:

Pour obtenir de bons résultats, vous avez besoin d'une solide compréhension des principes fondamentaux de la conception tels que la couleur, le contraste, l'espace blanc, l'équilibre, la hiérarchie visuelle, l'ordre et plus encore. Lorsque vous concevez avec cela à l'esprit et que vous vous concentrez sur la convivialité, la cohérence et le style, et même si ce n'est pas un "WOW!" design, il sera solide sur tous les fronts et fonctionnera bien, ce qui produit souvent de meilleurs résultats pour une marque sur le long terme.