• 0k
  • 0
Web design \ 7 Mars 2016

L’art de la composition : 5 conseils de designers pour créer un site époustouflant

L’art de la composition, quèsaco ? Ce terme complexe désigne une idée toute simple. À l’instar des autres formes d’art, le web design nécessite de savoir arranger harmonieusement des éléments variés sur un même support pour obtenir une œuvre visuellement cohérente et attirante.

Nos designers nous ont confié les 5 principes fondamentaux de cette discipline. Nous ne vous faisons pas le coup du : « Avec Wix, vous pouvez les appliquer facilement pour créer un superbe site internet » – même si c’est vrai, nous préférons rester humbles. En suivant ces conseils à la lettre, vous pourrez offrir à votre vitrine en ligne un nouveau visage à la hauteur de vos ambitions.

Web Design

Couleurs : votre palette en dit long

Vibrantes ou douces, contrastées ou alignées, les couleurs ont un effet déterminant sur la façon dont vos visiteurs perçoivent votre site. Les teintes vives tendent à injecter de l’énergie alors que les douces insufflent généralement une atmosphère plus sereine. Pour tout vous dire, il existe même des tendances en web design. Néanmoins, certaines couleurs résistent à l’épreuve du temps, comme le noir et le blanc. De manière générale, chacune d’entre elles envoie un message visuel et est associée à une émotion en particulier –  vous trouverez sur le lien qui suit un guide pour faire le meilleur usage des couleurs. Trois points importants à noter :

  • Prenez soin de choisir des palettes harmonieuses. Les outils comme Kuler ou Colourco sont destinés à cet usage.
  • Si rien n’est gravé dans la pierre, il est important de rester simple dans ses choix et de conserver un nombre de couleurs raisonnable. En outre, il vous faut les répartir de façon proportionnée. La règle de 60 % / 30 % / 10 % a déjà fait ses preuves – voir lien précédent.
  • Assurez-vous que vos Calls To Action (boutons d’appel à l’action) soient en contraste avec le reste de votre design. Vous ne voulez pas que vos visiteurs passent à côté.

Couleurs

Règle de 3 : exposez votre message stratégiquement

Pour comprendre comment vos visiteurs scrutent votre site, vous devez maîtriser la règle de 3. Le principe ? Imaginez une grille de neufs cases égales qui recouvre votre site (3 en hauteur / 3 en largeur). Le regard des surfeurs s’attarde naturellement sur les points d’intersection. Il est donc crucial d’utiliser ces emplacements pour afficher les informations et éléments de design les plus pertinents pour votre site – comme par exemple, vos slogan ou vos boutons d’appels à l’action (oui, encore eux).

règle de 3

L’espace blanc : faites place nette

Rien n’est plus tentant que d’utiliser l’espace de votre site au maximum. Ainsi, vous avez l’impression de présenter à vos visiteurs toutes les informations, outils et éléments de design sur une seule page. Mais gardez-vous bien de cette tentation, malheureux ! L’expression « embarras du choix » prend tout son sens dans le monde du web design. En effet, les internautes sont à la recherche de simplicité et veulent comprendre rapidement ce qu’on leur propose. Il est donc essentiel d’épurer votre page d’accueil et de faire le meilleur usage de ce que l’on appelle dans le jargon « L’espace blanc » – ou « White Space » / « Négative Space » si vous voulez faire l’Américain. Le but du jeu est simple : faire le vide autour de votre message afin de le mettre en valeur. Une grande image avec un texte concis et percutant aura un meilleur impact qu’un long paragraphe superposé à différents éléments graphiques – croyez-nous sur parole. Non seulement votre prose deviendra infiniment plus digeste, mais votre design dans son ensemble gagnera en clarté. Comme disait un certain Léonard : « La simplicité est la sophistication suprême ».

White Space

Polices : connaissez vos droits (et devoirs)

Les polices de caractères n’ont pas uniquement une fonction esthétique sur votre site ; elles créent un prisme visuel à travers lequel vos visiteurs analysent votre texte – cette illustration en est la preuve. Par exemple, un style d’écriture attaché insufflera une touche élégante et sophistiquée à votre prose. En revanche, les polices sans serif (sans empattements) sont perçues comme fluides et modernes. Ces sensations / messages déteignent sur votre site dans son ensemble et racontent son histoire. Evidemment, il est possible d’en utiliser plusieurs mais sous certaines conditions :

  • Ne pas en afficher plus que 3 – autrement, ça fait hiéroglyphe.
  • Choisir des combinaisons harmonieuses– autrement, ça fait brouillon.
  • Sélectionner uniquement des polices en accord avec l’identité de votre entreprise – autrement, ça fait pas pro.
  • Favoriser la lisibilité au style – autrement, personne ne lit jusqu’au bout.

Ci-dessous, un récapitulatif des différents types de polices et de leurs significations respectives.

Polices de carctères

Hiérarchie visuelle : clarifiez pour mieux captiver

Avez-vous déjà entendu le terme Eye Tracking ? Comme son l’indique, cette science consiste à analyser les mouvements du regard. Les tests effectués sur les sites internet révèlent que les yeux des surfeurs scannent l’écran, en fonction du contenu, en formant un « F » ou un « Z ». La question à 100 € : Et je fais quoi moi avec cette info ? Pour simplifier l’idée, pensez à votre mise en page comme à celle d’un article de journal (ou de blog). L’intro et la conclusion sont lues avec une attention particulière. Vous devez donc peaufiner votre entête et votre pied de page car c’est à ces endroits que les internautes s’attardent.

Pour tout ce qui se trouve entre ces deux extrêmes, il est nécessaire de vous mettre dans les bottes du visiteur qui lit en diagonale – nous le faisons tous, sans rancœur. Outre la règle de 3 que nous vous avons précédemment présentée, différents outils s’offrent à vous pour créer une hiérarchie visuelle et indiquer quels sont les éléments et contenus « prioritaires » sur votre site. Ces outils sont : les couleurs, les tailles, le contraste et l’alignement. En les manipulant stratégiquement, vous créez une composition cohérente et structurée à travers laquelle il est simple de trouver son chemin et de trier l’information. C’est là le point de départ d’une argumentation claire, qu’elle soit textuelle ou visuelle.

Hiérarchie visuelle

Envie de vous lancer sur le Web ? Créez votre propre site gratuitement dès aujourd’hui ! 

Publié par Equipe Wix

Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email