Un examen des conceptions cohérentes sur le Web
Le langage visuel d’un site Web impressionne un visiteur bien au-delà de son premier aperçu.
En fait, en observant les meilleurs sites Web, vous remarquez que les petits détails vous parlent inconsciemment et que cette cohérence améliore votre expérience du site Web, ce qui vous rend plus susceptible de revenir.
Dans cet article, nous explorerons ce qui rend un design cohérent et nous présenterons quelques-unes des conceptions de sites Web les plus cohérentes.
S'il vous plaît commenter à la fin de l'article sur la cohérence de ces sites et n'hésitez pas à ajouter des liens vers d'autres qui suivent ce principe.
Qu'entendons-nous par cohérence dans la conception? Selon cette définition , la cohérence peut être définie comme: "Une uniformité ou un accord harmonieux entre les choses ou les parties".
En tant que concepteur, votre objectif est de créer de l’ordre pour que les utilisateurs puissent facilement trouver les informations qu’ils recherchent. La cohérence peut vous aider à atteindre cet objectif.
Liste de contrôle des détails
Tout d'abord, définissons les critères par lesquels nous déterminerons si les sites Web examinés ici sont cohérents. Définir des critères pour vous-même serait également bénéfique pour votre propre travail de conception quotidien. Comme je tiens à le dire, un bon design est d'abord créé avec une bonne observation . Voici nos critères:
Cohérence typographique:
- Y a-t-il un rythme vertical cohérent?
- L'alignement typographique est-il cohérent?
- Les choix de caractères sont-ils cohérents?
- La navigation typographique est-elle prévisible à travers les pages?
Cohérence graphique:
- Les images du site Web transmettent-elles une humeur constante?
- Les couleurs des images correspondent-elles?
- Les textures des images sont-elles cohérentes?
- Les tailles des images sont-elles cohérentes avec la structure globale du site et entre elles?
Cohérence de la couleur:
- Les couleurs sont-elles utilisées uniformément sur toutes les pages?
Cohérence des icônes et des boutons:
- Les icônes du site sont-elles de la même famille?
- La taille des icônes est-elle identique?
Un site Web ne doit pas nécessairement respecter ces critères, mais la liste est un bon point de départ pour vous aider à rendre vos propres conceptions cohérentes et harmonieuses.
Ok, nous avons maintenant une jolie petite liste de contrôle avec laquelle jouer. Passons en revue nos sites Web, apprenons d'eux et inspirons-nous!
52 semaines d'UX
Quels sont certains des points saillants de ce site:
- L'espace blanc dans l'en-tête est également divisé.
- La typographie est constamment alignée, à gauche avec une droite en lambeaux.
- La navigation paginée persistante en haut est à la fois intelligente et familière.
- Les images pour les messages sont toujours en noir et blanc.
Maintenant, parce que cet article concerne les détails, je voudrais signaler deux problèmes mineurs avec ce site Web, tous deux dans le pied de page: Tout d'abord, notez comment le bouton de recherche "Go" a une réflexion, tandis que les autres éléments sur le site ne (comparer, par exemple, le bouton RSS en haut).
Deuxièmement, notez que l'espace entre les titres et le texte est beaucoup plus étroit dans le pied de page par rapport au reste du site.
Rubans de rouge
- Tout d'abord, l'élément le plus important du site: le rouge! Magnifiquement et systématiquement utilisé du logo aux en-têtes aux liens vers les boutons.
- Ensuite, la texture des boutons est identique à celle utilisée pour le logo.
- Notez également que les boutons sont visuellement tous de la même famille, même les icônes sociales en bas.
- Le type d’affichage est un joli serif à nouveau, utilisé systématiquement du logo aux en-têtes des boutons.
- Enfin, les éléments de texte du site Web sont alignés de manière cohérente, alignés à droite et décalés.
Yaron Schoen
- La première chose qui attire le regard est la manière dont l'illustration dans l'en-tête joue avec la profondeur. Même les quatre éléments graphiques ci-dessous sortent de leurs conteneurs et jouent avec la même profondeur.
- La typographie est parfaitement alignée sur une grille.
- La police est bien choisie et exécutée. La page d'accueil et les autres pages présentent également une continuité.
- Les couleurs sont également très cohérentes, jouant bien avec le bleu foncé au vert bleuâtre, de l'en-tête au pied de page.
Fuzzco
- Regardez la texture dans la navigation du haut. il est également utilisé pour les images près du bas.
- Vérifiez le type dans l'en-tête à travers les pages; bien fait avec Flash personnalisé, ce qui lui donne un caractère créatif.
- Le serif est cohérent sur toute la page d'accueil mais se brise un peu sur les pages internes.
- Les couleurs dans la navigation supérieure correspondent au pied de page, harmonisant et encadrant le contenu.
Styleboost
- La taille rend ce site cohérent: grand . Gros boutons, grandes images (toutes de taille constante), gros caractères, gros espace blanc.
- La couleur est réduite au minimum et bien utilisée. Le bleu clair maintient l'harmonie et le gris secondaire joue avec la profondeur et la hiérarchie.
- Les boutons sont grands et uniformes. Ils sont également légèrement arrondis, correspondant au champ de recherche.
- La structure de la grille est simple et vous indique les prochaines étapes. Même le pied de page est en proportion, ce qui semble être proche du nombre d'or.
Monstre délicieux
Ce site n'est pas nouveau, mais il est magnifique dans sa constance au fil des ans et il n’a pas vieilli un peu. L'attention au détail a aidé.
- Notez les textures. Le site est encadré par une étagère en bois, qui se rattache au thème du logiciel proposé par l'entreprise.
- Les éléments graphiques tels que l'herbe et les plantes maintiennent l'harmonie.
- Chaque section a des coins arrondis, même les boutons de diaporama.
- Le jaune verdâtre domine la page, vous invitant à entrer dans ce monde imaginatif et mémorable.
Richard Meier & Partners Architects.
Il a été conçu par Massimo Vignelli , connu pour avoir maîtrisé la grille et produit des conceptions modernes, cohérentes et logiques.
- Notez l'alignement des éléments graphiques. Le type flush-left dans le menu s'aligne avec les images ci-dessous.
- La règle horizontale sous la navigation secondaire est persistante, ce qui aide les utilisateurs à s'orienter sur le site Web.
- L'espace entre la navigation et le contenu du corps est cohérent, donnant à l'œil un chemin clair à suivre.
- Et la typographie est simple, à gauche et sans empattement, et tombe régulièrement dans la grille.
L'équipe derrière Architectes d'Information a également maîtrisé la simplicité, la conception de la grille et la cohérence.
- Notez que la navigation en haut est alignée sur le contenu du corps ci-dessous.
- La palette de couleurs est simple et cohérente: rouge, blanc et noir.
- Les éléments textuels sont alignés uniformément. Notez que l'espace entre les règles horizontales est cohérent sur la page.
Wilson Miner
- Les dates et les méta-contenus sont alignés dans la première colonne, suivis du contenu du corps.
- Notez comment la navigation en haut tombe dans la grille, en s'alignant sur le contenu ci-dessous.
- La typographie est un simple blanc et noir: blanc pour les titres de section, noir pour la copie corporelle.
Tapbots
- La première chose qui attire mon attention est l’excellente utilisation des espaces blancs, en particulier l’espacement uniforme entre le logo et la navigation, à la fois en haut et en bas.
- Les icônes semblent toutes provenir de la même famille, créant une harmonie.
- L'utilisation de la profondeur, du graphique supérieur aux illustrations de bas de page, est également cohérente.
- Les couleurs correspondent à travers la page: le noir sur le dessus correspond au pied de page; le bouton rouge en haut correspond au bouton de recherche ci-dessous; et la navigation grise correspond à la barre grise du pied de page.
Emballer
Une conception cohérente nécessite de nombreux outils et peut être difficile à réaliser.
Un conseil que je peux offrir est de commencer avec une belle grille, puis de construire une structure filaire par-dessus. Cela vous donnera une vue d'ensemble des éléments graphiques et de leurs relations.
Les exemples ci-dessus devraient vous donner matière à réflexion sur l'exécution de votre conception. La cohérence est composée de nombreuses parties, qui sont toutes des ingrédients essentiels dans le processus.
Écrit exclusivement pour Webdesigner Depot par Noam Almosnino, concepteur de sites Web à Brooklyn, New York. Suivez Noam sur Twitter , ou visitez son site web hellonoam.com .
Connaître d'autres sites Web cohérents à partager avec nous? S'il vous plaît les poster dans les commentaires!