La conception Web peut être trompeusement difficile, car elle implique la réalisation d’une conception à la fois utilisable et agréable, qui fournit des informations et construit une marque, qui est techniquement solide et visuellement cohérente.
Ajoutez à cela le fait que de nombreux concepteurs de sites Web (dont moi-même) sont autodidactes, que la conception Web est encore assez nouvelle pour n’être qu’un sujet secondaire dans de nombreuses institutions de conception, et que le support change aussi souvent que la technologie sous-jacente.
Aujourd’hui, j’ai donc rassemblé mes 9 principes pour une bonne conception Web. Ce ne sont que mes opinions et j’ai essayé de relier à plus de lecture sur des sujets afin que vous n’entendiez pas seulement ma voix. Évidemment, j’ai beaucoup d’exonérations de responsabilité: les règles sont faites pour être brisées, différents types de conception fonctionnent différemment, et je ne suis pas toujours à la hauteur de mes propres conseils. Veuillez donc les lire telles qu’elles sont destinées – juste quelques observations que je partage …
Capture the Valley utilise des barres de couleur pour guider votre œil à travers les sections de haut en bas …
1. Priorité (guider l’œil)
Une bonne conception Web, peut-être même plus qu’un autre type de conception, concerne l’information. L’un des plus grands outils de votre arsenal pour ce faire est la priorité. Lors de la navigation d’un bon design, l’utilisateur doit être guidé autour de l’écran par le designer. J’appelle cette priorité, et il s’agit du poids visuel des différentes parties de votre conception.
Un exemple simple de priorité est que dans la plupart des sites, la première chose que vous voyez est le logo. C’est souvent parce qu’il est grand et correspond à ce qui a été montré dans les études comme étant le premier endroit où les gens regardent (en haut à gauche). C’est une bonne chose car vous voulez probablement qu’un utilisateur sache immédiatement quel site il consulte.
Mais la préséance devrait aller beaucoup plus loin. Vous devez diriger les yeux de l’utilisateur à travers une séquence d’étapes. Par exemple, vous pouvez souhaiter que votre utilisateur passe du logo / de la marque à une déclaration de positionnement principale, à côté d’une image percutante (pour donner la personnalité du site), puis au texte principal du corps, avec la navigation et une barre latérale prenant une position secondaire dans la séquence.
Ce que votre utilisateur devrait regarder, c’est à vous, le concepteur Web, de le déterminer.
Pour atteindre la priorité, vous disposez de nombreux outils:
Position – Où quelque chose se trouve sur une page influence clairement l’ordre dans lequel l’utilisateur le voit.
Couleur – L’utilisation de couleurs vives et subtiles est un moyen simple de dire à votre utilisateur où chercher.
Contraste – Être différent fait ressortir les choses, alors qu’être le même les rend secondaires.
Taille – Big a priorité sur peu (à moins que tout ne soit grand, auquel cas peu pourrait se démarquer grâce au contraste)
Éléments de conception – s’il y a une flèche gigantesque pointant vers quelque chose, devinez où l’utilisateur va regarder?
Lectures complémentaires:
Vous pouvez lire plus de mes réflexions sur la priorité dans un vieux post Psdtuts + appelé Elements of Great Web Design – le polonais. Joshua David McClurg-Genevese discute des principes d’une bonne conception et conception Web à Digital-Web. Joshua a également le nom le plus long de tous les temps 🙂
Marius a un site très propre, très simple avec beaucoup d’espace
2. Espacement
Quand j’ai commencé à concevoir, je voulais remplir chaque espace disponible avec des trucs. L’espace vide semblait inutile. En fait, le contraire est vrai.
L’espacement rend les choses plus claires. Dans la conception Web, vous devez considérer trois aspects de l’espace:
Interligne
Lorsque vous disposez du texte, l’espace entre les lignes affecte directement sa lisibilité. Trop peu d’espace permet à votre œil de passer facilement d’une ligne à l’autre, trop d’espace signifie que lorsque vous terminez une ligne de texte et passez à la suivante, votre œil peut se perdre. Vous devez donc trouver un juste milieu. Vous pouvez contrôler l’espacement des lignes en CSS avec le sélecteur ‘line-height’. En général, je trouve que la valeur par défaut est généralement trop peu espacée. L’espacement des lignes est techniquement appelé interligne (ledding prononcé), qui dérive du processus que les imprimeurs utilisaient pour séparer les lignes de texte dans le temps – en plaçant des barres de plomb entre les lignes.
Rembourrage
D’une manière générale, le texte ne doit jamais toucher à d’autres éléments. Les images, par exemple, ne doivent pas toucher du texte, pas plus que les bordures ou les tableaux.
Le remplissage est l’espace entre les éléments et le texte. La règle simple ici est que vous devez toujours y avoir de l’espace. Il y a des exceptions bien sûr, en particulier si le texte est une sorte de titre / graphique ou si vous vous appelez David Carson 🙂 Mais en règle générale, mettre de l’espace entre le texte et le reste du monde le rend infiniment plus lisible et agréable .
Espace blanc
Tout d’abord, l’espace blanc n’a pas besoin d’être blanc. Le terme fait simplement référence à un espace vide sur une page (ou un espace négatif comme on l’appelle parfois). L’espace blanc est utilisé pour donner l’équilibre, la proportion et le contraste à une page. Beaucoup d’espace blanc a tendance à rendre les choses plus élégantes et haut de gamme, donc par exemple, si vous allez sur un site d’architecte cher, vous verrez presque toujours beaucoup d’espace. Si vous voulez apprendre à utiliser efficacement les espaces blancs, parcourez un magazine et regardez comment les publicités sont présentées. Les publicités pour les grandes marques de montres et de voitures et similaires ont tendance à avoir beaucoup d’espace vide utilisé comme élément de conception.
3. Navigation
L’une des expériences les plus frustrantes que vous puissiez vivre sur un site Web est de ne pas savoir où aller ni où vous êtes. J’aimerais penser que pour la plupart des concepteurs Web, la navigation est un concept que nous avons réussi à maîtriser, mais je trouve encore de très mauvais exemples. Il y a deux aspects de la navigation à garder à l’esprit:
Navigation – Où pouvez-vous aller?
Il y a quelques règles de bon sens à retenir ici. Les boutons permettant de parcourir un site doivent être faciles à trouver – vers le haut de la page et faciles à identifier. Ils devraient ressembler à des boutons de navigation et être bien décrits. Le texte d’un bouton doit être assez clair quant à l’endroit où il vous mène. Outre le bon sens, il est également important de rendre la navigation utilisable. Par exemple, si vous avez un sous-menu de survol, il est important de s’assurer qu’une personne peut accéder aux éléments du sous-menu sans perdre le survol. De même, la modification de la couleur ou de l’image lors du survol est une excellente rétroaction pour un utilisateur.
Orientation – Où êtes-vous maintenant?
Il existe de nombreuses façons d’orienter un utilisateur, il n’y a donc aucune excuse pour ne pas le faire. Dans les petits sites, il peut s’agir simplement d’une grosse rubrique ou d’une version «down» du bouton approprié dans votre menu. Dans un site plus grand, vous pouvez utiliser des pistes de chapelure, des sous-titres et un plan du site pour les personnes vraiment perdues
4. Concevoir pour construire
La vie est devenue beaucoup plus facile depuis la transition des concepteurs Web vers les mises en page CSS, mais même maintenant, il est toujours important de réfléchir à la façon dont vous allez créer un site lorsque vous êtes encore dans Photoshop. Considérez des choses comme:
Peut-on réellement le faire?
Vous avez peut-être choisi une police étonnante pour votre corps, mais s’agit-il en fait d’une police HTML standard? Vous pourriez avoir un design qui a l’air beau mais qui a une largeur de 1100 pixels et se traduira par un défilement horizontal pour la majorité des utilisateurs. Il est important de savoir ce qui peut et ne peut pas être fait, c’est pourquoi je pense que tous les concepteurs Web devraient également créer des sites, au moins parfois.
Que se passe-t-il lorsqu’un écran est redimensionné?
Avez-vous besoin de répéter les arrière-plans? Comment vont-ils fonctionner? La conception est-elle centrée ou alignée à gauche?
Faites-vous quelque chose de techniquement difficile?
Même avec le positionnement CSS, certaines choses comme l’alignement vertical sont toujours un peu douloureuses et parfois mieux évitées.
De petits changements dans votre conception pourraient-ils grandement simplifier la façon dont vous le construisez?
Parfois, déplacer un objet dans une conception peut faire une grande différence dans la façon dont vous devez coder votre CSS plus tard. En particulier, lorsque des éléments d’une conception se croisent, cela ajoute un peu de complexité à la construction. Donc, si votre conception comporte, disons, trois éléments et que chaque élément est complètement séparé les uns des autres, ce serait vraiment facile à construire. D’un autre côté, si les trois se chevauchent, cela pourrait encore être facile, mais ce sera probablement un peu plus compliqué. Vous devriez trouver un équilibre entre ce qui semble bon et les petits changements qui peuvent simplifier votre build.
Pour les grands sites, en particulier, pouvez-vous simplifier les choses?
Il fut un temps où je faisais des boutons d’image pour mes sites. Donc, s’il y avait un bouton de téléchargement, par exemple, je ferais une petite image de téléchargement. Au cours de la dernière année, je suis passé à l’utilisation de CSS pour créer mes boutons et je n’ai jamais regardé en arrière. Bien sûr, cela signifie que mes boutons n’ont pas toujours la flexibilité que je souhaiterais, mais les économies de temps de construction de ne pas avoir à faire des dizaines d’images de petits boutons sont énormes.
Si quelqu’un connaît le bon type, c’est iLoveTypography!
5. Typographie
Le texte est l’élément de conception le plus courant, il n’est donc pas surprenant que beaucoup de réflexion y ait été consacrée. Il est important de considérer des choses comme:
Choix de polices – Différents types de polices disent des choses différentes sur un design. Certains ont l’air moderne, certains ont l’air rétro. Assurez-vous que vous utilisez le bon outil pour le travail.
Tailles de police – Il y a quelques années, le texte était très tendance. Heureusement, ces jours-ci, les gens ont commencé à réaliser que le texte est destiné à être lu, pas seulement à être regardé. Assurez-vous que vos tailles de texte sont cohérentes, suffisamment grandes pour être lues et proportionnées de manière à ce que les titres et sous-titres se détachent de manière appropriée.
Espacement – Comme indiqué ci-dessus, l’espacement entre les lignes et à l’écart des autres objets est important à considérer. Vous devriez également penser à l’espacement entre les lettres, bien que sur le Web, cela soit moins important, car vous n’avez pas beaucoup de contrôle.
Longueur de ligne – Il n’y a pas de règle stricte et rapide, mais généralement vos lignes de texte ne devraient pas être trop longues. Plus ils sont longs, plus ils sont difficiles à lire. Les petites colonnes de texte fonctionnent beaucoup mieux (pensez à la façon dont un journal présente le texte).
Couleur – L’une de mes pires habitudes est de créer du texte à faible contraste. Il semble bon mais ne lit pas si bien, malheureusement. Pourtant, il me semble que je le fais avec tous les sites Web que j’ai créés, tsk tsk tsk.
Paragraphe – Avant de commencer la conception, j’aimais justifier le texte dans tout. Cela faisait de jolis bords de chaque côté de mes paragraphes. Malheureusement, un texte justifié a tendance à créer des écarts étranges entre les mots où ils ont été espacés automatiquement. Ce n’est pas agréable pour vos yeux lors de la lecture, alors restez aligné à gauche à moins que vous ayez un corps magique de texte qui se déroule parfaitement.
6. Facilité d’utilisation
La conception de sites Web ne se limite pas à de jolies images. Avec autant d’informations et d’interactions à effectuer sur un site Web, il est important que vous, le concepteur, fournissiez tout cela. Cela signifie rendre la conception de votre site Web utilisable.
Nous avons déjà discuté de certains aspects de la convivialité – navigation, priorité et texte. Voici trois autres plus importants:
Adhésion aux normes
Il y a certaines choses que les gens attendent et ne pas leur donner crée de la confusion. Par exemple, si le texte comporte un soulignement, vous vous attendez à ce qu’il s’agisse d’un lien. Faire autrement n’est pas une bonne pratique d’utilisation. Bien sûr, vous pouvez briser certaines conventions, mais la plupart de votre site Web devrait faire exactement ce que les gens attendent de lui!
Pensez à ce que les utilisateurs feront réellement
Le prototypage est un outil commun utilisé dans la conception pour réellement «essayer» une conception. Cela est dû au fait que, souvent, lorsque vous utilisez un design, vous remarquez de petites choses qui font une grande différence. ALA avait un article il y a quelque temps intitulé Ne jamais utiliser d’avertissement lorsque vous entendez annuler, qui est un excellent exemple d’une petite décision de conception d’interface qui peut rendre la vie de l’utilisateur fatale.
Pensez aux tâches des utilisateurs
Lorsqu’un utilisateur vient sur votre site, qu’essaient-ils réellement de faire? Énumérez les différents types de tâches que les gens peuvent effectuer sur un site, comment ils les réaliseront et avec quelle facilité vous souhaitez les réaliser. Cela peut signifier avoir des tâches vraiment communes sur votre page d’accueil (par exemple, « commencer à magasiner », « apprendre ce que nous faisons », etc.) ou cela peut signifier assurer quelque chose comme avoir un champ de recherche toujours facilement accessible. À la fin de la journée, votre conception Web est un outil que les gens peuvent utiliser, et les gens n’aiment pas utiliser des outils ennuyeux!
7. Alignement
Garder les choses alignées est aussi important dans la conception Web que dans la conception imprimée. Cela ne veut pas dire que tout doit être en ligne droite, mais plutôt que vous devez parcourir et essayer de garder les choses systématiquement placées sur une page. L’alignement rend votre design plus ordonné et plus digeste, tout en le rendant plus raffiné.
Vous pouvez également souhaiter baser vos conceptions sur une grille spécifique. Je dois admettre que je ne le fais pas consciemment – bien qu’évidemment un site comme Psdtuts + ait en fait une structure de grille très ferme. Cette année, j’ai vu quelques très bons articles sur la conception de grille, y compris Designing with Grid-Based Approach de SmashingMagazine & A List Apart’s Thinking Outside The Grid. En fait, si vous êtes intéressé par la conception de la grille, vous devriez certainement visiter la maison bien nommée themecentury.com pour tout ce qui est grincheux.
8. Clarté (netteté)
Garder votre conception nette et précise est extrêmement important dans la conception Web. Et en termes de clarté, tout est question de pixels.
Dans votre CSS, tout sera parfait au pixel donc il n’y a rien à craindre, mais dans Photoshop, ce n’est pas le cas. Pour obtenir un design net, vous devez:
Gardez les bords des formes accrochés aux pixels. Cela peut impliquer le nettoyage manuel des formes, des lignes et des boîtes si vous les créez dans Photoshop.
Assurez-vous que le texte est créé à l’aide du paramètre d’anticrénelage approprié. J’utilise beaucoup ‘Sharp’.
Veiller à ce que le contraste soit élevé afin que les frontières soient clairement définies.
Trop accentuer les bordures juste pour exagérer le contraste.
Lectures complémentaires:
J’ai écrit un peu plus sur la clarté dans Elements of Great Web Design – le polonais. J’ai remarqué que les concepteurs d’impression en transition vers la conception Web, en particulier, ne pensent pas en pixels, mais c’est vraiment vital.
Veerle fait un excellent travail pour garder même les plus petits détails cohérents à travers le conseil d’administration.
9. Cohérence
La cohérence signifie que tout concorde. Tailles de titre, choix de polices, coloriage, styles de bouton, espacement, éléments de conception, styles d’illustration, choix de photos, etc. Tout doit être conçu pour rendre votre conception cohérente entre les pages et sur la même page.
Garder votre conception cohérente, c’est être professionnel. Les incohérences dans une conception sont comme des fautes d’orthographe dans un essai. Ils diminuent simplement la perception de la qualité. Quel que soit votre design, le garder cohérent le fera toujours monter d’un cran. Même si c’est un mauvais design, faites-en au moins un mauvais design cohérent.
Le moyen le plus simple de maintenir la cohérence est de prendre des décisions précoces et de s’y tenir. Avec un site vraiment grand, cependant, les choses peuvent changer dans le processus de conception. Lorsque j’ai conçu FlashDen, par exemple, le processus a pris des mois et à la fin, certaines de mes idées pour les boutons et les images avaient changé, j’ai donc dû revenir en arrière et réviser les pages précédentes pour qu’elles correspondent exactement aux pages suivantes.
Avoir un bon ensemble de feuilles de style CSS peut également contribuer grandement à créer une conception cohérente. Essayez de définir des balises de base comme <h1> et <p> de manière à ce que vos valeurs par défaut correspondent correctement et évitez de devoir vous souvenir tout le temps de noms de classe spécifiques.
