& Communication Conception Graphique Formation Infographiste Internet Pyramide / 2010 - 2011 © Géraldine Blondeau

WebDesign et Stratégie Web : définitions > discipline permettant de traduire l’identité visuelle d’une société au travers d’éléments graphiques > le webdesign doit se mettre au service de l’ergonomie et non l’inverse. Ne privilégiez pas la forme au détriment du fond. Les sites doivent être efficaces avant d’être beau. L’internaute et donc l’usabilité sont rois ! > Par extension le terme webdesigner désigne le métier consistant à concevoir le design d'un site web. Ergonomie > Définition : l'ergonomie d'un site web concerne l’ensemble des interactions entre les Utilisateurs et un site web > L’ergonomie d’un site doit répond à 2 critères : 1- UTILITE : c’est la capacité du site à répondre aux besoins des utilisateurs potentiels 2- USABILITE : facilité d’utilisation du site – Capacité d’adaptation du site aux cibles pré-définies

WebDesign et Stratégie Web : définitions E-stratégie : pourquoi > Sites corporates : sites visant à promouvoir l’image de l’entreprise auprès de ses clients, fournisseurs et partenaires financiers. > Sites marchands (sites e-commerce, e-boutique) : sites visant à présenter et vendre en ligne (VAD) les produits ou services de l’entreprise > Sites portails (sites éditoriaux ou communautaires) : sites visant à recueillir, diffuser et analyser des informations sur des thématiques ciblées > Sites interactifs (type blogs ou digglike) : sites visant à promouvoir l’image de marque de la société ou ses produits/services au travers des avis des internautes. TD : 1/ identifier un site dans chaque catégorie 2/ Définir brièvement chaque type de graphisme (ou look and feel) 3

WebDesign et Stratégie Web : définitions E-stratégie Sites Corporate Ce sont les sites d’entreprises qui véhiculent l’image de marque de la société. Les buts peuvent être multiples : communication externe, interne ou financière. Les internautes attendent principalement les qualités suivantes dans un site corporate : 1- Qualité des illustrations et des photos 2- Facilité à trouver ce que l'on cherche 3- Richesse des descriptifs de produits 4- Délai de réponse aux questions posées par e-mail 5- Qualité des réponses 4

WebDesign et Stratégie Web : définitions E-stratégie Sites Marchands ou sites e-commerce Il s’agit des sites qui proposent de la vente en ligne comme activité principale. On distingue principalement : les acteurs « purs Web » : ceux qui ont d’abord développé une activité on-line (ex : Cdiscount, Pixmania,…) les acteurs historiques : ceux qui ont déjà une activité marchande dans un réseau traditionnel (chaînes de magasins, grande distrib, VPC) les internautes attendent principalement les qualités suivantes dans un site e-commerce : 1- Inspirer confiance 2- Navigation intuitive 3- marketing « intelligent » 5

WebDesign et Stratégie Web : définitions E-stratégie Sites Evénementiels pour communiquer autour d’une marque, ce genre de site permet de valoriser et d’amplifier un effet « mode » ou BUZZ autour d’un produit (ex: http://www.coca-colazero.fr). pour organiser un séminaire, une foire, un salon, un festival, une table ronde,… les internautes attendent principalement les qualités suivantes dans un site événementiel : 1- Présentation et scénarisation originale 2- Etre Incitatif (inscription en ligne, téléchargement, jeux, …) 3- Clarté du contenu 6

WebDesign et Stratégie Web : définitions E-stratégie Sites Communautaires ou participatifs Ce sont des sites réunissant des internautes autour d'un intérêt commun. Ils sont de plus en plus sollicités par les internautes (mais aussi par les annonceurs et les grands groupes) grâce à l’effet Web 2.0. Il s’agit principalement de : blogs perso ou d’entreprises digg like : sites où vous postez des articles qui sont ensuite notés par les internautes (ex : www.scoopeo.com) partage de vidéo (ex : http://www.youtube.com/?gl=FR&hl=fr) réseaux sociaux BtoC (ex : http://fr-fr.facebook.com/) et BtoB (ex : vwww.viadeo.com) 7

Site marchand Site portail Site interactif Site corporate

WebDesign et Stratégie Web : et l’inspiration ? > le design d’une page Web doit aussi faire appel à l’inspiration et la créativité > il existe des règles permettant de réaliser un design efficace, néanmoins … > …l’inspiration peut venir aussi en regardant ce que font les concurrents (PRO évidemment). On se rend compte que dans certaines activités, une « norme » s’est plus ou moins imposée Ex : les sites des compagnies aériennes nationales , sites de rencontres, voyagistes

Savoir adapter le design en fonction de la stratégie > Définir les cibles 3 grandes familles existent : cible PROFESSIONNELS (B to B) cible PARTICULIERS (B to C) cible INSTITUTIONNELS Principales caractéristiques à définir : PROFESSIONNELS - secteur d’activité - fonction - taille de l’entreprise - situation géographique - accès à Internet et degré d’usage du Web PARTICULIERS - âge - sexe - CSP (Catégorie Socio Professionnelle) - situation familiale - Taux d’équipement - Habitudes de consommation INSTITUTIONNELS - degré de prescription 10 10

Savoir adapter le design en fonction de la stratégie > Analyser le ou les messages en fonction des cibles Type de site Cible Message Design Corporate BtoB : investisseurs, actionnaires, banques, fournisseurs BtoC : clients (dans une démarche autre que celle du consommateur) Confiance, notoriété, image de marque Graphisme sobre et esthétique. En un mot : professionnel E-commerce Consommateurs, acheteurs Facilité, confiance, fidélité Graphisme soft mettant en valeur les produits Portail spectateurs Accessibilité, exhaustivité, qualité Graphisme structuré permettant une bonne lecture des contenus Interactif acteurs Ergonomie, richesse, convivialité Graphisme simplissime pour favoriser l’IHM

Comment définir le design d’un site ? > Définitions Le design graphique est l’ensemble des dispositions esthétiques et techniques qui composent l’identité visuelle du site . Les éléments qui composent l’identité visuelle et les utilisations possibles sont regroupés dans la charte graphique. Les éléments pris en compte dans le design graphique sont généralement : - Le gabarit général des pages - Le design de la navigation (texte, boutons,...) - Les couleurs (fond, texte) - Les typo et tailles de caractère - Les illustrations, animations - le logo, la base line,… 12

Est ce que mon site est beau ? Comment définir le design d’un site ? > Les fondamentaux Une charte graphique est toujours subjective. C’est pour quoi la vraie question à se poser n’est pas : Est ce que mon site est beau ? Mais plutôt est-ce que le design de mon site sert ma stratégie ? 13

Crash test

Crash test

Comment définir le design d’un site ? > Les fondamentaux Pour répondre, il faut respecter un certain nombre de règles de base : Le gabarit général des pages ou css – template ou layout - zoning * il doit être adapté au type de site * il doit être simple à modifier * identifier les éléments invariables (identiques sur toutes les pages) ou bien variables d’une page à l’autre (éléments dynamique) entête 16

> Exemple : layout sur 3 colonnes Liens sponsorisés Zone de recherche full text Zone abonnés Accès thématiques Accès thématiques Module de recherche Menu1  Accès thématiques Accès thématiques Menu2 Tête de gondole produit  Zoom sur une fonctionnalité – auto promo Pavé pub - Publicité - Editorial Pied de page

Comment définir le design d’un site ? > Les fondamentaux Pour répondre, il faut respecter un certain nombre de règles de base : Le design de la navigation (texte, boutons,...) * il faut rester très light (liens textes) * lisibilité avant tout Les couleurs (tonalité graphique) * reprendre les éléments existants s’ils existent * trio de couleur associant le blanc Quel que soit le choix des couleurs, il est recommandé d'établir une couleur prédominante, représentant la majeure partie de la page web, et une ou plusieurs couleurs secondaires plus dynamiques (plus vives), en moindres proportions , afin de mettre des éléments en exergue * préférer des aplats de couleurs (façon post-it) plutôt qu’un background (+ lisible) * respecter la signification des couleurs (voir http://trinity-advise.com/choix-de-couleurs-pour-mieux-vendre-et-communiquer-sur-le-web/#Combinaisonset%20contrastes) 18

Comment définir le design d’un site ? > Les fondamentaux Pour répondre, il faut respecter un certain nombre de règles de base : Les couleurs (tonalité graphique) * savoir utiliser le cercle chromatique : http://trinity-advise.com/outils/codes.couleurs.web/codes.couleurs.internet.html couleurs monochromatiques : même teintes mais de différentes intensités (dégradé) couleurs adjacentes : situées l’une à côté de l’autre sur le cercle couleurs complémentaires ou contrastées : à l’opposé sur le cercle couleurs complémentaires séparées : associations de 3 teintes * des éléments de couleurs chaudes apparaissent + grands que ceux de couleurs froides 19

Comment définir le design d’un site ? > Les fondamentaux Pour répondre, il faut respecter un certain nombre de règles de base : Les typos / polices * pas plus de 2 différentes * police reconnue dans tous les environnements : verdana, arial, helvetica. Ce sont des polices sans empattement (sans serif), plus rondes que les polices avec empattements (serif) plus utilisé en imprimerie traditionnelle * police non standard (pour les titres par exemple) : créer une image transparente comportant le texte le logo, la base line * logo facilement déclinable (newsletter, bandeaux pub, comm papier,…) * logo qui reprend l’esprit du nom de domaine 20

Comment définir le design d’un site ? > Les fondamentaux Pour répondre, il faut respecter un certain nombre de règles de base : Les images et visuels * les utiliser avec parcimonie et seulement si elles apportent quelque chose à l’internaute, car : - les images allongent le temps de téléchargement des pages - trop d’images peut nuire aux contenus * utiliser des images libres de droit, c’est-à-dire vous la payez une seule fois et pouvez l’utiliser pour plusieurs projets (site web, plaquette, newsletter,…) et pour une durée illimitée. Libre de droit ne veut pas dire gratuit ! L’inconvénient est que vos images peuvent être utiliser par des concurrents, des amateurs ou des sites « parasites » * utiliser des images en droits gérés, c’est-à-dire vous faites réaliser des photos pour votre site par un photographe professionnel, vous ne pourrez les utiliser que pour ce projet et vous devrez payer à nouveau pour les utiliser dans le cadre d’une newsletter par exemple, MAIS vous serez le seul à pouvoir utiliser cette image et l’associer à votre marque. Attention aux banques d’images qui fournissent des images en droit gérés non exclusif ! Sites ressources : www.fotolia.fr www.corbis.com 21

Design, arborescence et navigation > Les règles de bases  règle des 3 clics : 3 clics maxi pour trouver une information  règle des 30 sec. : moins de 30 sec entre chaque clic se répérer de façon intuitive : chemin de fer, code couleur, iconographie (enveloppe pour mail, loupe pour moteur de recherche,…)  faciliter l’interactivité : indiquer à l’internaute les zones « actives » type espace client, formulaire de demande d’information, zone de rappel, inscription,… 22

ZONING Le zoning est une technique consistant à schématiser une page Web à l’aide de blocs ou boîtes, dans le but de montrer les grandes fonctionnalités et les zones principales du contenu. Cette étape est cruciale, puisqu’elle permet de décider de l’organisation générale des pages.

WIREFRAME Le wireframe s’appuie sur le zoning réalisé auparavant, et permet d’indiquer le contenu présent dans chaque bloc de la page Web et de structurer l’interface. Les 2 étapes suivantes sont le maquettage et le prototypage

> http://www.kitgrafik.com Sites ressources > http://www.kitgrafik.com > http://godtemplates.com/css-template.php > http://www.freecsstemplates.org/ > www.dafont.com/fr > http://www.tkaap.com/blog/category/graphisme/ > http:// fr.fotolia.com > http://www.mostinspired.com/ 25