10 éléments de conception Web à ne pas négliger
Lorsqu'il s'agit de concevoir et de créer des sites Web, cela ne semble jamais se produire assez rapidement.
Compte tenu de ce rythme rapide, de nombreux petits détails éventuellement nécessaires pour créer le site Web sont souvent exclus du processus de conception. Bien que ces détails puissent être mineurs, ils sont ce qui amène un site Web de gentil à vraiment génial.
Ces détails sont souvent faciles à rater, car ils ne gèrent pas l’aspect général du site Web. Le problème est que, au fur et à mesure que votre équipe de développement travaille sur la conception, elle sera obligée de concevoir et de créer ces éléments pour vous de toute façon.
Vous pouvez ajuster le cycle de production pour que les développeurs aient le temps de vous restituer ces ressources, mais pourquoi ne pas tout faire pour que le processus soit beaucoup plus propre?
Pire encore, l'équipe de développement peut décider d'aller de l'avant et de créer les actifs au fur et à mesure.
Alors que de nombreux développeurs ont un sens aigu de la conception, la créatrice chargée de concevoir le site Web devrait en fin de compte être celle qui planifie ces éléments. La planification anticipée des nuances les plus subtiles peut avoir un impact profond sur la qualité du produit final.
Chaque élément traité dans cet article découle d'une question qu'un développeur demanderait au concepteur si un élément manquait dans la conception.
Penchons-nous sur les 10 éléments clés à garder à l’esprit lorsque vous perfectionnez votre site Web.
1. Liens
Bien que le style des différents états d'un lien soit plutôt basique, vous pourriez être surpris par la fréquence à laquelle tous les détails supplémentaires sont négligés. Incluez les états suivants pour tous les liens sur la page:
- Ordinaire
C'est l'état par défaut d'un lien; c'est-à-dire qui n'est pas survolé ou cliqué ou pointe vers une URL que l'utilisateur a déjà visitée. C'est le format de lien que la majorité des concepteurs couvre toujours. - A visité
Il s'agit d'un lien qui n'est pas survolé ou sur lequel vous avez cliqué, mais dont l'utilisateur a visité la cible. - actif
Un lien actif est un lien sur lequel l'utilisateur clique actuellement. La plupart des développeurs répliqueront l’état de vol stationnaire si un style ne leur est pas fourni. - Flotter
Enfin, l’état de vol stationnaire correspond à l’aspect du lien lorsque l’utilisateur le survole. Ceci et les états normaux sont ceux que la plupart des concepteurs préparent.
Un détail souvent négligé est que ces différents états doivent être planifiés pour toutes les régions d’un site Web. Par exemple, de nombreux sites Web ont une copie du corps sombre sur un fond clair, mais le contraste est inversé dans le pied de page. Vous devez planifier tous les différents contextes de liens trouvés dans la page.
Sur BBQ pleine lune Par exemple, nous voyons des liens rouges de base dans la région de contenu et des liens blancs de base dans le pied de page ci-dessous. Encore une fois, un détail minuscule mais néanmoins important.
2. Formulaires
Pour de nombreux concepteurs, la configuration des formulaires est essentielle et impossible à ignorer. Pourtant, pour beaucoup d’autres, cela semble être une réflexion après coup.
Le problème avec cette dernière attitude est que les formulaires représentent souvent le seul moyen réel de convertir les visiteurs en clients. Et sans une planification et une conception appropriées, la facilité d'utilisation de ces formulaires pourrait tomber à néant, ce qui paralyserait le seul point de conversion du site Web. La préparation à ces éléments est essentielle, même s’ils semblent beaucoup moins pressants pour les clients que la couleur, l’image de marque et les images.
Deux des considérations les plus importantes lors de la présentation d'un formulaire sont les suivantes:
- Étiquette de formulaire
Les formulaires recueillent généralement des données personnelles que les utilisateurs sont réticents à donner. En tant que tel, il est sage d'informer correctement les utilisateurs du but exact du formulaire. - Champs et étiquettes d'entrée
Deuxièmement, prévoyez comment les champs de saisie du formulaire seront disposés sur la page et comment les libellés de ces champs seront stylés et orientés par rapport aux champs.
Lorsqu'ils sont laissés à leurs valeurs par défaut, les formulaires peuvent sembler bizarres. Mais avec une bonne préparation, le site Web sera transparent et sera beaucoup plus efficace. Regardons un bon exemple qui doit avoir commencé avec une bonne planification:
Ce formulaire critique sur Impressionnant était clairement bien pensé. Toute la mission et le but de la page ont été soigneusement examinés. Depuis le titre et l'introduction à la mise en page de chaque ensemble de champs, avec leurs étiquettes et styles de contrôle, ce formulaire est un modèle de planification.
La planification des formulaires nous amène à plusieurs autres considérations ...
3. Comportement du bouton
Les boutons peuvent être utilisés sur un site Web à des fins diverses, mais ils semblent également être souvent négligés, tout comme les différents états d'un bouton. Les quatre états d'un bouton sont:
- Défaut
C'est l'état par défaut d'un bouton, en attente de clic. La plupart des designers couvrent celle-ci mais manquent les autres. - Flotter
L'état de vol stationnaire apparaît lorsque l'utilisateur passe la souris sur le bouton. Cet état est utile pour indiquer à l'utilisateur que le bouton est un élément utilisable. - Cliquez sur
Une fois que l'utilisateur clique sur le bouton, cet état leur indique visuellement qu'ils l'ont cliqué. Fournir ce signal visuel peut aider à minimiser la frustration des utilisateurs. - désactivé
L'état désactivé d'un bouton est peut-être le moins utilisé, mais peut être très utile pour les développeurs. Cet état est rarement planifié à moins que le concepteur n'ait préparé un processus de validation pour le formulaire (voir la section suivante).
Tout comme les différents états des liens, veillez à prendre en compte les différents états des boutons utilisés sur votre site Web. Des formulaires de connexion pop-up aux champs de recherche des formulaires d'inscription à la newsletter, tous ces boutons nécessitent des styles correspondants.
4. Validation du formulaire
Un détail important est la validation de formulaire. C'est le point critique où le site Web communique les exigences de l'utilisateur et les erreurs dans un formulaire. Il y a trois choses à considérer:
- Champs obligatoires
Tous les champs obligatoires doivent être indiqués. Le plus souvent, cela se fait avec un astérisque, comme on le voit sur S'il vous plaît commencer à partir du début :
- Validation en temps réel
Une certaine validation peut être effectuée en temps réel lorsque l'utilisateur remplit le formulaire. Ce type de validation informe l'utilisateur le plus rapidement possible de tout problème lié aux données saisies. Cela peut être accompli très bien avec cette Plug-in de validation jQuery :
- Validation post-retour
Ce type de validation se produit après que l'utilisateur a soumis le formulaire. Le style utilisé pour la validation en temps réel est souvent répété ici, mais une autre option consiste à regrouper toutes les erreurs en un seul message, comme on le voit sur Meuglement :
5. Messages d'état: erreurs, avertissements, confirmations, etc.
Les utilisateurs auront généralement besoin d'une sorte de retour après avoir effectué une action sur votre site Web. Le scénario le plus probable est la soumission d'un formulaire, mais de nombreux autres événements pourraient également se produire. Examinez attentivement votre site Web et les actions que les utilisateurs peuvent entreprendre, et planifiez les messages que le site Web devra communiquer.
Sur La vie aujourd'hui , nous voyons un message de validation qui pourrait facilement servir de style global pour les messages d'erreur. Et avec un léger changement de couleurs et d'icônes, il pourrait également être utilisé pour des messages d'avertissement plus subtils ou même des messages de confirmation:
6. Étendre l'arrière-plan sur des écrans plus grands
Selon le style du site Web, les éléments d'arrière-plan peuvent constituer un problème pour vos développeurs. La plupart des arrière-plans sont simples et ne nécessitent pas beaucoup de préparation, mais certains sont compliqués par des dégradés, des motifs et des images.
Étant donné que les grands écrans deviennent de plus en plus courants et que la plupart des conceptions sont planifiées sur une base de 960 pixels de large, beaucoup d’écrans sont laissés ouverts. Si votre arrière-plan comprend quelque chose de compliqué à distance, il vous appartient de planifier son extension pour remplir des écrans plus grands.
Dans l'exemple que j'ai construit ci-dessous, j'ai dû tenir compte d'une texture de bois qui s'étendait dans toutes les directions. Ce n'est pas le genre de chose que vous voulez un développeur lourd qui s'attaque à vous.
7. Éléments HTML de base
Pour les sites Web contenant beaucoup de copies, la conception et le style des éléments HTML de base sont fondamentaux et ne doivent pas être négligés. Mais sur de nombreux sites Web axés sur le marketing qui ont une mise en page occupée et un style visuel distinct, les éléments de base sont oubliés. Et bien sûr, le développeur ne parvient jamais à créer un site Web avant de devoir produire un modèle de page standard.
Voici les éléments de base pour toujours planifier: les paragraphes, les titres 1 à 6, les listes non ordonnées et ordonnées, les données tabulaires, les champs de formulaire, les images et le texte en gras et en italique.
Sur de nombreux sites Web sur lesquels je travaille, j'ai élaboré un guide de style pour aider les développeurs, à savoir:
8. E-mails du site
Une chose que je ne vois pas de plan de concepteur pour les e-mails est le site Web. Un tel élément de base est facile à rater, car ce n’est généralement pas le cœur du site Web. Et pourtant, le courrier électronique est un outil puissant qui peut promouvoir et étendre un service.
Ma suggestion est d'examiner attentivement le contenu du site Web au stade de la planification pour rechercher les e-mails susceptibles d'être envoyés. Les plus courants sont:
- Confirmation d'inscription à la liste de diffusion,
- Confirmation d'enregistrement,
- Confirmation de l'achèvement du formulaire (par exemple pour un formulaire de contact),
- Vérification de la commande après un achat.
Si vous voulez vraiment impressionner vos clients et développeurs, préparez également un modèle de marketing par courriel pour le site Web. Vous offrirez aux utilisateurs une transition transparente entre le site Web et la boîte de réception, et vous conserverez un contrôle minutieux de la marque sous ses diverses formes.
9. Étirement de la page
La question de savoir comment un design s’étendra pour s’adapter à un contenu en constante évolution est également rarement abordée, mais pourrait être critique, selon le style du site Web. Regardons un exemple où cela aurait pu être gâché:
BBQ pleine lune a une page d'accueil serrée. Cette conception ne permet pas beaucoup de mouvement ou de changement dans le contenu. Tout a une taille et un emplacement spécifiques. Alors, que se passe-t-il si les propriétaires décident de vraiment allonger le message de bienvenue ou d'ajouter une image? Heureusement, ils ont prévu cela. Comme vous pouvez le voir dans cette maquette, j'ai édité la page pour inclure le double du texte. La page s'étend parfaitement et s'y adapte:
Préparer des versions alternatives d'une mise en page avec beaucoup plus de contenu peut être extrêmement utile pour démontrer comment planifier un tel scénario.
10. Animations: pop-ups, infobulles, transitions, etc.
Sur un site Web standard HTML et CSS (c.-à-d. Sans Flash), les animations et les transitions sont tellement faciles à ignorer. Et lorsqu'ils sont négligés, ils ne seront souvent même pas logés du tout. Donc, si les animations sont critiques, le mieux est de fournir aux développeurs un exemple de leur fonctionnement pour que le produit fonctionne comme il se doit.
Les animations les plus courantes sont:
- Info-bulles
Ces petites fenêtres contextuelles lorsque les utilisateurs survolent les éléments. - Rotateurs d'image
Les diaporamas de la page d'accueil sont à la mode et un large éventail d'options est disponible pour les transitions et les styles. - Boite à lumière
Vous pouvez styler non seulement la lightbox elle-même, mais aussi la transition vers celle-ci.
Chacun de ces éléments animés a un style visuel distinct qui doit être pris en charge par lui-même.
Pourquoi devrais-je m'en soucier?
Bon nombre des éléments présentés ici semblent plus utiles aux développeurs que les concepteurs. Pour être juste, cela est partiellement vrai: si vous préparez tous ces éléments à l'avance, les développeurs vous aimeront. Ce sont les genres de choses que les développeurs en ont assez de demander ou de devoir se débrouiller seuls.
Cependant, en faisant tout ce travail à l'avance, vous empêchez les développeurs de deviner et vous conservez ainsi le contrôle de la conception. Et en maintenant le contrôle de la conception, vous avez beaucoup plus de chances de pouvoir ajouter le type de vernis qui transforme un site Web ordinaire en un site exceptionnel. Certains concepteurs appellent cela la sauce secrète qui fait chanter leurs dessins.
Et si cela ne suffit pas, considérez cela. Les concepteurs qui planifient bien à l'avance et livrent un ensemble complet sont tout simplement plus précieux. Non seulement ils créent un produit de meilleure qualité, mais ils réduisent également le coût de production. Cela signifie qu'il y a plus de place pour le profit, ce qui, bien sûr, rend tout le monde heureux.
Alors, gardez à l'esprit tous ces détails et amusez-vous à planifier votre site Web. Franchement, ces détails sont la moitié du plaisir de concevoir pour le Web, ce média en constante évolution qui permet l'interaction de l'utilisateur et la modification du contenu.
Patrick McNeil est rédacteur pigiste, développeur et designer. En particulier, il aime écrire sur la conception de sites Web, former des personnes au développement Web et créer des sites Web. Le dernier projet de livre de Patrick est Le manuel Web du concepteur ; il comprend de nombreux sujets supplémentaires dans le sens de cet article. Vous pouvez en savoir plus à ce sujet sur TheWebDesignersIdeaBook.com . Suivez Patrick sur Twitter @designmeltdown .
Que concevez-vous pour que tout le monde semble oublier? Avez-vous déjà présenté des figurants comme ceux-ci à vos clients? Quel genre de chose trouvez-vous que les développeurs vous demandent toujours d’ajouter à un design?