• 228k
  • 84
Web design \ 6 Juin 2017

10 termes de web design expliqués simplement

Parallaxe, Duotone ou espace négatif : les termes de web design ne sont pas toujours intuitifs. Que vous construisez votre site internet tout seul ou que vous travaillez avec des graphistes, ce sont des mots auxquels vous avez souvent à faire. Mais quelqu’un s’est-il déjà assis avec vous pour prendre le temps de vous les expliquer ? Oui, nous !

Vous ne pouvez pas peindre si vous ne connaissez pas les différentes couleurs, ou coder si vous n’avez aucune notion en informatique. Le web design, comme toute spécialité, à son propre langage et il va bien falloir l’apprendre si vous voulez faire des merveilles. Voici donc pour vous, les notions de web design les plus tendances expliquées simplement.

Le Parallax

Ouvrez vos cahiers, voici la première leçon : qu’est-ce que l’effet Parallax ? C’est le fait de faire défiler le fond d’écran moins vite que les autres objets du site. Ainsi, lorsqu’un élément au premier rang est en mouvement alors que celui qui se trouve derrière est encore statique, on obtient une certaine profondeur, proche d’un effet 3D. Son utilité ? Donner de la vie à votre site et capter en un instant l’attention de vos visiteurs. N’est-ce pas l’effet recherché de tous les sites internet après tout ?

Parallax

Le Cinemagraph

Contrairement à ce que son nom indique, un Cinemagraph est une photo. Tout ça pour cela ? Non, bien heureusement, cette image a tout de même une particularité : dans un Cinemagraph, un ou plusieurs éléments de la photo sont en mouvement. Vous obtenez donc un résultat plus proche de la réalité. Vous pouvez l’utiliser pour marquer les esprits sans détourner l’attention de vos visiteurs du message principal de votre site. Le Cinemagraph crée un effet subtil et pourtant très efficace.

Cinemagraph

L’asymétrie

Si votre maîtresse a bien suivi le programme de CM2, vous savez forcément ce que signifie le terme « asymétrie ». La question est : qu’est-ce que cela a à voir avec le web design ? Certains sites internet sont créés de façon non symétrique. Bien que la composition reste équilibrée, les éléments ne sont pas disposés les uns parfaitement en face des autres. Conséquence ? Un résultat intrigant qui pousse le visiteur à explorer le site de plus près.

Asymétrie

Le minimalisme

N’ayez pas peur du vide. Les sites internet de style minimaliste se concentrent uniquement sur l’essentiel : le message. En réduisant le nombre d’éléments sur vos pages, vous permettez à vos utilisateurs de se concentrer sur ce qu’il y a de plus important. Attention, si vous ne misez pas sur la quantité, vous devez tout donner au niveau de la qualité. Ce que vous affichez à l’écran doit être irréprochable. Pour ne pas perdre l’effet attendu, assurez-vous que votre site reste agréable à lire et facile à naviguer.

Minimalisme

Le moderne-rétro

Ceci est un oxymore (on a sauté quelques classes pour arriver au lycée). Le style moderne-rétro utilise des éléments « old school » pour donner une look très actuel à votre site. Il s’inspire des dernières décennies : les jeux vidéo, les premiers PC et la culture geek y sont pour beaucoup. Attention cependant à ne pas le confondre avec le style vintage, qui lui, reprend expressément le design de certaines années phares du passé : les années folles, discos ou encore hippies. On vous sent nostalgique tout à coup…

Modern-Retro

Le duotone

Ici, ce ne sont pas deux époques que l’on oppose, mais deux couleurs. Un duotone est une image composée uniquement de deux teintes. Depuis toujours utilisée dans l’impression, cette technique est devenue le nouveau chouchou des designers. Les couleurs flashy sont à l’honneur et sont souvent associées à des couleurs plus sombres pour créer un maximum d’impact. Un duotone réussi donnera le ton (c’est le cas de le dire) de votre site internet.

Le duotone

La police monospace

C’est une police à chasse fixe. Autrement dit, chaque lettre ou caractère occupe le même espace. Cette typographie nous rappelle celle des machines à écrire et des premiers ordinateurs. Elle est parfaite pour un design minimaliste ou légèrement épuré. Son côté régulier permet également de rendre un texte plus facile à lire. On vous laisse choisir dans quelles conditions vous souhaitez l’utiliser. Rappelez-vous seulement de la règle d’or : pas plus de 3 polices différentes sur une même page !

Monospace VS Proportionelle

Les espaces négatifs

On parle d’espace négatif lorsque le blanc laissé entre les différents caractères forme une image. Dans les exemples ci-dessous, il s’agit de la flèche qui apparaît dans the « Ex » de FedEx, ou l’Afrique qui se dessine entre les pattes de l’éléphant. Vous avez trouvé le troisième ? Cette technique permet une double lecture : en plus du design évident, vous pouvez créer une autre signification plus profonde. L’espace négatif est souvent utilisé pour les logos. Vous pouvez d’ailleurs consulter notre article sur les nouvelles tendances en logo de cette année.

Les espaces négatifs

Lorem ipsum

Après le français et les maths, passons au cours de langue morte. Le Lorem ipsum est un texte de latin modifié qui peut se rajouter n’importe où pour donner une impression de paragraphe écrit. Ce générateur de faux-texte est très pratique pour créer des maquettes et avoir un aperçu global de tous vos designs. Malheureusement, vous ne pourrez pas l’utiliser dans vos dissertations de latin puisque ce texte n’a absolument aucun sens !

Lorem ipsum

Les polices Google

Une police de caractères ? Pas de problème, rendez-vous sur Google Font pour télécharger gratuitement celle qui vous convient. L’Éditeur de Wix intègre déjà un bon nombre de polices, mais si vous n’avez pas trouvé « the one », vous avez la possibilité de télécharger la vôtre. Que demander de plus ?

Prêt à mettre tout cela en pratique ? Commencez par créer votre site internet gratuitement avec Wix !

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