Share
Aujourd'hui, nous allons examiner un principe de conception qui joue un rôle majeur dans le succès d'un design Web: Unity. Comme avec de nombreux éléments conçus dans le monde, l'unité peut faire ou défaire la conception d'un site. Un site bien "unifié" se sent naturel, organique et homogène; Lorsqu'un site dépourvu d'unité peut se sentir disjoint, discontinu et déconcerté (en d'autres termes, il s'effondre visuellement). Continuez de lire pour en savoir davantage!
L'unité est un concept intéressant. Si nous examinons la définition technique, il y en a quelques-uns qui peuvent s'appliquer dans le contexte de la conception Web? tels que "l'état d'être uni ou uni dans sa globalité" et "l'harmonie ou l'accord entre des personnes ou des groupes". Plus précisément cependant, nous pouvons examiner une définition qui s'applique à ce scénario en tant que règle d'or d'une bonne conception Web: "l'état de former un ensemble complet et agréable".
L'unité est vraiment importante car elle aide à créer une marque et une identité cohérentes pour votre site. Il forme une connexion entre vos éléments afin que les utilisateurs aient la possibilité de progresser facilement entre ces éléments, mais également entre les différentes pages de votre site Web. Fondamentalement, le concept d'unité crée une relation forte entre les éléments afin que l'utilisateur les perçoive comme un groupe et non comme un groupe..
Pense-y de cette façon. Si vous vivez dans une maison en briques, vous ne dites pas: "Je vis dans un tas de briques". Au lieu de cela, vous dites: "Je vis dans une maison". C’est parce que vous avez un groupe de différents éléments (à savoir les briques) qui sont unifiés en tant que maison et que les gens prennent la structure en tant que seul bâtiment grâce aux connexions et aux relations solides entre les briques de construction (littérales).
La même chose vaut pour beaucoup de choses dans le monde naturel. Considérez la feuille à droite. Il contient des millions de cellules et d'autres structures de blocs de construction, mais la plupart des gens n'y voient qu'une feuille..
L'unité maintient votre conception ensemble en tant que structure, à la fois visuellement et conceptuellement. Il ajoute de l'organisation et facilitera le parcours de l'utilisateur sur votre page Web, car il n'a pas à traiter chaque élément individuellement. Ceci, indirectement, aide à diffuser le contenu et permet à l'utilisateur de se concentrer sur le message principal de la page Web..
De nombreux facteurs contribuent à créer un sentiment d'unité au sein d'une page Web. Cependant, avant d'essayer de les appliquer, assurez-vous de bien comprendre l'objectif principal de la conception. L’objectif de la conception devrait être soutenu par la conception unifiée qui rend tout ce qui est visiblement lié et plus facile à percevoir.
Maintenant, expliquons un peu plus comment chacun de ces facteurs peut être utilisé pour créer une relation forte entre les éléments.
Comme nous l'avons déjà établi, la couleur peut être un excellent moyen de créer un lien entre les objets. Presque tout correspond à un schéma de couleurs - site Web ou non - puisqu'il permet de créer une relation, en particulier lorsqu'il est utilisé en relation avec un produit ou une entité non Web. Par exemple, le site Web Coca-cola (voir ci-dessous) utilise les couleurs rouge et blanc primaires, identiques à celles de son produit phare. Par conséquent, notre utilisation du produit peut être instantanément liée au site en raison de la cohérence de sa couleur..
L'unité par la couleur peut également être générée en veillant simplement à suivre un schéma de couleurs défini dans vos conceptions. Ne pas être cohérent à cet égard donnera un design qui se sent détaché car l’une des plus grandes influences d’un lien visuel sera absente. Nous pouvons même aller aussi loin en disant que vous pouvez nuire à votre unité si votre choix en n'est pas lié à votre type de produit, comme dans quelle mesure le vert peut être lié à la finance.
Les éléments récurrents qui semblent identiques forment une connexion puisque votre cerveau va penser: "hé, je l'ai déjà vu!". Cela crée une familiarité au sein de la conception afin que vos utilisateurs ne soient plus obligés de retraiter cette partie de votre site Web. Il relie les pages par leur similarité, de sorte que votre objectif principal est le contenu et le message que vous souhaitez transmettre..
Bien entendu, la répétition d'éléments n'est pas la seule méthode permettant de créer une unité dans votre conception. Le simple fait d'utiliser des facteurs similaires (comme la couleur ou la typographie) permet de relier les éléments de votre conception, car ils se ressemblent. L'utilisation du même jeu de couleurs, du même style de bordure ou de la même police permet de joindre les pages ou les objets à votre conception..
Pour une meilleure compréhension, examinons une analogie. Nous pouvons examiner la répétition sous un autre angle: de nombreux sites malveillants répliquent la conception d'un site populaire de sorte qu'elle apparaisse à l'utilisateur comme une autre page du service qu'ils utilisent quotidiennement. Un faux écran de connexion Facebook reproduira le schéma de couleurs et la disposition de Facebook.com, de sorte qu'il apparaîtra à l'innocent comme une page officielle du réseau social. L'utilisateur non instruit ne réfléchira pas à deux fois parce que son cerveau n'est pas obligé de retraiter ces éléments particuliers sur la page..
Le maintien d'un alignement cohérent contribue à l'unité visuelle dans un élément. La conception autour d'un axe commun fait en sorte que les éléments apparaissent liés. Un tas de paragraphes avec le même alignement ont l’air de faire partie d’un article, pas seulement de différents morceaux de texte juxtaposés, et finissent par avoir l’air organisé et bien positionné..
Les alignements multiples exigent simplement plus d’efforts pour former une connexion, et il est tout simplement préférable d’éviter de passer du temps à le faire..
Considérez également comment une grille peut jouer un rôle dans l'alignement. Aussi restrictif qu'une nouvelle conception puisse sembler à une grille, il vous offre une base solide pour aligner un large éventail d'éléments sur une seule grille. Considérez le site Web Squarespace ci-dessous:
Remarquez comment la simple grille de trois colonnes transforme une page riche en informations en une page bien conçue et parfaitement alignée unifié. Pas mal droit?
La proximité est un autre concept qui contribue à l'unité globale de votre conception. Lorsque vous rapprochez des éléments, ils sont plus facilement assimilés. Pour tenter de créer une analogie, je ne pouvais penser qu'à ce qui suit: si vous aviez un groupe de moutons dans un champ, ils pourraient être appelés un troupeau. Cependant, s'ils étaient placés dans des champs différents, vous pourriez ne pas les reconnaître instantanément comme faisant partie de la même foule (et oui, c'est un terme collectif correct pour désigner les moutons). Une analogie plus appropriée serait peut-être de regarder deux personnes qui se réveillent dans la rue, riant et parlant ensemble. En raison de leur proximité les uns aux autres, on peut deviner qu'ils ont déjà eu une relation antérieure.
Au moment d’appliquer cela à la conception Web, ce n’est pas si différent. Plus les éléments sont proches les uns des autres, plus la relation que l'utilisateur reconnaît est forte et plus l'unité créée est grande. Si nous prenons un instant de recul et que nous comprenons que toute unité signifie réellement l’interaction entre les éléments, nous pouvons reconnaître qu’une relation plus étroite est en corrélation régulière avec le niveau d’interaction et, dans cette mesure, que.
Chez Tuts +, nous avons un excellent article sur la direction visuelle et son influence sur un dessin. En résumé, la théorie est que nous pouvons influencer la direction d’un utilisateur par rapport à une page Web en adaptant notre contenu à cet objectif. Dans une certaine mesure, nous pouvons utiliser la direction visuelle dans ce scénario pour aider les utilisateurs à passer naturellement à un autre élément..
Je suis peut-être en train de pousser un peu ici, mais en introduisant ce type de manipulation, nous pouvons combiner ensemble les éléments d'une page pour créer des liens plus solides. voir. Cette relation peut être utilisée en contexte pour attirer l’attention de l’utilisateur sur une autre histoire de votre page Web ou, éventuellement, pour continuer à lire une page. Vous pouvez utiliser ce concept pour encourager, inconsciemment bien sûr, quelqu'un à regarder et à interagir avec le bouton Tweet ou le bouton "Ajouter au panier"..
La cohérence dans la conception de votre site Web est un principe de base qui contribue à l’unité. Une équipe de football n'irait pas jouer en maillot avec une couleur différente par joueur. Au lieu de cela, ils sont unis en équipe avec un design unique qui représente leur marque (ou dans ce cas, une équipe).
La cohérence est obtenue en essayant de garder le même style d'éléments similaires et concerne des thèmes tels que la couleur, car ce sont les facteurs mêmes qui assurent la cohérence. Pour y parvenir, il n'y a rien d'autre à faire que de s'en tenir à un schéma dans vos éléments..
L’unité donne simplement l'impression que les choses sont connectées et ensemble en leur donnant l’impression qu’elles devraient être. Un site Web est un site Web et non une barre de navigation, une barre latérale, un logo et un élément de contenu. Non, à la place, nous visitons un site Web..
Cependant, si nous avons trop de couleurs et de polices, si les éléments sont repoussés ou si l'alignement diffère à l'intérieur de votre texte, les liens sont rompus et il ne se sent plus connecté. Vous pouvez demander, cependant, pourquoi ma conception devrait-elle être unifiée? En termes simples, cela signifie que l'utilisateur n'a pas besoin de traiter chaque élément, ou chaque page, chaque fois qu'ils en rencontrent un nouveau car il est reconnaissable. Cela améliore également le parcours sur une page, car le menu ne ressemble pas à un territoire différent du contenu..
Accentsconagua