Avez-vous un livre de règles en matière de conception de sites Web? Certaines règles s'appliquent à presque tous les projets de conception Web. Appelons-les «commandements de la conception Web».
Peu importe la taille du site Web, ces règles sont la base d'un bon design. Si vous suivez ces directives de base et que vous les intégrez à votre réflexion pour chaque projet que vous démarrez, vous éviterez de nombreux pièges dans lesquels les concepteurs peuvent tomber!
1. tu seras cohérent
Rendre la conception aussi facile que possible avec laquelle les utilisateurs peuvent interagir Une conception cohérente est facile à utiliser et à comprendre. Les engagements et les actions des utilisateurs, ainsi que les éléments visuels, doivent être identiques et utilisés dans une même conception.
Cela signifie que les boutons ont la même couleur et utilisent les mêmes états de survol pour aider les utilisateurs à savoir comment interagir, les titres ont la même taille et utilisent le même caractère de caractères tout au long du dessin, et les éléments tels que les couleurs suivent une palette identifiable et associée à la marque.
Les autres éléments visuels doivent également suivre un style cohérent avec un style et un plan d'utilisation pour des éléments tels que des icônes ou des photographies, des vidéos ou des illustrations. La conception doit avoir une voix utilisée pour les blocs de copie correspondant à l'esthétique générale.
Tous ces éléments de cohérence contribuent à la convivialité globale, rendant la conception la plus simple possible pour les utilisateurs.
2. Tu utiliseras des espaces
Un espace supplémentaire autour des éléments peut aider à créer une séparation et à en faciliter la lecture. Il n'est pas nécessaire d'inscrire chaque élément dans l'espace au-dessus du parchemin. Utilisez des espaces pour établir le rythme et le flux, créer une hiérarchie visuelle et aider les utilisateurs à se déplacer dans la conception.
Si le contenu est bon, ils feront défiler.
Et les espaces peuvent réellement aider à encourager cette action de l'utilisateur en baissant les yeux sur l'écran.
Les espaces sont d'autant plus importants que la taille de l'écran est réduite. Un espace supplémentaire autour des éléments peut aider à créer une séparation et à en faciliter la lecture. (Pensez à l'avantage d'un peu d'espace supplémentaire pour pouvoir appuyer facilement sur des boutons.)
Vous ne savez pas où inclure des espaces dans la conception? Commencer ici:
- Autour de boutons ou d'autres éléments interactifs
- Comme un interligne entre les lignes pour faciliter la lecture
- Entre les éléments, il est facile de différencier les éléments, comme l’emballage sur les photos incorporées dans des blocs de texte.
- Dans les champs de formulaire, ils sont faciles à exploiter sur les écrans mobiles
- Autour de tout élément sur lequel vous souhaitez que les utilisateurs se concentrent
3. tu utiliseras une grille
Une grille est la base de l'expérience utilisateur. Lorsque vous concevez avec une grille, le site Web final est plus précis, cohérent et les éléments sont placés dans un ordre qui a un sens visuel.
Les grilles sont à la fois horizontales et verticales, bien que la grille de conception Web la plus connue puisse être la grille verticale à 12 colonnes pour aligner des éléments.
La grille est quelque chose que vous ne voyez que dans le processus de conception. Si vous rencontrez des difficultés pour trouver des emplacements pour des éléments ou pour créer un contour organisé, une grille peut vous sauver la vie.
4. Tu n'oublieras pas les schémas utilisateur
Les utilisateurs font les choses d’une certaine manière et attendent des choses spécifiques de votre conception. Afin d’obtenir le plus de succès possible, la conception doit utiliser les modèles d’utilisateurs communément acceptés (solutions récurrentes aux problèmes de conception) afin que les utilisateurs sachent exactement comment fonctionne la conception.
Les modèles d'utilisateur courants incluent:
- Ordre d’information dans des formulaires, commençant par un nom ou un email et se terminant par? Submit?
- Emplacement des menus de navigation
- Emplacement et nature cliquable de l'icône du panier d'achat pour le commerce électronique
- Comment fonctionnent les notifications
- Icônes pour la recherche et le chat, entre autres
Les modèles de conception d'interface utilisateur ont une longue liste de modèles d'utilisateur pour tous les types de situations de conception.
5. Tu utiliseras la similitude dans les actions de l'interface utilisateur
Chaque élément de la conception d'un site Web devrait fonctionner comme tout autre élément du même type. Ces éléments doivent également avoir une identité visuelle pour que les utilisateurs sachent ce qu’ils sont et ce qu’ils font en un coup d’œil.
Il existe de nombreuses actions d'interface utilisateur pouvant être intégrées à une conception qu'il est impératif de respecter le principe de similarité Gestalt. Le regroupement d'éléments visuels et d'actions afin de les identifier visuellement contribuera à créer une meilleure expérience globale pour les utilisateurs.
6. Tu utiliseras bien la typographie
Reculez du dessin et voyez si le lettrage est facile à lire à distance. Vous n'êtes pas obligé d'être un maître typographe, mais cela aide certainement.
Une bonne partie de ce qui constitue un bon design repose sur la lisibilité et la lisibilité. Et ces concepts dépendent de la manière dont vous choisissez et utilisez les polices de caractères.
En cas de doute, optez pour des paires de caractères simples, telles que serif et sans serif. Reculez du dessin et voyez si le lettrage est facile à lire à distance. Ensuite, regardez les lettres sur une petite toile, comme un écran de téléphone, pour vous assurer qu’elles sont faciles à lire en un coup d’œil.
Essayez d’utiliser le texte dans un environnement très contrasté, tel que le texte clair sur un fond sombre ou noir sur un fond clair, afin que chaque mot soit facile à lire.
7. Tu n'oublieras pas les écrans de la rétine
Même les plus petits écrans peuvent rendre des éléments et des images avec une perfection proche du pixel.
Vous devez réfléchir à la manière dont vous allez gérer les images, les icônes et d’autres éléments afin que tout soit parfaitement rendu quelle que soit la taille de l’écran. Lorsque cela est possible, l’utilisation d’un format vectoriel peut constituer la solution idéale, ce qui explique en partie la popularité croissante de SVG.
Si vous ne disposez pas d'une image dont la résolution correspond aux tailles d'écran courantes, ne l'utilisez pas. Aucune image n'est meilleure qu'une image mauvaise ou pixélisée.
8. Tu seras honnête
Votre conception doit être fidèle à votre petite entreprise, information ou marque et transparente dans ce que vous faites.Ne volez pas un dessin ou une image, ne farcissez pas avec de faux mots clés pour générer du trafic et restez fidèle à qui et à quoi traite votre contenu.
Avec autant d'encombrement Web, les utilisateurs souhaitent interagir avec des conceptions authentiques. Inciter les utilisateurs à faire quelque chose ou à acheter un produit ou un service ou les induire en erreur sur un sujet ou une information devrait aller à l’encontre de votre code d’éthique personnel. Ne prenez pas de projets qui attendent cela de la conception.
9. Tu ne dois pas ignorer l'accessibilité
Le Web devrait être utilisable par le plus grand nombre de personnes possible. Et s'il peut sembler difficile de rendre le design accessible, ce n'est pas aussi compliqué que vous ne le pensez.
Google propose un excellent guide sur l'accessibilité des sites Web, qu'il définit comme suit:
En gros, lorsque nous disons qu'un site est accessible, nous entendons que le contenu du site est disponible et que ses fonctionnalités peuvent être exploitées par quiconque. En tant que développeurs, il est facile de supposer que tous les utilisateurs peuvent voir et utiliser un clavier, une souris ou un écran tactile, et peuvent interagir avec le contenu de votre page de la même manière que vous. Cela peut conduire à une expérience qui fonctionne bien pour certaines personnes mais crée des problèmes allant de simples ennuis à des démonstrations pour d'autres.
L'accessibilité, alors, fait référence à l'expérience d'utilisateurs qui peuvent être en dehors de la plage étroite de l'utilisateur «typique», qui peuvent accéder ou interagir avec des choses différemment que prévu. Plus précisément, il s’agit d’utilisateurs qui souffrent d’une déficience ou d’un handicap - et gardez à l’esprit que cette expérience peut être physique ou temporaire.
Un grand nombre des principes d'une bonne conception, tels que la taille, le contraste et l'espace, contribuent à l'accessibilité globale.
WebAIM dispose d'une liste de contrôle, ainsi que d'autres outils, pour vous aider à déterminer si votre conception est accessible. La liste de contrôle couvre quatre domaines relatifs à l'accessibilité: la conception est-elle perceptible, opérationnelle, compréhensible et robuste?
10. Tu seras sensible
Cela devrait aller de soi en 2018, mais votre site Web doit être réactif. Cela inclut chaque élément, du texte aux images, en passant par les boutons du cadre général.
Chaque design doit fonctionner sur tous les appareils. Période.
Conclusion
Un ensemble de règles solide peut vous aider à entrer plus rapidement dans un projet de conception et à travailler de manière plus cohérente. Notez qu'aucun de ces commandements ne vous dit à quoi un projet devrait ressembler. ils sont enracinés dans la théorie de la conception et de la création de chaque site Web.
Avez-vous des règles de conception Web supplémentaires à ajouter à ces commandements? Faites-nous savoir ce qu'ils sont sur les médias sociaux. Assurez-vous simplement de tagger Design Shack!