Après le FOND, la FORME.
la forme c'est l’univers graphique, le design visuel que l’on va donner à la communication de notre site web.

Généralement construite autour d’une métaphore graphique, la conception graphique sert à plonger
l’utilisateur dans le domaine du produit ou du secteur d'activité.

L’univers graphique créé doit donner des références cognitives* à l’utilisateur pour se déplacer et s’orienter dans le système d’information.
* Navigations / boutons / couleurs dominantes / couleurs secondaires / tailles / formes / séparations...

La conception graphique est généralement un élément de proposition du dossier qui soutient l'écriture de la charte graphique.

Le benchmark graphique

Un benchmark est la pierre angulaire pour commencer tous travaux en matière de webmarketing et de webdesign.
Le benchmark concurrentiel a permis de définir les divers axes de communication pour un domaine d'activité précis.
Les contenus(text/img/videos...), l'architecture de l'information autrement dit le fond, n'est rien sans la forme.
La forme : le graphisme(couleurs/typos/textures/...) et l'ergonomie(taille/position/scénario/...) doivent mettre en valeur le fond
Le webdesign, c’est donc aussi du marketing.

La recherche esthétique que vous mènerez pour un site web ne doit jamais nuire à l'aspect pratique et à la lisibilité du contenu.
Le graphisme améliore l'ergonomie du site et son exploration, favorise la mise en avant de certains contenus importants.
Le bon design(graphisme+ergonomie) est un gage de professionnalisme et de fiabilité pour l'image de l'entreprise.

Le benchmark graphique vous permettra de :
- déterminer les cibles du projet et leurs attentes : sémiotique visuelle
- appréhender les chromies, styles et iconographies propres à ce secteur d'activité

Il convient alors d'étudier le design réalisé par les concurrents sous divers aspects :
- les gammes chromatiques, les formes et textures, la mise en page des sites, la facilité d'identification des fonctionnalités interactives : demander un devis / …

exemple 01
exemple 02

Chaque internaute est différent mais notre regard est conditionné par certaines conventions établies,
elle même basée sur le fonctionnement de notre perception : formes / tailles / couleurs et contrastes.

Concernant l'utilisabilité :
- charte graphique uniforme sur tout le site
- Logo et navigations toujours au même emplacement
- Retour évident sur accueil et pages principales
- Faciliter le repérage : code couleur / fil d'arianne / navigations...
- Toute information doit être accessible en moins de trois clics.
- Repères temporels : date mise à jour ou articles datés.
- Rapidité du chargement de la page (optimisation poids img).

Concernant le design :
- sobriété : éviter les guirlandes de noël(trop de couleurs / trop d'animations).
- Eviter les typos trop nombreuses (pas plus de trois)
- Des zones et des éléments interactifs clairement identifiables(couleur / taille / emplacement)
- Des photos de qualité
- Règle des tiers / Nombre d'or / Contrastes et proportions

Concernant la lisibilité :
- Mettre en évidence les éléments ou mots les plus importants(contraste/taille).
- faciliter l'accés à la prise de contact et à l'interaction.
- Accordez une proéminence aux éléments indispensables à la concrétisation des objectifs
- messages courts, éviter les pavés de texte.
- Structurer en niveau de lecture (titres, sous titres, accroche, extrait texte + lien, gras, italique...

Fold / pli / ligne de flottaison
Le fold (en français : pli) est représenté par la limite basse de ce que vous voyez à l'écran quand vous affichez une page web. Pour en voir plus, vous devez "scroller". Si quelques années en arrière ce fut une problématique de l'ergonomie, ce n'est plus le cas.

La partie située sous le fold bénéficie de 80% de visualisation
La partie située entre 550 pixels (hauteur moyenne du fold) et 1200 pixels est "lue" 3 fois plus longtemps que celle située au-dessus du fold

Quelques explications :
- Nombreux sont les sites avec avec un slideshow proéminent ou qui nous "gavent" de pub au-dessus du fold.
Le visiteur vient chercher en général du contenu et doit scroller en dessous du fold pour commencer la lecture.

- La plupart des "gros" sites connus nous ont habitués à scroller, que ce soit les sites d'actualité ou une grande partie des sites e-commerce sans parler des blogs qui rendent le scroll indispensable.

- Le web social est un web de "scrolleurs". La consultation de Facebook, Twitter, G+ sans scroller est quasi impossible.

- Le matériel et l'expérience du web ont finalement habitué l'utilisateur à prendre le web tel qu'il est, c'est à dire vertical !

Une règle:
La barre d'ascenseur ne suffit pas pour montrer que vous avez du contenu sous la ligne de flottaison.
Selon l'aspect de votre site, veillez à ce que la continuité du contenu soit explicite.
Si un gros espace blanc horizontal se situe au niveau du fold, certains internautes pourraient penser qu'il n'y a rien dessous.

Vu qu'il est quasi impossible de savoir exactement ou se trouve le fold chez vos visiteurs (entre le fatras des barres d'outils personnelles installées sur les navigateurs et la diversité des matériels), mieux vaut se concentrer sur tout ce qui permet de retenir l'attention de votre utilisateur que sur cette ligne de flottaison virtuelle.

7 principes ergonomiques
Règles de bases

La page d'accueil est d'une importance primordiale, c'est elle qui donnera le ton et posera les principes de navigation.
C'est la page la plus visitée d'un site web, elle initialise le parcours, le message et la navigation du site doivent donc être claire, aérée et pas trop surchargée.

Prenons l'exemple d'une boutique réelle. Pour donner envie aux gens d'entrer dans une boutique, les commerçants doivent faire de leur vitrine, un espace qui attire l'acheteur potentiel, pour qu'il décide d'y entrer pour voir de plus près ce qu'on lui propose.
Le commerçant mettra en avant ces produits phares avec le prix s'il est un argument de vente, ces offres du moment… en soignant la présentation.

Mise en page

La page d'accueil de votre site internet est de la même façon la vitrine de votre site, car c'est elle qui témoigne du plus grand nombre de visites.
D'où l'importance de son design et de sa plus-value par rapport aux sites concurrents. A la différence d'une page de contenu, votre page d'accueil, homepage doit être « séduisante », plus tape à l'oeil que de simples pages de contenu.
Elle doit être très lisible, organisée et épurée. On doit être capable de la survoler en quelques secondes et savoir de quoi parle le site, l'étendue et la qualité de son contenu.
il est donc impératif de ne pas trop la surcharger par des fioritures visuelles, des informations ou des liens secondaires.
On trouve souvent sur internet des pages d'accueil avec trop d'informations, trop de textes et plusieurs fois les mêmes liens vers toutes les pages du site…
Vous choisirez de mettre en exergue certaines pages ou rubriques importantes, incitant ainsi le visiteur à cliquer sur tel ou tel lien en particulier pour entrer plus profondément dans l'arborescence du site et ainsi provoquer une conversion.

À faire : Sélectionnez une mise en page épurée avec une navigation intuitive. Assurez-vous que l’essentiel de votre message soit mis en évidence textuellement et visuellement.

À éviter : N’encombrez pas votre page de textes interminables, d’images dans tous les sens et de bannières.

Les images

Une image vaut tous les mots, les photos transmettent votre message et reflètent l’atmosphère de votre entreprise.
Vos images sont le prolongement de vos textes et doivent par conséquent être choisies avec grande précaution.

À faire : Sélectionnez des visuels de qualité supérieure qui se fondent dans le design de votre site et qui concordent avec l’image de l'entreprise.

À éviter : Il est inutile de présenter sur la page d’accueil toutes les images. Affichez simplement les meilleures et les plus représentatives.

Couleurs et images de fond

Ces éléments déterminent l’impact émotionnel que votre site aura sur les visiteurs.
Les teintes claires pour le fond sont préférables aux couleurs foncées.
Mais certains sites exprimant le raffinement utiliseront bien souvent le noir.

À faire : intéressez-vous à la psychologie des couleurs, ce choix ne doit pas être pris à la légère.

À éviter : Ne présentez pas trop de couleurs et sélectionnez une image de fond qui appuie votre message, n'oubliez pas l'importance de la lisibilité.

Boutons

L'emplacement des boutons est stratégique.
Vos boutons d’appel à l’action sont les instructions permettant aux visiteurs de s’orienter vers d’autres pages : offres / formulaires / infos...
L’objectif est, bien entendu, d’inciter le visiteur à cliquer pour effectuer l’action indiquée (en savoir plus/ acheter etc.).

À faire : Rédiger des textes courts, clairs et directs. Placez vos boutons en évidence et limitez les actions, plus les choix sont nombreux, plus il est difficile de choisir...

Textes

Ils sont déterminant pour votre page d’accueil.
La rédaction Web impose une certaine discipline et demande un esprit de synthèse aiguisé.
Les internautes lisent au mieux 28% des textes présentés sur un site Web.
Les pages internes du site (Bio, Services...) sont là pour remplir le rôle du complément d'informations.

À faire : Court et accrocheur. Hierarchie visuelle.

À éviter : L'effet de surcharge.

Le zoning de la page d'accueil
Pour construire le zoning de la page d'accueil posez-vous plusieurs questions :
- quelles sont les rubriques du site que je veux mettre en avant ?
- quelles sont les pages qui doivent être les plus visitées ?
- que cherche l'internaute qui arrive sur mon site et comment puis-je l'aider à arriver plus rapidement vers son contenu ?
- comment puis-je ranger mes blocs afin qu'il y est une logique qui facilite la navigation ?
- Mes visiteurs vont-ils revenir régulièrement sur mon site pour y voir les nouveautés ?
La page d'accueil étant la plus visitée par le moteur Google, plus elle change, avec des blocs dynamiques mettant en exergue des nouveaux posts ou produits, plus Google prendra l'habitude de venir analyser le site.

L'organisation visuelle de la page.
Une fois tous les contenus ordonnés et les grands principes de navigation décrits dans l'arborescence, le travail d'organisation visuelle prend le relais.
Avant de passer à la réalisation concrète de la maquette du site, le zoning web et le style tiles vont permettre de décrire l'interface du site.
Cette phase permet de bien spécifier toutes les fonctionnalités nécessaires pour répondre aux actions des internautes. Cette phase décrit également toutes les fonctionnalités d'un point de vue technique.

Le zoning web ou l'art d'organiser la page
Le story-board ou wireframe pour décrire les fonctionnalités

Le zoning permet de découper la page en autant de zones que nécessaire.
Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane...
C'est le point de vue fonctionnel et ergonomique qui est important à cette étape là.
1/ zoning général, là ou les différentes zones apparaîtront de manière systématique sur les pages.
2/ Positionner l'ensemble des éléments pour vous rendre compte de leurs places réelles.
3/ Réaliser ensuite le zoning des pages les plus importantes dont les différences sont sensibles.
4/ story-board : Description des éléments, quel est leur comportement, quel est leur taille.
Le zoning web n'est pas à faire pour toutes les pages dès l'instant ou tous les scénarios de pages ont été réalisés.
Produire un zoning web applicable, ces spécifications permettront au graphiste, à l'intégrateur et au développeur de bien concevoir cette interface.
Et cela évitera les phases de corrections inutiles, et des oublis dans les fonctionnalités, tout étant conçu dès le départ.
Lorsque le wireframe est validé, la charte graphique et la réalisation de la maquette graphique prennent le relais.
Logiciel en ligne :
wireframe|cc
Responsive web design wireframe

Qu'est ce qu'un MoodBoard

On peut traduire par "Planche d'inspiration" ou "Planche tendances".
On fait l'inventaire des éléments graphiques qui collent au domaine d'activité du projet.
On regroupe les images, impressions écran(site web), couleurs, formes, textures et typos sur un support.
Habituellement utilisé en mode, en déco ou même en publicité, il sert à définir les grandes tendances.

Qu'est ce qu'un Style Tiles

On peut traduire par "Planche de styles".
Elle sert à déterminer un style graphique harmonieux sans se soucier de la structure.
Elle fait suite au travail sur le moodboard et cela va venir compléter les “wireframes”(gabarits).
Il ne s’agit pas de repartir d’un des wireframes pour le “mettre en couleurs et images”, mais bien de créer de zéro une planche regroupant des éléments constitutifs de la charte graphique sans notion de mise en page.

Pourquoi s’en servir ?
les “Planches de styles” se proposent de décorréler la structure de page, du choix des aspects graphiques et stylistiques.

Elles permettent de se concentrer uniquement sur l’homogénéité et la pertinence des styles retenus : Logo / Frise / Typos / Couleurs / Textures... Elles ne remplacent pas les maquettes à proprement parler mais elles peuvent faire office de charte graphique.
On peut ainsi apporter des changements dans le style hors du contexte de la mise en page et permet de travailler plusieurs planches
On gagne en souplesse et en rapidité.

Qu'est ce qu'un Mockup ?

C'est tout simplement une prévisualisation du rendu graphique de la maquette.
On applique notre charte graphique à la lettre.
Il permet de valider l'apparence graphique des pages du site.
On place une image maquette par ci, les couleurs retenues par là, la typo pour les titres et sous-titres, du faux texte...
En fait on habille notre zoning par la couleur, l'image, la texture et la typo validés lors de la présentation des "Style tiles".
On remplace les textes descriptifs et tout élément pseudo-graphique (bloc image en croix) du wireframe.

Il est parfois difficile de faire comprendre au client les différents rendus que pourrait avoir son projet sur les différents appareils(mobile, tablette, portable, bureau).


Il convient donc de présenter le Mockup du projet à travers ces différents médias.

Le workflow idéal de la conception webdesign pourrait donc être :

Qu'est ce qu'une charte graphique

C'est la déclinaison pratique de la conception graphique.
Grâce à ce document, l'identité visuelle de l'entreprise se fabrique.
Ce document servira de guide, ce sera la feuille de route que suivront les différents intervenants.
La charte graphique garantie la cohérence graphique du site
Elaborer une charte graphique pour un site Internet, c'est définir des modèles et des règles de mise en page pour les différentes pages du site.
On y retrouve les éléments ci-dessous, accompagnés de commentaires :

- Le wireframe de la homepage avec les dimensions des éléments (bandeau, barre de navigation, photos, logo, blocs…)

- Description des éventuels comportements des éléments (interactivité/scénario).
Exemple : glissement du bloc devis au survol d'un bouton / infos bulle au survol d'un pictogramme...

- Le wireframe des pages types avec les dimensions et comportement des nouveaux éléments.

- La gamme chromatique autrement dit, les couleurs avec leur code hexadécimal et rvb pour les différents éléments :
blocs, bordures, titres, textes, lien, lien survolés, lien actif, les boutons, les puces...

- Les styles de police à employer(famille, taille) pour les textes, titres, sous titres, citations... .

- La position des titres, sous-titres et texte si ce n'est signifié dans le wireframe.

- Les règles typographiques: utilisation de la capitale, du gras, de l'italique..

- Les pictogrammes utilisés pour la signalétique.

- Les types d'images (photographies/illustration..), formats(vignettes/slider..), dimensions.

- Les différents médias utilisés : vidéos, audio, animations flash...

"CHARTE GRAPHIQUE = ETUDE TENDANCES + MOODBOARD + WIREFRAME + STYLE TILES + MOCKUP"

Rappel des avantages de la création d'une charte graphique :

- Améliorer la communication avec le client et au sein de l'équipe, en donnant un guide précis

- Se prémunir du flou artistique, en rendant ainsi tangible ce qui est souvent abstrait

- Impliquer le client en amont et corriger le tir au plus tôt, avant lancement de la production

Ce process est tout de même à adopter avec souplesse, en modulant en fonction des projets, des équipes et des habitudes de travail.

En agence :
- le benchmark graphique et le wireframe par exemple donneront de l'objectivité à vos propositions et seront gage de professionalisme et d'implication même si pas systématiquement présent dans la charte graphique.

En webdesigner-intégrateur Free-Lance :
- Permet d'affirmer votre professionalisme (dossier = objectivité de la conception) auprès de votre client, de se prémunir du flou artistique, de le faire patienter et de l'impliquer.
Cela correspond au travail quotidien de veille graphique et ergonomique qui va guider votre créativité, lors de l'élaboration de la maquette finalisée.

Exercice :

1/ Faire un benchmark graphique (concurrents / websites templates / websites awards)
2/ Rassembler des visuels, typos, couleurs, textures : Moddboard
3/ Créer le Wireframe détaillé de la homepage
4/ Créer un ou deux Style Tiles
écrivez des argumentaires et recommandations pour chacun de vos choix.