La conception Web peut être trompeusement difficile, car elle implique de parvenir à une conception à la fois utilisable et agréable, qui fournit des informations et renforce la marque, qui est techniquement saine et cohérente sur le plan visuel..
Ajoutez à cela le fait que de nombreux concepteurs de sites Web (y compris moi-même) sont autodidactes, que la conception de sites Web est encore suffisamment nouvelle pour ne constituer qu'un sujet secondaire dans de nombreuses institutions de design et que le support change aussi souvent que la technologie.
Donc, aujourd’hui, j’ai mis au point mes 9 principes pour une bonne conception Web. Ce ne sont que mes opinions et j'ai essayé de relier plus de lectures sur des sujets afin que vous n'entendiez pas seulement ma voix. De toute évidence, j'ai beaucoup d'exonérations de responsabilité: les règles sont faites pour être enfreintes, différents types de design fonctionnent différemment, et je ne suis pas toujours à la hauteur de mes propres conseils. Alors, s'il vous plaît, lisez ceci comme ils sont destinés - juste quelques observations que je partage…
Capture the Valley utilise des barres de couleur pour guider votre œil à travers des sections de haut en bas…
1. Priorité (Guider l'oeil)
Une bonne conception Web, peut-être même plus que tout autre type de conception, concerne l’information. L’un des plus gros outils de votre arsenal pour le faire est priorité. Lors de la navigation dans un bon design, le concepteur doit guider l'utilisateur vers l'écran. J'appelle cela la priorité, et il concerne le poids visuel que différentes parties de votre conception ont.
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 vaste et qu’il est défini par les études, c’est 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 à un énoncé de positionnement principal, à côté d'une image percutante (pour donner de la personnalité au site), puis au corps du texte principal, avec une navigation et une barre latérale prenant une position secondaire dans la séquence.
Ce que votre utilisateur devrait regarder, c’est à vous, concepteur Web, de déterminer.
Pour obtenir la priorité, vous avez de nombreux outils à votre disposition:
Position - Où quelque chose est sur une page influence clairement dans quel ordre l'utilisateur le voit.
Couleur - Utiliser des couleurs vives et subtiles est un moyen simple d'indiquer à votre utilisateur où regarder..
Contraste - Être différent fait ressortir les choses, tout en étant pareil les rend secondaires.
Taille - Grand prend le pas sur peu (à moins que tout soit grand, auquel cas peu de choses pourraient se distinguer grâce au contraste)
Éléments de design - s'il y a une flèche gigantesque pointant sur quelque chose, devinez où l'utilisateur regardera?
Lectures complémentaires:
Vous pouvez lire davantage de mes réflexions sur la précédence dans un ancien article de Psdtuts + intitulé Elements of Great Web Design - the Polish. Joshua David McClurg-Genevese discute des principes d'une bonne conception Web et de la conception au Digital-Web. Joshua a aussi 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 tous les espaces disponibles. L'espace vide semblait inutile. En fait, le contraire est vrai.
L'espacement rend les choses plus claires. Dans la conception Web, vous devez prendre en compte trois aspects de l'espace:
Interligne Lorsque vous mettez en forme le texte, l'espace entre les lignes affecte directement la lisibilité de l'affichage. Trop peu d'espace permet à votre œil de se répandre 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 être perdu. Vous devez donc trouver un juste milieu. Vous pouvez contrôler l'interligne en CSS avec le sélecteur 'hauteur de ligne'. Généralement, je trouve que la valeur par défaut est généralement un espacement trop petit. Interligne s'appelle techniquement de premier plan (prononciation prononcée), qui découle du processus que les imprimantes utilisaient pour séparer les lignes de texte il y a bien longtemps - en plaçant des barres de plomb entre les lignes.
Rembourrage De manière générale, le texte ne doit jamais toucher d’autres éléments. Les images, par exemple, ne doivent pas toucher de texte, pas plus que les bordures ou les tableaux. Le rembourrage est l'espace entre les éléments et le texte. La règle simple est que vous devriez toujours avoir de l'espace là-bas. Il y a bien sûr des exceptions, en particulier si le texte est une sorte de titre / graphique ou si votre nom est David Carson :-) Mais en règle générale, la mise 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). Les espaces sont utilisés pour donner l’équilibre, les proportions et le contraste d’une page. Beaucoup d'espace blanc tend à rendre les choses plus élégantes et plus élégantes. Par exemple, si vous vous rendez sur un site d'architecte onéreux, vous verrez presque toujours beaucoup d'espace. Si vous souhaitez apprendre à utiliser efficacement les espaces, consultez un magazine et voyez comment les annonces sont présentées. Les publicités pour les grandes marques de montres, de voitures et autres ont tendance à avoir beaucoup d'espace vide utilisé comme élément de design.
Lectures complémentaires:
WebDesignFromScratch contient un excellent article intitulé Guide de conception de procédures Web 2.0, qui traite de la simplicité - un concept qui utilise beaucoup d'espacement. Il y a beaucoup d'autres choses utiles là aussi!
Noodlebox fait un bon travail en utilisant des états on / off dans leur navigation pour garder l’utilisateur orienté.
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 de sites Web, la navigation est un concept que nous avons réussi à maîtriser, mais je trouve toujours de très mauvais exemples. Il faut garder à l’esprit deux aspects de la navigation:
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 - en haut de la page et faciles à identifier. Ils devraient ressembler à des boutons de navigation et être bien décrits. Le texte d'un bouton devrait ê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 substitution, il est important de veiller à ce qu'une personne puisse accéder aux éléments du sous-menu sans perdre la substitution. De même, le changement de couleur ou d’image au renversement est un excellent retour pour un utilisateur..
Orientation - Où es-tu maintenant? Il existe de nombreuses façons d'orienter un utilisateur afin qu'il n'y ait aucune excuse à ne pas faire. Dans les petits sites, il peut s'agir simplement d'un gros titre ou d'une version "vers le bas" du bouton approprié de votre menu. Dans un site plus grand, vous pouvez utiliser des sentiers de chapelure, des sous-titres et une carte du site pour les véritables perdus..
Lectures complémentaires:
SmashingMagazine propose une sélection de styles de navigation basés sur CSS qui sont agréables à parcourir. Le n ° 3 est l'un des miens! A List Apart a également un bon article sur l'orientation appelé Where Am I?
4. Concevoir pour construire
La vie est devenue beaucoup plus facile depuis la transition des concepteurs Web vers les modèles CSS, mais il est toujours important de réfléchir à la manière dont vous allez créer un site lorsque vous êtes encore dans Photoshop. Considérons des choses comme:
Peut-il être fait? Vous avez peut-être choisi une police étonnante pour votre corps, mais s'agit-il en fait d'une police HTML standard? Vous pouvez avoir un design qui a l'air beau mais qui a une largeur de 1100px et donnera lieu à 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, du moins parfois.
Que se passe-t-il quand un écran est redimensionné?? Avez-vous besoin de répéter des arrière-plans? Comment vont-ils travailler? Le dessin est-il centré ou aligné à 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 il vaut parfois mieux les éviter..
De petites modifications dans votre conception pourraient-elles grandement simplifier la manière dont vous la construisez? Parfois, déplacer un objet dans un dessin peut faire une grande différence dans la manière dont vous devez coder votre code CSS ultérieurement. En particulier, lorsque les éléments d'un dessin se chevauchent, cela ajoute un peu de complexité à la construction. Ainsi, si votre conception comporte trois éléments et que chaque élément est complètement séparé, il serait très facile à construire. D'un autre côté, si les trois se chevauchent, cela restera peut-être facile, mais ce sera probablement un peu plus compliqué. Vous devriez trouver un équilibre entre ce qui semble bon et de petits changements qui peuvent simplifier votre construction..
Pour les grands sites, en particulier, pouvez-vous simplifier les choses? Il fut un temps où je créais 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 environ, 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 ne disposent pas toujours de la souplesse que je pourrais souhaiter, mais les économies de temps de fabrication que représente le fait de ne pas avoir à créer des dizaines de petites images de boutons sont énormes..
Si quelqu'un connaît bien le type c'est iLoveTypography!
5. Typographie
Le texte est l'élément le plus courant du design. 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 différentes choses sur un dessin. Certains ont l'air moderne, d'autres sont rétro. Assurez-vous que vous utilisez le bon outil pour le travail.
Tailles de police -Il y a des années, il était à la mode d'avoir un texte très petit. Heureusement, ces jours-ci, les gens ont commencé à se rendre compte que le texte doit être lu, pas seulement regardé. Assurez-vous que vos tailles de texte sont cohérentes, suffisamment grandes pour être lues et proportionnées afin que les en-têtes et les sous-en-têtes se détachent correctement..
Espacement - Comme indiqué ci-dessus, il est important de prendre en compte l'espacement entre les lignes et à l'écart des autres objets. Vous devriez également penser à l'espacement des lettres, même si sur le Web, cela est moins important, car vous n'avez pas beaucoup de contrôle.
Longueur de la ligne - Il n'y a pas de règle absolue, 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 manière dont un journal présente le texte).
Couleur - L'une de mes pires habitudes est de créer un texte peu contrasté. Cela a l'air bien mais ne lit pas très bien, malheureusement. Pourtant, il semble que je le fais avec chaque conception de site Web que j'ai jamais faite, tsk tsk tsk.
Paragraphe - Avant de commencer à concevoir, j'aimais justifier le texte en tout. Cela faisait de jolis bords de chaque côté de mes paragraphes. Malheureusement, le texte justifié a tendance à créer des écarts étranges entre les mots où ils ont été auto-espacés. Ce n'est pas agréable pour vos yeux lorsque vous lisez, alors restez sur alignés à gauche, sauf si vous avez un corps de texte magique qui arrive à être parfaitement espacé.
Lectures complémentaires:
Nick La de WebDesignerWall a publié un excellent article sur la typographie en ligne appelé Typographic Contrast and Flow. .
Happycog connaît parfaitement la convivialité, et son propre site est simple et facile à utiliser.
6. Facilité d'utilisation
Le design Web ne concerne pas que de belles images. Avec autant d'informations et d'interactions à effectuer sur un site Web, il est important que vous, le concepteur, fournissiez toutes ces informations. Cela signifie rendre la conception de votre site Web utilisable.
Nous avons déjà discuté de certains aspects de la convivialité - la navigation, la priorité et le texte. Voici trois autres plus importants:
Respecter les normes Les gens s'attendent à certaines choses, et ne pas leur donner cause de la confusion. Par exemple, si le texte est souligné, 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 enfreindre certaines conventions, mais la plupart de votre site Web doit faire exactement ce que les gens attendent de lui.!
Pensez à ce que les utilisateurs vont réellement faire Le prototypage est un outil couramment utilisé dans la conception pour «essayer» une conception. Ceci est fait parce que souvent, lorsque vous utilisez un design, vous remarquez de petites choses qui font une grande différence. Il y a quelque temps déjà, ALA avait publié un article intitulé Ne jamais utiliser un avertissement lorsque vous vouliez annuler, qui est un excellent exemple de décision de conception d'interface pouvant rendre la vie difficile pour un utilisateur..
Pensez aux tâches de l'utilisateur Lorsqu'un utilisateur visite votre site, que tente-t-il réellement de faire? Énumérez les différents types de tâches que les personnes peuvent effectuer sur un site, la façon dont elles les réaliseront et la facilité avec laquelle vous voulez les réaliser. Cela peut signifier avoir des tâches très courantes sur votre page d’accueil (par exemple, «commencer à magasiner», «en savoir plus sur ce que nous faisons», etc.) ou bien, par exemple, d’assurer un accès facile au champ de recherche. En fin de compte, votre conception Web est un outil que les utilisateurs peuvent utiliser et qui n'aime pas utiliser des outils gênants.!
Lectures complémentaires:
AListApart a beaucoup d'articles sur la convivialité Web.
La pâte électrique parvient à paraître rugueuse, mais si vous regardez de près, vous réalisez qu'il existe un réseau solide et que tout s'aligne en fait..
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 devrait être en ligne droite, mais plutôt que vous devriez passer et essayer de garder les choses toujours placées sur une page. L'alignement rend votre dessin plus ordonné et plus digeste, ainsi que le fait paraître plus poli.
Vous pouvez également souhaiter baser vos dessins sur une grille spécifique. Je dois admettre que je ne le fais pas consciemment - bien qu'un site tel que Psdtuts + ait de toute évidence une structure de grille très ferme. Cette année, j'ai lu de très bons articles sur la conception de la grille, notamment le document Conception d'une approche basée sur la grille de SmashingMagazine et Penser en dehors de la grille de A List. En fait, si vous êtes intéressé par la conception de la grille, vous devriez absolument visiter le site bien nommé DesignByGrid.com qui héberge tout ce qui est griddy.
Le site ExpressionEngine est l’âme de la clarté. Tout est net et net.
8. Clarté (netteté)
Garder votre conception nette et nette est extrêmement important dans la conception Web. Et quand il s'agit de clarté, tout est question de pixels.
Dans votre CSS, tout sera parfait au pixel, donc rien d’inquiétant, mais ce n’est pas le cas dans Photoshop. Pour obtenir un design net, vous devez:
Conservez les bords de la forme accrochés aux pixels. Cela peut impliquer le nettoyage manuel des formes, des lignes et des blocs si vous les créez dans Photoshop..
Assurez-vous que le texte est créé à l'aide du paramètre d'anti-aliasing approprié. J'utilise beaucoup 'Sharp'.
Faire en sorte que le contraste soit élevé afin que les frontières soient clairement définies.
Souligner légèrement les frontières 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 que c'est essentiel.
Veerle fait de l'excellent travail en veillant à la cohérence des détails les plus infimes.
9. cohérence
La cohérence signifie que tout concorde. Tailles d'en-tête, choix de police, couleur, styles de bouton, espacement, éléments de conception, styles d'illustration, choix de photo, etc. Tout doit être thématisé pour que votre conception soit cohérente entre les pages et sur la même page..
Garder votre conception cohérente, c'est être professionnel. Les incohérences dans un dessin ressemblent à des fautes d'orthographe dans un essai. Ils abaissent simplement la perception de la qualité. Quelle que soit l'apparence de votre conception, le maintenir cohérent l'amènera toujours d'un cran. Même si c'est un mauvais design, au moins en faire un design cohérent et mauvais.
Le moyen le plus simple de maintenir la cohérence consiste à prendre des décisions précoces et à s'y tenir. Avec un très grand site, 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 concernant 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 à la cohérence du design. Essayez de définir les balises principales comme
et
de manière à faire correspondre vos valeurs par défaut et à ne pas avoir à vous rappeler des noms de classe spécifiques tout le temps.
Lectures complémentaires:
L'article de ThinkVitamin En quoi votre conception est-elle un problème? discute de la répétition en bas de la page et de son importance. L'article est écrit par Mike Rundle qui conçoit 9rules, vous savez donc que cela vaut la peine d'être lu!
Obtenez mon livre!
Apprécié cet article? Je viens de terminer un livre sur la pige que vous pouvez acheter en ligne sous forme de livre électronique. Rendez-vous pour en savoir plus sur comment devenir un pigiste Rockstar.
Share
Accentsconagua