Abécédaire du graphiste webdesigner


abécédaire-graphisme

 

Dans son équipe, notre Agence web comporte une Designer Graphiste et aujourd'hui elle vous présente son Abécédaire ! 

 

 

A comme Arborescence

Il s’agit de l’organisation des différentes pages internet de votre futur site web. Cette dernière doit être logique car il en découle la navigation et l’accès aux informations que l’internaute recherche. Pas d’inquiétude, notre graphiste webdesigner est là pour vous aiguiller dans cette mise en page.

B comme Baseline

« venez comme vous êtes », « just do it », « au cœur de la beauté », vous avez reconnu ces phrases ? Ce sont les baseline, ou slogan, de Mcdo, Nike et Sephora. Vous l’aurez compris, une baseline est LA petite phrase, souvent très courte et qui permet de marquer les esprits. Elle se trouve généralement juste en dessous du logo. Chez WDM, c'est : complice digital de vos idées ! Car nous sommes toujours prêts à réaliser vos projets web et graphique.

C comme Charte graphique

Lorsque vous créez une marque, la charte graphique est un élément TRÈS IMPORTANT puisque ce guide va définir les éléments graphiques de vos différents supports de communication : logo, couleurs, police, typographies, symboles… la charte graphique vous assure une cohérence et une homogénéité dans votre communication visuelle. Elle s’appliquera également au webdesign de votre site internet.

D comme DPI

Dot Per Inch ou Point par Pouce (PPP), il s’agit de la résolution d’une image numérique, c’est-à-dire le nombre de pixel utilisé. Par exemple, pour une image sur le web la résolution est de 72DPI ou 300DPI pour l’impression d’une image. C’est pour cette raison qu’il est primordial de toujours fournir des images de bonne qualité.

E comme Ergonomie

On parle d’un site ergonomique lorsque celui-ci amène le visiteur vers l’info qu’il recherche de manière naturelle avec une navigation optimale. C’est au graphiste webdesigner de penser à cette qualité de navigation, notamment lorsqu’il vous aide dans l’arborescence du site internet.

F comme Footer

En français, « pied de page » il s’agit de la zone en bas de page de votre site internet. Vous y retrouvez généralement les horaires, les coordonnées, les liens vers les réseaux sociaux, les mentions légales et CGV/CGU. Le footer est présent sur chaque des pages de votre site internet.

G comme Graphiste

D’ailleurs, c’est quoi exactement ce métier ? et bien le graphiste est le spécialiste de l’univers du graphisme et de la création graphique. Il est capable de donner une identité visuelle à une marque, un logiciel, une entreprise avec la création de logo, d’une charte graphique, la refonte de site internet etc.... Le métier de graphiste rime avec créativité !

Chez WdM, on a la crème de la crème : Amandine est graphiste webdesigner et depuis octobre, elle est même devenue Directrice Artistique !

H comme Header

A la différence du footer, le header est « l’en-tête » d’un site internet. Vous y retrouverez la partie « connexion », la barre de recherche, les réseaux sociaux si ces derniers ne sont pas dans le footer.

I comme Iframe

Il s’agit d’une balise HTML utilisée pour intégrer, dans une page HTML, le contenu d’une autre page HTML comme du texte, une image, une vidéo…

J comme Jpeg

C’est le format de compression d’images numériques le plus connu. Il existe également .png ou .gif

K comme (Texte) Knockout

C’est une technique d'effets CSS où les lettres d'un mot sur une page internet font apparaître et révéler l'arrière-plan.

L comme Logotype

Ou logotype, est la signature de votre marque. Votre futur logo peut être un visuel, une typographie, un mot… il doit être impactant pour être identifiable facilement.

mobilefirts
newsletter

M comme Mobile First

Aujourd’hui, Google a décidé d’indexer en priorité les sites internet mobile ! En effet, le nombre de recherche se faisant aujourd’hui majoritairement depuis le téléphone mobile, comprenez l’importance de concevoir votre site internet avec une version mobile, c’est-à-dire responsive (nous reviendrons dessus un peu plus bas). Pour cela, le format AMP est de plus en plus mis en place.

N comme Newsletter

En français « lettre d’information », est un support marketing relationnel à intégrer dans votre stratégie marketing. Certaines plateformes vous proposent du drag&drop avec des modèles pré-conçus. Il est tout à fait possible pour un graphiste web designer de concevoir une newsletter sur-mesure que nos développeurs coderont ensuite.

On vous explique d’ailleurs comment réussir sa campagne d’e-mailing.

O comme Optimisation (des images)

Lorsque vous travaillez votre image, il est important de l’enregistrer dans un format qui proposera un affichage de qualité et un fichier léger. En effet, si votre image est trop lourde, le temps d’affichage sera trop long, chose que les robots Google n’aiment pas vraiment. Pensez donc à bien compresser vos fichiers lorsqu’ils sont destinés à s’afficher sur le web.

P comme Pictogramme

Il s’agit d’un petit symbole représentant une action. Par exemple, inscription à la newsletter avec l’icône d’une lettre, nous contacter par téléphone avec l’icône… d’un téléphone…. L’objectif d’un pictogramme sur le web est l’aider l’internaute à réaliser une action. Attention à ne pas confondre avec le logo ou une illustration !

Q comme QR Code

Vous en avez peut-être déjà aperçu ou téléchargé l’application. Un QR code est une sorte de code barre qu’il vous faut scanner depuis un flyer pour renvoyer vers votre site internet par exemple. Très utile pour associer un support papier à un site web. Vous avez l’appli ? Testez celui-là ;)

R comme Responsive design

Nous évoquions précédemment le Mobile First, le terme de responsive design va de pair ! Vous ne le savez peut-être pas, mais le design de votre site sur différents supports (ordinateur, tablette, mobile) n’est pas la même. Le rôle du designer web est donc de proposer une version qui s’adapte à chacun d’entre eux pour un affichage optimisé. Quand on connaît le nombre de recherche effectué depuis le mobile (50% en 2017), il est plus que nécessaire de répondre aux volontés de Google !

S comme Site e-commerce

A la différence d’un site vitrine qui a pour vocation de présenter une entreprise ou une marque, un site e-commerce propose des produits en ligne ainsi que leur achat depuis le site marchand ! Chez WdM, nous proposons des sites marchands au design web sur mesure. Nous avons également développé une solution pour les commerçants connectés : We’r Service, pour la gestion commerciale de leur(s) magasin(s).

T comme Typographie

C’est l’ensemble des techniques qui permettent d’assembler de manière harmonieuse des caractères. Et oui, le texte est bien souvent indissociable d’un visuel, c’est pour cette raison que la typographie doit être travaillée par le graphiste web.

typo-wdm

U comme UX

Ou User eXperience, désigne l’expérience d’un internaute lors de sa navigation sur un site internet. Cet UX design s’appuie sur la facilité d’utilisation ainsi que l’impact émotionnel ressenti par l’utilisateur ! Cette expérience doit donner envie à l’internaute de rester sur votre site internet et d’avoir envie de revenir pour retrouver ces émotions ! Tout une réflexion pour le graphiste webdesigner !

V comme Vectorielle

On parle d’une image vectorielle quand cette dernière est une description géométrique contrairement à une image composée de points … L’avantage avec une image vectorisée est qu’elle peut être agrandie infiniment, sans perte de qualité !

W comme Wireframe

Lorsque l’on présente la maquette d’un site internet dans le cadre d’un projet web, notre graphiste webdesigner utilise un wireframe. Il s’agit d’une page structurée du site internet qui indique le contenu de chaque bloc en vue de faciliter la conception du site par les différents intervenants (développeur web, rédacteur, intégrateur, illustrateur…).

X comme XD

Il s’agit là d’un logiciel de la suite Adobe basé sur l’UX. Chez Web Design Marchand, c’est LE logiciel que notre graphiste webdesigner utilise pour concevoir, prototyper des sites web, applications mobiles... De plus, XD propose des fonctionnalités de responsive design pour respecter la règle du mobile first.

Le pack adobe comprend également d’autres logiciels de PAO comme Photoshop, Indesign ou Illustrator, tous utilisés par notre directrice artistique !

Y comme Youpiiiiii

C’est ce que notre graphiste webdesigner s’écrit quand ses maquettes sont validées !

Zoning

Synonyme du wireframe, le zoning est un schéma simplifié du site, une sorte de squelette du site internet !

 

Besoin de précisions ? Allez, venez chez WdM, notre agence de communication vous éclaire avec plaisir ! 

 

PS : si vous voulez découvrir plus précisément le métier de notre  directrice artistique , nous en avons fait un article !