Design

Le vocabulaire du Web Design

Le vocabulaire du Web Design 2000 1250 Sharing

Le webdesign et les métiers du web utilisent souvent un vocabulaire que seuls les initiés comprennent : CSS, header, wireframe, favicon… Voici une sélection de mots bien utiles pour comprendre un webdesigner quand il parle.

A

Antialiasing

L’anticrénelage (en bon français) est une technique permettant de réduire l’effet de pixellisation d’un caractère à l’écran. Si une typo vous paraît floue à l’écran, c’est que l’antialiasing n’a pas été activé.

Arborescence

Organisation schématique et hiérarchique des différentes pages d’un site. L’arborescence permet d’avoir une vue générale de la navigation sur un site.

B

Bannière

Image fixe ou animée présentant un contenu publicitaire. Le but principal d’une bannière est, bien sûr, de recevoir le plus de clics.

Baseline

Phrase simple et courte, résumant à elle seule la fonction ou l’activité générale du site. Cette baseline est généralement placée, en gros, sur la home page du site, bien en évidence au-dessus de la ligne de flottaison.

Brief

Document de travail, en général rédigé par le commanditaire d’un projet, qui définit tous les contours de sa commande : contexte, particularités et objectifs du projet (et parfois même, budget !). Ce document est extrêmement précieux pour les agences, puisqu’il permet de cadrer au mieux la demande et d’éviter les hors-sujet.

C

Call-to-action

Le CTA est un bouton dont la fonction principale est d’inciter au clic.

Charte graphique

Document contenant toutes les exigences graphiques liées à une marque et devant être respectées, par exemple, dans la création d’un site web. On y trouvera les typographies, les couleurs, le logo et ses variantes, et parfois des exemples d’images et d’icônes à utiliser.

CMS

Un CMS (“Content Management System”) est, comme son nom l’indique en anglais, un système de gestion de contenu, permettant de gérer des sites complets. Exemple de CMS : WordPress, Drupal, Magento…

CSS

Acronyme de “Cascading Style Sheets”, le CSS est un format de fichier contenant toutes les information de style d’un site web.

E

Em

Le “em” est une unité de mesure de typographie, comme le pixel ou le point. Sa particularité : elle est relative et non fixe. Elle permet donc d’adapter sa taille relativement aux résolutions et aux paramètres des utilisateurs, ce qui est très pratique dans le cas d’un design responsive.

Ergonomie

Plus un site ou une application est ergonomique, plus le parcours utilisateur y est facilité. C’est en partie le travail de l’UX designer de rendre une interface web la plus ergonomique possible.

F

Favicon

Le favicon (“favorite icon”) est un logo miniture permettant d’identifier facilement un site sur les onglets d’un navigateur.

Footer

Le footer, ou “pied de page” en français, désigne la zone la plus basse d’un site. On y retrouve généralement le menu détaillé.

G

Gabarit (template)

Un gabarit est un modèle de page que l’on pourra réutiliser dans la construction de différentes pages d’un site. Contrairement aux sites statiques, les sites dynamiques construits sur des CMS utilisent un certain nombre de gabarits standards qu’un webdesigner devra designer, quoiqu’il arrive. Ces gabarits sont, par exemple : une page type, la liste des articles, un article seul, la liste des items de portfolio, un item de portfolio seul, etc.

H

Header

En-tête d’un site, où l’on placera généralement le logo et le menu. On peut également créer un pré-header, qui se placera comme son nom l’indique, au-dessus du header

L

Ligne de flottaison

Limite théorique de visibilité dans une page. Au-delà de cette ligne, l’utilisateur doit scroller pour afficher le contenu. En webdesign, il est important de bien définir la ligne de flottaison d’un site (“page fold” en anglais), pour bien placer les éléments les plus importants dans la partie visible des pages du site.

M

Mock-up

Un mock-up est une maquette graphique simplifiée d’une page web. On n’utilise plus trop le terme, qu’on remplacera par les termes plus précis de “wireframe” (vue schématique d’une page) et “gabarit” (maquette standardisée d’une page).

P

Pictogramme

Représentation graphique minimaliste et porteuse d’un sens unique et aisément compréhensible. En webdesign, le choix ou la création d’un “set de pictos” cohérent graphiquement est très important, puisqu’il permet d’informer ou d’orienter rapidement l’utilisateur.

Pixel

Un pixel (souvent abrégé en “px”) est le plus petit élément d’une image numérique et permet d’en déterminer la résolution. Un pixel permet de créer une couleur, à partir de trois composants diffusant les couleurs primaires rouge, vert et bleu (RVB, ou “RGB” en anglais).

PSD

Acronyme de “PhotoShop Data”, le PSD est un format propriétaire d’Adobe permettant d’enregistrer des compositions réalisées avec le logiciel Photoshop. Ce format permet notamment de conserver tous les calques d’une image. Initialement très utilisé pour créer des designs de sites web et d’applications, Photoshop est de plus en plus remplacé aujourd’hui par des logiciels plus spécialisés et plus adaptés au webdesign, comme Adobe XD, Sketch ou Figma.

R

Responsive design

Le responsive design permet d’adapter un design de site web aux différentes tailles et résolutions d’écrans, comme les écrans d’ordinateurs, tablettes, téléphones…

Résolution

La résolution est la finesse de rendu d’un élément graphique sur un écran. La résolution d’un écran est son nombre de pixels sur sa longueur multiplié par celui sur sa hauteur. Par exemple, la résolution d’un MacBook pro 15,4 pouces retina est de 2880 x 1800 px.

Retina

Le retina est un type d’écran lancé par Apple et présentant une résolution très élevée. Ces écrans, composés en général de deux fois plus de pixels que les écrans traditionnels (donc d’une densité de pixels deux fois plus importante), nécessitent de créer des éléments graphiques adaptés, notamment des images deux fois plus grandes (@X2) pour qu’elles n’apparaissent pas floues sur ces écrans.

Rollover

Effet de texte ou d’image apparaissant au survol d’une zone d’une page web avec le curseur de la souris.

RVB

Le RVB (ou “RGB” en anglais), abréviation de Rouge, Vert et Bleu, est le principal système informatique de couleur. Les écrans, grâce aux pixels (eux-mêmes une combinaison de ces trois couleurs), reconstituent une couleur par synthèse additive de ces trois couleurs projetées. Chaque pixel crée ainsi une couleur unique en combinant des pourcentages

U

UI

L’UI (pour “User Interface”) désigne le lien entre l’homme et les machines, notamment par le biais d’une interface visuelle. Le travail sur l’UI d’un site web ou d’une application consiste à créer un système visuel qui facilitera l’accès aux contenus.

UX

L’UX (pour “User experience”) regroupe le travail sur l’expérience générale vécue par l’utilisateur d’un site web ou d’une application. L’UX designer devra donc prendre en compte aussi bien la dimension fonctionnelle d’une interface que sa dimension affective.

V

Vectoriel

Une image vectorielle est une image numérique composée d’éléments graphiques ne se dégradant pas lorsqu’on l’agrandit. Elle diffère en cela d’une image matricielle (JPEG, PNG…) qu’elle n’est pas composée de pixels, mais de formes et de couleurs. Les principaux formats d’images vectorielles sont EPS, AI et SVG. Dans la suite logicielle d’Adobe, Illustrator est spécialisé dans la création et l’édition d’images vectorielles.

W

Wireframe

Un wireframe est la maquette fonctionnelle d’un site ou d’une application. Créés en amont des maquettes graphiques, les wireframes permettent de définir la structure générale des pages sous forme schématique. Nous recommandons l’application en ligne Moqups.

Typographie : les outils indispensables

Typographie : les outils indispensables 2000 1003 Sharing

On ne présente plus la typographie, l’outil indissociable du travail des graphistes et autres webdesigners. Pourtant, cet art n’est pas si aisé à maîtriser : il requiert  de l’expérience, de la patience, et surtout un œil connaisseur et aiguisé.
Quelle typographie choisir ? Quelles associations faire ? Est-elle bien dessinée ? Quelles sont les dernières tendances ? Tant de questions que vous vous posez chaque jour ! Pour vous faciliter la tâche et créer de beaux visuels qui ont du sens, voici une liste d’outils à utiliser sans modération :

FontFace Ninja

Il s’agit d’une extension qui vous permettra d’identifier très simplement les typographies des sites internet. En survolant avec votre curseur, vous pourrez connaître le nom et la taille de n’importe quelle fonte, mais aussi de les acheter ou de les télécharger gratuitement.
www.fontface.ninja

FontReach

Vous vous demandez quels sites utilisent l’Helvetica, l’Arial ou encore  la Roboto ? Il suffit de demander ! Entrez n’importe quel nom de fonte dans la barre de recherche, Font Reach vous indique la liste des sites qui utilisent la police en question.
www.fontreach.com

Font Pair

Vous avez trouvé LA typo de titrage qui colle parfaitement à votre visuel ou site internet, mais voilà, vous ne savez pas à quoi l’associer. Pas de panique, Font Pair vous vient en aide : le site vous propose une liste de Google fonts qui s’harmonisent parfaitement, il n’y a plus qu’à choisir votre association favorite.
www.fontpair.co

Typ

Vous êtes en panne d’inspiration ? Typ vous propose une sélection des plus beaux sites du moment et indique les polices utilisées. Des liens vous redirigent ensuite sur des sites comme Fontsquirrel, Google Fonts et bien d’autres pour télécharger les typos, pratique !
www.typ.io

Typewolf

Typewolf est un autre site pour suivre les tendances de la typographie. Il vous permet également de faire des recherches par police, raconte l’histoire de chaque fonte, propose des tops et des conseils. De quoi être incollable sur la question.
www.typewolf.com

Fontea

Fontea est une extension gratuite pour Photoshop qui vous permet en quelques clics de retrouver les 800 polices de Google sans télécharger votre sélection en amont !
www.fontea.madebysource.com

Prototypo

Vous pratiquez le dessin de caractère ou vous souhaitez vous lancer, mais le travail titanesque que cela représente vous fait peur ? Prototypo est fait pour vous ! Créez votre typographie le plus simplement du monde en jouant avec les formes de chaque glyphe. Créé en 2014 par deux Français, le logiciel risque de bousculer le monde de la typographie !
www.prototypo.io

Kern Type

Pour finir, voici un petit jeu très amusant pour tester vos connaissances sur l’interlettrage et le crénage. Kern Type vous propose de régler l’approche de 10 typographies différentes, vous êtes évalué sur chacune des étapes, puis obtenez une note finale sur 100. À vous de jouer !

www.type.method.ac

Le logo, symbole fort d'une identité de marque

Le logo, symbole fort d'une identité de marque 2000 1318 Sharing

Un logo, c’est quoi ? Pour le dire simplement, c’est une représentation graphique d’une icône ou d’un symbole que l’on assimile à une marque ou à une entreprise. Aujourd’hui, qui ne reconnaîtrait pas une marque par son logo ? Personne. Nous sommes tous capables de les identifier grâce à leur symbole qui est le premier lien entre une marque et son consommateur.  Alors distinguez-vous avec un logo qui sort de l’ordinaire !

L’identité graphique de votre entreprise

En lien avec le nom de votre société, votre logo est l’élément fondateur de votre identité visuelle. Il permet de vous différencier par rapport à la concurrence. Son allure doit être simple, lisible, compréhensible et surtout unique !

Son format, lui, doit être adaptable à tous supports de communication. Il doit être autant visible sur une carte de visite, une entête de site internet que sur une affiche 4×3. Son utilisation doit pouvoir se plier à diverses situations. Il peut être décliné en plusieurs couleurs. Par exemple, en blanc sur fond rouge, en rouge sur fond noir ou gris comme chez  Coca-Cola.

Cependant, le choix des couleurs est important. Elles doivent correspondre à l’identité de marque, qui est élaborée en fonction d’une charte graphique, d’un nom, de valeurs et d’un positionnement. Et oui, plusieurs éléments à prendre en compte pour un petit dessin ! Toutefois, il se peut que votre logo soit parfaitement élaboré, or, choisissez bien sa couleur car toutes ne seront pas propices.  Parfois, elles peuvent desservir un logo et donc la marque. Il est alors primordial de faire le bon choix.

Par exemple, le jaune et le bleu sont des couleurs que l’on associe facilement à la marque IKEA.

Son but premier est de perdurer dans le temps. Il doit traverser les modes, les tendances et toucher l’esprit de vos clients avec une forte stylisation. Pour le nom de votre marque inscrit sur votre logo, choisissez une police qui vous ressemble ( évitez les “Calibri” et autres Comic ), et devenez unique !

Un beau logo permet d’influencer le succès des produits et / ou services de votre entreprise. Il permet de fédérer les consommateurs autour d’une image identifiable par tous. Donc, en résumé, il doit être fonctionnel, intemporel, et indépendant de tout écosystème.

Le point de repère des consommateurs

Les consommateurs mettent plus facilement un mot sur une image. Ainsi, il faut que votre logo soit mémorisable en un clin d’oeil pour devenir un point de repère. Évidemment, il est déconseillé de le changer, car il participe à la notoriété de votre société. D’autant plus que les consommateurs seront désorientés suite à un éventuel changement. Cependant, vous pouvez le moderniser car comme beaucoup de choses, les codes et les modes graphiques évoluent.

Ainsi, posséder une réelle identité graphique en corrélation avec le nom de votre marque, permettra à vos clients de faire un rapprochement avec les valeurs que vous voulez transmettre. Ils pourront donc, à la vue de votre logo (visible sur différents supports), s’identifier à votre entreprise.

Le représentant symbolique de votre marque

Attention, le logo n’est pas votre marque, c’est une image qui véhicule le plus possible les caractéristiques de votre entreprise. Il pourra être un élément fédérateur de vos produits et / ou de vos services. Le nom de marque doit impérativement être accompagné d’un logo représentatif. Pas de chichi ! Aller au plus simple est souvent la clé, et surtout, il doit être le véritable miroir des valeurs de votre société.  Plus votre logo sera fort, plus il fera irruption dans l’esprit des consommateurs. Et si vous atteignez un certain degré de notoriété, le nom de votre marque pourra disparaître de votre logo. Prenez Nike par exemple : associée à une virgule, la marque à quatre lettres a aujourd’hui complètement disparu du logo.

Pourquoi ? Aujourd’hui, la reconnaissance du logo suffit pour que la marque soit identifiée. Une preuve qu’il est un symbole de marque, et que sa réalisation fut pensée intelligemment. Et oui, on ne gribouille pas un logo comme ça, il doit être soigneusement étudié. Il doit répondre aux exigences et aux valeurs de l’entreprise pour être cohérent.

Pour cela, vous devez faire appel à des professionnels. Ils analyseront minutieusement les caractéristiques de votre marque comme son positionnement, ses valeurs, dans le seul but de la représenter au mieux par un symbole unique, votre logo ! Vous aurez bien évidemment votre mot à dire, rien ne vous sera imposé, rassurez-vous.
Si vous avez besoin de conseils et d’une identité de marque, n’hésitez pas à nous contacter.

Le sens caché des logos

Le sens caché des logos 150 150 Sharing

Partout où vous êtes, les logos sont présents. Vous pensez les connaître par cœur, et pourtant, si vous les observez plus attentivement, vous remarquerez des messages cachés qui ne sont pas toujours repérables au premier abord. Malgré tout, le message que veut faire passer la marque va vous parler inconsciemment. Du plus simple au plus travaillé, retrouvez quelques réalisations de graphistes ayant su faire preuve de créativité.

1. TOBLERONE
Un classique, le logo de Toblerone : on y voit bien-sûr le Mont Cervin, l’un des symboles de la Suisse, et à l’intérieur, sur le flan de la montagne, un ours, symbole de la ville de Berne qui fait référence à la ville de production et d’où est originaire l’inventeur de la barre chocolatée, Theodore Tobler.
 

2. NORTHWEST
La compagnie aérienne américaine a dans son logo les deux lettres symboliques de la marque , le « N » et le « W », situées dans un rond rouge qui représente une boussole et dont le petit triangle indique la destination du Nord-Ouest.
 

3. EVERNOTE
Ce logiciel qui permet d’enregistrer des informations sous forme de notes, images, vidéos ou pages web a pour logo un éléphant (et sa fameuse grand mémoire) dont l’oreille ressemble à une page qui se tourne, en référence à leur service qui est de prendre des notes virtuellement.
 

4. PINTEREST
On ne peut pas passer à côté du réseau social des « épingles ». Le « P » est en réalité une épingle stylisée, normal vu le principe de l’application qui est d’épingler des photos ou vidéos que l’on apprécie.

5. LE TOUR DE FRANCE
Le rond jaune rappelle évidemment le maillot porté par le leader du classement général de la Grande Boucle. Aussi, hormis le « T », le « O » du mot Tour représente la roue arrière d’un vélo, le « U » la selle, et le « R » et le point le cycliste en plein effort !
 
 

6. BEATSAUDIO
Avec son logo d’apparence simple et épuré, la marque d’écouteurs du rappeur Dr Dre n’a pas hésité à aller plus loin qu’une simple utilisation de la lettre « B ». Celui-ci représente en réalité un casque audio sur un visage de profil.
 

7. TOYOTA
Les trois ellipses que l’on trouve dans le logo représentent en fait trois « cœurs » : le cœur du consommateur, le cœur du produit, et le cœur du progrès et de la technologie. Ce que la plupart des gens ne se savent pas, c’est que le logo représente une tête de taureau stylisée tout en incluant toutes les lettres formant le mot « TOYOTA » !
 

8. BNP PARIBAS
Le symbole commun à toutes les entités du groupe bancaire international se compose d’étoiles, en référence à l’Europe, qui se transforment (signe de la capacité à évoluer) en oiseau (symboles de vie et de dynamisme). Il évoque l’ouverture, la liberté et la facilité d’adaptation d’une entreprise de services résolument tournée vers ses clients.
 

9. TGV
Mais il peut aussi y avoir des ratés. C’est le cas du logo du TGV en France, qui, mis à l’envers, représente un escargot ! L’image véhiculée est un peu contraire au principe du Train à Grande Vitesse…
Depuis plusieurs années, les graphistes mettent en vente directement en ligne des logos qu’ils imaginent et que les marques peuvent se procurer. C’est le cas par exemple des marques fictives Vino Piano et Freedom :
 

10. VINOPIANO
Le graphiste propose un logo sobre et élégant : à première vue, 3 verres de vin, mais qui font aussi office de touches de piano, symboles de raffinement.
 

11. FREEDOM
Ici, le graphiste a voulu un logo très simple, épuré, lumineux, avec des lettres arrondies. Le haut de la dernière lettre « M » se détache en un oiseau qui s’envole, parfait symbole de liberté.
Vous l’aurez compris, un logo doit être travaillé et mûrement réfléchi afin de représenter au mieux votre marque. C’est pourquoi chez Sharing notre équipe d’experts saura répondre à toutes vos attentes. Vous savez maintenant que les logos ne sont pas que de simples illustrations mais qu’ils ont un vrai sens. Prenez donc le temps de les observer de plus près ! 😉