Picasso a dit un jour « Apprends les règles comme un pro pour pouvoir les briser comme un artiste ». En termes simples, cela signifie connaître les éléments universels d’une composition (forme, couleur, valeur, modèle, texture et espace) pour créer ses propres effets et transmettre un message. Utiliser des règles établies ne signifie pas qu’une création sera identique à un autre. Par exemple, même s’ils sont basés sur les mêmes principes fondamentaux, la Mona Lisa de Léonard de Vinci est foncièrement différente du moderne Balloon Dog de Jeff Koons.
L’équilibre, le contraste, le mouvement, etc. tout cela a été repris par les designers. Ils les ont appliqués à chaque branche de leur domaine : l’architecture, le graphisme ou la création de site internet. De là, on apprend qu’une page web doit être travaillée comme un tableau (après tout, n’appelle-t-on pas cela la Toile ?). Pourquoi ? Car hormis l’aspect purement esthétique, cela a un impact direct sur la performance de votre site (navigation, conversion, fidélisation, etc.). Les grands maîtres avaient donc raison… Voyons ce qu’ils nous ont appris et comment cela peut vous être utile pour créer un site internet performant.
01. L’équilibre
Avez-vous déjà vu un yogi malheureux ? Trouver l’équilibre semble être la clé de la bonne fortune, de la stabilité, de l’épanouissement professionnel … et des compositions artistiques. En matière de design, l’équilibre est de faire en sorte qu’aucun élément ne l’emporte sur un autre. Vous avez le choix entre trois types d’équilibre :
- Balance symétrique : représente une ligne de symétrie. Ce type d’équilibre se produit lorsqu’un côté est une image miroir de l’autre, comme un papillon. Depuis que les hommes perçoivent la beauté qui les entoure, la symétrie est le facteur principal de ce jugement. Cela évoque l’ordre et la cohérence.
- Équilibre asymétrique : utilisant aussi une ligne comme point central, cela se produit lorsque les caractéristiques ne sont pas exactement identiques des deux côtés mais ont le même « poids » visuel. Imaginez une échelle avec un gros rocher d’un côté, il vous faudra une quantité de petites pierres de l’autre pour égaliser le poids. Ce type de design évoque le modernisme et la vitalité.
- Équilibre radial : tout est concentré sur un point central et non une ligne. Ici vous pouvez imaginer un entonnoir géant dans lequel tout objet jeté gravite naturellement vers le centre. Les éléments sont à égale distance de ce point. Ce type d’équilibre évoque la vie et le dynamisme.
Comment l’appliquer à votre site internet :
À partir de votre axe ou point, partagez de façon égale le poids visuel sur votre site. Faites attention à chaque chose que vous intégrez, qu’il s’agisse d’une image, d’un paragraphe de texte ou même d’un bouton – chaque nouvel élément peut potentiellement perturber votre équilibre. Un moyen simple de maintenir l’ordre, surtout lorsque vous prévoyez de mettre beaucoup de contenu sur une seule page, est d’utiliser des grilles.
Comment procéder ? Commencez par diviser votre page horizontalement avec des bandes, une par section (À propos, Contact, Galerie, etc.). Ensuite, vous pouvez facilement séparer les bandes de votre choix en plusieurs colonnes pour ajouter une partition verticale à votre page. Vous aurez un site composé d’une série de cases adaptées à la taille et à la résolution de tous les écrans. Tout ce qu’il reste à faire est de personnaliser leurs designs et d’insérer votre contenu pour un résultat net et pro. Vous cherchez un modèle de site avec une mise en page en grille ? Ce Template est idéal et répondra à tous vos besoins.
02. Le contraste
Vernir un de vos ongles d’une couleur plus audacieuse ou porter des baskets flashy avec un smoking noir : certains d’entre nous appliquent le principe du contraste sans même s’en rendre compte. Outre les coloris, le contraste peut être réalisé en utilisant des formes rondes et pointues, un espace négatif et positif, des textures lisses et rugueuses – et essentiellement des éléments intrinsèquement opposés les uns aux autres. Cette juxtaposition attire l’attention du visiteur. Le contraste est une expression puissante dans le monde de l’art et du design et fera des merveilles pour votre propre chef-d’œuvre.
Comment l’appliquer à votre site internet :
La monotonie est souvent pénible et ennuyeuse. Testez différentes façons de pimenter votre site et de stimuler votre public. Mais ne faites pas tout ressortir – pensez plutôt aux choses spécifiques que vous voulez accentuer. Il peut s’agir de votre nom sur votre page d’accueil, de vos infos de contact si vous souhaitez être joint par des clients potentiels ou d’un lien vers votre galerie si vous êtes un photographe en quête de visibilité. Diversifiez ces éléments du reste de votre contenu en jouant avec le type et la taille des polices, en laissant plus d’espace blanc autour ou en utilisant une autre forme.
L’effet de contraste qui domine en web design est la couleur. Souvenez-vous de votre meilleure amie à l’école primaire : la roue chromatique. Disons que toutes les choses de votre site sont dans les tons jaunes et oranges. De l’autre côté du cercle des couleurs, les teintes qui ressortent sont le bleu et le violet. Donc ce sont les nuances que vous devez associer pour faire ressortir certains éléments. Vous pouvez aussi faire un choix plus conventionnel, opter pour un fond blanc (ou noir) et permettre aux détails importants d’apparaître avec un coloris vif. Si vous voulez avoir une longueur d’avance, jetez un œil à ce Template entièrement personnalisable qui maîtrise le contraste comme aucun autre.
03. L’emphase
Souvenez-vous de ces photos en noir et blanc d’hommes d’affaires de New York en costume, semblant marcher au même rythme et faire le même boulot ordinaire ? Maintenant, imaginez que sur l’une de ces images se trouve un hippie allant à contre-courant et portant des vêtements de couleurs éclatantes. C’est l’emphase : quand une chose devient naturellement prépondérante dans une composition. Il y a plusieurs façons de mettre cela en œuvre dans l’art et le design. C’est souvent réalisé grâce au principe précédemment mentionné, le contraste, mais pas exclusivement. Chaque design doit incorporer un élément clé, connu comme un « point central ». Il servira d’accroche et de passerelle vers votre compo pour les visiteurs. À l’inverse, « si dans un groupe d’éléments ayant le même poids, aucun ne domine, ils entrent en concurrence. Les lecteurs doivent alors découvrir leur propre point d’entrée, ce qui est une corvée », a écrit Alex W. White dans son guide sur Les éléments du Design Graphique.
Comment l’appliquer à votre site internet :
Vous avez travaillé dur sur chaque élément de votre site web. Mais soyons honnêtes : toutes les parties n’ont pas la même importance et ce n’est pas grave puisqu’elles n’ont pas la même finalité. Certaines sections sont plus décoratives et d’autres sont utiles car elles aideront les visiteurs à atteindre les objectifs que vous leur avez fixés. C’est typiquement le cas de vos CTA (boutons d’appel à l’action). Les CTA sont de courtes phrases (« Réservez », « Achetez maintenant », « Inscrivez-vous ici », etc.) qui mènent aux sections de votre site où les internautes doivent faire quelque chose. Parce que ce sont vos boutons qui génèrent du trafic et du business, l’accent doit naturellement être mis sur eux, plutôt que sur l’image de fond qui doit simplement être attrayante. Comment mettre en valeur vos CTA ? D’abord, vous pouvez jouer avec le changement classique des polices et des couleurs pour les faire ressortir. Ensuite, laissez un espace blanc autour de votre bouton pour vous assurer que les internautes puissent facilement le localiser (surtout lorsque votre page est surchargée avec du contenu). Enfin, il est bien de l’épingler à l’écran. Cela signifie que quand un visiteur fait défiler votre site, le CTA reste toujours visible sur l’écran, prêt à être utilisé – comme dans le très beau Template ci-dessous.
04. Le mouvement
Lequel êtes-vous le plus susceptible de regarder pendant des heures : une image fixe ou un objet animé ? C’est un choix évident pour la plupart d’entre nous qui succombent aux vidéos sur nos fils d’actualités de réseaux sociaux (jusqu’à deux heures du matin lorsque l’on réalise qu’on ne dort toujours pas). Le fait est que le mouvement attire l’attention, même de la manière la plus subtile. Dans l’art fixe, c’est l’utilisation de différents éléments qui donne une impression de dynamisme (comme les lignes diagonales et courbées et l’illusion de l’espace) et fait que les yeux du visiteur parcourent la composition. Dans le design numérique, le processus est encore plus simple puisque la technologie vous permet d’incorporer des effets animés directement dans vos pages.
Comment l’appliquer à votre site internet :
Il existe de nombreuses façons d’ajouter de petites animations et des effets subtils sur votre site. Le défilement Parallax est une tendance du web design. Il s’agit de couper votre page en plusieurs bandes qui se déplacent à des rythmes différents, l’arrière-plan étant plus lent que le premier plan. Donc il crée une illusion 3D et donne de la profondeur et du mouvement à votre site web. Une fonctionnalité aussi sophistiquée nécessite généralement de savoir coder, d’avoir du temps et d’être attentif aux petits détails. La bonne nouvelle ? Il y a une solution bien plus simple grâce à l’Éditeur Wix : il écourte le processus et permet de mettre des effets Parallax très facilement et rapidement.
Même sans mettre d’animations, vous pouvez obtenir une impression de mouvement en positionnant les éléments de la bonne façon. Par exemple, incliner le texte en diagonale ou disperser vos images peut donner du rythme et du dynamisme à votre page. En général, n’abusez pas du mouvement sur votre site car les visiteurs peuvent être gênés par trop de « bruit visuel ». Vous cherchez l’inspiration ou voulez démarrer tout de suite ? Commencez avec cet élégant Template.
05. La répétition
Qu’il s’agisse d’embrasser votre moitié avant de partir ou de parcourir votre blog préféré tous les matins, nos rituels nous donnent de l’assurance. Il en va de même pour nos créations. Réitérer le même élément encore et encore crée un modèle plaisant pour l’œil. Et la répétition aide à donner de la cohérence, un facteur crucial pour renforcer l’unité de votre composition – ou votre identité en tant que marque.
Comment l’appliquer à votre site internet :
Sur votre site, vous pouvez créer un rythme intéressant grâce à la répétition de certains éléments de design. Par exemple, essayez d’alterner les deux mêmes polices et les trois mêmes couleurs sur plusieurs sections de votre page. Cela aide vos visiteurs à se souvenir exclusivement de votre site et à penser à vous inconsciemment lorsqu’ils cherchent un expert dans votre domaine.
Pour trouver l’inspiration, découvrez comment ce Template astucieux et créatif utilise le même modèle ondulé dans tout son design – des petites formes géométriques aux polices et en-têtes. Si vous n’êtes pas un designer né, vous pouvez aussi profiter des milliers d’illustrations vectorielles gratuites disponibles dans l’Éditeur Wix. Ces designs amusants sont entièrement personnalisables et redimensionnables, ce qui signifie que vous pouvez les utiliser pour créer vos propres signatures.
Note importante : quel que soit le modèle que vous choisissez, une répétition excessive conduit à la monotonie. Ajoutez quelques pauses visuelles et des espaces blancs autour de vos éléments pour laisser un peu de repos aux yeux des visiteurs.
06. La hiérarchie
Tout comme dans une entreprise traditionnelle, la hiérarchie est essentielle dans les compositions d’art et de design. Une bonne compo divise les choses en trois niveaux : le plus crucial, le moyen et le moins important. La raison étant que le cerveau humain ne peut accorder le même degré d’intérêt à chaque élément d’une histoire, d’un spectacle ou d’une œuvre. Au contraire, il tend à donner plus de valeur aux premiers détails qu’il perçoit – et c’est là que les grands artistes veulent attirer l’attention. Choisir le placement de chaque élément en fonction de son importance est la clé pour maîtriser ce principe et créer une jolie compo.
Comment l’appliquer à votre site internet :
Commencez par créer votre plan de site dans lequel vous déterminez une hiérarchie en vous basant sur le degré d’importance de chaque élément. Vous devez organiser les différentes sections de telle sorte que les visiteurs puissent voir ce qui est essentiel en premier. Selon de nombreuses études, les gens parcourent généralement les sites en allant d’en haut à gauche vers la droite et vers le bas en faisant un « F » ou un « Z ». Pensez donc au placement global de vos éléments. Les infos importantes doivent être mises en haut à gauche et les moins cruciales au milieu de la page (généralement survolé). Ce qui est mineur peut être mis dans d’autres endroits. Par exemple, dans ce Template, ce que vous verrez en premier, c’est « qui ils sont et ce qu’ils font » La deuxième chose sur laquelle vous allez concentrer votre attention, c’est le bouton « Réservez maintenant ». Vous repérerez le reste du contenu dans un second temps, comme les témoignages et le détail de chaque service.
07. L’unité
Une pizza à l’avocat ? Nous reconnaissons l’harmonie quand nous la voyons, même si plusieurs essais sont nécessaires pour obtenir la combinaison idéale. Il s’agit de trouver le bon équilibre avec les bons éléments. Pour y parvenir, le designer doit s’assurer que chaque chose a une place et un rôle précis. Rien ne doit être inutile ou aléatoire. L’unité est le résultat de l’accord des différents détails entre eux.
Comment l’appliquer à votre site internet :
Vous voulez que votre site transmette le bon message ou la bonne expérience à vos visiteurs. Pour cela, vous devez peaufiner votre design en intégrant des choses en accord les unes avec les autres. Par exemple, ce Template inclut du jaune dans les images, les textes et les bandes, ce qui rend très agréable à regarder. Vous pouvez personnaliser tous les éléments de votre site de sorte qu’ils s’accordent entre eux : votre logo, votre menu, la carte Google Maps sur votre page « À propos » ou de votre galerie photo, tout doit appartenir au même univers visuel. Assurez-vous que chaque nouveau contenu s’adapte au reste de votre composition. Cependant, l’unité ne veut pas dire la perte de créativité. Vous pouvez jouer avec les modèles et les tailles si le tout reste cohérent. Vous avez atteint la perfection lorsque tout semble aussi évident que de la confiture sur une tartine de beurre. Miam !
Maintenant que vous maîtrisez le design, créez votre propre site internet avec Wix !
[Read More ...]
No comments:
Post a Comment