Chapitre I : Expériences et Culture du Web

Transcription

Alex-Catrine Le Thomas de Selve /// 27 rue Saint Sauveur - 75 002 Paris /// 33 (0) 666.630 680
----------------------------------------------------------------------------------------------------------------------Chapitre I : Expériences et Culture du Web - jour 1 (3 h)
1. Qu’est ce qu’internet ?
2. Differents projets de sites Web (familles de sites)
3. Créer pour le web
5. Lancer et promouvoir un site Web
6. Tendances et Inspirations
7. Ressources sur internet
8. Des Livres
Chapitre II : Principes de design - jour 1 (2h)
1. Utilisation d’une grille
2. La simplicite
3. L’unité
4. L’équilibre
5. La composition
6. Hiérachisation
7. Gestalt
8. A quoi sert le design web ?
Chapitre II : Méthodologie - jour 1 (2h)
1. La maquette graphique
2. Le contenu d’un site web
3. Mood board
4. La charte graphique
5. Le cahier des charges
6. Faire approuver son design
7. Zoning et wireframe
8. L’arborescence d’un site
9. Le brief créatif
----------------------------------------------------------------------------------------------------------------------TP : Exercice pratique
: Creation Maquette graphique d’un projet Web
-----------------------------------------------------------------------------------------------------------------------
1. Introduction à Internet / contexte historique
2. Differents projets de sites Web (familles de sites)
3. Créer pour le web
6. Tendances et Inspirations
7. Ressources sur internet
8. Des Livres
----------------------------------------------------------------------------------------------------------------------1. Introduction à Internet / contexte historique
Internet désigne un réseau d’ordinateurs disséminés à travers le monde, ainsi que la possibilité de connecter son ordinateur à d’autres ordinnateurs. C’est un moyen de communication simple qui offre de nombreux outils comme le courrier électronique, le Web (pour World Wide Web,
alias WWW, ou Toile d’arainée mondiale), et, dans une moindre mesure à l’heure actuelle, les groupes de discussion Usenet.
Le courrier électronique permet d’envoyer et de recevoir des messages accompagnés de pièces jointes - images , photos, ouevres scannées,
fichiers audio e vidéo - n’importe où dans le monde.
Le web rassemble des milliards de pages consultables à partir d’un navigateur comme firefox, qui contiennent du texte, des images, du son, et
des vidéos, mais surtout des hyperliens qui permettent d’aller vers d’autres pages. Certains sites web interactifs permettent la vente en ligne,
tandis que d’autres comme les webmails, ou messageries Web, permettent d’acceder à son courrier électronique à partir d’un navigateur sur
n’importe quel ordinateur.Enfin, les groupes de discussion (newsgroups) en passe d’être remplacés par les forums, permettent d’échanger des
articles en ligne.
- Origines
1962 : le département de la défense US crée ARPAnet afin de tirer meilleur parti de la technologie informatique.
Initialement le réseau ARPA reliait 4 ordinateurs situés dans 4 universités de l’Ouest des Etats Unis..
en 1969, le premier noeud est établi, à l’université de Californie, grâce à la «commutation de paquets», qui conciste à diviser les messages en
paquets, à les transférer par différentes voies, puis à les rassembler à leur destination finale.
ARPAnet est conçu comme un système résilient et décentrlisé, afin que la communication se poursuive en cas de destruction partielle - lors
d’une guerre nucléaire par exemple.
1971, le réseau comprend une 20aine de noeuds.
1973, il se connecte avec l’University College de Londres et le Royal Establishment en Norvège.
En septembre 1973, Bob Kahn et Vint Cerf élaborent une technique visant à normaliser la communication entre réseau - le TCP/IP, basé sur
les protocoles Transmission Control Protocol et Internet Protocol. Publié en septembre 1981, ce nouveau système est adopté par ARPAnet en
janvier 1983, et il est toujours employé actuellement.
S’étendant aux réseaux commerciaux, par exemple avec CompuServe et American OnLine (AOL) en 1991, Internet continue de croître.
En 1992, le nombre d’ordinateurs connectés atteint le million. A la publication de ce livre, plus d’un milliard et demi de personnes à travers le
monde untilisent Internet .
- Courrier électronique
En octobre 1963, peu longtemps àprès avoir breveté le modem, la société d’ingénierie en informatique Bolt, Beranek and Newman (BBN)
démontre qu’il est possible de communiquer d’un ordinateur à un autre par le biais du réseau téléphonique.
En 1971, Ray Tominson de BBN envoie le premier e-mail entre 2 ordinateurs d’ARPAnet et choisit le signe @ figurant dans toute adresse
électronique. Le réseau ARPAnet fonctionne à peine depuis plus d’un an que les chercheurs l’utilisent non seulement pour échanger des informations sur leurs projets, mais aussi pour bavarder. Ils possèdent leur propre compte utilisateur ainsi qu’une adresse électroniquepersonnelle.
La liste de diffusion (mailing list) ne tarde pas à faire son apparition, permettant de transmettre un message à tous les destinataires qui y sont
inscrits.
Une adresse e-mail possède toujours une structure de type [email protected]. Le nom d’utilisateur correspond à un véritable nom,
ou un surnom. Le site désigne votre fournisseur d’acces à Inernet (FAI), ou votre serveur. Enfin, les derniers caractères indiquent le nom de
domaine, qui peut éventuellement comporter des sous domaines séparés par des points. Aux Etats-Unis, les principaux noms de domaine
de premier niveau sont .com pour les entreprises commerciales, et .edu pour les universités US. En France, le domaine .fr est utilisé par des
personnes ou organisations qui se sont enregistrées auprès de l’Afnic. Le suffixe .fr peut être précédé d’un sous domaine donnant par exemole
des adresses se terminant par paris.fr.
Aujourd’hui la messagerie électronique inclut aussi le webmail (comme hotmail et Gmail) ainsi que les systèmes de messagerie de Facebook;
twitter, Fliickr .
- Newsgroups
Reliant l’université Duke et celle de Caroline du Nord à partir de 1979, le réseau (Unix Serveur Network) permet d’échanger nouvelles et points
de vue. Il constitue un exemple d’architecture client-serveur. Vous (le client) vous connectez à une machine (le serveur) sur laquelle les articles
Usenet sont stockés. Vous pouvez consulter les en-têtes des groupes de discussion qui vous interessent, puis demander que l’intégralité d’un
article soit transmise au lecteur de nouvelles (newsreader) sr votre machine. Vous pouvez alors lire ou conserver l’article, répondre directement
à son auteur par courrier électronique, ou poster une réponse en ouvrant ou rejoignant un fil de discussion. Vous pouvez également créer un
nouvel en=tête en postant un article relatif à un autre sujet. Le logiciel garde en mémoire la liste des articles que vous avez lus.
A l’heure actuelle, il existe plus de 100 000 groupes de discussion, mais beaucoup d’entre-eux sont inactifs. En effet Usenet tend à être
remplacé par des forums Internet. Très similaires aux groupes de discussion, ces derniers sont généralement régulés par un modérateur, et
nécessitent parfois de s’inscrire pour participer au débat.
- Nétiquette
Crée à partir des mots «network» (réseau) et «étiquette» (convenances), ce terme désigne les règles de savoir - vivre sur un forum. Tôt ou
tard, le newbie (nouvel utilisateur) y sera confronté. Avant de poster son premier message, il est encouragé à se comporter quelques temps en
spectateur et à consulter la Foire aux questions (FAQ). Les posts hors-sujet suscitent souvent une volée d’insultes tout comme le crosspost (un
message posté dans de nombreux groupes à la fois). Mais les pires représailles sont réservées aux spammers. Désignant à l’origine une
publicité ou un message inopportun négligemment envoyé à un grand nombre de personnes, le spam est aujourd’hui un terme générique
qualifiant le matraquage publicitaire. Les membres d’un forum doivent aussi éviter de taper leurs messages exclusivement en majuscules (ce
qui équivaut à hurler) ou de criqtiquer l’orthographe et la grammaire d’un autre membre. Les derniers logiciels de courrier électronique et de
lecture de nouvelles sont dotées de kill files (fichiers tueurs) et de filtres anti-spam très puissants qui ont pour fonction de rejeter les messages
indésirables.
- Abréviations et émoticones
Afin d’économiser de la bande passante et de taper rapidemment, de nombreuses abréviations sont employées sur le Net. En voici quelques
exemples:
BJR : bonjour
ALP : A la prochaine
OCQ: Occupé
MDR: Mort de rire
DTF: de toute façon
Des symboles obtenus à partir de caractères typographqiues ont aussi fait leur apparition : les smileys. Très utiles pour éviter qu’un interlocuteur interprète mal une plaisanterie tout a fait innocente. Avec un ;-) en fin de phrase, les choses sont claires ! .
- World Wide Web
En 1980, Tim Berners-Lee, chercheur au CERN, crée un loiciel reposant sur l’hypertexen qu’il nomme «Enquire-Within-Upon-Everything» ce
qui veut dire : «se renseigner sur tout», d’après le titre d’un livre anglais publié en 1856.
En 1990, il développe avec Robert Cailliau le premier logiciel d’édition et de navigation, qu’il baptisera World Wide Web (toile d’araignée mondiale). trois ans plus tard, le CERN place ce logiciel dans le domaine public.
La même année, un groupe de jeunes diplômés de l’université de l’illinois met au point Mosaic, un navigateur doté d’une interface graphqiue,
reposant sur le protocole WWW. Mosaic contribue largement à l’engouement du public pour l’internet, désormais accessible aux néophytes.
Depuis de nombreux autres navigateurs ont vu le jour, parmi lesquels Firefox de Mozilla et Internet Explorer de Microsoft, descendants directs
de Mosaic.
Le Web constitue une mine d’or pour de nombreux sites qui recuillent de précieuses informations commerciales grâce aux inscriptions qu’ils
proposent. Pour créer votre page personnelle et apprendre à concevoir pour le Web, vous devez vous procurer de l’espace disque sur le
serveur de votre FAI, de votre université ou d’un site d’hébergement gratuit.
Le World Wide Web repose sur le modèle client-serveur : le client (votre naigateur) communique avec les serveurs qui hébergent des pages
Web que vous voulez consulter, en utilisant essentiellement le protocole HTTP (Hypertext Transport Protocol). Ces pages sont crées et transmises à l’aide du langage HTML (Hypertext Markup Language). Chacune d’elles possède une adresse, ou URL (Uniform Resource Locator), qui
prend généralement la forme http: // www.votrefai.com/nomutilsateur/index.html.
Techniquement parlant, le segment «www» de l’URL constitue un sous-domaine qui pourrait être remplacé par une autre suite de caractères.
Par exemple, de grandes entreprises recourent aux segments «www1» ou «www2» pour répartir le trafic sur plusieurs serveurs. Il est toutefois
redondant, si bien que vous verrez de plus en plus de sites de s’en dispenser. Essayer de taper votre URL sans le «www», cela fonctionnera
tout aussi bien.
- Normes du Web
Pourquoi est - il important d’établir une norme ?
Parce que sans la normalisation des poids et des mesures, la vie quotidienne serait un vrai chaos et la production industrielle s’avérerait
impossible. La mesure du temps a été normalisée lorsque l’apparition du chemin de fer a nécessité le respect d’horaires précis. De même, sur
le Web, les normes ou standards permettent que tout le monde parle le même langage.
Il existe 2 types de norme sur la toile : les standards de facto, qui ont été introduits par des entreprises commerciales ou des organismes de
recherche avant d’être adoptés par la communauté internaute - par exemple le format PDF ; et les standards établis par des comités internationaux d’experts avec les parties interessées.
En conception Web, il s’agit du W3C ( World Wide Web Consortium) fondé par Tim Berners - Lee en 1994, basé notemment au MIT (Massachussets Institute of Technologie).
Le W3C n’invente pas les normes qu’il préconise mais donne son aval aux spécifications techniques les plus appropriées .
A l’issue de nombreux débats et d’un long processus, les recommandations sont publiées sous forme de standards.
Un site répond aux standards su web lorsqu’il emploie des langages HTML, CSS et JavaScript conformes aux normes en vigueur, et que les
services de validation du W3C sont en mesure de vérifier. Souvent des entreprises commerciales comme Adobe développent des logiciels
qui vont au-delà des standards en cours, si bien que le code généré par des logiciels de conception de sites comme Dreamweaver n’est pas
totalement conforme. Ainsi les comités de normalisation passent leur temps à essayer de rattraper les nouveaux développements apparus sur
le marché.
2. Typologie des projets Web / Etudes de cas
2.1. Qu’est-ce qu’un projet Web ?
2.2. La notion de «portail»
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2.1. Qu’est-ce qu’un projet Web ?
_ Définition de stephane Bordage
(extraits de Conduite de projet Web - éditions Eyrolles)
Un projet Web est avant tout un outil qui concourt à l’atteinte d’objectifs stratégiques. Il participe à la compétitivité de l’entreprise en répondant
efficacement aux besoins des utilisateurs. Cependant, la nature des projets Web est difficile à cerner car leur périmètre fonctionnel et technique
évoluent sans cesse. Au départ il s’agissait de simples pages HTML, aujourd ’hui devenues de véritables applications interfacées avec le
système d’information propre à chaque entreprise.
Le «projet Web» est destiné à tous les utilisateurs d’un navigateur , internautes et extranautes . Les utilisateurs d’assistants mobiles comme les
PDA, les téléphones portables, les i-PAD ... faisant partie de cette deuxième catégorie (les extranautes).
Cela recoupe notemment les projets de :
- site d’e-commerce (sites marchands / sites catalogues )
- sites d’entreprises ou corporate (sites de marques)
- sites institutionnels
- sites media sociaux (plateformes sociales, blogs ... )
- sites communautaires (sites d’associations, sites de communautés passionnées ...)
- Sites promotionnels
- Campagnes publicitaires
Il n’y a donc pas UN mais DES projets Web. On peut même dire qu’il y a autant de projets que d’entreprises, puisque chacun répond à des
besoins spécifiques.
Le but de ce point du cours est de dresser une sorte de typologie des projets les plus courants et pour chaque typologie d’identifier les éléments fonctionnels les plus importants et d’évoquer certains points clé de conduite de projet sans être exhaustif.
Puis de réaliser quelques études de cas pour chaque typologie.
2.2. La notion de portail
Au delà de cette ‘catégorisation’ de sites et avant de voir chacune de ces catégories, on retrouve un type de site de façon très importante sur
internet qui peut appartenir d’ailleurs a l’une des familles de sites cités plus haut , le PORTAIL .
On trouve quelques définitions sur les sites suivants :
http://portail-open-source.smile.fr
http://fr.wikipedia.org/wiki/Portail_Web
http://www.awt.be/web/ebu/index.aspx?page=ebu,fr,fic,055,002
Une définition générale donnée par le portail awt.be , semble bien définir ce qu’est le portail (qu’il appartienne à l’une ou l’autre des catégories
citées ) :
« L’objectif d’un site portail est d’offrir un point d’entrée unique et reconnu vers les informations et des contenus
dont les internautes ont besoin. Interface universelle, le portail répond à cette question classique : comment trouver
l’information dont j’ai besoin sur Internet ?
Au début de l’Internet, l’essentiel des portails étaient de type généraliste. Leur but était de rassembler en un lieu
unique le plus grand nombre de ressources et de liens vers d’autres sites, afin de générer un trafic très important. Avec le succès extraordinaire de l’Internet et la croissance phénoménale du nombre de sites disponibles, sont apparus des sites portails spécialisés.
L
eur objectif est de fédérer des communautés d’intérêt autour de thèmes parfois très précis (bourse, économie, art, sport,
tourisme, région, etc.). «
Quel que soit le type de portail, la structuration du site-portail répond à des règles identiques d’ordre structurel et d’ordre fonctionnel :
Pour la structure il s’agit des éléments Header (en-tête), des éléments qui composent le corps du site (body) des blocs d’information, des
éléments de navigation, des éléments qui composent la partie basse du site (pied de page ...).
Pour les fonctionnalités, il s’agit de la présence indispensable de fonctionnalités que sont :
- Un ou des moteurs de recherche par saisie simple de mots clés ou par recherche paramétrable
- Des rubriques de contenus contenues dans un systeme de navigation générale,
- De l’actualité (essentiellement au niveau de la page d’accueil mais qui peut aussi se retrouver sur toutes les pages)
- Des services interactifs de discussion en ligne , comme les espaces de discussions instantanées ( appelés «chats»)
- Un service d’abonnement à une ou des mailing lists ( encore appelées «newsletters»),
- Des services WAP ,
- Des espaces de participation de discussion que sont les forums
- Des espaces personnels personnalisables avec donc des sytèmes d’inscription et de connection à son profil
etc ... et d’autres services suivant la nature du projet Web
Voyons maintenant chacune de ces grandes familles de sites sans oublier cette notion de structure et de fonctionnalités propres au portail .
Sites vitrine
-----------------------------------Le site vitrine présente votre entreprise, son activité, ses produits et services.
C’est un outil indispensable pour renforcer la notoriété d’une marque ou développer celle de nouvelles entreprises.
Le site vitrine doit imprégner l’internaute de l’image que vous souhaitez faire transparaître.
sites vitrines de grands groupes tels que nestlé, printemps ...
sites de marque tels que nike, adidas ...
sites institutionnels tels que la caf, pole emploi, sncf ...
sites portfolios d agences dans divers domaines (architecture, design, graphisme ....) ... tel que duke, peripherique, soleil noir, habitat ...
sites de freelance spécialisés en divers domaines (graphisme, design, web, ...)
http://www.nestle.fr/
>
> http://www.haribo.com/planet/fr/startseite.php
> http://www.louisvuitton.com/fr/flash/index.jsp?direct1=home_entry_fr
> http://www.chanel.com/fashion/1#1
2.3. sites d’e-commerce ------------------------------------------ es sites catalogues presentent la gamme de produits et essayent de créer un contexte favorable de sorte qu’en situation d’achat, l’internaute
L
préférera le produit de l’entreprise à ceux des concurrents.
Repère : les 5 objectifs de l’internaute _
°) Evaluer des produits et des services
1
2°) Choisir des produits et les acheter
3°) Obtenir de l’aide
4°) Donner un feedback
5°) Surveiller des produits ou services
Objectifs et moyens
--------------------------------Les sites catalogues poursuivent 2 objectifs qui correspondent à 2 étapes du processus d’achat.
ans un premier temps il s’agit de faire découvrir la gamme dans un contexte favorable. La génération d’un trafic qualifié, une interface ludique
D
(un configurateur plutôt qu’une recherche multicritère, ludique ( un configurateur plutôt qu’une recherche multicritère, une approche par
besoins plutôt que apr produits ... ) et un design restituant bien l’univers de la marque sont des facteurs clés de succès .
Dans un deuxieme temps, il faut convaincre le client en phase de réflexion que le produit de l’entreprise est le plus adapté > processus de
réassurance . Pour cela, le site fournit une information riche, à jour et facilement accessible . Dans certains cas, il propose en plus, des
services à forte valeur ajoutée tels qe des prises de rendez-vous, des simulations, des comparatifs avec la concurrence ...
L’objectif d’un catalogue est aussi de mutualiser les coûts de déploiement en dehors du site de l’entreprise sur des places de marché, ou sur
d’autres supports tels que les catalogues papier, des CD-Rom ...
exemples
--------------------
> www.audi.fr
> www.shuttle.com
> www.nike.com
e coeur fonctionnel d’un site catalogue :
L
------------------------------------------- LE CATALOGUE !
=
Autour du catalogue s’agrègent des fonctionnalités complémentaires telles que :
- la publication multicanal
- la gestion de contenu
- la gestion des e-mails entrants
Les sites marchands
--------------------------------
Contrairement aux sites catalogues les sites marchands sont transactionnels : ils permettent aux internautes non seulement de consulter
un catalogue de produits mais aussi de commander et de payer en ligne. Par ailleurs l’organisation nécesssaire au fonctionnement d’un site
marchand est beaucoup plus complexe que celle d’un site catalogue, notamment du fait de l’importance de la logistique.
Repère : les 5 phases du e-business _
°) Fournir des informations sur l’entreprise et les produits
1
2°) Apporter une assistance au client et permettre des interactions
3°) Gérer les transactions électroniques (site marchand première génération)
4°) Personnaliser les interactions avec le client (site marchand seconde génération)
5°) Favoriser un sentiment de communauté
exemples
Dominos.com
>
> Lowe’s Sunnyville
> Nordstrom Backroom
> Sprint Now Widget
Un bon design pour un site d’e_commerce (site catalogue et ou site marchand)
----------------------------------------------------------------------------------------------------------------------------------------http://www.benmoussa.net/e-commerce/les-9-caracteristiques-dun-bon-design-pour-un-site-e-commerce/
- Faciliter la navigation
1
2- Le design ne doit pas surpasser le produit
3- Faciliter la validation du panier
4- Une communication de marque
5- Le design doit correspondre aux produits
6- Mettre en avant les produits les plus populaires
7- Faire la promotion des produits associés
8- De belles photos
9- Un système de filtres efficace (configurateur)
2.3. sites communautaires ------------------------------------------ es sites communautaires proposent un contenu et des services crées par les différents membres de la communauté. Ils sont autant des lieux
L
d’échanges ponctuels que de diffusion du savoir (connaissances, informations ...). La majorité des communautés virtuelles sont organisées
autour d’un thème central suffisemment fédérateur pour attirer des milliers de membres : les jeux vidéos, la bourse, la mode ...
OBJECTIFS ET MOYENS /
Le premier objectif est d’obtenir le plus d’informations possibles sur les membres que l’on veut attrer et intégrer à la communauté , autrement
dit enquêter sur la cible . Par exemple voir à quel milieu socioprofessionnel ils appartiennent , leurs habitudes en général, leurs motivations, et
surtout leurs loisirs, distractions et centres d’intérêts.
Le deuxième objectif est après avoir étudier la cible, de produire du contenu de qualité de volume important pour evidemment attierer une
première fois puis fidéliser par la suite les membres ... et pour cela le seul moyen est de recruter des bénévoles qui connaissent bien le sujet et
de les fidéliser .
Un troisième objectif est de faire vivre cette communauté autour non seulement d’un contenu de qualité mais aussi dans des espaces d’échanges que représentent des forums, des système de discussion instantanés ...
Le troisième objectif des communautés virtuelles est de générer un traffic* suffisant pour qu’elles puissent vendre leur espace publicitaire au
plus offrant, ce qui demande un suivi statistique tres important .
COEUR FONCTIONNEL DES SITES COMMUNAUTAIRES /
Il s’articule principalement autour de la gestion des membres d’une part et de la gestion des contenus d’autre part.
> Pour la gestion des membres nous avons toutes les fonctionnalités suivantes :
- les modules , fonctions ou formellement appelées plus communément des widgets d’inscription pour faire partie de la communauté avec des
formulaires d’enregistrement de son profil
- les modules de connection et de déconnection des membres enregistrés ou inscrits
- des outils interactifs qui permettent d’avoir un control sur l’information et les médias proposés
- des espaces d’échanges d’informations et des espaces de participation à des discussions autour du thème .
- des enregistrements à des newsletter afin de tenir informé les membres de la communaité
- des systèmes d’agendas par rapports à des évènements ...
(voir aussi les fonctionnalités d’un PORTAIL)
> Pour la gestion des contenus ...
> Les solutions de gestion d’une communauté virtuelle (portail communautaire) les plus performantes sont issues du monde Open Source, dont
la plus connue est PHPNuke (www.postnuke.org) qui permet de créer un site communautaire en seulement quelques minutes.
Cette solution packagée de gestion offre toutes les fonctionnalités souhaitées évoquées plus haut dont la gestion des membres, la gestion des
contenus, la gestion de sondage, la gestion d’agendas , etc ... rien ne manque . A voir maintenant graphqiuement parlant ce qu’il est possible
de faire avec les outiils personnalisables que ces solutions proposent .
Autres éditeurs qui fournissent des solutions packagées :
- Xoops : www.xoops.org
- Mamboserver : www.mamboserver.com
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------* Trafic : mesure du nombre de connexions à un site ou à une application Web. Le trafic peut-être mesuré par le nombre d’utilisateurs, de
connexions, de requêtes ...
- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
> http://www.innovathequectba.com/
L’Innovathèque est un lieu d’échange entre créateurs qui recherchent des informations
sur les matériaux innovants et industriels qui offrent et veulent faire connaître leurs produits.
> http://www.kob-one.com
Portail communautaire des créatifs freelances & salariés. Possibilité de poster des appels d’offre.
http://www.terriane.fr/
>
Terriane se veut un portail communautaire traitant des problèmatiques d’environnement,
d’écologie et de développement durable.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2.4. les site de Media Sociaux ( Social Media )
ou le paroxysmisme des sites communautaires ...
ETUDES DE CAS
> Digg
> Netvibes
> Candystand
> Last.fm
> Level-UP!
> WeAtheR
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2.5. sites corporate
--------------------------------
2. 5. Campagnes de publicités
--------------------------------------------
(voir les documents qui concernent ce sujet ...)
>> http://www.hebiflux.com/blog/category/buzz-campagnes-de-pub/
>> http://doudoudiouf.typepad.com/buzzmarketing/2005/08/le_buzz_marketi.html
definitions du buzz marketing :
e buzz marketing fait référence à l’ensemble du bouche-à-oreille autour d’une marque. C’est le concours de toutes les communications interL
personnelles ayant pour sujet une marque, un produit, un service à tout endroit et à tout moment.
Le buzz n’utilise pas un média spécifique mais occupe tous les canaux de communication afin d’arriver à faire parler d’un objet. C’est une sorte
de publicité sauvage qui passe par le consommateur et le fait devenir vecteur du message. Le schéma de diffusion est donc le bouche-à-oreille
(voir rumeur), on parle d’ailleurs de marketing viral. Il s’inscrit dans une stratégie de diffusion à budgets plus modestes
et dans des modes de diffusion souvent novateur. Le buzz repose sur un principe de surprise puisque les moyens utilisés
doivent être sans cesse renouvelés pour faire sensation et donc faire parler.
C’est un cas très intéressant où le média est l’objet de la communication et non son moyen.(réf : wikipédia)
Pourquoi le Buzz marketing :
e boulversement du mode de gestion des entreprises et l’évolution conjointe du consommateur et des nouvelles technologie de L
l’information ont conduit à une remise en cause de l’éfficacité du marketing dit traditionnel.
Cet encombrement du marché, l’accélération du rythme de vie et autres caractéristiques devraient priver la publicité et le marketing traditionnel de leur utilité.
Les consommateurs n’étant plus attentifs aux messages publicitaires.
Malgré toute la puissance des média traditionnels, les messages publicitaires sont si nombreux qu’ils perdent en efficacité et se noient.
Le Bouche-à-oreille plus malléable, plus pertinent, le buzz bénéficie d’une crédibilité importante.
Grâce à internet le bouche-à-oreille devient un outils efficace, se propageant instantanément d’un internaute à l’autre en faisant l’éloge de la marque ou du produit.
Le buzz est par excellence le média entre consommateurs.
En quoi conciste Le Buzz marketing ?
* Identifier les personnes qui aiment donner et partager leur avis sur un produit.
* Valoriser le consommateur au travers d’une expérience s’appuyant sur un buzz concept fort.
* Favoriser la diffusion virale de cette expérience auprés de leur réseaux relationne
* Mesurer et controler cette diffusion virale.
Les Avantages du Buzz marketing :
* Appropriation, identification par le consommateur qui propage l’information.
* Le consommateur devient prescripteur de la marque ou du produit.
* Moyens de transmission du buzz utile ou ludique pour le consommateur, donc valorisants.
* Coûts d’investissement moindre pour stratégie de propagation efficace.
Certaines marques ont déjà bien compris l’intérêts d’un tel phénomène, mettant déjà en place des stratégies de buzz marketing pour susciter
un effet de buzz positif autour de leurs produits.L’influent marketing est principalement fondé sur des réseaux d’e-influent ou de contaminateur
varié utilisants différents vecteurs de propagation sur internet, qu’il faut identifier avant de déployer l’ensemble des moyens permettant de
déclencher et de propager le buzz.
l’influent marketing respecte 3 axes importants :
1- Les modalités d’approche :
* Comprendre et respecter leurs codes et modes de consommation.
* Le repérer et le courtiser.
* Prendre contact avec l’e-influent par mail, sur les forums de discussions, blogs, sites communautaires.
* Reconnaissance du statut d’e-influent par la marque.
2- Leur donner les moyens de propager utile et sans contrainte :
Les principes de mise en oeuvre de l’influent marketing sont :
* Innovation et gratuité de produits ou de services à valeur ajoutée.
* Transfert facile et sans contrainte de l’information.
* l’utilisation des réseaux existants.
* Impliquer les contaminateurs erratiques par la rétribution financières.
3- Les moyens ou outils du buzz marketing on line et off line.
* La recommandation
* Les objets CtoC
* les E-mails card
* les faux sites personnels
* Les forums, chat
* Les sites communautaires
* Les blogs
* Les fims viraux
* le flyer, le stickage, l’échantillonnage
* le street média
* L’ambiant marketing
Les limites du buzz marketing
Pourtant malgré ces attraits et ces réussites stupéfiantes le
buzz marketing connaît certaines limites.
Une démarche de buzz marketing mal maîtrisée peut se
retourner contre son auteur.
Pour éviter cette dérive, le buzz marketing doit respecter
certaines régles. Une stratégie de buzz marketing nécessite la mise en place
d’un concept, l’identification des leaders d’opinion,
l’évaluation du potentiel viral d’un produit ou d’un service et la
création d’un programme transmissible de manières virale.
plus puissants sur le marché actuel,
geant une communication ouvertes.
« le bouche-à-oreille est l’un des moyens communicants des
galeries de sites web CSS2
> http://www.solucija.com/template/
> http://www.csszengarden.com/
> http://demo.templateworld.com/
faces-web-originales_actu_147.html
interfaces originales :
selection a partir du portail : http://www.snoupix.com/15-inter-
car il est un moyen d’acquérir de nouveaux client en encouraLe buzz marketing est peu coûteux, trés efficace et crédible.»
> http://www.orangelabel.com/
> http://www.blogoergosum.com/
> http://www.fborn.com/#/our-news/press/89/
5.1.
5.2.
5.3.
5.4.
5.5.
5.6.
5.7.
5.8.
Moteurs de recherche
Etre référencé dans les moteurs de recherche
Promouvoir un site
Rendre vos pages interactives
Ecrire pour le Web
Problemes de copyright
Les liens
Conclusion
----------------------------------------------------------------------------------------------------------------------Il ne suffit pas de créer un beau site pour générer de l’audience, il faut s’assurer qu’il sera remarqué on et offline.
Ce 5ième point présente diverses techniques pour intégrer un site Web dans les différents moteurs de recherche.
Il explique également comment rendre les pages d’un site interactives avec les forums, les sondages, les chats, les réseaux
sociaux et comment fournir sufisamment de contenu pour faire revenir les visiteurs.
----------------------------------------------------------------------------------------------------------------------5.1. Moteurs de recherche
Vous venez de terminer votre site bien documenté sur tel ou tel thème . Il est beau, le contenu est pertinent, et vous êtes
certain que quiconque entrera des mots liés à votre site dans un moteur de recherche vous trouvera en tête de liste.
Sauf que ce n’est pas encore le cas : votre site est introuvable, noyé dans la liste, les moteurs de recherche étant saturés de
sites qui abordent le même thème.
Ce n’est pas une bonne nouvelle car des sondages ont montré que 80% des internautes ne vont pas au-delà des 30 premières adresses de la recherche ... donc, si vous voulez qu’on trouve votre site, il va falloir batailler avec les complexités des
moteurs de recherche. Chaque moteur utilisant en plus des méthodes de référencement différentes, ce n’est pas une mince
affaire ! . Certains préfèrent les balises «ALT» et d’autres non. Certains prendront en compte les informations META Tags
que vous avez élaborées avec soin, d’autres non. Certains passeront tout votre site en revue, indexant toutes les pages, et
d’autres ne passeront même pas la page d’accueil. Parfois même, il vous faudra indiquer aux robots indexeurs ce qui ne doit
pas être indexé.
Le problème s’explique par le fait que de nombreux moteurs de recherche ne cessent de modifier leurs critères pour échapper aux spammers. Et donc par conséquent, les techniques de pointe peuvent très vite s’avérer dépassées , et votre site
retourner aux oubliettes.
Pendant longtemps, il suffisait de répéter les mêmes mots clés une centaine de fois dans les META TAgs ou bien de remplir
discrètement la page d’accueil avec des mots clés de la même couleur pour se hisser au sommet de la liste jusqu’ à ce que
les moteurs de recherche aient vent de la supercherie. Aujourd’hui ce genre de ruse est automatiquement pénalisé.
Alors, comment venir à bout de ce parcours de combattant ? ... Il n’existe pas de solution miracle, mais plutot une combinaison de pérsévérances et de bon sens et la connaissance surtout du fonctionnement des moteurs de recherche.
COMMENT FONCTIONNENT LES MOTEURS DE RECHERCHE
Tous les systèmes d’indexation du Web ne se ressemblent pas : les moteurs de recherche sont d’immenses bases de données
des sites Web, qui dépendent des systèmes automatisés pour cataloguer et classer les pages Web.
Quant aux annuaires, ils emploient des personnes pour répertorier les sites dans leurs bases de données.
Les moteurs de recherche hybrides possèdent eux, un annuaire associé de source externe géré par des employés ou des
consulltants de cette entreprise.
Ce genre de moteur est généralement débordé et il faut souvent attendre plusieurs mois avant d’être intégré dans leurs
listes.
Les moteurs de recherche utilisent des robots qui sillonnent le Web, analysant chaque site qu’ils rencontrent; puis, suivant les
liens vers les autres pages dans les sites.
Tout ce qu’ils trouvent est stocké dans l’index du moteur de recherche, même si cela prend plusieurs mois. Les robots retournent régulièrement dans les sites - tous les mois environ- pour trouver les modifications et renvoyer les informations vers
l’index du moteur de recherche.
La chose à faire à ce niveau est donc de garder vos informations META à jour pour indiquer les éventuels changements de
votre site.
Le programme des moteurs de recherche est très intelligent. Il parcourt des centaines de pages enregistrées dans l’index
pour trouver les sites qui correspondent à une recherche, puis il les classe dans l’ordre le plus pertinent selon lui.
Les critères de pertinence lui sont propres et parmi eux on peut citer les titres des pages, les noms de domaine, les mots
clés, les descriptions, la popularité des liens ...
Il est dans votre intérêt de rendre votre site «visible» par les moteurs de recherche. Ce point indique quelques méthodes évidentes pour y parvenir mais en surface par manque de place. LEs moteurs de recherche evoluent constamment de méthode,
il est donc vivemnt recommandé d’aller voir les sites répertoriés dans la partie «ressources» du cours .
META TAGS
Les META Tags peuvent modifier utilement la manière dont votre sommaire apparaitra dans les moteurs de recherche. Ils
ne fonctionnent pas pour tous les moteurs. Le simple fait de la ajouter ne garantit donc pas un meilleur classement, mais
cela peut tout de même servir ! . Il existe de nombreux META Tags, mais les plus importants sont les tags «description» et
«keywords». Le premier renvoie une description du site au lieu du sommaire que le moteur de recherche créerait normalement et le second fournit des mots clés que le moteur de recherche associera à votre page.
Donc, si votre site traitait de «l’ivresse», voici un exemple de ce à quoi ressembleraient vos META Tags :
<HEAD>
<TITLE> S’enivre: compétition de buveurs de bière</TITLE>
<META name=»description» content=»S’enivrer, la meilleure référence du Web en matière de compétitions de buveurs
de bière avec, à l’affiche, les brunes anglaises et les blondes belges»>
<META name=»keywords» content=»compétitions de buveurs de bière, s’enivrer, bière anglaise, bière belge, bière,
bière blonde, brunes, ivrognes, compétitions, tomber, fêtes alcoolisées»>
</HEAD>
Notez qu’il faut séparer les mots par des virgules ou des espaces. Il est inutile d’entrer des centaines de mots clés car les
moteurs de recherche ne les liront pas. Et en plus un excès de mots clés peut aussi en altérer l’efficacité. Si vous répétez trop
souvent vous pouvez même être taxé de spammer et être totalement ignoré , pis encore vous retrouver inscrit sur une liste
noire.
MOTS CLES STRATEGIES
Il faut choisir soigneusement les mots clés stratégiques pour votre site. Imaginez comment les gens vont chercher votre
page. Quels mots emploieraient-ils? Si votre site parle de «compétitions de buveurs de bière», ce sont là vos mots clés stratégiques, et si quelqu’un entre cette phrase dans un moteur de recherche, vous aimeriez vous trouver au sommet de la liste.
Les différentes pages du site devraient utiliser des mots clés stratégiques différents pour refléter leur contenu, donc si une
page est consacrée aux «blondes belges» voilà quels devraient être ses mots clés. Pour une efficacité maximale variez vos informations META et TITLE suivant les pages. Si votre site est spécifique à une région, ajoutez des détails locaux. En général,
les moteurs de recherche qui indexent (et listent donc dees pages du fin fond de votre site) ne font pas attention à vos META
Tags, il vaut donc mieux limiter cet effort aux parties principales de votre site plutôt qu’à chaque page. Vous pourrez donc
alors , si le moteur le permet, soumettre ces deux parties séparément.
Vos mots clés stratégiquesdevraient faire au moins deux mots, et se trouver à plusieurs endroits essentiels à travers le site;
assurez vous de les intégrer dans le titre de votre page, les META Tags et le corps de texte.
Et souvenez vous que plus vous placez vos mots clés le plus haut possible dans la page, plus le robot indexeur les repère
facilement, et que plus l’importance de ces mots est grande dans votre code, plus la page semblera pertinente au robot.
Vous pouvez aussi ajouter des mauvaises orthographes courantes ou des variations internationales de vos mots clés (pa ex.
disc / disque , métro / subway ...).
PERTIMENCE DU CONTENU
Il serai bien sûr commode de remplir les titres de vos pages et vos META Tags de mots racoleurs comme «du sexe, encore du
sexe!», «argent facile!» ... mais si le contenu du site ne correspond pas à cette offre alléchante, vous pouvez vous retrouver
sur la liste noire des moteurs de recherche. Pis, les internautes arrivant sur votre site apprécieront sans doute moyennement
d’avoir été bernés.
Vos mots clés doivent se refléter dans le contenu de la page, idéalement en texte HTML (les moteurs de recherche ne
pourront déchiffrer les pages graphiques bien que certains puissent indexer du texte ALT et commenter l’information). Vous
pouvez renforcer efficacement vos mots clés en les rappelant entièrement sur une page - donc dans votre page sur la bière
belge, n’employez pas «gens ivres» mais «gens ivres de bière belge».
Introduisez toujours des liens HTML de la page d’accueil vers les principaux chapitres de votre site Web pour que les robots
- et les humains - puissent les suivre aisément. Vous pouvez aussi ajouter une page avec le plan du site, avec des liens
sur toutes les parties de votre site et la soumettre aux moteurs de recherche pour vous assurer que toutes les pages sont
indexées.
-------------------------------------------------------------------------------------------------------------------------------------------5.2. Etre référencé dans les moteurs de recherche
Il s’agit d’une tâche difficile; il faut parfois y consacrer quelques heures à soumettre les pages clés de votre site aux principaux moteurs de recherche (ne soumettez pas systématiquement chaque page de votre site sous peine de vous faire prendre
pour un spammer et être pénalisé ).
Bien que pénible, cette étape est essentielle et en optimisant vos pages vous augmentez vos chances d’être bien classé. Il
existe des sites d’inscription automatisées et des logiciels spécialisés pour aller plus vite mais mieux vaut le faire manuellement pour les gros moteurs de recherche .
Ne vous laissez pas tenter par des sites Web vous promettant un référencement sur près de 400 moteurs de recherche et
annuaires pour 50 euros / an» .
Ils vous offrent en général le strict minimum et sont soudain très évasifs dès qu’on leur demande la liste de ces 400 moteurs
de recherche et annuaires.
En fait la plupart des «annuaires spécialisés» en question sont des pages de liens «ouvertes à tous» sans grand interêt pour
vous. Il existe de nombreux services en ligne gratuits qui feront le même travail ou vous aideront a le faire vous même :
http://www.1-referencement.com/
par exemple
5.2 Etre référencé dans les annuaires
Les annuaires classent les sites Web par sujets et par catégories. Il faut donc prendre le temps de trouver la catégorie correspondant le mieux à votre site.
Soumettez la page qui vous semble la plus pertinente (pas forcément la page d’accueil) et vérifiez ce que chaque annuaire
demande avant de commencer le référencement. (par exemple Yahoo nécessite un titre, une URL, une description, une catégorie, des informations personnelles et un commentaire final).
Il faudra peut etre patienter plusieurs semaines avant d’être référencé, si vous l’êtes : Yahoo accepte moins de 20% des sites
soumis. Quoiqu’il arrive ne les bombardez pas de demandes répétées. Voici le conseil d’un éditeur de Yahoo Royaume-Uni :
« La meilleure façon de procéder est de soumettre le site une première fois dans la catégorie correspondante. Si vous n’avez
pas de nouvelles dans les deux semaines, recommencez. Si deux semaines plus tard, vous n’avez toujours pas de nouvelles,
tentez une troisième fois. Si après cela, nous n’avons toujours pas donné suite, vous pouvez contacter l’équipe du support
technique sur :
[email protected],
elle sera ravie de vous aider.
INSCRIPTIONS PAYEES
Malheureusement, les grosses entreprises peuvent maintenant s’acheter un accès en tête de classement de certains moteurs
de recherche ou payer pour obtenir des référencements rapides. Le Web devenant de plus en plus marchand, il faut bien
s’attendre à un développement de ce genre de marchés. La réaction des internautes reste à déterminer. Après tout, quand on
cherche un site, on cherche celui qui répond à nos attentes, pas celui qui a payé le plus cher. Allez voir :
searchenginewatch.com/webmasters/paid.html
VERIFIER VOTRE INSCRIPTION
Les annuaires vous permettent de vérifier votre inscription, mais il est impossible d’énumérer toutes leurs techniques.
Search Engine Watch fournit ces informations sur :
searchenginewatch.com/webmasters/checkurl.html
Il existe aussi des services de vérification qui contrôlent la position de votre site sur divers moteurs de recherche :
referencement.every-web.com/
METTRE A JOUR VOTRE INSCRIPTION
Vos pages sont optimisées et vous avez trouvé vos mots clés, et soumis les pages aux principaux moteurs de recherche,
mais le travail n’est pas fini : si vous ne vérifiez pas votre inscription et ne la mettez pas à jour, vous pouvez vous retrouver en bas de la liste. Si vous voyez un concurrent vous dépasser dans les classements, examinez ses pages et essayez de
comprendre leur succès.
CONCLUSION
....................................................................................................................................................................................................................................
Chapitre II : Principes de design - jour 1 (2h)
1. Dimensions d’un site
3. La simplicite
4. L’unité
5. L’équilibre
6. La composition
7. Hiérachisation
8. Gestalt
9. A quoi sert le design web ?
.....................................................................................................................................................................................................................................
1.Dimensions d’un site
.....................................................................................................................................................................................................................................
Quelques statistiques (2010)
........................................................................
- 1% d’utilisateurs en 800x600
- 20% en 1024x768
- 5% en résolutions supérieures
- Premier constat : pour toucher un maximum de visiteurs (toutes résolutions confondues), un site doit être conçu sur une résolution minimale de 1024x768, et être consultable (avec ascenseurs) dans les résolutions inférieures.
- Bien entendu, ces statistiques sont généralistes seront à moduler selon le public visitant votre site , et suivant la nature du projet
web (catégories de sites énoncées dans le premier chapitre )
Tendances actuelles
........................................................................
Il existe 3 techniques de design qui s’adaptent bien à toutes les résolutions actuelles :
- icy : le site a une largeur fixe et se colle à droite ou à gauche
> www.impots.gouv.fr ou www.doctissimo.fr
- liquid : le site a une largeur fixe mais se place toujours au milieu du navigateur
> www.lemonde.fr, fr.yahoo.com ou www.alsacreations.fr
- fluid : le site a une largeur proportionnelle à celle du navigateur
> le site www.eyrolles.com ou linuxfr.org ou news.google.fr
image
> Le design fluide
La technique la plus maniable reste la technique de site fluide, où le site va s’adapter automatiquement à la résolution de l’utilisateur.
Pour cela, il suffit que tous vos blocs et éléments soient dimensionnés en unités fluides (pourcentage ou em), ou alors de placer tout le
contenu du site dans un conteneur dont la largeur sera définie à «100%» et non en pixels rigides.
image
Rappelons-nous que tous les éléments de type Bloc (div, p, hn, ul,...) occupent automatiquement, et par défaut toute la largeur possible au sein de leur parent. Il est donc inutile, voire néfaste, de leur appliquer des largeurs (width) de 100%; car cela ne peut que provoquer des bugs d’affichage si cette largeur est associée à des paddings.
> «Penser» le design à l’avance
Il faut bien être conscient qu’un site fluide est fait pour être déformé (il va s’adapter aux résolutions en s’élargissant ou en se rétrécissant).
Il faut donc «penser» le design et la mise en page en fonction de ce paramètre important. Il est inutile donc d’espérer faire un site fluide à partir d’un design entièrement graphique fait intégralement sous Photoshop par exemple.
«Penser» le site au départ, c’est savoir que chaque élément devra être fluide, redimensionnable, ainsi que les polices qui s’y trouvent.
Un site très graphique, avec des dimensions fixes posera des problèmes lorsque le polices seront agrandies par exemple.
Il faut donc savoir à l’avance comment va réagir chaque bloc, chaque structure lorsque le site sera redimensionné ou la police agrandie.
En général, il est donc préférable d’utiliser des couleurs de fond, ou des arrière-plans répétables (par exemple une image de 1px de large qui va se répéter dans son conteneur) et de placer des images fixes par-ci par-là... mais pas de design entièrement en images fixes.
Pensez à faciliter la lecture à tous vos visiteurs, même aux malvoyants, en leur permettant d’agrandir les textes de contenu. Pour cela, évi
tez l’unité pixel sur les textes car elle est figées sur Internet Explorer. Préférez une unité de taille fluide comme le pourcentage ou l’unité «em».
Vers le Tout fluide ?
Un site fluide, comme tout autre site, est composé de différents blocs. Ces blocs sont en général le menu, un entête,
une zone de contenu, un encart à droite et/ou à gauche et un pied de page.
Pour que les blocs eux-mêmes soient fluides, vous pouvez aussi soit les dimensionner en pourcentage, soit avec l’unité «em» qui est une unité qui varie en fonction de la taille de texte. Ainsi, si l’utilisateur choisit d’agrandir la taille de texte, les éléments dimensionnés en «em» vont s’agrandir également.
Cette solution est cependant déconseillée aux néophytes car elle peut engendrer de grosses disproportions. Préférez les dimensions en
pourcentages à moins que vous ne maîtrisiez les conséquences.
Notez qu’il n’est pas fondamental que tous les blocs soient fluides. Il est souvent même préférable qu’ils ne le soient pas tous.
L’essentiel est que les parties de contenu le soient (la police doit pouvoir être agrandie sans altérer la mise en page) et que le design géné ral s’affiche correctement sur une résolution minimale.
Les encarts sur les côtés (menus ?) et certains autres blocs peuvent très bien demeurer de largeur fixe tant que le contenu central principal demeure fluide en occupant toute la largeur restante disponible. Cela est souvent la meilleure solution, mais dépend évidemment de cha que cas.
Retenez simplement que faire un design fluide n’est pas forcément appliquer des largeurs en pourcentage partout. Retenez surtout que
dans la plupart des cas, la meilleure solution est de ne pas appliquer de largeur du tout à la partie centrale de contenu.
Un design fluide «intelligent» ?
Adapter le design en fonction de la largeur d’écran de l’utilisateur est une excellente chose en théorie. Cependant, il faut reconnaître que pour les tailles extrêmes (écrans très larges ou très réduits), la lecture du contenu n’est pas toujours aisée : les lignes de texte très longues sont loin de faciliter la lecture (c’est pour cela d’ailleurs que les journaux sont souvent structurés en plusieurs colonnes).
En concevant un site d’une largeur de 100% de la fenêtre du navigateur, vous risquez fort d’obtenir des lignes de contenu interminables sur les écrans larges. A l’inverse, un site proportionnel à un écran très petit sera très allongé dans sa hauteur et le contenu risque même d’être masqué ou chevauché par les blocs qui ne sont pas fluides.
La solution serait de créer un design fluide «intelligent» qui se limite à une largeur maximale lorsque l’écran est grand, et à une largeur minimale si l’écran est réduit.
Ces propriétés existent en CSS2, il s’agit de min-width (largeur minimale) et max-width (largeur maximale).
...........................................................................................................................................................
Grille : de quoi s’agit-il ?
............................................................................................................................................................................................................................................
ne grille est une trame qui divise verticalement et horizontalement un espace en deux dimensions.
U
C’est un outil de mise en page millénaire qui a été utilisé dès la rédaction des manuscrits.
On l’utilise aujourd’hui pour la conception des supports imprimés et des documents numériques.
Une grille peut être plus ou moins complexe et le graphiste est libre de choisir sa typologie en fonction de ses besoins et de ses envies.
Pourquoi utiliser une grille en design web ?
.............................................................................................................................................................................................................................................
out graphiste qui conçoit un support présentant de l’information (manuscrite, typographique, photographique, schématique … ) se confronte au
T
problème de la composition. Un site web est généralement constitué d’éléments divers : des textes, des images, des icônes, des éléments d’interface
Comment agencer sur une page blanche tous ces éléments entre eux, dans un espace donné, sachant qu’il existe des milliers de possibilités ?
Aidez-vous d’une grille. En effet, celle-ci apporte de nombreux avantages :
Elle guide le positionnement
..............................................
La grille définie à l’avance des repères verticaux et horizontaux à partir desquelles le graphiste peut s’appuyer pour caler ses éléments.
Il ne place plus ses blocs dans le vide mais se laisse guider par les colonnes et les gouttières de la grille pour subdiviser l’espace de sa page, la structurer et choisir des positionnements précis.
Elle apporte de l’unité
..............................................
Un site web est le plus souvent constitué de plusieurs pages. Pour que l’utilisateur comprenne que ces pages sont connectées entre elles et qu’elles appartiennent à une même entité, il est nécessaire que le graphiste apporte une certaine unité graphique.
En utilisant une grille commune pour toutes les pages, le graphiste assure une partie de cette unité. En effet, les gouttières qui servent de repère pour les marges, seront les mêmes sur l’ensemble du site et la taille des modules sera proportionnelle à la largeur des colonnes de la grille. Toutes les pages, même si leur composition est différente, seront construites à partir de la même trame.
Elle améliore le confort de lecture
.....................................................
La grille permet des mises en page en colonnes. Cela est particulièrement utile pour les textes qui, au delà d’une soixantaine de signes par ligne, deviennent fatiguant à lire. En effet, notre regard trouve de l’inconfort à lire de longues lignes de texte mais aussi à retrouver la ligne suivante (retour à la ligne) lorsque celui-ci doit parcourir une longue distance.
Le confort de lecture est aussi amélioré par les alignements verticaux car ils guident le regard à travers la page.
Un contenu calé sur une grille organise la page et simplifie sa perception globale.
> exemple de design basé sur une grille : le site UX_magazine /// http://uxmag.com/
----------------------------------------------------------------------------------------------------------------------------
Le site UX Magazine, riche en contenu, pousse l’utilisation de la grille à son paroxysme.
.....................................................................................................................................................................................................................................
Comment utiliser une grille ?
.....................................................................................................................................................................................................................................
Du point de vue du graphiste
..............................................
La première chose à faire est de choisir sa grille. Grille fixe ou flexible ? Quelle largeur globale ? Combien de colonnes ? Quelle largeur pour les colonnes et les gouttières ?
Ces choix seront souvent orientés par les contraintes du projet : site élastique ou fixe, résolution minimale retenue, contenu riche ou pas …
La largeur d’une colonne est l’unité de base pour déterminer quelle sera la largeur minimum d’un élément. Si un élément (bloc de texte, photo, formulaire …) nécessite une largeur plus grande, le graphiste s’arrangera pour choisir une largeur qui est un multiple de l’unité de base (2,3,4 … colonnes).
Les gouttières servent de repères pour les zones d’espace entre les blocs.
Une fois ce principe simple assimilé, divisez votre contenu en modules et disposez les sur la grille. Bien sur, cette disposition n’est pas aléatoire et doit tenir compte d’un certain nombre de critères (harmonie, équilibre, ergonomie, cohérence, hiérarchisation, marketing …)
Dans un processus de création de site web normal,
- un inventaire du contenu,
- un zoning,
- un placement des éléments sur une wireframe,
ont déjà été effectué.
Une partie du travail de positionnement est donc partiellement entamé et le graphiste n’a plus qu’a structurer la page de façon plus stricte sur sa grille de positionnement.
Notons que cette étape peut entrainer des modifications de la wireframe sachant que les contraintes d’espace occupé par les contenus et la résolution d’écran peuvent ne pas avoir été pris en compte lors du dessin des wireframes.
Du point de vue de l’intégrateur
..................................................
Au début de l’ère du HTML, on détournait l’utilisation des balises « table » (prévues pour présenter des données tabulaires) afin de concevoir la mise en page graphique des pages web en calant les éléments dans les cellules du tableau.
Aujourd’hui, cette technique est bannie pour des raisons de sémantique et de performance. Elle a été remplacé par l’utilisation des CSS qui permettent des positionnements précis sur la page.
A l’aide de framework CSS, il est maintenant possible pour le designer et l’intégrateur de concevoir des mises en pages web sur des grilles communes. Le graphiste choisit la grille sur laquelle il va s’appuyer pour sa mise en page et l’intégrateur génère le framework CSS corres pondant. Ce framework CSS lui permettra de respecter au mieux les positionnements et les alignements des éléments.
L’utilisation de ces framework ne sont pas obligatoires mais leur usage facilite grandement le travail lorsqu’ils sont maitrisés à la fois par le graphiste et l’intégrateur.
Il existe de nombreux framework CSS qui proposent une feuille de style de positionnement basée sur une grille.
par exemple 960 Grid System et Blue Print :
> http://960.gs/
> voir aussi le tutorial : http://www.lafermeduweb.net/billet/tutorial-prendre-en-main-un-framework-css-2-blueprint-217. html#blueprint
.....................................................................................................................................................................................................................................
Faire oublier la grille
.....................................................................................................................................................................................................................................
Une fois que votre mise en page est terminée, il vous reste encore pas mal de travail de design.
Si vous avez besoin d’estomper l’aspect grille de votre mise en page, il existe des solutions créatives en utilisant judicieusement les images d’arrière plan par exemple.
Sur ce sujet, Jina Bolton a écrit un article intéressant intitulé Breaking Out of the Box publié sur le site SitePoint :
> http://www.sitepoint.com/breaking-out-of-the-box/
Conclusion
....................................................................................................................................................................................................................................
L’utilisation d’une grille dans la conception d’une mise en page est une technique qui à largement fait ses preuves. C’est un outil précieux qui aide les graphistes à ordonner et organiser le contenu, à unifier la composition des pages et à améliorer le confort de lecture.
La rigidité des grilles n’est que apparente et ne doit pas vous inhiber dans la création de vos compositions. N’hésitez pas à explorez la multitude de possibilités qu’elles vous offrent.
Inspirez vous des journaux, magazines et autres support du print. Vous y trouverez d’innombrables exemples de mise en page créatives à base de grilles. Regardez également autour de vous, les grilles se retrouvent partout, dans les motifs, l’architecture, les objets de notre quotidien …
Sur le web, allez faire un tour sur la galerie CSSJuice, vous y trouverez des exemples de sites basés sur un design « grille ».
.....................................................................................................................................................................................................................................
Sources :
- Ouvrage : The complete Graphic Designer – Ryan Hembree – Edition Rockport
- Design & Typo « Grilles de Mise en Page | typographie web et print«
....................................................................................................................................................................................................................................
....................................................................................................................................................................................................................................
2. La simplicite
.....................................................................................................................................................................................................................................
L’accès à l’information n’a jamais été aussi aisé. Cette abondance d’informations nous submerge.
Pour un designer qui cherche à transmettre un message, utiliser la simplicité peut être une bonne stratégie.
Introduction
.....................................................................................................................................................................................................................................
Avant de parler de la simplicité comme mode de communication dans le design et en guise d’introduction, je souhaiterais rappeler quelques
définitions issues du dictionnaire (Larousse 2003) :
Simplicité
..............................
« Qui suffit à soi seul, qui n’a besoin de rien d’autre pour produire l’effet attendu. Qui est constitué d’un petit nombre d’éléments qui s’organi - sent de manière claire. »
La simplicité s’oppose à la complexité.
Simpliste
...............................
« D’une simplicité exagérée, qui ne considère qu’un aspect des choses. »
Quelque chose de simpliste est incomplet, il y a un manque, un oublie volontaire ou involontaire.
Minimalisme
.................................
« Recherche de solutions requérant le minimum de moyens. »
Le minimalisme est aussi un mouvement artistique où les formes sont simplifiés à l’extrême et les éléments orchestrés dans la simplicité la
plus radicale.
Complexité
.................................
« Qui se compose d’éléments différents, combinés d’une manière qui n’est pas immédiatement saisissable. »
Ordre
...............................
« Ensemble d’éléments organisés, rangés, classés, disposés de manière logique. »
A l’ordre s’oppose le chaos.
Chaos
................................
« Ensemble d’éléments désordonnés, confus. »
A la lumière des ces définitions, nous voyons qu’il ne faux pas confondre le terme « simple » qui exprime le dépouillement de tout superflu avec
le terme « simpliste » qui exprime le fait de ne donner qu’une vision incomplète des choses. A la simplicité s’oppose la complexité mais qui n’a
rien à voir avec le chaos. La complexité exprime une notion de quantité alors que le chaos exprime le désordre et la confusion.
Les questions auxquelles je vais essayer de répondre dans cet article sont :
« Comment simplifier et pourquoi simplifier ? »
Comment simplifier
.....................................................................................................................................................................................................................................
La simplicité n’est pas une formule magique qui répond à tous les problèmes de design. Un site web complexe peu sembler difficile à designer,
la tentation de le simplifier pour résoudre nos problèmes de design est une fausse solution. Si un certain nombre de contenu (une certaine
complexité) est nécessaire, la réponse graphique est davantage dans l’organisation de ce contenu plutôt que dans l’élimination d’éléments.
Vous trouverez sur le site de Andy Rutledge , un article intitulé « Complex Order, Simple Chaos » qui décrit bien cette réflexion.
> http://www.andyrutledge.com/
Pour organiser un contenu, je vous renvoie aux articles de ce blog consacrés aux « Grilles », à la « Gestalt », à la « Hiérarchisation de l’information » …
La simplicité est souvent préconisée par les ergonomes, les architectes d’information, certains designer. Cependant, elle ne s’applique pas
systématiquement à tous les cas de figure.
Parfois, la complexité ou le chaos sont des effets recherchés. Par exemple pour exprimer certains affects, pour laisser le spectateur se perdre
dans un arrangement ou il va explorer et examiner une multitude de sujets ou pour faire vivre une expérience particulière à l’utilisateur dans un
contexte bien précis (publicité, expérimentation, innovation …).
Simplifier un design consiste essentiellement à réduire le nombre d’éléments mais aussi à organiser les éléments et utiliser des éléments
connus.
Simplifier en réduisant
...........................................................................
- Comme nous l’avons vue en introduction, la simplification consiste à éliminer tout ce qui semble ne pas être absolument nécessaire. A première vue, cela peut sembler facile à faire mais il n’en ait rien, la simplicité n’est pas simple !
- En effet, éliminer des éléments, que se soit des fonctionnalités ou des objets graphiques, se fait sur la base d’une décision subjective. Cette décision comporte un risque, celui de tomber dans une conception trop simpliste, c’est à dire où il manque finalement des éléments. On se rend donc compte que entre simplicité et simplisme, existe une frontière ténue difficile à percevoir mais facile à franchir.
- Pour nous aider, Jacob Nielsen, ergonome Américain, préconise avant d’ajouter un élément conceptuel sur un site, de se poser deux questions :
1- « Cet élément simplifie t’il la tâche de l’utilisateur ? »
2- « Cet élément apporte t’il une valeur ajoutée ? »
… si la réponse est « non » éliminez le.
- Donc si vous êtes dans une démarche de simplification par la réduction, avant d’ajouter un élément graphique dans votre design, deman dez-vous si cet élément rempli un objectif ou participe à communiquer un message. Penser en terme d’objectifs est un bon moyen d’éviter de tomber dans le piège du simplisme.
Simplifier en organisant
...........................................................................
- Organiser les éléments d’une composition graphique ou d’une mise en page favorise la simplification. Souvenez-vous de notre définition de la simplicité : « Qui est constitué d’un petit nombre d’éléments qui s’organisent de manière claire. » , on y parle bien d’organisation.
- Ce qui est organisé devient plus simple à percevoir et plus simple à comprendre parce que notre cerveau a besoin de cet ordre pour analy ser plus rapidement son environnement.
Simplifier par la connaissance
...........................................................................
- Ce qui est connu devient plus simple. En effet, notre cerveau analyse sans cesse ce qu’il perçoit. Toute nouveauté lui demande un effort
cognitif intense.
- Lorsqu’une situation a déjà été rencontrée, analysée, pratiquée et enregistrée, le cerveau fournit beaucoup moins d’efforts que face à une situation nouvelle. C’est pourquoi les choses connus nous paraissent plus simples.
- Lorsque vous concevez le design d’une interface, vous rendrez la tâche de l’utilisateur beaucoup plus simple si vous faites appel à des références que celui-ci connait.
Par exemple si vous utilisez une icône représentant un caddie pour symboliser le panier d’un site e-commerce, l’utilisateur le reconnaitra comme tel parce qu’il connait le sens associé à cette icône.
Pourquoi simplifier
.....................................................................................................................................................................................................................................
Parce- que nous avons naturellement besoin de simplicité
.............................................................................................................
- La Gestalt (psychologie de la forme) a observé à travers la loi de Prägnanz que notre cerveau recherche toujours la simplicité. Lorsque
des choses se présentent à nous de façon ambigüe de sorte qu’elles peuvent être interprétées de différentes manières, notre cerveau choisira toujours l’interprétation la plus simple.
- Prenez un smileys ;-) ce n’est qu’une succession de caractères spéciaux qui n’a aucun sens et ne fait référence à aucune règle (gram maire ou autre…). Ce groupement de caractères peut donc sembler ambigüe. Notre cerveau y cherche une logique, une interprétation, un sens. Et naturellement, il va identifier un visage et ne retenir que cela à notre attention plutôt que de se dire : « il s’agit d’un point virgule suivie d’un tiret lui même suivi d’une parenthèse fermante ». Pourquoi ? parce que c’est plus simple pour notre cerveau de voir le monde à notre image (chose que nous connaissons bien) que de le voir tel qu’il est dans sa réalité froide et dénuée de sens.
- Cette aptitude naturelle à la simplification pourrait aussi s’expliquer par notre instinct de conservation. Dans un environnement hostile et nouveau, notre cerveau réptilien (qui gère notre instinct de survie) à besoin d’identifier le plus rapidement possible ce qui l’entoure pour y distinguer un éventuel danger et prendre la décision de fuir sans perdre de temps. En généralisant un ensemble complexe, nous gagnons du temps.
- Donc, lorsque vous simplifiez un design, vous soulagez l’effort cognitif de l’observateur, vous facilitez son travaille de réflexion. Car natu rellement, le cerveau humain aime qu’on lui mâche le travaille. Attention cependant, tomber dans la facilité n’est pas toujours heureux car vous risquez de basculer dans l’ennui et le désintérêt.
Mettre en valeur
...........................................................................
- L’architecte Allemand Ludwig Mies van der Rohe (1886 – 1969) s’est rendu célèbre par ses réalisations mais également par ses formules choques sur le design. Il est l’auteur du fameux « Less is more », « Moins c’est plus ».
- Cette formule signifie que moins vous mettez d’éléments, plus ceux qui restent sont mis en valeur. En effet, les éléments d’une composi tion rentrent en compétitions les uns par rapport aux autres et cela génère ce qu’on appel du « bruit visuel ». Moins il y a de compétiteurs en liste, plus ceux qui restent ont de chance de gagner… l’attention du spectateur.
- Donc simplifier un design (par élimination) peut servir à mettre l’accent sur certains éléments considérés comme essentiels. Si on ne voit qu’eux par ce que les autres éléments sont tout simplement absents, notre attention n’a d’autre choix que de se focaliser sur ceux qui existent. Il s’agit donc ici de renforcer la portée d’un visuel en le dépouillant de détails accessoires.
- L’attention de l’observateur peut également être obtenu en hiérarchisant le contenu par des procédés graphiques. Mais vous n’obtiendrez jamais l’efficacité qu’apporte la simplification. Si vous considérez que certains éléments sont superflus, éliminez les (simplification) dans le cas contraire, organisez-les (hiérarchisation, grille …).
Faire gagner du temps
............................................................................
- Dans un monde où tout va plus vite, gagner du temps devient appréciable.
- Internet est un lieux d’abondance ou l’internaute doit trier et faire des choix parmi une multitude de sites web pour trouver ce qu’il cherche. Comme il manque de temps, l’internaute privilégie les sites claires qui lui permettent de trouver plus facilement l’objet de ses recherches.
- Plus un site sera simple, plus il sera claire, plus son confort augmentera et plus rapidement l’internaute trouvera ce qu’il cherche.
Engager le spectateur
............................................................................
- Dans l’art Zen, les Japonais pensent que si tout est exprimé, l’intérêt de l’observateur disparaît.
- En décrivant les choses de manière la plus dépouillée possible, vous réduisez leur description à leur stricte minimum. Cela permet d’éveiller
l’intérêt et l’imagination de l’observateur en lui laissant une marge d’interprétation.
- En effet, en ne révélant pas tout, en permettant à l’observateur de se projeter dans votre univers, en lui laissant la liberté d’imaginer une histoire, vous engagez le spectateur dans votre design.
La simplicité en se concentrant sur l’essentiel fourni cette liberté d’interprétation à l’observateur.
Une forme d’esthétisme
............................................................................
- La simplicité est une forme d’esthétisme très prisée par certaines cultures. L’art Zen Japonnais en ai le meilleur représentant. A l’opposé, d’autres cultures (Occidentales, Arabes …) ont, à certaines époques, plutôt privilégié l’abondance regorgeant de beautés (jardins à la Fran
çaise, ornementations baroques, ornementations des mosquées …) saturant d’informations visuelles l’observateur. Cette abondance de beauté était certes un témoignage de richesse et de beauté mais trop de sollicitation ne nous fait il pas passer à côté de l’essentiel ?
- Tout cela n’est qu’une histoire de gouts, d’objectifs et de mentalité, là n’est pas la question. Ce qui est intéressant, c’est de comprendre ce que la simplicité peut apporter à l’esthétisme.
- La simplicité permet d’apporter le maximum d’impact avec un minimum de choses. C’est une manière d’atteindre une forme de grâce, d’élégance c’est à dire de beauté par la retenue. La simplicité est esthétique parce qu’elle apporte de la subtilité, du raffinement, de l’élé
gance, de la sérénité et de la suggestivité aux choses auxquelles elle s’applique.
implicité et webdesign
S
..................................................................................................................
Exemples de sites web ayant appliqués la simplicité dans leur design.
> site de Almeter Design, agence de design qui propose des identités visuelles pour les marques.
http://www.almeterdesign.com/ee/
Un design web où la simplicité a été poussée à ce point. Tout est réduit à sa plus simple expression, pas de textures, d’aplats, d’ornementations ou de couleurs ostentatoires. Même le logo de l’agence est d’une extrême simplicité.
> site vitrine du photographe Ingo Peteers
http://peters-photography.de/
Design : ZUM KUCKUCK > www. zumkuckuck.com /// Le minimalisme comme mot d’ordre
> site portfolio du web designer derekpunsalan
http://is.derekpunsalan.com/
Prenons maintenant un site de commerce à priori plus complexe qu’un site corporate. Le site Crate & Barrel est un bon exemple. Bien qu’un
site e-commerce nécessite de nombreuses fonctionnalités, un catalogue, un système de caddie … vous pouvez, en organisant le design,
aboutir à des pages simples et claires.
http://www.crateandbarrel.com/
Autre Exemple de site d’e-commerce au design minimaliste :
http://www.ikks.com
La encore, rien d’ostentatoire. Les fonctionnalités sont réduites au strict minimum. Pas d’images ou d’effets graphiques gratuits, de l’espace, de
l’organisation et de l’alignement.
Conclusion
.....................................................................................................................................................................................................................................
Nous avons vue dans cet article que la simplification consiste à :
réduire, organiser et utiliser des références connues.
- La simplification améliore la clarté d’un message ou d’une mise en page et facilite l’effort cognitif de l’observateur tout en l’impliquant dans
votre design.
- Simplifier n’est pas un acte aisé, il requiert de la pratique, de la réflexion et de la vigilance.
- Ce n’est pas une démarche a appliquer systématiquement, surtout si votre objectif n’est pas de clarifié un ensemble d’éléments et d’informations ou d’inciter l’observateur à imaginer ce qui n’est pas montré.
- Réfléchissez toujours à vos objectifs et vous saurez alors si vous devez utiliser la simplification ou pas.
.....................................................................................................................................................................................................................................
Sources :
– Ouvrage « Site web : priorité à la simplicité » de Jakob Nielsen et Hoa Loranger – CampusPress
– Ouvrage « Les mouvements dans le peinture » P. Fride R. -Carrassat et I. Marcadé – Larousse
– Ouvrage « Présentation zen de Garr Reynolds – Pearson
– Ouvrage « Loeil du photographe et l’art de la composition de Michael Freeman – Pearson
.....................................................................................................................................................................................................................................
.....................................................................................................................................................................................................................................
4. L’unité
.....................................................................................................................................................................................................................................
- L’unité consiste à maintenir une certaine cohérence graphique sur l’ensemble d’un site ou d’une application.
Comment maintenir une unité dans un design web ?
Introduction
....................................................................................................................................................................................................................................
- L’importance de l’unité dans un design web est parfois sous-estimée c’est pourtant un principe simple
- Même si un site web comporte de nombreuses rubriques qui doivent se distinguer les unes des autres,
toutes ces rubriques, sous-rubriques, pages, appartiennent à un même ensemble.
- Pour que l’ internaute sache qu’il se trouve toujours dans cet ensemble,
il est important de lui fournir des indices visuels qui baliseront sa navigation.
- Cette cohérence visuelle, rassure l’utilisateur et participe à l’harmonie d’un design Web
Mettre en place de l’unité dans votre design
.....................................................................................................................................................................................................................................
- Mettre en place de l’unité dans votre design consiste :
A répéter dans l’ensemble de votre site certaines caractéristiques > _ systématisation .
- Cela donne en plus un style, une personnalité à votre travail tout en unifiant l’ensemble de vos pages.
- Cette cohérence participe à l’esthétisme du site, au plaisir d’utilisation de l’interface et permet de donner la sensation à l’utilisateur de navi
guer en terrain connu.
- L’ unité apparait souvent dans les détails.
- Pour la mettre en place, vous pouvez jouer sur un ou plusieurs éléments de la composition comme :
+ la typographie
+ les images
+ les couleurs la typographie
................................................................................
- Utilisez peu de typographies différentes dans vos créations.
Une, deux voire trois sont grandement suffisantes dans la plupart des cas.
- Si vous choisissez d’utiliser plusieurs typographies, il est préférable que l’une d’entre elles soit la typographie dominante que l’on retrouvera
sur toutes les pages du site.
- Pour apporter de la variation, vous pourrez jouer sur la taille de la police, sur son style, sa couleur ou sa casse.
> exemple : John LIKENS /// http://www.johnlikens.com/
- Un site dont la mise en page est faite grâce au CSS . Interface simple , interface épurée et bien conçue , navigation efficace .
- Limitation des couleurs (Probablement deux voire 3 au max )
une police bâton pour le texte principal, le logo et les titres et
une police à empattement pour l’accompagnement des titres ... empattement).
- Malgré un nombre réduit de polices, le webdesigner joue sur la casse, la justification, la taille, la couleur, le style du texte.
- La limitation des polices de caractère donne le sentiment d’unité afin de rendre le message claire et lisible .
Les images
.....................................................................................................................................................................................................................................
- Mettre en place une unité de style.
- Choisir de n’utiliser que des photographies noir et blanc par exemple .
- Vous pouvez également choisir judicieusement vos images de sorte que certaines lignes ou formes se répètent .
- Il est conseillé de «traiter» souvent les images (suivant la nature du proejt) avec des filtres photoshop afin d’homogeneiser l’ensemble des images .
> http://www.canyon.com/heroes/
Les images sont traitées de la même manière ... avec un filtre assez froid sytématiquement utilisé dans les tons gris / bleus ...
- Voir aussi :
> my brain art /// portfolio du graphiste / webdesigner vasjen katro /// http://www.mybrainart.com/home.html#all
> john likens /// http://www.johnlikens.com/work.html
> DFO /// http://www.desfillesenovalie.org/
> candystand /// site portail communautaire de jeux videos en ligne /// - Analyser pour chacun de ces exemples de sites Web le choix des polices de caractère , le choix des images et la façon dont elles sont
traitées les unes entre elles et aussi par rapport à l’arriere plan.
Les couleurs
...............................................................................
- Maintenir une palette graphique sur l’ensemble de son design participe beaucoup au style que vous allez instaurer et à la mise en place d’une unité graphique.
- Attention au choix systématique de plusieurs couleurs pour identifier et distinguer différentes rubriques, il doit s’insérer dans une cohérence
colorimétrique plus large pour unifier l’ensemble.
- L’unité se retrouve dans lsouvent dans le choix d’une couleur dominante ... Arriere Plan , typographie, couleur des liens participent à cette
impression de couleur dominante et confert à l’ensemble sa cohérence .
- Vous pouvez par exemple choisir une couleur dominante puis utiliser plusieurs nuances de cette couleur afin de distinguer les polices des
liens, des polices des textes de contenus, des polices des titres et des sous titres, des polices appartenant aux citations , etc ...
- Vous pouvez aussi choisir une seconde couleur pour mettre les liens hypertextes en valeur , ou encore les textes des titres de niveau H1 , ou encore les textes des rubriques ...
- 2/ 3 couleurs peuvent suffire pour votre design ... mais cela dépend une fois encore de la nature du projet souvent par rapport à la cible :
choix de couleurs vives appropriées à l’univers de l’enfance par exemple , ou au contraire noir/blanc pour l’univers du luxe ...
Voir les sites :
> daddy design /// http://www.daddydesign.com/ site corporate
> warb games /// site de jeux flash / http://www.warbgames.com/
> wow toys /// http://www.wowtoys.com /// site d’ e-commerce (catalogue et marchand)
> dominos.com /// http://www.dominos.com/ site d’e-commerce (catalogue et marchand)
> subtraction.com /// http://www.subtraction.com/
Analyser pour chacun de ces exemples proposés les couleurs qu’utilisent ,
+ l’arriere plan (ou la tonalité s’il s’agit d’une image ou plusieurs)
+ les textes des rubriques (navigations)
+ les textes des titres (H1) et sous tritres (H, H3 ...)
+ les textes des contenus (blocs de contenu)
+ les hyperliens
+ les liens au survol ...
+ les arrieres plans des titres et sous titres
+ les arrieres plans des blocs d’information
+ les arrieres plans des éléments Header, body, pied de page
+ le logo (identité visuelle) et citations
Les formes
.....................................................................................................................................................................................................................................
Dans un design web, vous retrouvez des formes dans les photographies, le logo, les boutons, les cadres de contenu … Si vous décidez de
dessiner des cadres de contenu d’une certaine manière, garder cette cohérence sur toutes vos pages afin de maintenir une unité sur l’ensemble de votre site.
wwwExprimoIt
Le site www.exprimo.it a choisi de baser son graphisme sur des formes arrondies en goutte d’eau. Pour rester cohérent avec ce choix, les
formes arrondies se retrouvent sur plusieurs éléments comme le logo, le cadre de contenu principal, les cadres de contenus texte à l’intérieur
des pages, les vignettes.
Textures/motifs
Comme les images, les textures ou les motifs peuvent être un moyen de maintenir l’unité sur les différentes pages. L’exemple le plus simple est
de conserver un unique arrière-plan texturé sur toutes les pages du site.
wwwIncandescenceCom1
wwwIncandescenceCom2
Le site www.incandescence.com utilise abondamment des motifs géométriques dans le design de ses pages. Bien que le motif ne soit pas
exactement le même sur toutes les pages, son utilisation est constante et constitue le principal effet visuel du site.
La mise en page
La façon de disposer certains éléments ou de construire votre mise en page peut être utilisée de manière redondante pour créer de l’unité.
Par exemple, garder certains éléments toujours à la même place quelle que soit la page (logo, menu, pied de page, fil d’Ariane …). Maintenir
certaines marges constantes de façon à ce que des éléments clés apparaissent toujours de la même manière quelque soit la page. Pour vous
aider dans cette démarche, l’utilisation d’une grille de mise en page est fortement conseillée.
wwwAngryretailCom
La mise en page et la disposition diagonale des pages du site www.angryretail.com est audacieuse mais donne un style bien particulier au site.
Ce choix de la mise en page reste constant sur l’ensemble du site.
Conclusion
L’unité est un principe simple à mettre en place. Il permet à la fois de donner de la cohérence au design, ce qui rassure l’utilisateur, et de favoriser l’harmonie visuelle de la composition donc l’esthétisme.
Pour mettre en place de l’unité dans vos design, vous pouvez jouer sur de nombreux éléments. Mais il ne faut pas tomber dans un excès
d’unité au risque de produire un visuel trop monotone. A vous de sentir le bon dosage entre variété et unité pour concevoir un design cohérent
mais qui éveille suffisamment l’intérêt de l’internaute.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------4.L’équilibre
L’équilibre est un principe fondamental de la composition et donc du langage graphique. Nous allons voir dans cet article différentes façons de
mettre en place l’équilibre dans une composition.
Introduction
Pour faire passer un message, il est important d’interpeler et de retenir l’attention du spectateur. Pour y parvenir, le graphiste doit soigner sa
composition. Comme nous l’avons déjà vu, la composition d’une création fait appel à plusieurs principes du langage visuel. La notion d’équilibre
est l’un de ces principes.
Les éléments présents dans une composition (formes, lignes, textures, couleurs, densités …) ont chacun un poids visuel. Plus le poids visuel
d’un élément est important, plus il aura un pouvoir d’attraction fort.
Notre œil étant naturellement à la recherche d’équilibre, proposer au spectateur une composition équilibrée et harmonieuse lui apportera une
certaine satisfaction. On s’approche donc ici de la notion d’esthétisme qui reflète le plaisir qu’éprouve l’observateur à regarder une création.
Nous allons distinguer dans cet article deux types d’équilibre. L’équilibre statique basé sur la symétrie et l’équilibre dynamique qui se construit
sur une asymétrie.
L’équilibre statique – symétrie
L’équilibre statique est obtenu en mettant en place au centre de votre cadre un axe ou un centre de symétrie autour duquel les éléments se
ressemblent et se répartissent en miroir.
Une composition basée sur un équilibre statique satisfait notre œil car elle est harmonieuse, stable et rassurante. En effet, la symétrie fait partie
intégrante de notre environnement. On la trouve par exemple dans l’architecture ou dans la nature et plus particulièrement dans la physiologie des êtres vivants. Une composition basée sur la symétrie renvoie une impression de stabilité, de sérénité, d’équilibre qui satisfait notre
perception.
On pourra donc utiliser l’équilibre statique pour mettre en place un effet esthétique, une ambiance statique, une atmosphère rassurante et
immuable, une beauté froide, une impression d’équilibre, de pérennité, de structure. L’équilibre statique a été abondamment utilisé en peinture
classique.
Si l’équilibre statique est séduisant, rassure et favorise l’harmonie; il a en revanche l’inconvénient d’endormir l’intérêt du spectateur. En effet,
les forces mises en jeu sont toutes égales, s’opposent entre elles et finalement s’annulent. Les compositions basées sur un équilibre statique,
bien que superficiellement attractives, sont finalement trop simples et manquent de tension pour véritablement éveiller notre intérêt de façon
significative.
L’équilibre statique peut donc poser un problème d’attention car lorsque vous êtes dans un environnement serein, vous êtes plus disposé à la
sieste qu’a vous maintenir dans un état d’alerte.
C’est la raison pour laquelle, l’équilibre statique, n’est pas toujours recherché par les graphistes, surtout si leur objectif est d’attirer et de maintenir l’attention du spectateur. En revanche, si votre objectif est de rassurer, de calmer et d’établir une ambiance sereine, ce type d’équilibre est
tout à fait adéquat.
Exemples d’utilisation de l’équilibre statique en webdesign
kramarek.com
Site www.ramarek.com
baselinedc.com
Site www.baselinedc.com
L’équilibre dynamique – asymétrie
L’équilibre dynamique se construit sur une asymétrie. L’équilibre n’est plus obtenu par une répartition et une disposition identiques des éléments de part et d’autre d’un axe de symétrie mais par une compensation du poids des éléments dans la composition.
L’utilisation de l’équilibre dynamique permet au créatif de générer une tension dans son visuel et donc d’attirer davantage l’intérêt du spectateur
tout en conservant une certaine harmonie.
Pour établir une composition équilibrée à partir d’éléments disparates, il va falloir jouer sur la disposition des objets dans le cadre et sélectionner des objets dont les caractéristiques vont permettre de compenser le poids visuel de chacun.
Équilibre des tailles
Plus un objet est de grande taille plus son poids visuel augmente. Pour établir un équilibre entre plusieurs objets de tailles différentes, il faudra
les répartir de sorte que leur poids respectif se compensent.
null
Un objet volumineux sera équilibré si on lui oppose plusieurs objets moins volumineux mais dont la somme des poids compense le poids de
l’objet de plus grande taille.
Équilibre spatial
On peut également rétablir l’équilibre entre des objets de tailles différentes dans un cadre donné par leur répartition spatiale par rapport au
centre du cadre.
équilibre spatial
Plus un objet est situé près d’un bord du cadre, plus son poids visuel augmente. Un objet de petite taille peut compenser le poids d’un objet de
grande taille si sa disposition spatiale est plus proche du bord que l’objet de grande taille.
Équilibre des couleurs
Plus un objet a une teinte saturée, plus son poids visuel augmente. Si le sujet principal de votre composition a une forte présence colorée,
vous pouvez équilibrer cette présence en créant plusieurs rappels avec la couleur en question. Vous pouvez aussi équilibrer la composition en
compensant le sujet principal par un autre objet dont la teinte est également saturée. Les artistes utilisent souvent les couleurs complémentaires pour équilibrer et contraster leurs compositions.
équilibre des couleurs
Équilibre des valeurs
Toute couleur correspond à une valeur de gris. Le principe d’équilibre des valeurs est donc étroitement lié à celui des couleurs.
équilibre des valeurs
Ici, j’ai simplement passé l’image en couleur ci-dessus en valeur de gris. On voit bien que chaque teinte selon sa saturation et sa luminosité
possède une valeur qui contraste plus ou moins avec son environnement.
Équilibre des espaces négatifs et positifs
Chaque objet possède une forme qui occupe un espace dans la composition. Ces espaces sont appelés espaces positifs. L’espace présent
entre les objets (vide) laisse également apparaitre des formes que l’on appelle espaces négatifs.
En déplaçant les formes on modifie et on déplace à la fois les espaces positifs et les espaces négatifs. Par conséquent espace positifs et
négatifs sont interactifs et régissent ensemble l’équilibre de la composition.
équilibre des espaces et valeurs
Dans le premier cadre, les objets sont répartis de manière uniforme. Comme ils possèdent tous la même valeur, la composition semble encombrée et donne une impression d’étouffement.
Dans le second cadre, l’accumulation des objets dans un coin du cadre laisse l’autre partie vide et provoque un déséquilibre.
Dans le troisième cadre, les objets sont répartis dans tous le cadre mais leur différence de valeur et de texture modifie la perception des pleins
et des vides. Le triangle dense du bas attire notre attention mais il est équilibré par l’espace qui l’entoure qui parait moins encombré qu’il n’est
en réalité.
Équilibre hétérogène
Les différentes caractéristiques d’un objet (taille, couleurs, valeurs, position spatiale …) peuvent participer à l’équilibre d’une composition. Ici,
un objet de grande taille est équilibré par un objet de taille inférieure mais dont la valeur est plus contrastée.
équilibre hétérogène
L’espace est encombré. L’occupation de l’espace nous donne une sensation de monotonie et d’étouffement.
Exemples d’utilisation de l’équilibre dynamique en webdesign
Sur la page d’accueil de mon blog, j’avais un déséquilibre à gauche avec la présence du logo, de la vignette et de l’encadré du dernier article
publié et la liste des articles secondaires. A droite, le menu principal et le menu secondaire, le champ recherche et l’icône de flux rss formaient
un ensemble beaucoup moins dense et semblaient flotter dans un vide que l’on ne retrouvait pas à gauche de la page. Pour rééquilibrer l’ensemble, j’ai placé l’illustration du poulpe en haut à droite.
pixenjoy.com
Sur le site www.tarantinocafe.de, l’oeil est attiré à gauche par la photographie du portrait de Tarantino. Cette photographie noir et blanc est
contrebalancée par un cadre vert à droite qui est le seul élément coloré de la page et qui contraste sur la page monochrome. Le teinte verte du
cadre se retrouve par petites touches dans le logo et le contenu texte. Ce rappel contribue également à équilibrer la composition.
www.tarantinocafe.de
Le point focal du site clandrei.de et l’enfant se situant à droite du cadre. En effet, les êtres vivants et plus particulièrement les humains, attirent
toujours notre attention en premier dans une composition. Le site se divise en trois bandes horizontales. Les deux bandes du haut sont d’une
teinte peu saturée alors que celle du bas est saturée. L’enfant se situant dans les deux bandes peu saturées, il est équilibré par la bande du
bas d’une teinte beaucoup plus vive. On note également la présence d’une grosse typographie qui rééquilibre la présence de l’enfant sur le
plan horizontal. Enfin, un rappel de la teinte saturée de la bande du bas est présent dans le T-shirt de l’enfant.
clandrei.de
Dernier exemple avec le site www.dr84.com. A première vue, ce site pourrait sembler déséquilibré par la place imposante de la photographie.
Mais la bande noire de gauche, grâce à un fort contraste avec le fond beige, rééquilibre horizontalement le poids de la photographie. La présence du menu en haut et le texte de présentation en police large participe aussi au rééquilibrage de la page mais cette fois ci verticalement.
dr84.com
Conclusion
L’équilibre est une notion importante et puissante qu’il faut prendre en compte dans l’élaboration de nos compositions. Utilisé à bon escient, ce
principe peut être d’une efficacité redoutable pour exprimer certaines impressions.
Un équilibre statique est adapté pour certains effets esthétiques (réflexions, ressemblance …) ou pour instaurer une atmosphère rassurante et
tranquille.
Pour donner un peu plus de « peps » à une composition, on choisira un équilibre dynamique.
Mais la recherche de l’équilibre n’est pas une fin en soi. Tout dépend de ce que vous voulez exprimer. La mise en place d’un déséquilibre
peut aussi être recherchée par le graphiste pour exprimer une instabilité, une gêne, un inconfort… Une fois de plus, vos choix dépendront du
message que vous voudrez véhiculer dans vos créations.
Sources:
- Ouvrage: L’oeil du photographe et l’art de la composition – Michael Freeman – Pearson Edition
- Ouvrage: Composition – David Präkel – Editions La Compagnie du Livre
- Révision et approfondissement des notions basiques de composition – Arts appliqués, Academie de la réunion
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------5.La composition
Introduction
Le langage visuel est un mode de communication qui pourrait se définir par le sens qu’une image est capable de transmettre à celui qui la
regarde. Lorsque nous observons une image, notre cerveau la perçoit grâce à notre vision mais déclenche également tout un processus de
reconnaissance basé sur nos expériences antérieures. La vision déclenche donc des pensées qui aboutissent à des émotions, des réflexions,
des références à d’autres images, des déductions conditionnées par notre vécu et notre façon d’appréhender le monde.
L’observation d’une image, quelque soit l’individu, n’est donc jamais un acte passif et laisse rarement indifférent.
La composition
Définition
La composition se préoccupe de concevoir l’arrangement des éléments d’une image dans un cadre physique donné. Les éléments d’une image
rentrent en interaction les uns avec les autres et ces interactions sont influencées par les caractéristiques de chaque élément (taille, couleur,
valeur, orientation, forme, emplacement …).
Se soucier de la composition, c’est choisir de répartir les éléments constitutifs de l’image en fonction de vos objectifs de communication. Ne pas
se soucier de la composition, c’est laisser le hasard choisir à votre place et risquer de passer à côté de vos objectifs.
En webdesign, une réflexion sur la composition commence lors de l’étape de mise en page du contenu puis se poursuit lors du design graphique. La composition en webdesign diffère un peu de la composition en photographie car le webdesign doit prendre en compte un ensemble
d’objets constitués de textes et d’images pour former un tout cohérent.
Les facteurs qui interviennent dans la composition
Beaucoup de facteurs peuvent être pris en considération pour élaborer une composition. Je vais essayer d’en faire une énumération ici. Pour
chacun d’entre eux, je ne rentrerai pas dans les détails car certains de ces facteurs seront traités ultérieurement.
Pour élaborer une composition, vous pouvez vous appuyer sur les notions suivantes:
Les règles de composition
Au cours des siècles, les artistes et les architectes ont définies des règles de composition empiriques basées sur l’expérience et l’observation
de la nature. Ces règles, vous en avez probablement déjà entendu parlé. Il s’agit de la règle des tiers et de la règle du nombre d’or.
Présentons rapidement ces deux règles:
Ces règles sont des méthodes de placement du ou des sujets importants de l’image de tel sorte que la composition nous paraissent harmonieuse tout en restant dynamique. Le défaut du photographe débutant est de centrer ses sujets dans ses compositions. Ce type de choix n’est
pas mal en soi mais rend la composition statique et donc un brun ennuyeuse.
Voici où placer les centres d’intérêt d’une image selon ces deux règles de composition harmonieuse: (centres d’intérêts = quatre points dessinés)
Règles de composition
Le sens de lecture
Selon des études d’observations de type eyes-tracking, les personnes de culture occidentale parcourent une image de haut en bas et de
gauche vers la droite selon un trajet en Z. Ce n’est pas un hasard si les logos sur les documents ou les pages web sont souvent placés en haut
à gauche.
De même, il semble que la gauche de l’image se réfère au passé et la droite au futur.
Un personnage qui marche et qui se dirige vers la droite de l’image sera interprété comme une personne qui s’éloigne alors que si la personne
se dirige vers la gauche de l’image, on aura tendance à penser qu’elle revient sur ses pas.
Dans la même veine, un escalier nous semble descendre si il parcours l’image du coin haut-gauche vers le coin bas-droite et monter si il commence du coin bas-gauche et se termine au coin haut-droite.
sens de lecture
Le point de vue
Le changement du point de vue change la composition de l’image. En effet, la forme d’un objet ne sera pas la même si il est représenté ou
photographié selon deux points de vue différents.
Choisir un point de vue inhabituel peut montrer un objet banal sous un nouvel angle et changer le regard du spectateur sur cet objet.
En choisissant où vous placez l’horizon dans votre composition, vous changez l’expression de l’image. Un point de vue bas, inclue de façon
plus importante le premier plan et fait rentrer le spectateur du bas vers le haut de l’image. Un personnage pris en contre plongée lui donnera un
air dominateur. Inversement, un point de vue élevé vous détache de la scène. Vue de haut, un personnage semble plus petit et dominé.
L’échelle
Vous pouvez jouer avec l’échelle dans une composition à condition que vous donniez des indices visuels qui permettent à l’observateur d’apprécier cette échelle. En plaçant un objet connu sur l’image vous révèlerez par comparaison le petitesse ou le gigantisme des autres éléments.
Les éléments formels
Il s’agit du point, de la ligne, des courbes et des formes. Ces éléments, selon la façon dont ils sont placés, orientés, leur taille … n’expriment
pas la même chose. Par exemple, des lignes courbes expriment la douceur, la féminité alors que des lignes hachées expriment le cahot, le
désordre. Cela est aussi valable pour les formes. Un carré va exprimer l’ordre, la stabilité, la robustesse alors qu’un cercle va exprimer par
exemple l’équilibre, l’infini, le renouvèlement.
Lorsque plusieurs objets sont présents dans une composition, ils rentrent en relation, interagissent entre eux, se concurrencent ou s’équilibrent.
Des lignes optiques se forment sur lesquelles le regard peut se laisser guider. Ces lignes virtuelles sont de véritables lignes de force qui accompagnent l’observateur dans sa lecture de l’image. Vous pouvez vous en servir pour attirer l’attention de l’observateur vers un centre d’intérêt.
L’équilibre
Si vous êtes à la recherche d’une composition harmonieuse, vous allez essayer d’équilibrer votre composition. Il y a plusieurs paramètres qui
permettent d’équilibrer une composition: la répartition des tons, des couleurs, des objets. La répartition des objets sur les différents plans.
Le poids de chaque objet dans une composition va être influencé par sa taille, sa couleur, sa valeur. Les caractéristiques qui augmentent le
poids d’un objet sont l’importance de sa taille dans le cadre, l’assombrissement de sa valeur, son contraste, sa densité. Par exemple un petit
objet dense et sombre peut être équilibré par un objet plus grand mais plus clair placé en opposition par rapport à un axe central.
La symétrie
Nous sommes sensible à la symétrie car on la trouve en abondance chez les êtres vivants et dans notre anatomie. Cette symétrie quelle
soit radiale ou axiale apporte de la structure à l’image mais en revanche la stabilise au point de la rendre parfois trop statique, superficielle,
ennuyeuse.
La symétrie est aussi un bon moyen d’équilibrer une composition si c’est l’effet recherché.
Le relation entre le premier plan et le second plan
Vous pouvez, en jouant sur plusieurs plans, simuler la profondeur. Pour cela vous pouvez intervenir sur la profondeur de champs ou la superposition des objets. Arrangez-vous pour que les différents plans ne rentrent pas en concurrence. Un plan sera mis en avant si il est plus net que
les autres ou plus contrasté.
Les contrastes
Le contraste est un outil formidable pour retenir l’attention de l’observateur. Le contraste est basé sur une opposition entre deux objets. Sachez
qu’il existe plusieurs manière de le générer. Nous en reparlerons dans un article ultérieur.
Conclusion
La composition est une notion incontournable de l’expression graphique qui vous aide à donner du sens à vos images ou à raconter une
histoire. Plusieurs facteurs sont à prendre en compte pour vous aider dans cette tâche mais avant de composer votre image réfléchissez à ce
que vous voulez exprimer.
Sources:
- Ouvrage « Composition » de David Präkel – Edition La compagnie du livre.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------6.Hiérachisation
Sur une page web, les informations n’ont pas le même poids visuel afin que l’internaute puisse facilement scanner le contenu. Grâce à la
hiérarchisation de l’information, le graphiste va pouvoir attirer l’attention de l’observateur vers les éléments clefs de sa mise en page.
Introduction
Nous connaissons tous le sens du mot « hiérarchie » puisqu’il fait référence à une notion qui s’exerce dans de nombreux domaines de notre vie
sociale et professionnelle. Mais savez-vous de quoi il s’agit lorsque l’on parle de « hiérarchie » en design web ?
Le mot « hiérarchie » désigne le fait d’instaurer, par différents procédés graphiques, un classement par ordre d’importance des éléments d’une
page web. C’est un outil précieux du langage graphique qui permet de classer et d’organiser le contenu. La mise en place d’une hiérarchie
visuelle met en évidence des points d’ancrage sur lesquels l’utilisateur va pouvoir s’appuyer pour scanner rapidement la page et comprendre
de quoi il s’agit. Cela va contribuer à contrôler la transmission et l’impact du message. Sans hiérarchie visuelle, le contenu devient fade et
difficile à parcourir.
Hiérarchisation du contenu web
Sur une page web on peut avoir besoin de placer beaucoup de choses: un logo, un menu de navigation, des menus secondaires, des
informations de contact, des liens hypertextes, des titres, des sous-titres, des paragraphes de textes, des fonctionnalités diverses (moteur de
recherche, pannier e-commerce, formulaires …). Imaginez comment tous ces éléments peuvent avoir du sens pour l’utilisateur si tout est traité
de la même manière visuelle (même police, même taille, même couleur …). Comment retrouver une information dans une pile d’informations
uniformes ?
Grâce à la hiérarchisation de l’information, vous allez pouvoir mettre en place une distinction entre les différents éléments de la page ou au
contraire exprimer une similarité entre plusieurs d’entre eux. Vous allez également pouvoir transmettre la relative importance des éléments les
uns par rapport aux autres. En opérant ainsi vous allez commencer à donner du sens à votre contenu et faciliter la lecture de la page.
Illustrons nos propos avec un exercice simple. Recherchez dans ces deux présentations, dont le contenu est strictement identique, l’information
suivante: quelles sont les trois couleurs primaires du système additif ?
contenu texte sans hiérarchie
contenu texte avec hiérarchie
Dans laquelle de ces deux présentations avez vous trouvé l’information le plus facilement et le plus rapidement ?
Contraste et hiérarchisation
Tout est une histoire de contraste. L’école Allemande de design Bauhaus du début du siècle (1919) préconisait déjà l’utilisation du contraste
pour capturer et retenir l’attention de l’observateur.
Pour établir une hiérarchie visuelle dans une composition, il faut jouer avec des techniques graphiques qui vous permettent de mettre en
place du contraste entre les éléments. La mise en place de contraste va déterminer l’ordre dans lequel les utilisateurs vont percevoir et donc
appréhender l’information visuelle.
Comme nous l’avons vue dans les exemples précédents, si tous les éléments sont similaires, il n’y a pas de progression logique du regard à
travers le contenu et vous parcourez ce contenu de façon confuse. Si par contre des éléments plus larges que les autres se distinguent de la
masse, votre attention est tout de suite attiré par ces éléments.
Pour qu’un élément soit remarquable, il faut qu’il se distingue des autres. Cela ne peut se faire que si une partie des autres éléments restent
relativement neutres. En effet, si le graphiste cherche à rendre remarquable tous les éléments, le résultat donnera l’effet inverse.
Voici, à travers des exemples, différentes manières de créer du contraste pour mettre en place une hiérarchie visuelle dans votre composition:
La taille
contraste par la taille
Les tailles du logo et de l’encadré de gauche sont telles qu’elles attirent immédiatement notre attention. Ces deux éléments prennent une
position dominante dans la hiérarchisation de la mise en page.
La texture
contraste par la texture
Pour distinguer le menu actif, le graphiste a utilisé dans cet exemple un contraste de texture.
La forme
contraste par la forme
La forme des rectangles qui contient les items du menu principal est la même pour tous les items sauf pour celui de la rubrique active. Ce
contraste de forme permet à l’internaute de savoir immédiatement dans quel rubrique il se trouve.
La couleur
contraste par la couleur
Ce menu latéral est traité avec trois couleurs différentes. Un seul item est rouge. Cet item rouge est le plus important hiérarchiquement car il
indique le thème de la page courante.
La position
contraste par la position
En décalant le paragraphe vers la droite, le graphiste créer un contraste de position qui le détache du reste du texte.
L’orientation
contraste par la position
L’ensemble des textes de cette page sont horizontaux sauf le libellé « SERVICES » qui est orienté verticalement. La lecture verticale est généralement déconseillée par les recommandations ergonomiques mais ici, la taille du texte est suffisamment grande pour offrir une lisibilité du mot
acceptable. Cette particularité dans la page retient notre attention sur le mot « Services ».
La valeur
contraste par la valeur
Même avec une palette de couleur monochrome, vous pouvez créer de l’emphase en jouant sur les valeurs de gris. Le mot « LABEL » ressort
ici parfaitement du menu.
La saturation
contraste par la saturation
Cette page est une mosaïque de vignettes sur lesquelles il est possible de cliquer. Toutes les vignettes sont complètement désaturées. Au passage de la souris, la vignette devient colorée et se distingue alors des autres. En passant la souris sur une vignette, celle-ci devient un cours
instant la vignette hiérarchiquement la plus importante puisque vous êtes susceptible de cliquer dessus.
La netteté
contraste par la netteté
Le graphiste a voulu ici attirer notre attention sur le carré central en rendant les autres carrés flous.
Hiérarchisation et parcours de lecture
exemple de plusieurs contrastes et hiérarchisation
Voici une page web utilisant plusieurs types de contrastes (couleur, taille, valeur …) pour hiérarchiser l’information contenu dans sa mise en
page. Nous voyons bien que certains éléments attirent plus notre attention que d’autres. Par exemple le header possède un arrière plan texturé, un logo de grande taille avec une typographie de couleur rouge, couleur que l’on retrouve dans l’onglet actif du menu. Ces caractéristiques
jouent un rôle sur la façon dont nous allons scanner cette page. Nous somme davantage attiré par le contenu du header au premier regard que
par le contenu texte des paragraphes situés plus bas.
Cette hiérarchisation des éléments nous conduit à appréhender les informations de cette page dans un certain ordre et selon un parcours
visuelle bien définie que j’ai tracé ci-après en bleu et numéroté par ordre de progression.
flux de lecture mis en place par le hiérarchisation
Conclusion
Les préoccupations de hiérarchisation interviennent dès les premières phases de conception du site. Par exemple lors du zoning, il est
important de déterminer quelles seront les zones de contenu et les grandes fonctionnalités qui devront prendre de l’importance dans la mise en
page. Il faudra penser à placer ces éléments au dessus de la ligne de fold (ligne virtuelle en dessous de laquelle il est nécessaire de scroller
pour voir le contenu de la page), ensuite le graphiste devra mettre du contraste sur ces éléments pour qu’ils se distinguent dans la composition.
De cette manière, vous proposez au visiteur une espèce de « visite guidée » censé l’aider à scanner la page pour trouver ce qu’il cherche.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------7.Gestalt
Le mot Gestalt qui signifie « forme » en Allemand est aussi une théorie qui définit un certain nombre de lois sur la perception humaine. Nous
allons voir dans cet article comment certaines de ces lois peuvent être utilisées dans le langage graphique.
Introduction
Pour faire simple, la Gestalt est une théorie, une école de pensée, qui étudie comment les humains perçoivent les choses. Les théoriciens de la
Gestalt prêchent que notre perception ne se concentre pas sur des « points isolés », mais par une vision du « tous ».
Lorsqu’un observateur regarde une composition graphique, il a tendance à ordonner les éléments de cette composition afin de faciliter et clarifier leur lecture. Notre cerveau organise, interprète et classe les éléments afin de simplifier la complexité visuelle de notre environnement. Cette
simplification s’effectue en regroupant les entités qui présentent des caractéristiques communes.
La Gestalt s’intéresse à la façon dont ces groupes sont formés et comment ceci affecte notre perception. En connaissant certaines lois de la
Gestalt, le graphiste va être en mesure de comprendre et d’appliquer ces principes pour créer l’unité, la variété ou l’équilibre dans ses visuels.
Les lois de la Gestalt
Simplicité
Devant un problème visuel notre cerveau cherchera toujours la solution la plus simple parce que le monde est visuellement si complexe qu’il
n’est tout simplement pas possible d’en extraire toute l’information sans une simplification préalable. Notre esprit a donc tendance à exclure la
complexité au profit de la simplification afin de reconnaître des formes simples et à les relier.
Ce penchant vient probablement de l’urgence à différencier les situations dangereuses des situations bénignes. Le raccourci nous fait alors
gagner un temps précieux pour réagir à une situation si celle-ci le nécessite.
En utilisant le concept de simplicité nous pouvons assembler des éléments identiques pour créer une unité. Par exemple, une surface rempli
d’un motif composé de carrés identiques, sera perçue par notre cerveau comme une surface unitaire et non comme une multitude de plusieurs
petits carrés. Dans la même idée, lorsque vous regardez un parc, vous voyez une pelouse verte et non tous les brins d’herbes individuellement.
Principe de proximité
Le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à
côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner
comme un tout.
Illustration du principe de proximité
proximité
Application du principe de proximité en webdesign
Lorsque vous composez une page web, certains éléments ont des liens entre eux. Une manière efficace de le montrer est d’appliquer ce
principe de proximité. Pour illustrer cela, observons des exemples pris sur le web.
proximité non application
Voici le programme ciné d’un grand groupe de cinéma Français. Le titre des films est placé à égale distance des paragraphes de contenus
texte se trouvant au dessus et en dessous. Cela ne facilite pas la lisibilité du programme car l’œil hésite à associer ce titre à l’élément du bas
ou ou à l’élément du haut.
proximité bien appliquée
En établissant une proximité entre le titre et son contenu texte on aide l’observateur à faire des regroupements qui facilite la lecture du programme ciné.
Principe de similarité
Le cerveau a tendance à regrouper des éléments qui se ressemblent. Si par exemple tous les éléments d’une composition sont à égales
distances, le critère de regroupements se fera sur la ressemblance des éléments. Cette ressemblance peut être une ressemblance de forme,
de couleurs, de texture, de taille …
Illustration du principe de similarité
similarité
Application du principe de similarité en webdesign
application similarité
Sur cette copie d’écran, les 3 éléments réunis sous le titre « How to use Product Planner » sont traités de façon similaire sur le plan graphique.
Cela permet à notre esprit de regrouper ces 3 éléments comme faisant partie du même groupe. Ces trois encadrés ayant un lien (ils se rattachent tous les 3 au thème « How to use Product Planner »), le graphiste a joué sur le principe de similarité (même traitement graphique) pour le
communiquer à l’observateur.
similarité application
Sur cette page web du site d’Apple, le principe de similarité a également été appliqué. Il nous permet de distinguer 6 groupes distincts que j’ai
numéroté en rouge.
A noter que lorsque les principes de proximité et de similarité sont appliqués en même temps, l’effet de regroupement est renforcé.
Principe de continuité
On parle aussi de principe d’alignement pour parler du principe de continuité.
Si des éléments d’une composition présentent un ordonnancement formant un parcours régulier et directionnel, le cerveau tracera une ligne
optique imaginaire qui reliera ces éléments entre eux. Notre regard a tendance à suivre un chemin régulier pour mettre en rapport des formes
présentent dans une composition. Si un élément majeur s’interpose entre des éléments contigus, la ligne optique est rompue.
Cela permet par exemple de diriger l’attention de l’observateur d’un point de la composition vers un autre. En effet, une fois que notre œil
regarde dans une direction, il aura tendance à suivre cette direction jusqu’à ce qu’il rencontre un élément significatif. En photographie, on parle
de lignes de forces et de points focales. Le photographe utilise souvent des alignements dans sa composition (routes, rivières, lignes électriques, rangée d’arbre …) pour guider le regard vers le sujet principal.
Illustration du principe de continuité
continuité
Application du principe de continuité en webdesign
continuité application
Cette copie d’écran présente la page d’accueil d’un site pour un restaurant. Quoi de plus important pour un restaurant que de montrer ses
spécialités culinaires ? Ici, le designer à mis en évidence la photographie d’un plat de la carte du restaurant en choisissant un arrière plan
neutre (photographie noir et blanc) sur lequel la photographie en couleur se détache bien. L’attention de l’observateur sur cette photo de plat
est renforcé par un principe de continuité. En effet, l’alignement des chaises et des tables (flèche blanche) de la photo d’arrière plan dessine
dans notre esprit une ligne optique virtuelle qui conduit le regard vers la photographie du plat.
continuité application
Sur le site de Mark Boulton, j’ai dessiné à l’aide de lignes rouges, l’alignement des éléments. Ces alignements ont probablement été mis en place par l’utilisation d’une grille de mise en page. En glissant le long de ces lignes virtuelles, les alignements aident le regard a circuler facilement
dans la page.
Principe de fermeture
Le cerveau aime regrouper des formes de façon à constituer des ensembles visuels fermés et cohérents. Le cerveau est capable de reconnaitre un sujet avec seulement quelques lignes bien esquissées.
En dessin stylisé l’artiste ne trace que quelques lignes et courbes, pourtant nous sommes capables de reconnaitre de quoi il s’agit. C’est de
cette manière que l’artiste implique l’observateur dans son œuvre, en incitant son regard à imaginer ce qui manque pour reconstituer le sujet.
Retenez que ce n’est pas la quantité mais la qualité des informations visuelles qui vous permet de lire une composition graphique.
Illustration du principe de fermeture
gestalt principe de fermeture
Application du principe de fermeture en webdesign
Application du principe de fermeture
Ce site à pour thème le golf. Le tracé en arc de cercle de l’arrière plan évoque facilement une balle car notre regard complète le dessin pour
visualiser un cercle complet.
Application du principe de fermeture
Sur le site Amaztype, une animation Flash construit progressivement un mot avec une accumulation d’images. Ici le mot suggéré est le mot «
TASCHEN ». Bien que le mot ne soit pas achevé, nous n’avons aucun mal à reconnaitre et à lire ce mot. Ce phénomène est possible grâce au
principe de fermeture.
Principe de la prégnance
La prégnance ou principe de la « bonne forme » est le principe selon lequel les éléments s’organisent en une forme plutôt qu’en une autre et de
ce fait s’impose à l’esprit pour faire apparaitre une forme connue. Étant habitué aux figures géométriques, nous auront tendances à regrouper
sous une même forme plusieurs objets disparates s’ils sont placés de manière suffisamment évocatrices. C’est cet effet qui nous permet par
exemple de voir dans les étoiles, des triangles, des trapèzes … Ce principe s’applique par exemple lorsque vous reconnaissez des objets en
observant les nuages. D’un individu à l’autre, pour un même groupe de nuages, l’objet reconnu ne sera pas forcément le même. En effet, il y a
quelque chose de très personnel et subjectif dans cette reconstitution, car elle fait référence à nos expériences qui sont uniques pour chaque
individu.
Illustration du principe de la prégnance
Gestalt principe de pregnance
Exemple du principe de la prégnance
principe de gestalt prégnance
Application du principe de l’expérience passée en webdesign
application du principe de prégnance
Sur cette magnifique photographie de Mehmet Ozgur, on peut reconnaitre le corps d’une femme dans une volute de fumée. Si vous avez fait
vœux de chasteté, peut être aurez-vous un peu plus de mal à reconnaitre le corps dont je parle. En tout cas, cette image est une belle illustration de notre capacité à appliquer le principe de l’expérience passée.
logo carrefour
La loi de prégnance est fréquemment utilisée dans la conception des logos car elle apporte un côté trompe l’oeil qui captive le spectateur. Dans
le logo « Carrefour » par exemple, l’union des deux formes rouge et bleu dessine un « C » imaginaire correspondant au « C » de Carrefour.
Conclusion
Les lois de la Gestalt sont des principes simples à comprendre et tous peuvent être appliqués dans vos design web. Certains d’entre eux
comme les lois de proximité et similarité sont des fondamentaux pour améliorer le confort de lecture des pages de contenu. D’autres comme
les principes de fermeture ou de prégnance sont des moyens astucieux pour éveiller l’imagination des spectateurs et retenir leur attention.
Sources :
- Ouvrage: « Graphisme et ergonomie des sites web » – Cristina Barroca – Edition Dunod
- Site http://www.desenvolvimentoparaweb.com
- Article « Gesalt » du site http://daphne.palomar.edu
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------8.A quoi sert le design web ?
A quoi sert le design dans le web ? Cette question pourrait sembler naïve. Cependant, il me semble intéressant d’essayer d’y répondre car
l’idée que l’on se fait du design se limite trop souvent autour de considérations esthétiques.
Introduction
Une fois de plus, je ne parlerai dans cet article que du design web.
Tout le monde, et c’est bien normal, ne possède pas de connaissances approfondies du design graphique et n’a pas forcément acquis une
culture visuelle pointue.
C’est pourquoi bien souvent, le design est perçu par la majorité des gens comme un simple acte de décoration. L’appréciation du travail du designer se concentre alors autour d’un seul critère : la beauté. Les néophytes se posent généralement l’unique question : « Est-ce que c’est jolie
? » et les commentaires se limitent trop souvent autour de remarques subjectives du style « je n’aime pas, il y a quelque chose qui me gène, et
puis le jaune me fait trop penser au site de La Poste ».
Juger un design web en ne prenant en compte que l’aspect esthétique est une démarche trop simpliste et périlleuse. Rien ne vous garantit que
vos préférences esthétiques (couleurs …) feront l’unanimité auprès de vos utilisateurs. Faites vous un site uniquement pour satisfaire vos goûts
personnels ou pour communiquer avec l’ensemble de vos internautes tout en leur offrant une bonne utilisabilité ? Nous savons tous que « les
gouts et les couleurs » sont basés sur des considérations qui nous sont propres et sont donc aussi variables qu’il existe d’individus. Le philosophe, historien et économiste David Hume, au XVIIIe siècle, a écrit : « La beauté n’est pas une qualité inhérente aux choses elles-mêmes, elle
existe seulement dans l’esprit qui la contemple, et chaque esprit perçoit une beauté différente ». Obtenir un accord unanime sur ce seul critère
est donc une utopie, et c’est « tant mieux » car que serait la diversité de notre environnement si nous aimions tous les mêmes choses ?
La beauté
Il semble que l’homme ait une conscience collective plus ou moins précise de ce qui est beau et de ce qui ne l’ai pas. En effet, bien souvent les
critères de beauté sont issus des canons que l’on rencontre dans la nature (couleurs, symétrie, proportions, harmonie, équilibre …). Tous ces
éléments nous servent de références inconscientes dans nos jugements esthétiques.
Cependant, pour chaque individu, s’ajoutent des facteurs culturelles, sociologiques, historiques et philosophiques qui enrichissent et complexifient l’idée que chacun se fait de la notion de beauté.
Pour rappel, voici une définition de la beauté trouvée sur Wikipédia :
« Le beau est communément défini comme la caractéristique d’une chose qui au travers d’une expérience sensorielle (perception) procure une
sensation de plaisir ou un sentiment de satisfaction ; en ce sens, la beauté provient par exemple de manifestations telles que la forme, l’aspect
visuel, le mouvement, le son, la saveur, l’odeur. »
On voit à travers cette définition à quel point la notion de beauté peut être abstraite et dépendre aussi de la perception d’un individu.
On peut aussi penser que la notion de beauté s’apprend. Je pense que notre sensibilité au beau se développe avec ce que l’on a l’habitude
de voir. C’est l’une des raisons pour laquelle on trouve de la beauté dans la nature. En effet, n’est ce pas l’environnement dans lequel l’homme
a évolué depuis son origine. De même les critères de beauté féminine du 21 ème siècle, ne sont ils pas dictés et acceptés par le biais d’un
matraquage publicitaire dont nous faisons l’objet quotidiennement ? Il y a donc aussi une forme d’éducation à la beauté par imprégnation. Les
artistes, les designers, les publicitaires, les photographes, les créateurs ont donc une responsabilité importante et jouent un rôle non négligeable dans cette éducation à la beauté.
Bref, la beauté est un concept complexe et abstrait. Il n’est pas évident que NOTRE perception de la beauté soit partagée par l’ensemble des
individus. C’est la raison pour laquelle il est important de ne pas prendre l’esthétisme comme unique critère de jugement dans l’appréciation
d’un design web.
Attention, je ne suis pas en train de dire qu’il faut accepter un site que vous trouvez inesthétique, je dis seulement qu’il faut parfois se méfier de
son propre jugement en terme d’esthétisme et qu’il faut ouvrir son appréciation à d’autres critères que celui de la couleur par exemple.
Les fonctions du design dans le web
Qu’est ce qu’un bon design web et qu’est ce qu’un mauvais design web? Pour en juger il faut connaitre les fonctions réelles et les objectifs du
design web (cependant pour avoir une première idée de ce qu’est un mauvais design web, allez faire un tour sur MySpace ou SkyBlog). Il faut
également prendre conscience qu’un site web est à la fois une interface, un ensemble d’informations et un visuel que le design va s’efforcer
d’optimiser à travers l’utilisation de différentes techniques et une démarche créative.
Voici une liste non exhaustive des fonctions principales du design dans le web :
1. Faciliter l’utilisation de l’interface web
Les sites internet sont des interfaces. L’utilisateur manipule des éléments interactifs qui déclenchent des changements. Je clique sur l’item d’un
menu, la page initiale disparait pour laisser place à une autre page de contenu. Cette interactivité doit être pensée de manière à ce qu’elle soit
le plus compréhensible possible. Cette reflexion est généralement prise en charge par les ergonomes avec une collaboration des graphistes.
En effet l’ergonomie et le graphisme sont des disciplines complémentaires qui peuvent collaborer pour améliorer l’expérience utilisateur.
Alors que l’ergonome va imaginer la façon la plus simple et la plus évidente de proposer une fonctionnalité, le graphiste va amplifier ce concept
en favorisant graphiquement la suggestivité de l’utilité d’un élément. Le design peut donc être un élément déterminant pour améliorer l’affordance d’un objet ou d’une fonctionnalité.
2. Mettre en valeur l’information
Un site web est un support qui permet d’afficher de l’information sous forme de divers contenus (texte, image, son, vidéo …). Le design web à
donc aussi pour rôle de designer cette information pour la rendre la plus lisible et compréhensible possible. Pour y parvenir, il est nécessaire
de trier, classer et organiser ce contenu. C’est le rôle de l’architecture d’information. Le designer interviendra également dans l’organisation
de l’information, la hiérarchisation, la mise en place de relations entre des ensembles de contenu ou au contraire pour les distinguer. Alors
que l’architecture d’information interviendra sur l’organisation physique et spatiale du site, le designer organisera le contenu par des procédés
graphiques comme l’alignement, le respect des principes de la Gestalt …
3. Mettre en place une esthétique
Oui, l’esthétisme joue aussi un rôle important. Nous avons vue dans la définition de la beauté que celle-ci procurait une sensation de plaisir à
travers les sens. Un web design esthétique procure donc une certaine satisfaction à l’internaute ce qui améliore son expérience et sa perception du site.
L’esthétisme d’un site ne s’obtient pas uniquement par le choix d’une palette chromatique. L’harmonie, l’équilibre, les espaces améliorent également la beauté d’un site, tout comme la cohérence, la hiérarchisation, le choix pertinent d’images et d’illustrations de qualités, la typographie
etc.
Ce qui est donc important de retenir, c’est qu’un bon design web ne se base pas uniquement sur des critères esthétiques mais avant tout d’efficacité. Un design web efficace organise des éléments graphiques qui communiquent une information à un groupe de personnes ciblé. Pour
cela, le design web utilise un langage visuel dont je reparlerai dans de prochains articles.
4. Communiquer
4.1. Créer/refléter une identité
Toute entité (publique, associative, privé …) a besoin de se construire une identité propre pour exister, être reconnu et se distinguer des autres.
Une identité permet également de fédérer un ensemble d’individus (collaborateurs, clients, prospects, partenaires …) qui se reconnaissent
dans l’image et les valeurs que renvois cette identité.
Une identité bien définie améliore la crédibilité d’une entité et développe son capital confiance auprès des individus.
Un design web doit refléter l’identité d’une entité si celle-ci est déjà définie dans d’autres supports de communication. C’est souvent le cas
lorsqu’une entreprise décide de mettre en place un site vitrine ou de e-commerce par exemple.
Dans d’autres cas, le design web devra créer une identité neuve : site pour annoncer un évènement ou le lancement d’un nouveau produit …
Il s’agira alors d’étudier attentivement la concurrence pour trouver les éléments de distinction qui permettront au design web d’élaborer une
identité unique et originale. L’identité pourra également transmettre une ambiance, des valeurs ou un message.
4.2. Offrir une expérience sensorielle, émotionnelle
Un design web est une composition subtile de photographies, d’illustrations, de couleurs, une ambiance, une atmosphère, des métaphores…
bref tout un langage graphique non verbal qui procure des sensations visuelles, voir auditives. Tous ces éléments peuvent faire ressurgir, chez
le visiteur, des souvenirs, des émotions et des sensations lui permettant de (re-)vivre une expérience particulière qui fera qu’il adhèrera ou pas
à l’univers qu’on lui propose.
Ce type d’expérience est particulièrement mis en avant sur des sites de type « lancement de produits » ou des sites de grandes marques qui
souhaitent obtenir l’adhésion d’une certaine cible d’internautes par identification à un univers et aux valeurs qu’il transmet.
4.3. Apporter de la valeur ajouté au contenu
Le contenu texte d’un site peut être renforcé par des illustrations, des photographies, des schémas, des pictogrammes. Parfois une seule illustration peut exprimer ce que le texte n’arriverait pas à exprimer avec une centaine mots. Chacun sait à quel point la concision est importante
sur le média web, le confort de lecture étant moindre que sur support papier. Dans ce contexte, le langage non verbal du design web apporte
donc une valeur ajouté précieuse. Cependant souvenez-vous que le design web n’est pas du maquillage et par conséquent ne pourra pas
masquer un mauvais texte ou un mauvais contenu.
4.4. Professionnaliser l’image
L’être humain est sensible à l’apparence visuelle des choses. Dans un design web, la qualité, la cohérence graphique, la finition, une interface
bien structurée transmettront indéniablement une impression positive à votre site, un sentiment de fiabilité. Le ressenti de l’internaute se fera
dès les premières secondes, non pas sur la base du contenu (le texte, les fonctionnalités) mais du contenant (le design web). Ainsi, la fiabilité
de la forme (le contenant) aura un impact immédiat sur la fiabilité du fond (le contenu). Soigner le design web pour transmettre une image
professionnelle rassurera l’internaute et captera sa confiance.
4.5. Traduire une stratégie marketing : le message
Etablir une stratégie marketing permet de pérenniser les ventes en se différenciant de la concurrence, en répondant aux besoins des
consommateurs, en innovant. A partir de cette stratégie marketing, une marque où une entreprise définie donc un message que le design doit
communiquer clairement.
Le message, tel que nous l’entendons ici doit répondre à la question : « Qu’est ce que je propose comme bénéfice à ma cible ? »
Pour répondre à cette question, le message doit décrire les avantages de votre offre (produits, services), avantages qui correspondent aux
attentes de la cible. Le message doit également étayer les arguments qui justifient les avantages promis. Il peut s’agir de la description des
caractéristiques distinctes du produit ou du service.
Par exemple, l’argumentaire d’un message publicitaire est souvent construit à partir de trois éléments :
- Des éléments informatifs : De quoi s’agit-il ? Quel est la valeur ajoutée du produit, du service ?
- Un stimuli affectif : humour, décalage, érotisme, imaginaire, rêve, questionnement, choque … Le stimuli affectif éveille l’intérêt de la cible, joue
un rôle de séduction et établie un ancrage dans la mémoire. (C’est sous cette forme que la publicité nous manipule).
- Un engagement à l’action : incitation à appeler un numéro de téléphone, à remplir un formulaire, à visiter un magasin, à acheter un produit …
Le design va fédérer tous les éléments du message et créer une tonalité graphique en adéquation avec ce message.
Le design est donc un outil de communication pour :
- Attirer l’attention et réveiller notre interêt.
- Mettre en exergue un message particulier et le distinguer des autres parmi une multitude d’informations.
- Rendre le message plus percutant, plus efficace, plus mémorable.
- Réaliser la meilleure communication possible avec les éléments dont ont dispose.
Conclusion
Nous avons vue qu’il était réducteur de considérer le design web uniquement sous un angle esthétique. Le design web doit être évalué sur un
éventail plus large de critères pour en apprécier la pertinence.
Pour en faire prendre conscience aux commanditaires, il revient au graphiste d’expliquer que le design web se soucis davantage des besoins et
du profil de l’auditeur, de la cible, que de ses préférences et de ses goûts personnels (Attention, ce message n’est pas forcément facile à faire
passer, apprendre à communiquer fait aussi partie du métier de designer web). Le graphiste a également tout intérêt à expliquer sa démarche
créative au client pour le convaincre de la pertinence de ses choix. Enfin le graphiste doit avoir une écoute active du client afin d’apporter une
réponse adéquat à ses besoins.
Il faut également comprendre qu’un site se design différemment selon sa stratégie et ses objectifs. Un site institutionnel à vocation informative
ne sera pas abordé de la même manière sur le plan du design web qu’un site mis en place pour le lancement d’un produit de marque destiné à
une population « fashion ».
Pour conclure, un design web réussi ne suffit pas pour faire le succès d’un site. Celui-ci s’obtient en réunissant plusieurs disciplines que sont
par exemple, outre le design, l’ergonomie, l’architecture d’information, la pertinence du contenu, la performance de la bande passante, le
référencement, le marketing …
Sources et autres liens :
Article de Vincent Bénard sur les archives de site Veblog : A quoi sert le graphisme sur un site web
Pour aller plus loin :
Design Critiquing sur le blog « Veerle’s blog »
Under The Loupe #3: Critiquing sur le blog « Jason Santa Maria »
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Chapitre II : Méthodologie - jour 1 (2h)
1. La maquette graphique
2. Le contenu d’un site web
3. Mood board
4. La charte graphique
5. Le cahier des charges
6. Faire approuver son design
7. Zoning et wireframe
8. L’arborescence d’un site
9. Le brief créatif
-----------------------------------------------------------------------------------------------------------------------1. La maquette graphique
La création d’une maquette graphique intervient après un certain nombre d’étapes de préparations dont nous avons déjà parlé sur ce blog
(brief, zoning, wireframe, moodboard …). Je vais vous décrire dans cet article le process que j’utilise pour établir ces maquettes graphiques.
Introduction
La maquette graphique est l’aboutissement d’un long travail de réflexion effectué en amont. Elle est généralement attendu comme le Messie
par le client, car c’est l’élément qui va donner l’aperçu le plus fidèle du futur site.
Je crois qu’il est opportun d’essayer d’impliquer le client au processus de création. Par exemple, en travaillant avec lui sur l’élaboration du
moodboard. Si le client s’est fortement impliqué dans la recherche d’idées, il y a plus de chances qu’il valide la maquette finale, ayant lui même
participé à certains choix créatifs.
Attention cependant à rester maitre de la direction artistique car le graphiste professionnel c’est vous, c’est donc vous le plus compétant pour
faire les choix créatifs définitifs. Ne laissez donc pas le client jouer au designer et vous transformer en simple exécutant.
Si l’étape du moodboard a été sérieusement préparée et que la proposition a été validée par le client, un certain nombre de choix créatifs ont
déjà été décidés. Il vous reste encore pas mal de travail mais vous ne devriez pas avoir l’angoisse de la page blanche. Lorsque vous concrétisez votre création, n’oubliez pas de garder à l’esprit les lignes directrices qui ont été définies lors des réflexions préalables.
Le process
Le process de création que je vous propose ici n’est pas un modèle qui fait référence. C’est simplement une manière de faire parmi d’autres et
inspirée de ma pratique personnelle.
Reprendre les éléments du brief créatif
Si vous avez bien travaillé sur le brief créatif, vous disposez déjà d’indices sérieux pour décider du chemin que va prendre votre design. Vous
avez normalement définis avec le client un certain nombre d’objectifs auxquels le design va devoir répondre. Raisonner en terme d’objectifs
permet de rationaliser les choix créatifs. Cela vous aidera à écarter les évaluations purement personnelles en vous raccrochant lors de vos
justifications graphiques aux objectifs qui avaient été décidés.
Le moodboard
Une partie des choix créatifs peut se faire à l’étape du moodboard si vous décidez d’utiliser cette technique.
Pour trouver des idées, je commence par m’imprégner du brief créatif et de l’univers du client. Votre culture graphique et votre culture générale
vous aidera également.
Ensuite, je fais une espèce de brainstorming en écrivant sur une feuille de papier tous les mots qui me viennent à l’esprit: verbes, adjectifs,
couleurs, objets, références, images … Il est important de ne pas se censurer et d’écrire tout ce qui vous passe par la tête. Je laisse reposer
quelques temps et je complète ma liste au fur et à mesure que les idées surgissent. Pour trouver d’autres mots, il m’arrive de consulter la
définition du dictionnaire des mots que j’ai écrit ou de consulter un dictionnaire de synonymes.
Quand j’estime avoir fait le tour, je commence à trier ma liste. Je ne garde que les mots qui me semblent se rapprocher le plus du thème qui
m’intéresse.
Une fois ma liste triée, je commence une recherche sur les couleurs, les textures, les motifs, les illustrations et les photos. Tous ces éléments
doivent suggérer le thème de ma futur création graphique, les valeurs à mettre en avant, le message à faire passer, la tonalité graphique
choisie. Pour cela, j’essaye de mettre les mots de ma liste en image ou en couleur. Par exemple, si j’ai noté la mot « vitesse » et que ce mot me
parait coller au message graphique, je dessine ou je recherche des illustrations qui évoquent la vitesse.
Si je choisis d’utiliser une image d’arrière plan qui occupera une grande partie de mon design, j’établis généralement ma palette de couleurs en
allant piocher des teintes à la pipette dans cette image.
Le croquis
Rester devant son écran peut, à mon avis, devenir vite improductif à cette étape du process. Je pense que sortir une feuille et commencer
à gribouiller ses concepts sur le papier est plus productif. Je n’aime pas y passer des heures mais cela me permet de tester plusieurs idées
assez rapidement sans perdre du temps sur des détails techniques.
L’inspiration graphique
Pour stimuler ma créativité, j’aime bien parcourir les galeries de site web sur internet ou dans des ouvrages spécialisés. Le risque c’est de
proposer des choses qui se rapprochent de ce qui a déjà été fait. Pour être original, mieux vaut trouver ses idées ailleurs : magazines, affiches,
packaging, notre environnement … Si je vois une idée qui me séduit, je la mets dans un coin de ma tête ou je prends une photo. Lors de la
phase de création, j’essaye de reprendre cette idée et de l’interpréter à ma manière.
Travail sur écran
Je travaille sur un logiciel de traitement d’images bitmap. Certains préfèrent les logiciels vectoriels. A vous de voir.
Je me fixe une règle de nommage pour mes calques afin de m’y retrouver plus facilement par la suite.
Je regroupe mes calques par thème en fonction de leur emplacement sur la maquette : en-tête, menu, colonne latérale droite, pied de page
… Si vous travaillez sur Photoshop vous pouvez regrouper vos calques dans des dossiers. Gimp par contre, ne possède pas encore cette
fonctionnalité.
J’essaye de garder un maximum de calques car cela me donne plus de souplesse si je dois faire des modifications ultérieures. L’inconvénient
c’est que le fichier s’alourdit et que passé un certain nombre de calque, la manipulation devient moins rapide et la recherche du bon calque
fastidieuse. J’ai donc tendance à modulariser mes fichiers. Je fait un fichier par bloc ou entité significative. Ensuite, je fais une copie aplatie du
bloc et je la colle dans un fichier qui assemble tous les blocs de ma page, donnant l’aspect final de la maquette.
Sur le calque supérieur, je garde toujours l’image d’une grille en mode « Multiplier » (Gimp) qui me sert de repère pour ma mise en page. Cette
grille est constituée de colonnes, de gouttières et de modules dont je connais la taille en pixels. Cela me permet, par la suite, de facilement
coter ma maquette pour aider les intégrateurs à positionner les éléments et paramétrer leurs feuilles de styles. En plaçant cette grille sur un
calque à part, je peux rapidement la masquer ou modifier sa transparence.
Je garde toujours la version originale de mon fichier qui comporte les calques. Je peux en avoir besoin pour décliner les autres pages du site
ou pour effectuer des modifications à la demande du client. Je fournis aux intégrateurs une version aplatie épurée des calques de texte et
parfois une version avec les côtes en pixels et les codes couleurs.
Une fois la maquette terminée, je m’en éloigne quelques temps pour y revenir plus tard. Il arrive que des choses que je n’avais pas remarqué
lors de la phase de création, me choquent lors d’un second regard. J’effectue alors quelques corrections.
Exemples de livrables (maquettes graphiques) pour l’intégration issus du projet jing-inteactive :
> Maquette graphique : aspect finale
Maquette finale
> Maquette graphique sans le contenu dynamique
Maquette sans le contenu texte
> Maquette graphique livrée avec des informations pour l’intégration (grille placée en transparence)
Maquette avec mesures des marges
Préparer un argumentaire
Lorsque vous allez présenter votre maquette, il va falloir être capable de justifier vos choix créatifs.
Lorsque j’estime que ma maquette est terminée, je rédige un petit texte qui explique ma démarche et les raisons de mes choix créatifs.
Pendant cette phase, je vérifie que mon discours est en accord avec les informations du brief créatif. Pour réussir cette étape il faut se poser la
question : « En quoi mes choix graphiques répondent aux objectifs fixés lors du brief créatif ? »
Conclusion
Ce process correspond à ma façon de travailler lorsque les conditions (temps, budget) sont idéales (ce qui est rarement le cas, il faut bien
l’avouer). Lorsque le temps manque, certaines étapes de ce process passent à la trappe. C’est dommage car c’est la qualité du travail qui en
pâtit mais lorsque les budgets sont serrés vous n’avez pas beaucoup le choix.
Chacun doit trouver la méthode de travail qui lui correspond le mieux. Elle peut être très éloignée de celle que je viens de vous présenter mais
cela n’a aucune importance du moment que vous vous y retrouvez.
Les étapes décrites ci-dessus sont réalisables dans de bonnes conditions si le délai dont vous disposez est raisonnable. Bien souvent, les
clients, pour économiser de l’argent, réduisent ces délais. A vous de leurs faire comprendre avec diplomatie, que la qualité de la prestation ne
sera pas la même selon la durée de l’échéance dont vous disposerez.
Pour résumer, présentez ces équations à votre client :
Bonne qualité + travail rapide = prix très élevé
Bonne qualité + prix bas = beaucoup, beaucoup de temps
Bonne qualité + prix correct = temps raisonnable
Bonne qualité + prix bas + travail rapide = croire au Père Noël
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2. Le contenu d’un site web
Vouloir créer un site web est une chose, savoir quel contenu il contiendra en est une autre. Le contenu d’un site web est sa raison d’être. Sans
contenu, pas de site. La préoccupation du contenu n’est donc pas à prendre à la légère.
Introduction
La décision de créer un site web, qu’il s’agisse d’une association, d’une entreprise privée, d’une administration, d’un organisme est souvent motivé par le souci d’être présent sur la toile. Ne pas être présent sur internet, c’est risquer de renvoyer à ses utilisateurs, à ses clients une image
un peu ringarde.
C’est pourquoi beaucoup de site web existent parce qu’il faut être présent sur internet mais dont le contenu laisse à désirer et ressemble à une
juxtaposition d’informations sans liens ni objectifs bien définis.
Pour concevoir un site efficient, il faut passer du temps sur la définition, les objectifs, l’organisation et la rédaction de son contenu afin de répondre à un véritable besoin des utilisateurs.
Le contenu est roi et constitue la véritable richesse de votre site. Le site n’est qu’une enveloppe qui doit se mettre au service du contenu pour le
mettre en valeur. Il serait donc absurde de construire un site sans savoir quel contenu on va y mettre.
Prenons une analogie. Imaginez une famille qui veut faire construire une maison pour y vivre de la façon la plus confortable possible. Cette
famille est constitué d’un couple, des ses trois enfants et du grand-père. Avant de construire, la famille va réfléchir avec un architecte sur les
plans de la maison. Ils prévoient à l’étage 3 chambres pour les enfants, et deux chambres en rez-de-chaussé pour le couple et le grand-père.
Ainsi le grand-père n’aura pas d’escalier à monter et les parents seront à l’abri de l’agitation des enfants. Le garage est prévu suffisamment
grand pour accueillir un atelier, un sellier et les deux voitures du couple. Au vu de la composition de la famille (par analogie le contenu) la maison (par analogie le site) est prévue pour rendre la vie de la famille la plus confortable possible avec une organisation spatiale adapté.
Imaginons maintenant que la maison soit construite sans réflexion préliminaire mais avec des chambres, un garage … Lorsque le couple veut
s’y installer, il se rend compte que la deuxième voiture dépasse du garage, que la maison ne comporte que 4 chambres en étage et que les
murs sont tapissés de moquette alors que le petit dernier est allergique à la poussière.
Bref c’est l’enfer, le grand-père tombe des escaliers en se rendant aux toilettes, les enfants réunies dans la même chambres se tapent dessus
toute la journée et le père de famille perd son boulot suite à une dépression nerveuse.
Créer un site sans se préoccuper du contenu, c’est mettre la charrue avant les bœufs.
Quel contenu mettre dans son site ?
Pour déterminer la pertinence d’un contenu, il faut se concentrer sur ses objectifs et les besoins de l’utilisateur. Pour cela procédez par étapes.
(Ces étapes sont largement inspirées de la méthode proposée par Vincent Bénard sur le site Veblog dans l’article « Comment choisir les
contenus de votre site web ?« . Je vous propose ici une retranscription personnelle. N’hésitez pas à aller faire un tour sur les archives du site
qui sont pleines d’enseignements malgrè l’arrêt du blog depuis plusieurs années « )
Étapes de réflexion pour définir son contenu :
1. Quels sont les objectifs du site auprès de vos utilisateurs ?
La première question à se poser est « A quoi va servir mon site, qu’est ce qu’il est censé proposer aux utilisateurs ? »
Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de l’utilité globale de votre site, c’est à dire de l’objectif principal du site qui est généralement déterminé par l’idée qui a sous tendu la création du site. Cela peut être : vendre ma production de fromages,
trouver un gite en France, présenter le programme de formation de ma société, fournir des informations techniques pour les ingénieurs de mon
service production …
Pour trouver les objectifs de votre site, ne pensez pas en terme de moyen mais en terme de finalité. Penser finalité c’est par exemple se dire:
« Mon site doit me permettre de vendre mes produits, de fédérer une communauté autour d’un sujet, de collecter des adhésions pour mon
association, de fournir des informations pratiques aux citoyens, d’améliorer le service après vente, me face économiser des frais d’impression
de documentation … » penser moyen, c’est se dire: « Mon site doit être moderne pour plaire à mes utilisateurs technophiles, mon site doit être
rapide pour répondre aux sollicitations d’un maximum d’internautes … »
Il peut y avoir plusieurs objectifs mais il existe toujours un objectif principale qui correspond à l’utilité générale du site. Si vous définissez plusieurs objectifs, énumérez les tous puis classez les par priorité. L’utilité globale du site doit se trouver en tête des priorités.
2. Quelles actions souhaiteriez-vous proposer à vos utilisateurs ?
La seconde étape consiste à réfléchir sur les actions que vous souhaiteriez que vos utilisateurs effectuent sur votre site. Pour cela il faut penser
« verbes ». Je souhaiterais que l’utilisateur :
- Achète mes produits
- S’inscrive dans mes formations
- Lise les actualités de la commune
- Consulte les réalisations de mon portfolio
- Saisisse une demande de devis
- Télécharge les notices d’utilisations de mes produits
- S’abonne à notre magazine …
La aussi, pensez finalité et non moyen.
3. Quels sont les éléments qui vont favoriser ces actions ?
Il s’agit maintenant de déterminer quel petit plus (en terme d’utilité) vous allez pouvoir offrir à vos utilisateurs pour résoudre leurs problèmes,
leur faciliter la tâche, leur fournir l’information dont il ont besoin… Vincent Bénard appel ce petit plus un « déclencheur ». C’est ce déclencheur
qui va favoriser l’action souhaitée de la part de l’utilisateur.
Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de micro utilité. Les micro utilités viennent compléter l’utilité
globale pour offrir à votre service une valeur ajouté. Il s’agit de ces petits bonus qui vont se mettre au service de votre utilité globale. Vous avez
quelque chose à proposer, comment faire pour que votre offre soit la plus adaptée possible aux besoins de l’utilisateur. Quelle utilité complémentaire vais-je pouvoir proposer à mon utilisateur pour le satisfaire un maximum.
Cela peut être par exemple sur un site de e-commerce de produits alimentaires, la possibilité d’enregistrer des listes de courses personnalisées
pour ne pas à refaire son panier à chaque commande. L’utilité globale du site est de permettre l’achat de ses courses alimentaires en ligne, une
micro utilité est de pouvoir enregistrer sur son compte une liste de produit fréquemment achetée que l’on réactive à chaque nouvel achat pour
remplir directement son panier des produits de bases que nous consommons à chaque commande.
Pour trouver des micro utilités (éléments déclencheurs des actions souhaités), il faut être capable de déterminer les profils et les caractéristiques de ses utilisateurs. Il faut arriver à se mettre à leur place et trouver les problèmes auxquels ils sont confrontés dans leur quotidien afin de
trouver des solutions à travers ces micro utilité. L’ergonomie utilise pour cela la technique des « Personas » qui sont des profils types d’internautes pour qui on définie un scénario d’utilisation de votre site et des besoins précis.
Donc posez-vous la question, de quoi sont demandeur vos utilisateurs, quels sont leurs problèmes, leurs besoins, leurs habitudes ….
Attention réfléchissez ensuite au rapport utilité/cout de réalisation. Pour qu’une micro utilité soit retenue, il faut que celle-ci soit vraiment pertinente pour l’internaute par rapport à son cout de développement et de mise en place.
Ou trouver le contenu ?
Ces recommandations sont largement inspirées du livre « Ergonomie Web » d’Amélie Boucher :
Inspirez-vous de l’existant
Commencer par reprendre ce qui existe : site internet, plaquette commerciale, journal interne … et faite le tri. Certaines choses pourront être
reprises, d’autres non. Vous devrez également penser à réecrire le texte pour l’adapter au média web.
Sollicitez tous les acteurs du projet
Plus vous serez nombreux à réfléchir, plus vous récolterez d’idées. N’hésitez pas à organiser un brainstorming avec l’ensemble des acteurs du
projet.
Mettez-vous à la place de vos internautes
Utilisez la technique des personas pour imaginer des profils types d’utilisateur, leurs besoins, leurs habitudes de navigation.
Pour en savoir plus sur l’utilisation des personas :
- Personas: pas seulement pour une Vision partagée des Utilisateurs…
- Extending a technique group personas
- An introduction to personas and how to create them
Inspirez-vous des besoins exprimés par vos utilisateurs
Interrogez les personnes qui sont le plus en contact avec vos clients. Quelles sont les questions les plus posées ? Quelles sont les problèmes
les plus fréquents ? Vous pouvez aussi initier une enquête pour récolter leurs besoins, leurs manques, leurs satisfactions-insatisfactions.
Étudier ce qui se fait ailleurs
Regardez ce qui se fait chez vos concurrents directs mais aussi chez ceux qui offrent les mêmes actions que vous. Vous vendez du fromage,
chercher des sites concurrents vendeurs de fromages mais aussi des sites qui se positionnent sur des activités similaires aux vôtres: vendeurs
de chocolats, de bricolage, de vêtements … Ce qui compte c’est d’observer ce qui se fait, de repérer les bonnes idées et de s’en inspirer.
Comment présenter, rédiger son contenu ?
Le média web utilise des écrans pour afficher les informations. Les écrans, qu’ils soient d’ordinateur, de téléphone mobile, de PDA ou d’autres
machines électroniques sont du fait de leur taille très variable et de leur mode de fonctionnement, d’un confort de lecture moindre que le support papier. Pour cette raison, les utilisateurs ne lisent pas de la même manière les informations sur un média web et sur un média print.
Le média web est aussi une source infinie d’informations. Cette abondance nous oblige à parcourir plusieurs sources afin de choisir celles
qui seront les plus proches de nos attentes. Les résultats de recherche dans les moteurs ne sont pas toujours pertinents et nous demande un
travail de tri. De plus, nous consultons souvent internet pour gagner du temps et obtenir des informations sans avoir à se déplacer.
Toutes ces caractéristiques font qu’un internaute, lorsqu’il arrive sur une page web, ne lira pas en détails le contenu de la page mais scannera
l’information pour évaluer rapidement si il est au bon endroit pour trouver ce qu’il cherche. Le scanne des pages existe aussi sur les supports
print mais il est accentué sur le média web. L’internaute sera donc sensible aux indices visuels pour parcourir et évaluer la pertinence du message. Lorsqu’il aura trouvé l’information pertinente, il lira le texte en profondeur.
Recommandations pour rédiger du contenu web :
Utiliser un vocabulaire simple
L’internaute est pressé et veut obtenir ce dont il a besoin le plus rapidement possible. Rédigez donc votre texte en ne mettant que ce qui est
nécessaire. Évitez les répétitions, les évidences ou les détails superflues.
Soyez simple et concis. Évitez les mots techniques, le langage spécialisé, les formules littéraires compliquées surtout si votre publique est
généraliste. La lecture doit être facile et rapidement compréhensible.
Les internautes préfèrent également un ton direct et personnel plutôt qu’un langage trop formel.
Aller à l’essentiel
Essayez de dire le maximum de choses en un minimum de mots.
Allez droit au but et minimisez le discours marketing. Les internautes ne croient plus aux belles promesses publicitaires. Parlez vrai et simple et
laissez l’internaute se faire sa propre idée.
Formater le texte pour le rendre plus lisible
Pour aider l’internaute à scanner vos pages, hiérarchisez l’information et structurez votre texte. Pour cela, utilisez les titres et sous-titres, les
énumérations à l’aide de liste, aérez votre texte en faisant des paragraphes courts, faites des phrases courtes.
Pour une meilleure lisibilité, assurez-vous d’avoir suffisamment de contraste entre le texte et l’arrière plan, utilisez une police suffisamment
grande, n’ayez pas des paragraphes trop longs horizontalement.
Utiliser la technique de la pyramide inversée
Jakob Nielsen, ergonome Américain, préconise de commencer ses textes par la conclusion puis de dévoiler les faits qui vont l’appuyer. Ainsi
vous donnez au lecteur « l’essentiel » des les premières lignes. Si cela l’intéresse, il continuera sa lecture.
Conclusion
Lorsque vous voulez créer un site, portez un soin particulier au contenu. Ce n’est pas le site qui décide du contenu mais le contenu qui détermine la façon dont votre site sera construit.
Pour déterminer le bon contenu, pensez d’abord aux besoins de vos utilisateurs. Vous faite un site pour eux avant-tout. Réfléchissez à ce que
vous allez proposer, est-ce que le discours du président du groupe intéressera l’internaute qui veut acheter un téléviseur ?
Pensez également à adapter la rédaction de votre contenu aux habitudes de lecture de vos internautes.
Enfin, ne prenez pas toutes ses règles au pied de la lettre. Chaque type de site a ses particularités et nécessite des adaptations.
Sources :
- Ouvrage « Ergonomie web » – Amélie Boucher – Eyrolles
- Ouvrage « Site web: priorité à la simplicité » – Jakob Nielsen et Hoa Loranger – Campus press
- Site Veblog de Vincent Bénard
- Site Ergologique
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------3. Mood board
Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de
création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
Introduction
La partie design est une étape délicate à gérer dans le processus de création d’un site web car le client est toujours impatient de voir le résultat
visuel de son futur site. Or, cette partie du processus réclame de nombreuses étapes de recherche, de tâtonnement, d’essais, d’ajustement
avant d’arriver à un résultat aboutit et définitif.
Le client, ne connaissant par forcément les étapes du processus de création, aura tendance à croire que ce que vous lui montrez correspond à
l’image du design finalisé. Il portera alors son attention sur des détails plutôt que d’évaluer et de réfléchir sur le concept général.
C’est donc au graphiste d’expliquer au client les points sur lesquels il est important de se focaliser. Pour lui faciliter la tâche, il est judicieux
d’utiliser des documents de travail qui se concentrent davantage sur le fond que sur la forme. Parmi ces documents de travail, nous avons déjà
parlé des zoning et des wireframe. Un autre document de travail dans le même esprit se trouve être le panneau d’humeur.
Qu’est ce qu’un panneau d’humeur
Un panneau d’humeur est le regroupement d’un ensemble d’éléments sélectionnés (images, couleurs, textures, typographies, textes, objets
…) juxtaposés les uns à côté des autres comme on le ferait pour un collage, afin d’établir une ambiance, une atmosphère, un concept, une
humeur, une expression, un ton, un ressentit, un style, sans avoir besoin de réaliser une création graphique aboutit et organisée.
Pour réaliser ce panneau, vous utiliserez généralement des coupures de magazines, de journaux, d’affiches, des photographies, des textes,
des objets … Cela peut également être des ébauches faites rapidement à l’ordinateur, des palettes de couleurs, des morceaux de papier
peints, des emballages, bref tout ce qui pourrait évoquer l’ambiance que vous voulez créer pour votre maquette graphique.
Pour un webdesign, votre panneau d’humeur peut également présenter une ébauche de l’aspect des boutons, des formulaires, des cadres de
contenus, de la typographie des différents niveaux hiérarchiques, des icônes, du traitement des images …
Le tout doit vous aider à mettre en place l’aspect général et l’atmosphère du futur design. La démarche est assez similaire à celle que l’on
utilise en dessin ou l’ébauche, le tâtonnement puis la construction précèdent l’affinement des détails et la finalisation du concept.
Exemple de panneau d’humeur :
Exemple de moodboard
Photographie de Maria Grzesiak sous licence CC
Utilité du panneau d’humeur
Le panneau d’humeur peut avoir plusieurs avantages :
Séparer le fond de la forme
Le panneau d’humeur étant un regroupement d’éléments, sans cohérence logique de mise en page, le client peut difficilement imaginer l’aspect
final de son site à partir de ce genre de support. Cela vous permet de capter toute son attention sur le concept et non sur des détails qui sont
pour vous sans importance à cette étape du processus.
Lorsque vous avez à faire à un groupe de décisionnaires, la validation du design peut s’avérer encore plus compliqué. En effet, si chacun
exprime ses préférences personnelles, vous n’arriverez jamais à satisfaire tout le monde. Le panneau d’humeur ne présentant que le concept, il
est plus facile de concentrer les réflexions sur le coeur du problème et éviter ainsi que chacun s’épanche sur ses propres goûts.
Impliquer davantage de personnes dans le processus
Le panneau d’humeur étant facile à comprendre et à réaliser, sans besoin de compétences graphiques ou informatiques particulières, vous
pouvez impliquer plus de personnes pour vous aider à construire le panneau.
Gagner du temps
Les panneaux d’humeur sont rapides à mettre en place car facile à réaliser. Le designer à souvent tendance à vouloir peaufiner les détails
avant même que le concept soit validé. Avec le panneau d’humeur, vous réalisez un prototype, vous n’avez donc pas besoin de perdre du
temps dans les détails. Si le client souhaite modifier le concept, vous pouvez facilement et rapidement adapter et modifier le panneau.
Avec le panneau d’humeur, vous évitez également la perte de temps dans la prise en compte de considérations superflues.
Structurer votre processus créatif
Le panneau d’humeur permet de réfléchir en amont sur le design sans se perdre dans les détails. Il permet de libérer ses idées sans toucher à
l’ordinateur et de les soumettre au client rapidement.
Une fois cette étape accomplie, vous avez une fois pour toute, toutes les orientations graphiques dont vous avez besoin pour créer votre
design. Vous pouvez alors vous concentrer sur la mise en page et la communication graphique.
Différents types de panneau d’humeur
Le panneau d’humeur d’inspiration
Vous pouvez utiliser un panneau d’humeur pour regrouper un certain nombre d’éléments qui vous servira de référence d’inspiration. Il s’agit ici
de réunir des idées intéressantes que vous auriez put trouver dans votre environnement (affiche publicitaire, photographie, journaux …) pour
vous en inspirer par la suite dans vos créations.
Le panneau d’humeur tonalité
Le panneau d’humeur tonalité est plus précis et plus cohérent que le panneau d’humeur d’inspiration. Il rassemble des éléments qui groupés
ensemble donnent une idée de la tonalité que vous souhaitez mettre en place dans le futur design.
La présentation de ces panneaux d’humeur peuvent être plus ou moins structurée : juxtaposition de type collage ou modèle de présentation
des différents types d’éléments.
Pour voir un exemple de panneau d’humeur structuré, allez faire un tour sur blog « 404 creative » et lisez l’article « Website Mood Boards: A
Successful Precursor to Visual Prototyping« . En fin d’article, vous trouverez des copies d’écran de panneau d’humeur structuré destinés à
présenter des idées pour des design web.
Conclusion
Un webdesigner va utiliser un panneau d’humeur pour évoquer un concept, un ressentit et donner le ton du futur design.
Cette étape correspond au prototypage du design c’est à dire à la phase de recherche. L’absence de création aboutit vous permet de garder
l’attention du client sur l’idée général du concept plutôt que sur des détails.
L’objectif est d’obtenir du client un maximum de validation sur la piste créative à suivre avec une idée assez précise du résultat, avant de
passer à la phase de production qui est la plus couteuse en temps de réalisation.
En impliquant le client dans la phase de création, vous lui procurerez une certaine satisfaction. De plus, au moment de valider la maquette
finale, il sera plus difficile pour lui de renier des idées auxquels il aura lui même participé.
Note du 17.10.2008 : Je viens de découvrir un article richement illustré sur le concept board plus aboutit que celui que je viens de vous
présenter. Il s’agit de l’article « Le concept board webdesign » écrit par Frédéric Kalfon – Directeur de création chez SQLI Agency dont je vous
recommande vivement la lecture.
Sources :
– Article du blog Life Clever : 5 reasons to design with mood boards
– Article du blog Viget :Getting Moody: A Look at Inspiration and Style in Early Design Techniques
– Article du blog 404 Créative : Website Mood Boards: A Successful Precursor to Visual Prototyping
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------4. La charte graphique
Après avoir vu le cahier des charges, un autre document requiert toute notre attention lors de la création d’un site internet : il s’agit de la charte
graphique. Qui, quoi, comment ? Une fois de plus je vais tenter de répondre à ces différentes questions.
Qu’est ce qu’une charte graphique ?
Une charte graphique est un document qui décrit les caractéristiques visuelles d’un support de communication. Vous devez y trouver l’ensemble des règles d’utilisation des différents signes graphiques qui constituent l’identité graphique d’une entité (organisation, entreprise, administration, club sportif, association …)
Je ne parlerai dans cet article que du cas de la charte graphique web.
A quoi sert-elle ?
La charte graphique sert de référentiel.
Elle permet aux différents acteurs susceptibles de travailler et/ou de modifier l’aspect graphique d’un support, de garder une cohérence visuelle
sur l’ensemble de ce support. Cela garantie une identité graphique claire, homogène et sans ambigüité.
Cette cohérence graphique facilite :
- la reconnaissance de l’entité par le récepteur
- l’expérience de navigation de l’utilisateur au sein des pages d’un même support
Qui doit la rédiger ?
Le rédacteur de la charte graphique est généralement un créatif. Il est logique que la personne qui ait conçue le design d’un site web, rédige
également la charte graphique. En effet, c’est à priori la personne la plus au courant des choix graphiques effectués dans la mise en place du
design.
Notons, que dans le cadre d’un site internet, il est possible à partir des feuilles de style CSS, de retrouver une grande partie des informations
nécessaires à l’élaboration de la charte graphique.
Comment la rédiger ?
Voici une proposition de plan pour rédiger une charte graphique :
I. Univers graphique
1. Objectif(s) et contexte
Quel est brièvement l’objectif du site ?
Dans quel contexte se fait cette création ?
Si il s’agit d’une refonte, quels sont les points à améliorer ?
2. Tonalité graphique
Quel doit être l’ambiance du site ?
Quelles caractéristiques graphiques doivent se dégager ?
3. Message(s) à véhiculer
Quel message le design devra-il transmettre ?
4. Valeur(s) à transmettre
Quelles valeurs de l’entreprise le design devra-il transmettre ?
II. Organisation structurelle des écrans
Comment les grands blocs de contenu s’organisent-ils dans la mise en page ?
Cette partie peut être reprise des documents de zoning établit par les responsables d’architecture de l’information, les ergonomes et les directeurs artistiques. Les documents de zoning indiquent également les niveaux de hiérarchie des différents éléments dans la page.
III. Organisation métrique des écrans
1. Description des côtes
Il s’agit de la taille en pixel des principaux blocs d’éléments de la page.
2. Description des marges
Il s’agit de la taille en pixel des marges qui séparent les principaux blocs d’éléments de la page.
A partir des gabarits des principaux écrans du site, placer des repères visuelles et des commentaires indiquant des informations sur la taille
des éléments et les marges qui les séparent. Cette description doit permettre aux intégrateurs de construire les pages en respectant les
proportions, les positionnements, les blancs tournant qui caractérisent la mise en page dessinée par le graphiste. Attention, ne négligez pas les
petits éléments comme les boutons, les puces, les icônes … qui doivent également être placés de manière rigoureuse et homogène sur toutes
les pages.
IV. Palette chromatique
Elle décrit l’ensemble des caractéristiques chromatiques utilisés dans le site.
Indiquer également si certaines couleurs sont à proscrire ou au contraire déjà utilisées dans d’autres supports de communication et donc à
réutiliser.
Ne pas oublier les différentes couleurs des liens selon leur état (visité ou non, actif, rollover …).
V. Typographie
Il s’agit de la description de tous les paramètres liés au texte et blocs de texte : police, taille, graisse, soulignement ou pas, interlignage,
interlettrage …
VI. Éléments graphiques
Il s’agit du logo, des icônes, des pictogrammes, des puces, des illustrations et des photographies.
Indiquer leurs tailles, leurs couleurs, leurs zones d’exclusion (logo), leurs marges, la présence d’un cadre ou non.
Pour les pictogrammes et icônes, indiquer leur signification et leur fonction.
Sources :
Charte graphique, Wikipédia.
Elaborer un document de charte graphique pour le web, livre blanc rédigé par Benoit Drouillat.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------5. Le cahier des charges
Le cahier des charges est un document incontournable dans un projet de création de site internet. Mais à quoi sert-il ? Qui doit le rédiger ?
Comment le rédiger ? Voici quelques réponses qui devraient vous aidez dans la rédaction de ce type de document.
Qu’est ce qu’un cahier des charges ?
Un cahier des charges est un document écrit, structuré, qui décrit de façon exhaustive les spécifications d’un projet correspondant à un besoin.
Un cahier des charges, outre les spécifications, peut aborder les modalités d’exécution du projet ainsi que les objectifs à atteindre.
Dans cet article, je m’attacherai à parler uniquement d’un besoin de création de site internet.
A quoi sert-il ?
A formaliser et communiquer ses besoins
Un document écrit force le rédacteur à exprimer l’ensemble de ses idées et à les structurer (l’écrit structure la pensée). Ce document constitue
une trace réelle de vos besoins et une preuve tangible de leur existence.
Avoir une idée des ses besoins et espérer les transmettre par oral lors d’une réunion avec un prestataire est une démarche périlleuse qui
manque de professionnalisme. En effet, vous risquez d’omettre des choses importantes, votre auditoire risque d’oublier ou d’interpréter certains
aspects de vos explications, la transmission de vos besoins risque d’être décousue.
Il est beaucoup plus difficile de contester une information qui a été formalisée par écrit qu’une information transmise par oral.
Un cahier des charges écrit est donc l’outil de communication le plus fiable et le plus clair pour exprimer et transmettre vos besoins.
A contractualiser un devoir d’obligation d’information générale
Le cahier des charges n’est pas un document juridique cependant il constitue un document contractuel entre un client et un prestataire recensant les attentes et les besoins concrets du client. Il répond ainsi au devoir d’obligation juridique d’information général définit par le code de la
consommation ( Livre Ier, titre Ier, chapitre Ier).
En contre partie, le prestataire, si il dispose d’un cahier des charges, pourra remplir ses devoirs de renseignements, de mise en garde et de
conseils auprès du client.
A sélectionner un prestataire
Le cahier des charges permet de transmettre rapidement ses besoins aux prestataires afin que ceux ci puissent les étudier et proposer des
solutions. De ces différentes réponses, découlera le choix du partenaire à qui sera confié le projet.
A servir de référentiel tout au long du projet
Le cahier des charges est un outil de communication et un référentiel pour le chef de projet tout au long du processus de création d’un site
web. Il lui permet de vérifier que le prestataire suit bien les recommandations et ne s’écarte pas du cap. Pour le prestataire, ce document est un
guide précieux pour s’assurer qu’il remplit les objectifs définit par le client.
Qui doit le rédiger ?
Le cahier des charges doit être fournit par l’émetteur du besoin c’est à dire le client.
Qui d’autre que le client peu le mieux expliquer la nature de ses besoins et connaitre le contexte de l’entreprise ? Il est fréquent de constater
que c’est le prestataire qui rédige le cahier des charges à partir des informations transmises par oral par le client. Je le répète, c’est une mauvaise chose. Si le client est mal à l’aise pour rédiger son cahier des charges, il est préférable qu’il externalise ce travail auprès d’un consultant
spécialisé.
Dans les entreprises d’une certaine taille, c’est généralement le chef de projet qui rédige le cahier des charges en collaboration avec les différents services concernés par le projet (service marketing, communication, informatique …).
Comment le rédiger ?
Le cahier des charges n’a pas besoin d’être une encyclopédie. Selon le projet, un document d’une vingtaines de pages peu suffire. Il n’a
pas besoin d’être verbeux ou très technique. Un vocabulaire simple est préférable. Le principal est que le besoin soit clairement définie pour
permettre aux prestataires une bonne compréhension.
Voici un exemple de plan décrivant les éléments à aborder dans un cahier des charges de création de site internet :
I. Présentation
1. Présenter l’entreprise
* Son historique
* Sa taille (CA et nombre de salariés)
* Ses activités principales
* Ses produits et/ou services
* Son organigramme
2. Présenter l’existant
* Support de communication
* Existant fonctionnel
* Existant technique
II. Description des besoins
1. Les objectifs du site
* Site de vente en ligne
* Site de lancement d’un produit, d’un service
* Site vitrine
* Site éditorial
* Site d’information
* Site de fidélisation …
2. La cible du site
* Nature (entreprise, particulier, collaborateur …)
* Genre
* Tranche d’age
* Appartenance sociale
* Attentes
* Style de vie …
3. Les contenus
* Quel type de contenus allez-vous fournir (texte, sons, vidéos, illustrations, photographies, logo …)
* Sous quel format (.doc, .pdf, .mp3, .jpg …)
* Nombre de pages, photos, fichiers …
4. L’architecture du site
* Nombre de rubriques et leur libellés
* Schéma d’arborescence de la navigation
Faite un inventaire exhaustif de toutes les informations et contenus qui seront diffusés sur votre site. Faites des regroupements par thème puis
hiérarchisez l’information en rubriques, sous-rubriques.
5. Les besoins fonctionnels
Besoins fonctionnels en « front office »
– Moteur de recherche
– Galerie d’images
– Formulaire d’inscription à une newsletter
– Présentation de news …
Besoins fonctionnels en « back office »
– Ajouter, effacer, modifier une news
– Ajouter, effacer, classer des images
– Gestion de la newsletter
– Gérer les profils utilisateurs …
6. Les besoins techniques
* Architecture technique
* Configuration logicielle
* Configuration matérielle
* Hébergement
* Nom de domaine
* Reprise de l’existant
* Sécurité …
7. Les besoins en référencement
* Référencement naturel
* Référencement actif
* Mots clés de positionnement
* Annuaires ciblés …
8. Les besoins de suivis
* Statistiques de fréquentation
* Suivis du référencement
* Maintenance et mise à jour des applications
* Formations
* Assistance technique …
9. Les besoins en cessions de droits d’exploitations (patrimoniaux)
Décrivez les droits que vous souhaiter acquérir sur les créations d’auteur (graphisme, vidéo, son …)
* Que souhaitez-vous comme durée de cession ?
* Sur quel(s) support(s) souhaitez-vous diffuser les visuels (nombre et nature) ?
* Etendue géographique de la diffusion ?
* Souhaitez-vous acquérir le droit de modifier les sources ?
* Souhaitez-vous rétrocéder les droits d’exploitation ou de diffusion à de multiples clients ? Combien ?
* Souhaitez-vous négocier que le nom de l’auteur ne soit pas cité en légende des visuels ?
* Souhaitez-vous négocier avec l’auteur pour qu’il ne revendique pas la paternité des visuels en public ? (préciser les supports concernés) ?
III. Prestations attendues
Quels sont les livrables que vous souhaitez obtenir du prestataire pendant et à l’issu du projet ?
* Un planning de réalisation
* Une arborescence détaillée du site
* Une expertise et des recommandations ergonomiques
* Zoning, wireframes, maquettes
* Une documentation technique …
Conclusion
Comme nous venons de le voir, le cahier des charges est un document important qu’il ne faux pas négliger. Il vous permettra d’y voir plus clair
dans vos idées, de mieux communiquer vos besoins et de faciliter le choix d’un prestataire.
Lorsque le choix de votre prestataire sera effectué, la partie graphique sera abordée au cours d’un brief créatif avec le directeur artistique de
l’agence web.
Sources :
Cahier des charges – Wikipédia
Message de Laurent Desmontiers sur le forum 1DCafé (questions concernant la cession des droits d’auteur)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------6. Faire approuver son design
Sur le site « 24 ways to impress your friends » j’ai trouvé un article intéressant rédigé par Paul Boag s’intitulant « 10 manières pour faire approuver un design« . Cet article vous propose en 10 points une méthode de travail qui peut vous aider à produire un design qui soit proche des
attentes de votre client et ainsi valider plus facilement votre projet auprès de celui-ci.
Je vous propose une traduction française de cet article avec l’aimable autorisation de l’auteur. N’ayant pas un anglais irréprochable, je renouvelle votre indulgence sur les éventuelles erreurs de traduction.
10 façons de faire approuver votre design
Une des choses les plus stimulantes dans le processus de webdesign est d’arriver à finaliser ce design. Cela peut s’avérer long, démoralisant
et si vous n’êtes pas vigilant, cela peut conduire au mécontentement du client. De plus vous pouvez vous retrouver avec un design que vous
aurez honte d’inclure dans votre portfolio.
Comment alors pouvez vous vous assurer que le design que vous produisez est celui qui sera construit ? Comment obtiendrez-vous du client
qu’il valide votre design ? Voici 10 conseils appris suite à plusieurs années d’amères expériences.
1. Définir les rôles du client et du designer
La plupart des clients avec lesquels vous travaillerez n’auront jamais été impliqués dans un projet web. Même si ils l’ont été ils auront probablement travaillés d’une façon différente de celle à laquelle vous vous attendez. Prenez le temps au début du projet d’expliquer le rôle qu’ils
jouerons dans la mise en place du design du site.
La meilleure approche et de mettre en avant que leur travail et de se concentrer sur les besoins de leur utilisateurs et sur leur marché. Ils
doivent se concentrer sur ce vaste sujet, pendant que vous vous préoccupez des détails de la mise en page, de la typographie et des combinaisons de couleurs.
En précisant ce que vous attendez du client, vous l’aidez à fournir les bonnes informations tout au long du processus.
2. Comprendre le marché sur lequel se positionne le client
Avant d’ouvrir votre logiciel de graphisme ou de griffonner sur papier, prenez le temps de vous assurer votre propre compréhension non pas
seulement du brief mais de l’entreprise qui se cache derrière le site. En comprenant les objectifs économiques, l’organisation structurelle et la
stratégie marketing de l’entreprise, votre processus de création sera plus avisé.
Vous ne pouvez pas compter uniquement sur le brief pour vous fournir toutes les informations dont vous avez besoin. Il est important de creuser davantage et d’obtenir la meilleure compréhension possible du marché client. Cette information sera extrêmement précieuse pour justifier
vos décisions de votre processus de création.
3. Comprendre quel sera la cible
Nous aimons tous penser à nous même, en tant que designer centré utilisateur, mais quel effort exactement faisons nous pour connaitre nos
utilisateurs avant d’entamer notre processus de création ?
Prenez le temps de vraiment les comprendre le mieux que vous pouvez. Essayez de rencontrer de véritables utilisateurs potentiels et de
connaître leurs besoins. Faute de quoi travailler avec le client pour comprendre la personnalité des utilisateurs et vous aider à trouver quel type
de profil ils ont.
Comprendre vos utilisateurs améliore non seulement la qualité de votre travail, mais contribue également à déplacer le débat loin des préférences personnelles du client et plus proche des personnes dont l’opinion compte vraiment.
4. Eviter plusieurs concepts
Beaucoup de clients apprécient l’idée d’avoir la possibilité de choisir entre plusieurs concepts. Cependant, bien que se soit a priori une bonne
idée cela peut devenir contre-productif pour la finalisation du design.
Dans un monde où les budgets sont limités, il n’est pas sage de gaspiller de l’argent à produire des modèles qui seront en fin de compte jetés.
Les ressources seraient mieux dépensés dans l’affinement d’un design unique à travers de multiples itérations.
Qui plus est, plusieurs concepts sont souvent source de confusion plutôt que de clarté. Il est courant pour un client de demander un des éléments de la première conception et un élément de la seconde. Comme tout créateur le sait, cela fonctionne rarement.
5. Utiliser des panneaux d’ambiance
Les clients sont souvent meilleur pour exprimer ce qu’ils n’aiment pas que pour décrire ce qu’ils font. C’est une des raisons pour lesquelles ils
aiment demander la production de plusieurs concepts. Une alternative moins coûteuse consiste à créer une série de panneaux d’ambiance.
Ces panneaux contiennent une collection de couleurs, de typographie et d’images qui représentent différentes « humeurs » ou orientations vers
lesquelles la conception pourrait tendre.
Les panneaux d’humeur sont rapides et faciles à produire, cela vous permet de tester différentes approches de conception avec le client sans
avoir à investir le temps nécessaire pour produire des concepts de design complet. Cela signifie que, avant que vous développiez un concept,
client et concepteur se sont déjà mis d’accord sur la direction que prendra la conception.
6. Dite ce que vous aimez
Il n’est pas rare qu’un client demande un design qui ressemble à celui d’un autre site qui lui plaît. Le problème est qu’il est souvent difficile de
comprendre ce qui les attire exactement sur ce site. De plus, dans de nombreux cas, ils aiment des sites qui n’ont pas forcément un design qui
vous motive.
Une meilleure approche que m’a suggérée Andy Budd est de leur montrer des sites qui, selon vous, sont de bon exemples à suivre. Conserver
une collection de captures d’écran de sites bien conçus et choisissez en quelques uns qui soient pertinent pour ce client en particulier. Expliquez lui pourquoi vous pensez que ces modèles peuvent convenir à son projet et demander lui ses réactions. Si le client n’aime pas vos choix,
alors présentez lui un plus large panel de votre collection de copie d’écran et voyez les designs qu’il préfère.
7. Elaborez un wireframe de la page d’accueil
Souvent, les clients ont du mal à faire la distinction entre la conception et le contenu et donc parfois refusent une conception sur la seule base
que la mise en page du contenu n’est pas bonne. Cela est particulièrement vrai au moment de la validation de la page d’accueil.
Vous pouvez donc trouver utile de créer la structure de la mise en page du contenu de la page d’accueil avant de produire le design. De cette
façon, lorsque les clients verront la conception de la page, ils ne seront pas distraits par la mise en page du contenu. Une des meilleures façon
de le faire est de produire un squelette de base consistant en une série de boîtes de contenu (Ndlr : zoning et wireframe). Une fois que cela
aura été approuvé, vous pourrez terminer le design beaucoup plus facilement.
8. Présentez votre design
S’il est vrai qu’un bon design doit parler de lui-même, il est aussi nécessaire de le présenter au client. Le client a besoin de comprendre pourquoi vous avez pris telle ou telle décision dans votre conception, sinon, ils la jugeront sur des critères de préférences purement personnelles.
Expliquez leurs comment votre design répond aux besoins des utilisateurs et aux objectifs de leurs business. Reportez-vous aux panneaux
d’ambiance, aux sites sélectionnés par le client pour faire approuver votre conception et expliquer comment celle-ci est le prolongement des
choix du client. N’envoyez jamais votre design dans un simple mail avec l’espoir que votre client interprète votre travail correctement.
9. Fournissez un support écrit de votre démarche
Malheureusement, peu importe la façon dont vous allez justifier la conception de votre design au client, il est presque certain qu’il va vouloir
le montrer aux autres. Il a peut-être besoin de l’approbation de ses patrons ou d’une personne en interne. Au moins, il va vouloir obtenir une
deuxième opinion d’un ami ou d’un collègue.
Le problème avec ceci est que vous n’allez pas être présent pour présenter à ces personnes, la justification de votre design, de la même manière que vous l’avez fait pour le client. Vous ne pouvez pas attendre du client qu’il présente vos idées aussi bien que vous l’avez fait. La réalité
est que vous avez perdu le contrôle de la manière dont la conception va être perçu.
Une façon de minimiser ce problème est de fournir une documentation écrite qui explique et justifie votre conception graphique. Cela peut être
un résumé de la présentation que vous avez donné au client, il pourra le distribuer avec la présentation du design. En mettant par écrit des
explications qui accompagnent le design, vous vous assurez que tous ceux qui le lirons recevrons le même message.
10. Surveillez les remarques qui sont faites sur votre design
Mon dernier conseil concernant la gestion d’un projet graphique est de contrôler la façon dont vous allez recevoir les remarques sur votre
conception. Une tendance naturelle des clients sera de vous donner son opinion personnelle sur la conception. Ceci est renforcé parce que
vous leur demandez ce qu’ils pensent de votre conception, au lieu de leur demander ce que leurs utilisateurs vont penser de la conception.
Encouragez-les à réfléchir à partir de la perception des utilisateurs plutôt que de la leur.
Il faut également encourager les clients de continuer à se focaliser sur le point « 1 : les besoins utilisateurs » dont j’ai parlé dans ma première
astuce. Leur tendance est d’essayer d’améliorer la conception, cependant, cela devrait être votre problème pas le leur. Le rôle d’un client doit
être de défendre les besoins de leurs utilisateurs et leur business, pas de s’occuper du design. Encourager le client à faire des commentaires
tels que «je ne suis pas sûr que ma femme en tant qu’utilisateur appréciera des couleurs masculines » plutôt que « peut-on faire tout le design
en rose. » C’est à eux d’identifier les problèmes et à vous, en tant que designer, de trouver la solution la plus appropriée.
Donc voilà, vous les avez. Mes 10 conseils pour améliorer la validation d’une conception graphique. Est-ce que cela va vous assurez l’approbation de votre conception à chaque fois ? Malheureusement non. Cependant, ces conseils devraient certainement vous aider à aplanir les
difficultés.
Source :
10 ways to get design approval de Paul Boag
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------7. Zoning et wireframe
Après avoir réalisé le brief créatif, l’architecture de l’information de votre site (hiérarchisation du contenu en rubriques, arborescence de navigation …) l’étape suivante s’intéresse à la conception et l’organisation de vos pages.
Cette étape de conception des pages est réalisée à l’aide, dans un premier temps, de la technique de « zoning ». Puis les choses s’affineront
avec l’établissement d’une représentation des pages plus aboutie : les wireframes.
Le zoning
Le zoning est une technique simple qui consiste a représenter une page de votre site à l’aide de boites qui symbolisent les grandes fonctionnalités et les zones principales de contenu. Cette étape est primordiale pour décider le l’organisation générale de vos pages. On ne résonne ici
qu’en terme de zones (boites), le détail des éléments qui rempliront ces zones ne sera abordé qu’à l’étape des wireframes.
Chaque boite (carrés, rectangles …) représente une entité majeure de votre site qui doit trouver sa place sur l’écran en fonction deux critères
principaux :
* Son importance hiérarchique.
* Son encombrement spatial.
L’encombrement spatial est matérialisé par la forme des boites, l’importance hiérarchique par une valeur de gris par exemple.
Bien sure vous devez, lors de cette étape, avoir déjà une idée approximative de la taille qu’occuperont vos éléments sur la page. Cela suppose
que vous ayez débroussaillé le travail lors de l’étape de rassemblement de votre contenu et de l’architecture de l’information.
Exemple de zoning de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)
Zoning
Cette étape tient généralement compte de la résolution cible de vos utilisateurs.
Il faut également tenir compte de la zone au dessus du « fold » (zone visible de l’écran sans avoir à scroller). Le fold représente une ligne
virtuelle qui se situe en bas de votre écran et délimite la zone à partir de laquelle les informations sont accessibles uniquement par défilement.
En effet, les éléments les plus importants devront se situer au dessus du fold où à cheval sur celui-ci pour suggérer leurs présences.
Il est important de comprendre (et de faire comprendre au client) que la réflexion se porte uniquement sur l’organisation générale des grandes
zones d’influence du site et non sur le choix des couleurs où des icônes. Le client ne doit donc pas être frustré par le niveau d’abstraction élevé
de représentation des pages de son site à cette étape.
Ce travail se concrétise par l’établissement d’un livrable qui servira de document de discussion avec le client pour correction puis validation.
Les wireframes
Une fois que l’organisation générale des pages a été validé à l’aide de la technique du zoning, nous pouvons commencer à affiner les choses
en réalisant des wireframes.
Attention, le terme wireframe possède de nombreux synonymes que vous rencontrerez sûrement selon les personnes avec qui vous travaillerez :
* Maquette ergonomique
* Maquette fonctionnelle
* Prototype
* Storyboard
* Mockup
* Layout …
Les wireframes sont des maquettes dans lesquelles on détail le contenu des boites définies dans l’étape de zoning. Il s’agit de réfléchir non pas
sur le graphisme mais sur les aspects fonctionnels et ergonomiques des éléments qui rempliront ces boites. C’est pourquoi il est conseillé de
réaliser les wireframes en noire et blanc pour ne pas distraire le client des objectifs principaux de ce type de document. Vous pouvez tout de
même représenter les liens hypertetxes en bleu. En aucun cas les aspects purement graphiques ne doivent être abordés lors de cette étape.
Le document qui va réunir l’ensemble des fonctionnalités d’un site sous forme de wireframes est appelé story-board.
Chacune des boites qui composent notre zoning contient par exemple du contenu texte, des éléments de navigation, des formulaires, des
listes, des images … Ce sont ces éléments que vous devez maintenant décrire sur votre maquette. Vous devez connaître la taille précise en
pixel de ces éléments, décrire visuellement et par écrit le fonctionnement et les différents états des éléments fonctionnels tel que les menus où
les formulaires.
Une réflexion approfondie doit être entamée sur le vocabulaire des rubriques, des titres, des liens, des libellés de bouton, des champs de
formulaire, des messages d’erreurs … Pour le corps du texte, si possible utilisez du vrai texte, celui qui sera utilisé pour le site, à défaut utilisez
les « Lorem ipsum ».
Vous devez également être attentif à décrire l’apparence des objets dans leurs différents états :
Pour les éléments cliquables quel sera leur aspect à l’état nominal, survolé, activé.
Pour le workflow d’un panier d’achat quel sera l’apparence des différents boutons.
Toutes ces descriptions vont permettre de faciliter le travail des intégrateurs, des développeurs et des graphistes en levant les ambigüités.
Exemple de wireframes de la page d’accueil du thème WordPress « Enjoy » (en cours de réalisation)
wireframe
Comme pour le zoning, l’établissement des wireframes se concrétise par la réalisation de livrables qui seront communiqués au client afin de
débattre, corriger puis valider la conception des pages du site avant de passer au design graphique.
Conclusion
L’erreur classique est de vouloir se précipiter sur l’aspect graphique des pages du site sans porter attention à l’ergonomie et à la conception de
la mise en page. Cette erreur se paye généralement en retours successifs qui couterons chère en temps et en argent. Les étapes de zoning
et wireframe sont donc indispensables dans le process logique de la construction d’un site internet et il faut y porter une attention particulière.
Cela sera d’autant plus vrai que le projet sera important.
Travailler avec le client et l’équipe projet à partir de ce type de documents (zoning, wireframe) permet de se concentrer sur le fond (fonctionnalités, interactions, contenus) sans se laisser distraire par la forme (design).
Sources :
Ouvrage : Ergonomie web, pour des sites efficaces – Amélie Boucher – Ed. Eyrolles
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------8. L’arborescence d’un site
Inventaire, tri, catégorisation, hiérarchisation, labellisation
Travailler l’arborescence d’une application permet de structurer la navigation d’un site et de présenter l’information de la manière la plus simple
et la plus claire possible à l’utilisateur. Cette étape suppose que l’information est été étudiée et inventoriée minutieusement au préalable.
Ensuite, il est nécessaire de classer l’information en rubriques et sous rubriques et de la hiérarchiser pour pouvoir l’organiser. Pour cela, le
commanditaire doit avoir réunis tout le contenu qu’il souhaite voir apparaitre sur son application et aider le prestataire à classer ce contenu.
Une fois le contenu inventorié, catégorisé, classifié, hiérarchisé, il faudra définir les mots que l’on utilisera pour labelliser les menus, boutons,
description de champs de formulaire …
Pour réaliser tout ce travail d’organisation, je vous conseille d’utiliser la méthode du tri des cartes.
Représentation graphique
Un diagramme d’arborescence peut contenir de façon très schématique un nombre non négligeable d’informations. Pour réaliser cela, vous
pouvez utiliser des outils comme Visio, PowerPoint, Photoshop ou Gimp, Illustrator ou Inkscape … Le choix de l’outil dépend de vos moyens
et de vos préférences. Sur le sujet, je vous recommande la lecture des articles de Eric Di Pol sur son blog Super Fiction . Pour ma part j’utilise

Chapitre I : Expériences et Culture du Web

Transcription

Documents pareils

pierregilles

Viviana Ardila Ponton

Propriété : Me ALLIENQ Odette

Intitulé du poste : stage en informatique Mission

Mentions légales - Real Humans

itinéraire professionnel domaines de compétence langues formation

Delphine Liagre

Comment trouver de l`information juridique sur

CV-2015, Feuillet 1

Telecharger