top of page

Copié

Parlons Web design : 15 notions à assimiler pour assurer comme un pro


Parlons Web design : 15 notions à assimiler pour assurer comme un pro

Vous avez créé votre site avec Wix sans avoir à coder une ligne et vous êtes fier du résultat obtenu. Vous partagez votre lien gaiement avec vos amis et les compliments vont bon train. Seulement voilà, vous appréhendez secrètement d’avoir à discuter avec des web designers de métier car vous ne maitrisez pas totalement le jargon technique. Pas d’inquiétude, afin de vous aider à asseoir votre statut de professionnel averti nous vous présentons 15 notions de base du Web design incontournables.

Une fois ces termes assimilés, vous aurez toutes les connaissances nécessaires pour faire face aux clients pointilleux et pour clouer le bec aux envieux.

Image vectorielle : les images vectorielles sont composées de formes géométriques qui peuvent être étirées à volonté. Par opposition aux images matricielles composées de pixels, les dessins vectoriels ne perdent pas en qualité avec l’agrandissement des visuels. Les images vectorielles sont utilisées pour une variété d’usages entre autres, création de logos, d’icônes et d’infographies.


Images vectorielles

Bitmap (ou image matricielle) : ces images sont constituées de pixels – à savoir, de points colorés juxtaposés les uns aux autres pour créer une image. Afin de mémoriser et de visualiser plus facilement le concept, pensez aux consoles de jeu des années 80/90. Si Mario ressemblait plus au départ à un mur de briques peint par un enfant de 4 ans qu’à son double contemporain, c’était à cause du faible nombre de pixels qui le composaient.  Aujourd’hui, les appareils photos numériques ont tous des résolutions de plusieurs millions de pixels mais en zoomant bien, vous pourrez distinguer les carrés colorés qui animaient votre enfance.


images matricielles

CMYK (ou CMJN) : non, cela n’a rien à voir avec un certain tube des Village People si ce n’est qu’il s’agit également d’initiales en anglais. Le sigle CMYK,  « Cyan, Magenta, Yellow and Key (Black) Color Model» , en français quadrichromie ou plus simplement CMJN (cyan, magenta, jaune, noir) fait allusion à un procédé d’imprimerie permettant de reproduire un large spectre de couleurs à partir de trois teintes de base auxquelles l’on ajoute le noir.


Couleurs du CMYK ou CMYK

RGB (ou RVB) : « Red, Green and Blue Color model » ou « format de codage des couleurs Rouge, Vert et Bleu»  est un format de codage utilisé dans le domaine du graphisme. Contrairement aux imprimantes, les écrans d’ordinateurs peuvent transmettre tout le spectre de couleurs à partir de ces trois couleurs primaires. Bref, sur votre écran utilisez RGB et pour imprimer CMYK.


Couleurs du RGB ou RVB

Responsive : cette notion est probablement l’une des plus importantes de cette sélection. En effet, un design responsive est un design qui s’adapte automatiquement aux smartphones et tablettes. Comme vous le savez, le nombre d’internautes qui accèdent au Web depuis leurs appareils mobiles connait une croissance permanente. Par conséquent, avoir un site dont l’affichage est optimisé pour ces supports est devenu un must.


Responsive design

Flat design : ce concept de design met l’accent sur la simplicité et l’aspect fonctionnel d’une interface virtuelle. En français « Design Plat », cette tendance consiste à utiliser des icônes simples et des couleurs solides pour élaborer un affichage épuré et qui met l’accent sur l’utilisabilité.


Template Wix - flat desing

Skeuomorphisme : si ce mot est compliqué comme le nom d’un meuble IKEA, le concept est simple comme bonjour. Le principe du skeumorphisme est de présenter sur une interface virtuelle des éléments en imitant leur aspect dans la vie réelle. Pensez à l’ancien design de l’iOS d’Apple qui regorgeait d’applications aux looks inspirés d’objets physiques – Kiosque, bloc-notes, horloge etc. Si cette tendance a connu ses heures de gloire, elle commence aujourd’hui à voir sa côte de popularité chuter sur la Toile.


Skeuomorphisme

Metro Design : plus connu sous le nom de « Microsoft Design Language » ce concept de design lancé par Micorsoft est aujourd’hui utilisé par nombre de sociétés technologiques de renom. Inspiré de l’esthétique minimaliste de l’affichage des indications dans les transports publiques (en particulier du métro), l’objectif principal du Metro Design est d’orienter l’utilisateur afin qu’il trouve facilement son chemin à travers les méandres du système. Il ne s’agit pas créer des œuvres d’art mais des espaces pratiques et praticables. Telle est la voie du succès.


Microsoft Metro design

Galerie Masonry : suite au succès fulgurant du réseau Pinterest, cet outil a commencé à envahir le Web. La structure de ces galeries est semblable à celle de la plateforme de partage : des colonnes parallèles et de même largeur adjacentes les unes aux autres, composées d’éléments de tailles variables. Il en résulte un design faussement irrégulier qui assure une organisation claire et épurée. Vous pouvez intégrer une galerie Masonry sur votre site très facilement avec l’éditeur Wix : Sélectionnez Ajouter -> Galerie -> Masonry.


Galerie Masonry

Ligne de flottaison : cette notion est d’une importance capitale autant pour les web designers que pour les professionnels du marketing en ligne. La ligne de flottaison est l’axe qui distingue la partie visible de la page telle qu’elle apparaît sur l’écran sans que le visiteur n’ait à la fasse défiler, de l’autre partie de la page, soit celle qui s’affiche avec le scrolling. Si le nom de cette ligne de flottaison n’est pas bien sexy, c’est pourtant elle qui détermine si votre site parviendra à séduire vos visiteurs. Par conséquent, il est essentiel que vous placiez le cœur de votre contenu au-dessus de cette ligne.


Ligne de flottaison

Infinite scrolling : probablement l’une des tendances qui déferlent avec le plus de puissance sur le Web ces derniers mois. En français, on pourrait parler de défilement infini afin de mieux cerner le concept. Il s’agit, bien évidemment, des pages en longueur qui se consultent à coup de roulette de souris. Ce type de navigation présente de nombreux avantages. Pour en savoir plus, cliquez ici.


Exemple de site long scrolling

Site d’une page : nous sommes habitués aux sites classiques de plusieurs pages coiffés de menus horizontaux que nous croisons fréquemment sur le Web. Cependant, un site d’une page peut être une solution de choix pour beaucoup d’internautes. Que ce soit pour une carte de visite, un CV ou encore une page d’atterrissage, les raisons ne manquent pas d’opter pour une page Web unique. Pour ceux d’entre vous que cette solution intéresse, les templates d’une page de Wix sont à votre disposition.


Site d'une page Wix

Espace blanc : les créateurs de sites ont parfois la fâcheuse manie d’essayer à tout prix de mettre en application toutes leurs connaissances sur leur page d’accueil. Résultat : la page principale du site tient plus de l’art abstrait que du design. Les espaces blancs servent précisément à éviter ce genre de confusion. Utilisé de façon judicieuse, cet outil permet d’une part d’épurer le graphisme du site et, d’autre part, de mettre l’accent sur les éléments qui importent réellement aux visiteurs.


Espaces blancs

Texture : les textures sont en règle générale utilisées pour édifier l’arrière-plan des sites. Elles permettent d’instaurer une certaine atmosphère et de donner une touche d’authenticité. Cela dit, cet outil est à double tranchant : il suffit d’un mauvais choix de texture – comme des briques rouges pour une pizzeria par exemple – pour que le site qui en fait usage sombre dans la catégories des sites clichés qui manquant de raffinement. Si vous voulez que votre site prenne convenablement le large, évitez les textures bateau.


Exemple de texture bois

Mockup : le mockup est un terme qui désigne la maquette d’une interface utilisateur. Pour nombre de créateurs de sites cet outil peut être d’une grande utilité. Abattre sur papier un modèle du site permet de faire de l’ordre dans son design et de hiérarchiser ses idées et ses messages. En créant votre site avec Wix, vous n’avez pas réellement besoin de maquette. Il vous suffit de choisir un template qui fait office de brouillon. Dupliquez-le et faites plusieurs essais avant de prendre votre décision finale.



Cet article a-t-il été utile ?

bottom of page