DIGITALBRANDBOOK
© 2014 QUOVADIS. All rights reserved.
Bienvenue Utilisez ce guide pour mieux communiquer autour de Quo Vadis sur des supports numĂŠrique.
SOMMAIRE 07 Typographies 15 Couleurs 19 Icônes 23 Textures 27 Éléments d’interface (GUI)
TYPOGRAPHIES
Avenir
by Adrian Frutiger
Typographie principale Avenir est une police de caractères linéale géométrique conçue par Adrian Frutiger et publiée par Linotype en 1988. Elle est inspirée par les premières linéales géométriques comme Erbar (1922) par Jakob Erbar, et Futura (1927) par Paul Renner. Elle a été publié initialement en 1988 avec 3 graisses chacune avec une oblique, et a ensuite été étendue à 6 graisses. En 2004, Andrian Frutiger et Akira Kobayashi retravaillent la famille Avenir pour l’optimiser à l’usage à l’écran et incluent des petites capitales, des ligatures, des italiques cursives plutôt que des italiques obliques, et plusieurs graisses condensées, faisant un total de 24 fontes. Cette typographie est déjà utilisée dans le logo actuel de QuoVadis, elle sera donc la police d’écriture principale de la marque.
LATO
Sans Serif
by ﾅ「kasz Dziedzic
Typographie alternative Conçue par Łukasz Dziedzic en 2010, la Lato est sous licence SIL Open Font License,1.1. Son utilisation est gratuite. Elle représente une bonne alternative à l’Avenir Next, c’est une typographie moderne qui est très bien adpatée à un affichage sur écran. Elle dispose aussi d’un nombre important de variantes (Thin, Italic, Ultra-Bold...) qui lui permet de se substituer très bien à l’Avenir Next. La LATO doit être utilisée à la place de l’Avenir Next, comme alternative gratuite pour le Web. Cette typographie sera aussi utilisée pour toutes les créations print. https://www.google.com/fonts/specimen/Lato
Josefin Slab
Association Les Mécanes sont caractéristiques du XIXème siècle et de la Révolution industrielle. Leurs formes régulières et très géométriques évoquent les mécaniques industrielles. L’association Linéale (Avenir Next) + Mécane (Josefin Slab) permet de renforcer la notion d’authenticité liée à une innovation ; la création de l’agenda planing, comme la machine à écrire l’a était pour l’impression. Cette association sera utilisée pour catégoriser les collections unies.
AVENIR NEXT HEAVY
Josefin Slab Italic
AVENIR NEXT HEAVY
Josefin Slab Bold
Plus le contraste est élevé, plus l’association est optimale.
http://www.google.com/fonts/specimen/Josefin+Slab
Daniel by Daniel Midgley
Association L’utilisation d’une typo manuscrite pour donner une identité à part entière aux collections/produits de type fantaisie. Comme une signature, les typographies manuscrite permettent de renforcer un message en lui donnant plus d’humanité, de contact avec les gens. Ce type d’association permet de mettre en avant les collections de type fantaisie : « Mon Quo Vadis c’est moi ! »
Exemple d’association : AVENIR NEXT HEAVY Daniel - Regular http://www.fontsquirrel.com/fonts/daniel
COULEURS
GRIS
#C9C9C9, #999999
35%
ANTHRACITE
#494949, #313131
25%
MENTHE
#029D9F, #008185
15%
ORANGE
#FFAB3F, #FF9000
10%
POURPRE
#E21A65, #B40A4A
10%
5%
Utilisez la palette de couleurs dans les valeurs ci dessus pour communiquer sur les diffĂŠrents supports marketing.
Gamme de couleur Cette gamme de couleur permet de différencier et de catégoriser une multitude d’éléments. Chaque couleur possède une variante (clair/foncé) qui va nous servir à mettre des effets de types « hover » au survol de la souris sur des boutons, liens… - Le vert MENTHE est la couleur original de QuoVadis. - Le rouge POURPRE est la couleur complémentaire du vert MENTHE, très utile pour mettre en opposition différents éléments et pour renforcer un contraste. - L’ORANGE est une couleur importante dans le numérique car c’est la couleur par excellence des boutons de type « Call To Action ». De nombreuses études mettent en avant le fait que l’orange attire l’oeil plus que les autres couleurs sur un écran et donne envie de cliquer sur un bouton. Pour augmenter le nombre de clics sur les Call To Action, on utilise aussi un icône en plus du texte sur le bouton. - Le GRIS et l’ANTHRACITE va nous permettre de coloriser le texte, les titres et les contours des blocs. Le noir n’est pas maximal (#000000) pour apporter un plus grand confort de lecture sur écran. Trop de contraste noir/blanc fatigue les yeux pendant la lecture.
ICﾃ年ES
http://www.entypo.com/
http://fortawesome.github.io/Font-Awesome/
Entypo & Font Awesome Pour simplifier la maintenance et l’évolution de la charte, voici deux librairies gratuites d’icônes : « Entypo » & « Font Awesome ». Ces librairies permettent de faciliter l’intégration sur des supports numériques grâce notamment à leur implémentation dans Twitter Bootstrap et le fait qu’elles sont en constante évolution (harmonisation et ajouts d’icônes). Ces deux librairies peuvent donc servir de base pour la création d’icônes spécifiques.
Sur un fond en couleur, les icônes doivent être en blanc. Sur fond blanc les icônes peuvent être en couleur.
Pas de contours et pas de fond noir
TEXTURES
PAPIER
GRILLE
Textures L’utilisation d’une texture de type papier, permet de renforcer l’identité de la marque. Cette texture permet de faire un rappel avec les produits de QuoVadis (agendas, carnets…). Elle doit être utilisée en arrière plan sur toutes les interfaces web et mobile. La texture de type « Grille » est destiné à un usage plus corporate (documents interne, présence chez des partenaires sous forme de publicité ou landing page...).
ÉLÉMENTS D’INTERFACE (GUI)
quovadis_gui_section_1.psd Color swatches Boutons - Default - Primary - Call to Action - Special - Action buttons - Select - Notifications Checkboxes & radios Inputs Breadcrumbs - Standard - Process Social networks - Links - Actions Texture sample Flags
Boutons Ce type de bouton peut être utilisé pour mettre en avant une zone clicable qui n’est pas très importante, comme un lien vers la page des filtres sur mobile par exemple.
Ce type de bouton doit être utilisé pour mettre en avant des éléments de navigation importants, comme les liens vers les fiches produits.
Ce type de bouton doit être utilisé pour mettre en avant des éléments très importants, comme les boutons « Ajouter au panier », ou les boutons pour valider le processus de paiement.
Ce type de bouton doit être utilisé pour mettre en avant des liens vers des produits sur un fond de type photo (sliders, alertes, collections). La couleur pourpre doit être utilisée pour mettre en avant des promotions/réductions sur certains produits, ou pour mettre en avant un bouton particulier comme le bouton pour « Créer un compte ».
Ordinateur
Mobile
Les cases à cocher doivent être utilisées pour les interfaces destinées aux écrans d’ordinateurs. Pour les supports tactiles (mobile et tablette), les cases à cocher se transforment en «Toogle Switch».
Utilisez les boutons natifs pour les actions des réseaux sociaux (j’aime, partager, tweet...).
quovadis_gui_section_2.psd Sliders - Touch - Standard Tabcordion - Tabs - Accordion Payment process Nav bar Alerts - Success - Infos - Warning - Error
Tabcordion
Pour adapter un système d’onglets sur mobile et tablette il faut le transformer en accordéon, on passe d’un système de navigation horizontal à un système de navigation vertical, plus cohérent sur tablette et mobile car l’écran est moins large et plus long. De plus c’est une solution qui permet une plus grande souplesse pour l’évolution de la plateforme. http://aexmachina.github.io/tabcordion/
quovadis_gui_section_3.psd Responsive grid - Desktop - Tablet - Smartphone
Grille Responsive L’utilisation de la grille permet de communiquer uniquement sur les différentes collections. L’idée est de pouvoir comparer facilement l’ensemble des collections ou de fournir des détails sur les usages des produits en montrant des scènes de vie (comme sur la vidéo cidessous).
http://vimeo.com/69170564
quovadis_gui_section_4.psd Thumbnails - Widget Recently Viewed - Product Desktop - Product Tablets - Product Smartphones Zoom Highlight a collection Footer
quovadis_gui_section_5.psd Popovers & Tooltips Header Filters - Desktop VIew - Touch devices view
quovadis_gui_section_6.psd Typography - Primary font - Unified collections - Fantasy collections - Alternative free font Icons - Entypo - Fontawesome Modals
quovadis_gui_section_7.psd Devices
- iPhone - iPad
quovadis_gui_section_8.psd Advertising - Bannière classique - Bannière large - Format custom - Skyscraper - Couverture - Rectangle moyen - Carré - Skyscraper (small) - Interstitiel
Les meilleurs formats publicitaires actuel pour le web : http://www.iab.net/risingstars#1
Vous pouvez télécharger le GUI complet grâce à ce lien : https://github.com/QUOVADIS/gui
Š 2014 QUOVADIS. All rights reserved.