Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Bâtir cohérence et relations dans vos créations

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Adding Space to Your Designs
Reducing the Bloat

French (Français) translation by Henri Lotin (you can also view the original English article)

Un élément clé de la composition est de comprendre comment construire la cohérence dans vos créations et comment mettre en évidence les relations entre chacun des éléments sur la page.


Bâtir cohé - quoi ?

Tout d’abord, un de vos principaux objectifs avec tout site web devrait être de renforcer la relation entre l’utilisateur et le site web. La raison étant de créer la confiance avec l’utilisateur, afin qu’il se sente à l'aise avec le fait de naviguer et d’interagir avec le site. Grâce au design et à la fonctionnalité, vous pouvez alors proposer à vos utilisateurs une meilleure expérience.

Bâtir la cohérence dans vos créations contribue également à renforcer votre marque et à garder le message de la marque clair. Pour un client, il est important pour leur entreprise que leur message de marque (que ce soit en ligne, hors ligne, ou sur tout autre support) soit cohérent puisqu'il bâtira à nouveau la confiance avec leur clientèle. Si le discours d'une marque est incohérent, confus ou difficile à comprendre, cela peut être rebutant pour les clients et peut même affecter les ventes et les demandes de renseignements, et en fin de compte avoir un effet néfaste sur les activités de votre client.

Même vous, en tant qu’individu, avez besoin de comprendre l’importance de la cohérence dans votre marque. Vous, vous-même, sont une marque. Même si vous avez un blog personnel, vous vous mettez sur le web et devriez se soucier de votre marque et de votre image. Parfois, en particulier dans l’industrie du web, c’est encore plus important de bâtir une cohérence de marque pour vous-même, car cela contribue à vous démarquer et à vous rendre unique.

Bâtir de la cohérence et des relations dans vos créations porte également sur la création de relations entre les éléments individuels plus petits dans vos créations.

The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.
Le site gov.uk est extrêmement cohérent, ce qui reflète le ton et le professionnalisme qui est attendu du site web du gouvernement.
govuk-2

Pourquoi c’est important

Tout simplement parce que vous travaillez sur le web, cela ne signifie pas que les valeurs qui sont visibles dans le design et le marketing traditionnel, offline devraient disparaître. Au lieu de cela, vous devriez rendre cette transition sans couture.

Par exemple, si vous travaillez sur un site Web pour une boutique traditionnelle (qui dispose de locaux de vente, véritable !) Alors vous devez transposer cette marque au design que vous créez pour leur site web. Vous voulez que leurs utilisateurs de se sentent heureux et confortable dans la navigation sur leur site, sachant qu’il leur est familier - même s’ils ne l’ont jamais visité auparavant. Dans l’ensemble, designer avec la cohérence à l’esprit rend un système de design plus solide et digne de confiance.

Designer avec cohérence a aussi un avantage pour vous, en tant que développeur. Avez-vous déjà eu un design qui vous à ete fourni qui était incohérent, avec une marge, des tailles de polices et d'espacement largement différentes ? C’est vraiment gênant, non ? Si plutôt vous designez avec cohérence, vous allez pouvoir identifier des schémas dans votre design pour vous aider quand vous êtes dans les stades de développement, ainsi accélérer votre flux de travail de développement et réduire la quantité de temps que vous devez passer à essayer de comprendre les choses.

Il est également important de réfléchir à la cohérence dans l’ensemble. Plutôt que de juste penser visuellement à quoi peuvent ressembler les choses et comment faire pour assurer la cohérence de ces choses, au lieu de cela pensez également aux schémas d'interactions et de comportements dans vos créations. Pensez à la manière dont l’utilisateur va interagir avec votre site web, pensez aux animations et comment les différent éléments pourraient réagir à des intrants d'utilisateurs. Si vous modifiez radicalement ces schémas d’une page à l’autre, vous allez seulement confondre vos utilisateurs.

At inc, there is a clear visual style that represents the brand throughout their website really well.
Chez inc, il y a un style visuel clair qui représente vraiment bien la marque tout au long de leur site.
inc-2

Comment designer de façon cohérente

Designer avec de la cohérence à l’esprit devrait être assez simple. Comme nous l’avons expliqué plus tôt, la cohérence contribue à maintenir une marque visuelle forte et la relation entre une marque et ses utilisateurs ou clients, à un niveau élevé.

Une technique ancestrale de marketing est de designer en répétant vos messages pour aider vos utilisateurs à se souvenir des choses. Bien que ceci puisse être utilisé dans vos créations, c’est à la cohérence d’une autre manière que je veux que vous pensiez le plus.

Pensez à la manière dont vous designez tous les éléments dans votre création, tels que :

  • couleur (accent, couleurs secondaires)
  • visuels (images, photos, icones, boutons)
  • typographie (taille, hiérarchie, positionnement)
  • taille (des contenus, images, relations)

Pensez au style visuel de ces éléments et comment ils jouent les uns contre les autres. Vous avez appris comment utiliser la couleur, la taille et une hiérarchie visuelle pour attirer l'attention sur des éléments particuliers, maintenant j’ai envie d’essayer de penser à comment vous pouvez rendre tous ces éléments compatibles d’une certaine façon. Tout comme nous ne le ferions pas (normalement !) Utiliser huit différentes polices de caractères dans un paragraphe ou zone de notre design, nous devrions être cohérent avec nos autres éléments de design.

Bâtir la cohérence dans vos créations, c’est tout au sujet des petits détails qui pourraient avoir échappé à la plupart, mais même dans ce cas inconsciemment leur fournira une meilleure expérience. Cependant, ce sont ces petits détails qui seront appréciés par ceux qui constatent le temps supplémentaire et l’attention qui a été dépensée pour ces choses supplémentaires.

Veillez également à être cohérent d’une page à l’autre (sauf si c’est plus précisément une partie de ce design d’avoir une mise en pages différente pour chaque page, comme sur un blog sous direction artistique). Mais même dans ce cas, c’est super important d’être cohérent dans les éléments qui sont plus susceptibles de rester les mêmes - comme la manière dont le logo ou la navigation est positionnée. Il est important de ne pas abandonner tous les aspects de votre design et construire plutôt de familiarité dans les zones qui sont plus adaptées pour être cohérentes.

The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.
Le site web OnSite dispose d’une grande marque, avec un design simple qui reste vrai tout au long de la page d’accueil et d’autres pages de niveau supérieur.
onsite-2

Établir des relations dans vos créations

Couleur

Comme expliqué dans les articles précédents de la présente session, la couleur a un impact énorme sur les gens et leur perception du design. Alors que vous ne pouvez vous concentrer sur les relations personnelles de chaque personne à la couleur, vous pouvez utiliser la couleur dans un sens plus large pour construire une relation entre un public cible probable et votre design.

La couleur a un impact personnel sur les gens - mentalement, grâce à des émotions ou des sentiments et aussi physiquement - et cela peut arriver par le biais de la marque, dans l'espoir de bâtir des liens plus forts entre les utilisateurs et le site web, si le message reste cohérent.

Ton & personnalité

le ton est important dans n’importe quel design et fait une grande impression sur vos utilisateurs. Le ton peut intervenir par le biais de n’importe quel aspect de votre design, du contenu à l’imagerie et tout autres styles visuels que vous avez.

Ajouter de personnalité à une marque est aussi absolument parfait, et vous pouvez le faire par le biais de ce que vous avez appris sur la couleur et la typographie. Les décisions subtiles comme celle-ci transparaissent à travers la personnalité, que vous pouvez ensuite améliorer à travers le contenu et les images, pour bâtir un style visuel cohérent dans votre création.

Perceptions de l’utilisateur

Pensez également à comment un utilisateur peut s'associer à votre marque, et ce qu'il ressentirait à son égard. Pensez à comment vous pourriez souhaiter que vos utilisateurs se sentent quand il s'associent avec la marque et essayez de le refléter dans votre conception. Prenez ces sensations et les perceptions que vous souhaitez que vos utilisateurs aient et utilisez la cohérence dans vos éléments de design pour projeter ces sentiments à travers le site web.

WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.
WooThemes a un super style visuel et ton défini dans l’ensemble de leur site Web - ce qui peut être plus difficile à faire quand vous avez des sites volumineux comme celui-là.
woothemes-2

Outils pour bâtir la cohérence

Il existe de nombreux outils que vous pouvez créer vous-même, ou fournir à vos clients pour les aider à comprendre l’importance de la cohérence.

Directives (charte)

Une directive est presque comme une directive de marque et de design habituelle avec laquelle vous pourriez travailler, mais au lieu de se rapporter seulement à la marque, il se rapporte plutôt à certains des principaux styles et éléments de design de votre site web.

Voir : Style Tiles pour d’autres idées.

Bibliothèques de motifs

Les bibliothèques de motifs sont comme une longueur d’avance sur une directive de syle ; ce sont des document de tous les styles possibles d’élément qui sont inclus dans le design de votre site web. Des styles de texte, styles de bouton aux motifs d’image, ces bibliothèques de mtifs peuvent être vraiment utiles pour l’entretien futur d’un design de site web et à garantir la cohérence dans des modifications ultérieures.

J’aime à penser que des bibliothèques de motifs pour les trois domaines clés : motifs de design, motifs de balisage et motifs de contenu.

  • Motifs de design : tout élément de design que vous avez sur votre site internet. Il s’agit d’un document qui inclut tous les styles de texte, titres, boutons, icones, etc..
  • Motifs de balisage : il s’agit d’une copie de balisage HTML & CSS de la bibliothèque des motifs de design : avec le HTML correct (et des classes CSS appropriées, si nécessaire) prévu pour l’entretien futur de l’adjonction de sections sur le site.
  • Motifs de contenu : iIs aident à imposer le style et le ton du contenu qui doit être utilisé sur le site web. Bien qu’il soit peu probable que vous serez en mesure de fournir le contenu exact (car vous ne savez pas comment le site web pourrait s’étendre à l’avenir) vous pouvez aider au moins à donner le ton pour les travaux futurs. Alors que le contenu ne peut également pas être quelque chose que vous avez fourni pour un client, ça peut être une idée pour s’assurer qu’ils comprennent que le contenu est seulement une part de rendre votre site plus cohérent - et pendant que vous pouvez pourvoir aux côtés design et développement, il peut être difficile de les avoir aussi performants avec un contenu qui ne correspond pas au reste du site.

Checklists

Je suis un grand fan des listes, et je pense qu’une chose très simple à faire pour vérifier la cohérence des choses dans votre design est de créer une liste de contrôle simple et facile.

  1. En premier lieu, comment la typographie se profile-t-elle ? Est-elle cohérente ? Les titres sont-ils cohérents d’une page à l’autre ? Est-ce que la police tombe dans un joli rythme vertical sur toute la page ? Est-ce que le rythme vertical se casse avec l’introduction d’images ? Ou tout semble correct ?
  2. Cohérence imagerie/visuelle ; comment les images rendent-elles ? Tout a-t-il un style et un ton similaire, ou y a-t-il un style extravagant et différent de photo ? Tout est-il recadré ou a-t-il une forme similaire, ou tout est-il trop différent ? Les tailles d’images sont-elles similaires ou y a-t-il un jeu de tailles dans l'ensemble du design ? Les icones, ont-ils les mêmes tailles lorsque cela est approprié ? Les boutons ont-ils la même marge intérieure et espace vierge ?
  3. Uniformité de couleur ; de quoi ont l'air les couleurs ? Les couleurs performent-elles bien d’une page à l’autre ? Les couleurs sont-elles appropriées ? Les couleurs fonctionnent bien les unes avec les autres ? Les couleurs sont-elles identiques lorsqu’elles sont utilisées plus d’une fois ?

Devoirs

Tout ce qui précède devrait vous aider lorsque vous essayez de créer un design qui a la plus grande cohérence et vous aidera à établir des relations entre chacun de vos éléments. Je veux que vous utilisiez la liste de vérification à la fin (ou créez la vôtre !) pour voir à quel point est cohérente votre création. Si ce n’est pas le cas, alors prenez le temps de bâtir cette cohérence dans vos créations.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.