DESIGN
BOOK
SOMMAIRE
1/ Le moodboard 2/ Le logotype 3/ Le favicon 4/ La typographie
7/ Ui kit 8/ L’iconographie 9/ Design d’intéraction
5/ L’univers chromatique primaire 6/ L’univers chromatique secondaire
10/ Écrans 11/ Justification des choix
LE MOODBOARD
At home https://at-home.club/#london
J’ai choisi ce site pour sa transition entre les sections et sa navigation.
LE MOODBOARD
LE MOODBOARD
Delassus https://delassus.com/en/
J’ai choisi ce site pour son slider et sa simplité de navigation. De plus, les éléments sont mis en avant grâce à la couleur.
LE MOODBOARD
LE LOGOTYPE
Pourquoi le Ara ? Vivant au Brésil, le Ara du Spix est considéré comme étéint à l’état sauvage. Il est un symbole fort de protection et de dispariion.
+ Illustration d’un Ara dy Spix
= Carte du Brésil
Pourquoi le Brésil ? ? Le Brésil est connu comme abritant plus de 4 millions d’espèces répertoriés. La déforestation de ce pays engendre le déclin de la faune et de la flore.
LE LOGOTYPE
Couleurs
Zone de protection
C : 100 M:0 J : 11 N:0
R:0 V : 158 B : 210 #009ed2
C : 100 M : 67 J : 30 N : 19
R:0 V : 73 B : 114 #004972
LE LOGOTYPE
Interdits Déclinaisons
Noir
Gris (50% et 85% de noir)
Blanc sur fond noir (négatif)
Blanc sur image
LE FAVICON
awa
https://awa.com
LA TYPOGRAPHIE
h1
Regular
Capital Dry Brush - 58 pt
ABCDEFGHIJKLMNOPQRSTUWXYZ
h2
Raleway - 42 pt h3
Raleway - 32 pt h4
Raleway - 24 pt p
Raleway - 18 pt Raleway - 14 pt Raleway - 12 pt
0123456789?!.,:@&+
Regular Uniquement pour texte courant et légende
ABCDEFGHIJKLMNOPQRSTUWXYZ abcdefg h i j k l m n o p q r s t u w x y z 0123456789?!.,:@&+
Uniquement pour les noms citations et nom de personne
ABCDEFGHIJKLMNOPQRSTUWXYZ abcdefg h i j k l m n o p q r s t u w x y z 0123456789?!.,:@&+
L’UNIVERS CHROMATIQUE PRIMAIRE
C : 80 M : 27 J : 51 N : 10
C:6 M : 40 J : 63 N:0
R : 39 V : 132 B : 126 #27847e
R : 236 V : 169 B : 105 #eca969
Les deux couleurs principalement utilisées sont le vert et le jaune. AWA s’approprie les couleurs de la nature telles que le vert, le bleu ou encore le jaune orangé, pour mettre en avant ses photos et son message. Le site joue sur des tonalités de couleur grâce à un jeu entre dégradés et images.
C : 70 M:0 J : 60 N:0
R : 69 V : 179 B : 132 #45b384
L’UNIVERS CHROMATIQUE SECONDAIRE
C : 17 M : 36 J : 46 N:5
R : 209 V : 167 B : 136 #d1a788
C : 77 M : 33 J : 25 N:8
R : 51 V : 131 B : 161 #3383a1
C : 31 M : 30 J : 50 N : 11
R : 175 V : 160 B : 127 #afa07f
C:1 M : 11 J : 56 N:0
R : 255 V : 225 B : 136 #ffe188
C : 51 M : 36 J : 19 N:4
R : 138 V : 150 B : 176 #8a96b0
C : 86 M : 56 J : 42 N : 35
R : 39 V : 77 B : 95 #274d5f
C : 69 M:9 J : 45 N:0
R : 75 V : 172 B : 157 #4bac9d
C : 70 M : 55 J : 44 N : 37
R : 74 V : 82 B : 93 #4a525d
AWA n’utilise que des couleurs issues de la nature : terre, feuille, eau, sable, ardoise, roche, etc. Les couleurs ont été directemet prises de photos d’animaux ou de nature.
UI KIT
Barre de recherche
Écran suivant
Réseaux sociaux
Newletter
Slider
Facebook Twitter Instagram
Curseur
ICONOGRAPHIE Couleur de fond
Image homepage
ICONOGRAPHIE Image questions
Exemple d’interface animale
ICONOGRAPHIE
Image affiche
WWF
ICONOGRAPHIE
Image street-art
Sonny
ICONOGRAPHIE
Image street-art
Cai guo-qiang
DESIGN D’INTÉRACTION
Slider Menu burger
Réseaux sociaux
Écran suivant
Barre de recherche exploitation
DESIGN D’INTERACTION
Section rétactable Menu rétractable
DESIGN D’INTERACTION
Interface immersive via scroll (ordinateur)
ÉCRANS
Afin de sensibiliser toute tranche d’âge, AWA est accessible autant sur ordinateur que sur mobile. En effet, certains préfèrent naviguer via un ordinateur et d’autre grâce au téléphone.
ÉCRANS
Home page
ÉCRANS
Jeu / questions
ÉCRANS
Interface animale + oeuvres
ÉCRANS
Interface animale
ÉCRANS
Home page
Jeu / questions
ÉCRANS Interface animale
JUSTIFICATION DES CHOIX
La typographie Les artistes Les artistes choisis ont pour point commun la dénonciation de la cause animale. Les oeuvres sont diverses et variées, tant pas leur message que leur expression graphique (affiche, street-art, sculpture, etc.). Les oeuvres choisies parlent d’elle-même. Elles s’adressent tant à un public jeune que plus âgé. Sans montrer du sang, elles sont fortes en message.
AWA est composé de deux typographies. La première a pour but de donner un côté « sauvage » au site. Elle est utulisée pour les titres. La seconde, plus ronde, créé un contraste avec la première typo. Elle est plus lisible et utilisée pour le texte courant.
L’iconographie Les images choisies représentent des aninaux en danger ou en voie d’extinction. Ceux sont des photos ou des illustrations.
Les couleurs Les couleurs choisies sont dynamiques. Elles ont toutes été reprises de photo de nature ou d’animaux.
DOSSIER RECOM-
MANDATION
1/ Le sujet
SOMMAIRE
2/ Pourquoi ce sujet ? 3/ Les besoins
6/ L’étude de la concurrence
4/ Les problèmes
7/ La cible
5/ Les objectifs
8/ Le concept
9/ La stratégie 10/ Les valeurs 11/ La charte éditoriale
12/ Les rubriques 13/ L’arborescence 14/ Les fonctionnalités 15/ Les wireframes
LE SUJET
Site culturel permettant d’éveiller la conscience de la cause animale par l’art
POURQUOI CE SUJET ?
Une histoire de passion Je suis passionnée d’animaux. Je regarde souvent des documentaires sur les animaux sauvages, domestiques ou même des reportages sur les zoos. Je ne suis pas une grande protectrice des animaux, je ne fais pas de dons et je ne milite pas. Néanmoins, je me tiens au courant de ce qui se passe dans la société. C’est en regardant le sujet de la cause animale sur internet, que je me suis rendu compte que beaucoup d’artistes exploitaient ce travers de la société. C’est ainsi que j’ai décidé de créer un site culturel dédié à la cause animale et à l’art.
LES BESOINS
Protéger
Réduire
LES PROBLÈMES
La prise de conscience
Le don
OBJECTIF
Eveiller la conscience sur la cause animale
Sensibiliser toutes tranches d’âge
L’ÉTUDE DE LA CONCURRENCE
Aspas
Hutan
L’ÉTUDE DE LA CONCURRENCE
L’architecture
aspas-nature.org/
le site est composé de trois grandes sections, composées ellemême de plusieurs parties.
L’ÉTUDE DE LA CONCURRENCE
La cohérence Sur les six onglets, l’avant dernier n’a pas de menu rétractable. Cela perturbe. Textes liens non cohérents avec les autres liens. Aussi, l’utilisateur peut ne pas voir et ne pas cliquer dessus... Il n’y a pas d’unité dans les pictos. Cela créé un effet « brouillon ».
L’ÉTUDE DE LA CONCURRENCE
Les espacements divergent, créant un manque d’attention dans la création du site.
Les conventions La connexion à son compte se trouve dans le footer. En temps normal, il se trouve dans le header, à droite.
L’ÉTUDE DE LA CONCURRENCE
L’information N’ayant pas trouvé le FAQ en naviguant, j’ai fait une recherche dans la barre de recherche. Cela n’aide pas l’utilisateur à trouver ses réponses, il est perdu et peu rassuré.
L’ÉTUDE DE LA CONCURRENCE
La gestion des erreurs Le site n’aide pas à la correction des mots. La page 404 ressemble au site lui-même. Difficile de comprendre d’où vient l’erreur.
L’ÉTUDE DE LA CONCURRENCE
Accessibilité Il n’y a pas de balise « alt » pour décrire la photo. Aussi, le site n’est pas accessible pour les personnes malentendantes.
L’ÉTUDE DE LA CONCURRENCE
Conclusion des 12 règles de l’ergonomie Architecture d e l’ in format ion
Com préhensi o n
Orga nis a tio n visu elle
G est i o n des er reu r s
Co hé re nce
R api di té
Co nve ntio n
Liber té
Inf o rm a tio n
Acc essi bi l i té
Assista nce
Sat i s f a c t i on
Respectée
Non respectée
L’ÉTUDE DE LA CONCURRENCE
Loi de simplicité Il y a beaucoup de textes et de rubriques. Il est difficile d’aller l’essentiel permettant de focaliser l’attention des utilisateurs.
L’ÉTUDE DE LA CONCURRENCE
Loi de symétrie Les sections « actualités » ne sont pas symétriques malgré le fait qu’elles soient composées de la même façon. Le footer est déséquilibré dans sa composition.
L’ÉTUDE DE LA CONCURRENCE
Loi de proximité Certains espaces ne sont pas assez prononcés et sème la consution chez l’utilisateur.
L’ÉTUDE DE LA CONCURRENCE
Nombre magique de miller Ils y a beaucoup trop de catégorie dans ce sousmenu.
L’ÉTUDE DE LA CONCURRENCE
Co n c l u s i on des lois de la ges t alt L o i d e p rox im ité
Loi de con t i nu i té
L o i d e sym é trie
Nombre magi qu e de M i l ler
L o i d e l a b o nne forme
Loi de Hick - H ym an
L o i d e sim il a rité
Affordan ce
L o i d e l a sim p l icité
Loi de F itt
L o i d e cl ô ture
Lisibilité
n o t e t o t a le
Respectée
Non respectée
8/20
L’ÉTUDE DE LA CONCURRENCE
L’architecture Le site est très bien structuré. Il est composé de sections lisibles.
https://www.hutan.org.my/
L’ÉTUDE DE LA CONCURRENCE
L’information Il n’y a pas de barre de recherche ni de FAQ . Cela n’aide pas l’utilisateur à trouver ses réponses ou ce qu’il recherche, il est perdu et peu rassuré.
L’ÉTUDE DE LA CONCURRENCE
L’accessibilité Il n’y a pas de balise « alt » pour décrire la photo. Aussi, le site n’est pas accessible pour les personnes malentendantes.
L’ÉTUDE DE LA CONCURRENCE
La rapidité Le site est composé de beaucoup de vidéo, retardant le chargement de la page. Le menu écrit en rouge est peu lisible sur l’image, obligeant l’utilisateur à s’arrêter pour bien lire.
L’ÉTUDE DE LA CONCURRENCE
Conclusion des 12 règles de l’ergonomie Architecture d e l’ in format ion
Com préhensi o n
Orga nis a tio n visu elle
G est i o n des er reu r s
Co hé re nce
R api di té
Co nve ntio n
Liber té
Inf o rm a tio n
Acc essi bi l i té
Assista nce
Sat i s f a c t i on
Respectée
Non respectée
L’ÉTUDE DE LA CONCURRENCE
Loi de symétrie La symétrie est très bien exploitée sur ce site. Il y a néanmoins quelques erreurs.
L’ÉTUDE DE LA CONCURRENCE
Loi de proximité Certains titres sont mal placés, entrainant la confusion de l’utilisateur.
Loi de Hick-Hyman Les textes d’explications sont trop longues, perdant l’utilisateur dans sa lecture et découverte.
L’ÉTUDE DE LA CONCURRENCE
Nombre magique de miller Un des sousmenu a beaucoup de rubriques, perdant ainsi l’utilisateur dans sa navigation.
L’ÉTUDE DE LA CONCURRENCE
Co n c l u s i on des lois de la ges t alt L o i d e p rox im ité
Loi de con t i nu i té
L o i d e sym é trie
Nombre magi qu e de M i l ler
L o i d e l a b o nne forme
Loi de Hick - H ym an
L o i d e sim il a rité
Affordan ce
L o i d e l a sim p l icité
Loi de F itt
L o i d e cl ô ture
Lisibilité
n o t e t o t a le
Respectée
Non respectée
12/20
L’ÉTUDE DE LA CONCURRENCE
Aspas
Hutan
Awa
B arre d e re ch erches Cookies FAQ J eu S’i n s cr i re / S e co nnecter I mage s V idé os Don Rése au x s oci aux N ew le t te r
Awa souhaite se démarquer tant par son contenu que par son design. Le site veut aussi simplifier sa navigation en se concentrant sur l’essentiel.
LA CIBLE
Coeur de cible Personne ultra connectée, passionnée des animaux, regardant souvent des documentaires animaliers, et faisant des dons aux associations pour la cause animale.
Cible secondaire Reporter animalier, youtubeur, association, centre de refuge et zoo.
Cible principale Personne connectée, aimant les animaux, intéressée par la cause animale à titre informatif.
Emma Dubois
23, étudiante école du Louvre 23 Yoga
Dessin
Devices et réseaux sociaux
Storytelling Emma est passionnée d’art et a décidé d’en faire son métier. Elle adore aussi son chat, Bounty, qu’elle photographie souvent. Abonnée à des chaînes animalières, elle passe son dimanche à découvrir la faune et la flore. Elle fait des dons assez régulièrement sur les sites dédiées à la cause animale.
Coeur de cible
L’utilise 90 90% de son temps Introvertie
P as s i ve
Active
So ci ale
Isol ée
Calme
L’utilise 10 10% de son temps
Ip hone 8 +
Personnalité Ex t r aver t i e
M ac book air 1 3" 3
Énergique
Motivation
Besoins
Attentes
« Ma plus grande motivation, c’est d’aider les associations qui protègent les animaux. »
Elle a besoin de sites dont la communication diffère et dont le contenu est moins institutionnel.
Elle souhaite un site web qui parle de la cause animale sous un autre angle afin de toucher plus de personnes.
Aude Perez
Storytelling
31, secrétaire
Bénévolat
Photographie
Devices et réseaux sociaux
Aude adore la photographie. Elle aime de temps de temps regarder des documentaires animaliers. Elle est bénévole à la SPA de sa ville, où elle est aussi photographe animalière.
Cible principale
L’utilise 35 35% de son temps Introvertie
P as s i ve
Active
So ci ale
Isol ée
Calme
L’utilise 65 65% de son temps
Ip hone 8 +
Personnalité Ex t r aver t i e
M ac book air 1 3" 3
Énergique
Motivation
Besoins
Attentes
« J’adore aider les animaux, même si je n’en ai pas moi-même. Ça m’attriste de les voir dans cet état là. »
Elle besoin de comprendre d’où vient l’admiration de l’homme pour l’animal mais aussi le déclin de ce dernier.
Elle souhaite un site web simple et accessible à tous, autant original qu’informatif.
Paul Roussel 42, youtubeur 42
pornfood
randonnée
Devices et réseaux sociaux
Storytelling Paul adore la randonnée et découvrir la faune et la flore. Il publique beaucoup de vidéos d’animaux sur les réseaux sociaux, tant sauvage que domestique. Il veut que l’homme s’intéresse à la cause animale et il sait que la photographie peut aider.
Cible secondaire
L’utilise 75 75% de son temps Introvertie
P as s i ve
Active
So ci ale
Isol ée
Calme
L’utilise 25 25% de son temps
Ip hone 8 +
Personnalité Ex t r aver t i e
M ac book air 1 3" 3
Énergique
Motivation
Besoins
Attentes
« Ma plus grande motivation, c’est de partager des photos qui font réagir. »
Il a besoin d’un site qui, comme lui, parle d’animaux sous un angle différent et plus parlant.
Il souhaite un site web informatif qui ne promeut pas le don mais la connaissance.
LE CONCEPT
AWA, site culurel Le concept du site est de présenter la cause animale sous un angle accessible à tous, l’art. C’est un moyen de communication existant depuis la préhistoire, connu et exploité de tous. Ce moyen visuel touche toute personne, quel que soit son âge et son sexe. AWA, Art for Wild Animals, consacre son site à l’explication du déclin de certains animaux grâce à des expositions, peintures, sculptures, exprimant ainsi à quel point la culture de l’animal est présente chez l’homme.
LA STRATÉGIE
Agir Il y a différente façon d’agir. Pour AWA, informer, c’est déjà agir. Pour d’autres sites, c’est donner. AWA agit comme une préface au site de don, il les accompagne.
Communiquer Communiquer est important. C’est pourquoi AWA est un site culturel instructif. On n’y apprend pour comprendre la cause animale et le besoin de protéger toutes les espèces.
Revaloriser En permettant aux hommes de comprendre, AWA revalorise les sites de dons pour la cause animale, AWA n’explique pas pourquoi donner est nécessaire, mais pourquoi la cause animale est importante.
LES VALEURS
Engagement
AWA s’engage à éveiller la conscience de la cause animale et valoriser les sites de dons.
Bienveillance
AWA se veut respectueux des autres, pas de critiques ou de polémiques.
Accessibilité
Le site doit être accessible à tous, petits et grands. C’est pourquoi le langage est simple et le site très visuel.
Singularité AWA se veut unique dans sa communication et son approche de la cause animale.
CHARTE ÉDITORIALE
Le public ciblé Tout public est ciblé, enfant comme adulte.
L’objectifs Le but est d’éveiller d’avantage la conscience de la cause animale en informant.
Les sujets abordés L’art, l’exploitation, la disparition, l’enfermement, entre autre.
L’angle de communication S’informer, c’est déjà agir.
Le site se distingue grâce à son angle de communication : l’art. C’est un point de vue nouveau sur un site internet en terme de cause animale.
CHARTE ÉDITORIALE
Le style rédactionnel AWA est un site ouvert à tous, petits et grands. Le langage employé est simple, les phrases sont courtes et les mots-clefs sont mis en avant. Le ton employé est assez personnel, le tutoiement est utilisé afin de créer un contact plus direct avec la cible.
CHARTE ÉDITORIALE
Nom du domaine awa.fr
Extension .fr
Mots clefs Cause animale, protection, art animalier, exploitation, disparition, enfermement, nature, animaux, extinction,
CHARTE ÉDITORIALE
Meta-description Chaque page aura une description qui lui sera propre. Optimiser la metadescription permet d’augmenter le taux de clic et ainsi de mieux se placer dans les recherches google.
Titre Chaque page dispose d’un titre qui est aussi un mot-clef. En plus de hiérarchiser l’information et d’accéder plus rapidement à certaines pages, cela aide au référencement. On retrouve le titre dans l’url du navigateur, par exemple : www.awa/exploitation.fr
CHARTE ÉDITORIALE
L’ADN d’AWA AWA se veut instructif, communiquant, accessible, originale dans sa façon d’aborder la cause animale et sans polémique. AWA met en avant des oeuvres, connues ou non, d’artiste de toute époque. Chaque photo et oeuvre abordent un thème plus ou moins fort, que ce soit sur la beauté animale ou sa condition de vie. Ce contraste est la ligne directrice d’AWA.
CHARTE ÉDITORIALE
Les médias utilisés Le site est principalement composé de photos. Très visuelles, elles sont une porte d’accès à la compréhension et à l’accessibilité de l’information pour tous.
CHARTE ÉDITORIALE
La localisation Créé en france, AWA souhaite d’abord sensibiliser les français sur du court et sur du moyen terme. C’est pour cela que le site sera traduit en français. Cependant, les oeuvres étant principalement internationales, le site sera traduit par la suite en anglais, langue universelle, puis en différentes langues afin de rendre le site accessible à plus de personne, la langue pouvant parfois être une barrière.
LES RUBRIQUES
L’art, expression visuelle de la cause animale.
Exploitation, disparition, enfermement.
Cette page est consacrée à l’importance de l’art et du thème animale. Elle permet de comprendre pourquoi AWA a pris cet angle d’approche pour parler de la cause animale.
Cette page est dédiée à l’explication de ses trois mots-clefs, renfermant eux-même d’autres conditions animale. Ses trois mots sont forts et résume les conditions animales actuelles.
Les animaux en danger AWA propose d’accéder rapidement les pages dédiés aux animaux et à l’art.
Quel animal vous ressemble le plus ? Les jeux ont toujours permis d’engager davantage une personne dans un univers. Afin de sensibiliser les jeunes, AWA propose un jeu permettant de s’identifier à un animal. C’est aussi un moyen d’accéder, de façon aléatoire, à la page de l’animal.
Nos engagements Informer, c’est déjà agir. Aussi, AWa s’engage à seulement parler de la cause animale et des conditions de vie. Instruire, communiquer, ne pas polémiquer, voilà les engagements d’AWA.
L’ARBORESCENCE
Accueil
L’art, expression de la cause animale
Exploitation, disparition, enfermement.
Quel animal vous ressemble le plus ?
Les animaux en danger
Nos engagements
Footer
Liens externes
Mentions légales
Cookies
LES FONCTIONNALITÉS
Barre de recherche AWA intègre une barre de recherche afin de simplifier la navigation et la recherche.
Réseaux sociaux Le site est présent sur les réseaux sociaux. Cela permet à AWA de sensibiliser plus de personnes et d’être plus accessible.
Newsletter AWA propose chaque semaine une newlettter. Elle a pour but de mettre en avant un animal ou une oeuvre, voire même une exposition en cours.
LES WIREFRAMES
LES WIREFRAMES
Avant de jouer Cet écran est une transition entre la homepage et les questions. Elle aide à la reconcentration des lecteurs.
LES WIREFRAMES
LES WIREFRAMES
Avant de découvrir l’animal Chaque page « animal » à un préambule, laissant le choix aux lecteurs de poursuivre la lecture ou non.
LES WIREFRAMES