10 commandements de conception Web pour chaque projet
Avez-vous un livre de règles en matière de conception de sites Web? Il existe des règles qui s'appliquent à presque tous les projets de conception Web - appelons-les les «commandements de conception Web».
Quelle que soit la taille du site Web, quelle que soit sa taille, ces règles sont le fondement d'une bonne conception. 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
Rendez la conception aussi simple que possible pour les utilisateurs d'interagir avec Une conception cohérente est facile à utiliser et à comprendre. Les engagements et les actions des utilisateurs, ainsi que les visuels, doivent être similaires dans leur apparence et leur utilisation dans une même conception.
Cela signifie que les boutons sont de la même couleur et utilisent les mêmes états de survol pour aider les utilisateurs à savoir comment interagir, les titres sont de la même taille et utilisent la même police de caractère tout au long de la conception, et les éléments tels que les couleurs suivent une palette identifiable et associée à la marque.
D'autres éléments visuels doivent également suivre un style cohérent ainsi qu'un plan de style et d'utilisation pour des éléments tels que des icônes ou des photographies, des vidéos ou des illustrations. Le design doit avoir une voix utilisée pour les blocs de copie qui correspond à l'esthétique globale.
Tous ces éléments de cohérence contribuent à la convivialité globale, rendant la conception aussi facile que possible pour les utilisateurs d'interagir avec.
2. Tu utiliseras des espaces
Un espace supplémentaire autour des éléments peut aider à créer une séparation et à les rendre plus lisibles. Il n'est pas nécessaire d'entasser 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 à parcourir la conception.
Si le contenu est bon, ils défileront.
Et les espaces blancs peuvent réellement encourager cette action de l'utilisateur en tirant l'œil vers le bas de l'écran.
L'espace est encore plus important à mesure que les tailles d'écran diminuent. Un espace supplémentaire autour des éléments peut aider à créer une séparation et à les rendre plus lisibles. (Réfléchissez à la façon dont un peu d'espace supplémentaire peut être bénéfique lorsqu'il s'agit de toucher facilement les boutons.)
Vous ne savez pas où inclure les espaces dans la conception? Commencer ici:
- Autour des boutons ou d'autres éléments interactifs
- Comme espacement entre les lignes de texte pour faciliter la lecture
- Entre les éléments, les tings sont orientés vers l'est pour les distinguer, comme le recouvrement de photos intégrées dans des blocs de texte
- Dans les champs de formulaire afin qu'ils soient faciles à utiliser 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 le fondement 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 de 12 colonnes de colonnes pour aligner les éléments.
La grille est quelque chose que vous voyez uniquement dans le processus de conception et si vous avez du mal à trouver des emplacements pour les éléments ou à créer un contour organisé, une grille peut être une bouée de sauvetage totale.
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'avoir autant de succès que possible, la conception doit utiliser des modèles utilisateur communément acceptés (solutions récurrentes aux problèmes de conception) afin que les gens sachent exactement comment fonctionne la conception.
Les modèles d'utilisateurs courants incluent:
- Ordre des informations dans les formulaires, commençant par un nom ou un e-mail et se terminant par «soumettre»
- Placement des menus de navigation
- Emplacement et nature cliquable de l'icône du panier d'achat pour le commerce électronique
- Fonctionnement des notifications
- Icônes pour la recherche et le chat, entre autres
UI Design Patterns possède une longue liste de modèles d'utilisateurs pour tous les types de situations de conception.
5. Tu utiliseras la similitude dans les actions de l'interface utilisateur
Chaque élément d'une conception de site Web devrait fonctionner comme tous les autres éléments du même type. Ces éléments doivent également avoir une identité visuelle afin que les utilisateurs sachent ce qu'ils sont et ce qu'ils font en un coup d'œil.
Il y a tellement d'actions d'interface utilisateur qui peuvent être intégrées dans une conception qu'il est indispensable de respecter le principe de similitude Gestalt. Le regroupement des éléments visuels et des actions afin qu'ils soient visuellement identifiables aidera à créer une meilleure expérience globale pour les utilisateurs.
6. Tu utiliseras bien la typographie
Prenez du recul par rapport à la conception et voyez si le lettrage est facile à lire à distance. Vous n'avez pas besoin d'être un maître typographe, mais cela aide certainement.
Une bonne partie de ce qui constitue un bon design est enracinée dans la lisibilité et la lisibilité. Et ces concepts dépendent de la façon dont vous choisissez et utilisez les polices de caractères.
En cas de doute, optez pour des paires de caractères simples telles qu'un empattement et un empattement sans empattement. Prenez du recul par rapport à la conception et voyez si le lettrage est facile à lire à distance. Regardez ensuite le lettrage sur une petite toile, comme un écran de téléphone, pour vous assurer qu'il est également facile à lire en un coup d'œil.
Essayez d'utiliser le type dans un environnement à contraste élevé, comme le type clair sur un fond sombre ou le type sombre sur un fond clair, afin que chaque mot soit facile à lire.
7. Tu n'oublieras pas les écrans rétiniens
Même les plus petits écrans peuvent restituer des éléments et des images avec une perfection proche des pixels.
Vous devez réfléchir à la manière dont vous allez gérer les images, les icônes et les autres éléments afin que tout soit magnifiquement rendu, quelle que soit la taille de l'écran. Lorsque cela est possible, l'utilisation d'un format vectoriel peut être la solution idéale, ce qui est l'une des raisons pour lesquelles SVG gagne en popularité tout le temps.
Si vous ne disposez pas d'une image dont la résolution convient 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 design ou une image, ne remplissez pas de faux mots-clés pour générer du trafic et soyez fidèle à qui et à quoi votre contenu concerne.
Avec autant d'encombrement Web, les utilisateurs veulent interagir avec des conceptions authentiques. Inciter les utilisateurs à faire quelque chose ou à s'inscrire à un produit ou à un service ou simplement à les induire en erreur sur un sujet ou des informations devrait être contraire à 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 doit être utilisable par autant de personnes que possible. Et même s'il peut sembler difficile de s'assurer que le design est accessible, ce n'est pas aussi compliqué qu'on pourrait le penser.
Google a un excellent guide pour l'accessibilité du site Web, qu'il définit comme suit:
D'une manière générale, lorsque nous disons qu'un site est accessible, nous voulons dire que le contenu du site est disponible et que ses fonctionnalités peuvent être exploitées par n'importe qui. 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 qui vont de simples ennuis à des bouchons pour d'autres.
L'accessibilité se réfère donc à l'expérience des utilisateurs qui pourraient être en dehors de la plage étroite de l'utilisateur «typique», qui pourraient accéder ou interagir avec les choses différemment que vous attendez. Plus précisément, cela concerne les utilisateurs qui souffrent d'un certain type de déficience ou d'incapacité - et gardez à l'esprit que cette expérience peut être non physique ou temporaire.
De nombreux principes de 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 en ce qui concerne l'accessibilité: la conception est-elle perceptible, exploitable, compréhensible et robuste?
10. Tu dois être réactif
Cela devrait aller de soi en 2018, mais votre site Web doit être réactif. Cela inclut tous les éléments, du texte aux images en passant par les boutons et le cadre général.
Chaque conception doit fonctionner sur chaque appareil. Période.
Conclusion
Un ensemble solide de règles peut vous aider à vous lancer plus rapidement dans un projet de conception et à travailler de manière plus cohérente. Notez qu'aucun de ces commandements ne vous indique à quoi devrait ressembler un projet; ils sont enracinés dans la théorie de la façon dont vous décrivez et créez 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 réseaux sociaux. Assurez-vous simplement de marquer Design Shack!
