-
La demande:
concevoir une boutique en ligne afin de vendre des produits au bon goût de cacao, avec une identité visuelle dans l’ère du temps et qui puisse répondre aux attentes du consommateurs.
-
Objectifs personnels:
- - hiérarchiser les éléments textuels et graphiques
- - définir une identité visuelle chaleureuse
- - concevoir une interface claire et efficace
- - adapter le site pour les mobiles et tablettes
| Le travail typographique
Nous sommes en permanence confrontés aux contenus : pas seulement sur le web, mais partout ! En lisant son journal, en utilisant son smartphone, ou encore en prenant les transports en commun. Bref : la typographie joue un rôle très important sur la perception et le regard que nous portons sur un projet et plus encore sur Internet. Pour cause, 95% de l’information sur le web est écrite.
-
- paragraphe et confort de lecture
-
une première chose à placer
En partant de ce constat et en vue de la masse considérable de contenus écrits fournis par le "client", j’ai naturellement commencé mon travail sur le paragraphe, matière prédominante de la future boutique en ligne.
Des heures de recherche plus tard mon choix est fait : la police Adelle est l’heureuse élue pour ce projet ! Ses arguments ? Une police slab sérif particulièrement adaptée pour la lecture de longs textes : un contraste et une largeur normale, une hauteur de X élevée et surtout une gamme de graisses étendue. J’ai maintenant la forme de mon paragraphe.
La vocation de COCOA CASA est de contribuer à l’amélioration des conditions de vie de ses membres en leur permettant de vivre dignement de leur production de cacao.
Elle milite pour l’augmentation de la production du cacao dans la région,l’amélioration de la qualité du cacao produit, la transformation du cacao, le renforcement institutionnel des coopératives de base et l’obtention de marchés plus rémunérateurs.
-
confort de lecture
Enfin... Pas tout à fait. Pour un confort de lecture optimal, je m’attarde sur deux premières actions:
Pourquoi ? Car lire demande en réalité un effort: le mouvement de l’oeil. Ajuster ces valeurs permettent donc de rendre la lecture de l’utilisateur plus “naturelle”, plus facile et donc plus confortable.
La vocation de COCOA CASA est de contribuer à l’amélioration des conditions de vie de ses membres en leur permettant de vivre dignement de leur production de cacao.
Elle milite pour l’augmentation de la production du cacao dans la région,l’amélioration de la qualité du cacao produit, la transformation du cacao, le renforcement institutionnel des coopératives de base et l’obtention de marchés plus rémunérateurs.
-
-
- harmonie et rapports de proportions.
Le paragraphe est maintenant sur son 31... Mais il lui manque encore quelque chose. Pour cause, il ne sort généralement pas seul : il est souvent accompagné d’un titre, qui a lui aussi sa propre personnalité. Tout comme chaque couple (ou presque), ils tendent à se compléter mutuellement, à former un ensemble varié et cohérent.
«Mais dans le beau monde de la typographie, comment marier deux polices alors ?!»
-
la combinaison de police
Du paragraphe soigneusement travaillé précédemment, je retourne à la ligne. De la ligne, je retourne au mot. Du mot, je retourne à la lettre... X. (Hum, au final... Pas de grande différence avec l’Homme me direz-vous.) Pourquoi ? Car deux polices d’une même hauteur tendent plus naturellement à composer une grille équilibrée, harmonieuse... Pour une fluidité de lecture optimale.
x
- - corps : 120px
- - police : Adelle
- - graisse : regular
x
- - corps : 120px
- - police : _Enzo
- - graisse : light
-
niveaux hiérarchiques
Le problème : j’ai deux polices avec des corps de tailles identiques, que je dois modifier pour définir dès le premier coup d’oeil l'importance de chaque élément.
Le langage des proportions n’est pas restreint au seul champ de la musique, des mathématiques et de ses applications. Leur utilité ? Définir des rapports entre mes titres et mes paragraphes, pour faciliter l'identification des éléments, pour le rythme, tout simplement.
Ici, ni trop subtil, ni trop imposant, j’ai opté pour le rythme procuré par le rapport musical “augmented Fourth” d’échelle 1.414 (aussi appelé “Diagon” en géométrie.)
-
| La conception graphique
-
- langage et identité visuelle
-
le choix des couleurs
L’influence des couleurs s’étend bien au-delà de l’aspect esthétique du projet : elles permettent de hiérarchiser visuellement le contenu établi, contribuent à véhiculer son message et définissent son atmosphère de manière générale.
De ce fait, je ne voulais pas choisir mes couleurs à la légère et je ne voulais surtout pas tomber dans la facilité en associant le marron à la “maison du cacao”. Après réflexion, j’ai donc opté pour des teintes orangées, plus à l’image que je m’étais faite de l’entreprise fictive : pleine de vie, chaleureuse, dynamique et savoureuse.
-
un logo à l'image de la société
Je voulais aussi que le logo de la société soit à leur image. Après tout, la demande du client est “une identité visuelle dans l’ère du temps”... Alors autant essayer de respecter la demande et de s’amuser un peut !
-
mise en forme du contenu
J’ai ma hiérarchie des éléments définitive. Je m’attarde donc maintenant à la construction de la grille, qui servira d'armature pour organiser la page. Ayant déjà conçu l’interface sur wireframe papier, et sachant déjà que je travaillerai avec une grille à 12 colonnes, je n’ai plus qu’à la construire dans Illustrator et y placer mes éléments.
-