Design System
réalisé par
Cynthia PETITOT
Sommaire
01. Moodboard
06. Ui kit
02. Logo
07. Iconographie
03. Favicon
08. Design d’interaction
04. Typographie
09. Écrans
05. Couleurs
10. Justification des choix
2
1. Moodboard
Moodboard -
UNIVERS DE L’OEUVRE
4
Moodboard -
UNIVERS PERSONAS
5
Moodboard -
UNIVERS PERSONAS
6
2. Logo
Logo -
LOGOTYPE DE BASE
La connotation du raffinement La marque est représentée par un logo typographique reprenant les initiales de l’artiste Damien Joaquim Miller. Ce choix permet de rattacher l’identité du designer à ses oeuvres. Il viendrait comme une signature et deviendrait une valeur sûre et un réel gage de qualité pour ses clients.
La classification Thibaudeau Le site incarne le luxe et l’excellence. Le choix s’est porté sur une police à empattement triangulaire car l’Elzévir est reconnu comme étant chaleureuse, romantique, classique et élégante.
8
Logo -
LOGOTYPE DE BASE
Monochrome Le noire reste un incontournable chic en toutes circonstances. Cette couleur est aussi celle qui est le plus représentée parmi celles choisies par les maisons de luxe : 82% pour être exact. De plus, elle est intemporelle.
Flat Design À l’occasion d’évènements spéciaux, la marque pourra décliner la couleur du logo selon la charte graphique établie. Dans tous les cas, le logo conservera un design minimaliste, sans aucun superflu (ombres, 3D, dégradés).
9
Logo -
RESPONSIVE
Pour une meilleure lisibilité Le logo en responsive permet à mesure qu’ il rétrécit ou s’agrandit, perd ou gagne en information. Par exemple sur une taille moindre, le point qui suit les lettres disparait car il devient gênant pour la lecture du logo.
10
Logo -
VARIANTES
11
Logo -
INTERDICTIONS
Ne jamais mettre un fond dans la
La typographie du logo ne devra
La couleur du logo doit toujours
typographie du logo.
être changée sous aucun prétexte.
provenir de la palette de la charte.
12
Logo -
INTERDICTIONS
Ne jamais mettre un fond de la
Éviter les fonds avec une photo
Pour le fond en arrière-plan, s’en tenir
même tonalité que le logo.
complexe en arrière-plan.
à la charte graphique.
13
Logo -
ZONE DE RESPIRATION
x = hauteur de « D »
La zone respiration devra toujours être calculée par rapport à la hauteur de la lettre « D ».
14
3. Favicon
Favicon
Comme le favicon s’inscrit dans un carré de 12x12 ou 32x32 pixels, les zones de respiration diffèrent.
16
Favicon
Au vu de sa petite taille, le favicon affiche le logo responsive, à savoir sans le point.
17
Favicon
Le logo devra toujours appa-
Il ne peut être sur fond transpa-
raitre sur le favicon en noir sur
rent car les onglets ne sont pas
fond blanc.
toujours blancs.
18
4. Typographie
Typographie -
LES POLICES UTILISÉES
Design par Fabian De Smet
Design par Julieta Ulanovsky
Butler Regular
Montserrat Regular
ABCDEFGHIJKLMN... abcdefghijklmnopq... 0123456789 &@éèàî,;:/ç()[]
ABCDEFGHIJKLMN... abcdefghijklmnopq... 0123456789 &@éèàî,;:/ç()[]
Style utilisé
Styles utilisés
Regular
Light Regular Medium SemiBold Bold
20
Typographie -
Titre - 63 px
SOUS-TITRES
Des sculptures plus vraies que nature
Sous-Titre - 21 px
Quand l’imaginaire rejoint la réalité
Texte courant - 24 px
L’artiste repousse sans cesse les limites de la technologie en proposant des hologrammes toujours plus réalistes. Ces sculptures qui semblent plus vraies que nature s’adonnent à des scènes surréalistes en défiant la loi de la gravité et leur convoient une dimension fantastique.
Titre 2 - 32 px
VOIR PLUS DE MODÈLES DE LA COLLECTION
21
5. Couleurs
Couleurs -
LES PRINCIPALES
NOIR
GRIS FONCÉ
BLANC
# 000000
# 444444
# FFFFFF
RVB : 0 / 0 / 0
RVB : 68 / 68 / 68
RVB : 255 / 255 / 255
CMJN : 91 / 79 / 62 / 97
CMJN : 65 / 55 / 52 / 54
CMJN : 0 / 0 / 0 / 0
23
Couleurs -
LES SECONDAIRES
DORÉE
GRIS CLAIRE
GRIS
# CDAB75
# FBFBFB
# C6C6C6
RVB : 205 / 171 / 117
RVB : 251 / 251 / 251
RVB : 198 / 198 / 198
CMJN : 19 / 31 / 58 / 6
CMJN : 2 / 1 / 1 / 0
CMJN : 0 / 0 / 0 / 30
24
6. Ui kit
Ui kit
Étape 1. Élément à activer
Étape 2. Élément après activation
Lien
Lien
Rubrique
Rubrique
26
7. Iconographie
Iconographie - UNIVERS DE DJM
Montre Dog Baloon
Montre Aquatica
Montre Savanah
Collaboration
Collection DJM
Collection DJM
28
Iconographie - UNIVERS DE DJM
Montre Savanah Collection DJM
29
Iconographie - UNIVERS DE DJM
Montre Aquatica Collection DJM
30
Iconographie - UNIVERS DE DJM
Montre Beetle Collection DJM
31
Iconographie - UNIVERS DE DJM
Montre Monkey Collection DJM
32
Iconographie - UNIVERS DE DJM
Montre Dog Baloon Collaboration
33
Iconographie - UNIVERS DE DJM
Montre Pink Flamingo Collection DJM
34
Iconographie - UNIVERS DE DJM
35
8. DESIGN D’INTERACTION
Design d’intéraction -
BARRE DE NAVIGATION
Étape 1
Étape 2
Quand on clic sur l’une des rubriques, il devient plus foncé et plus gras. Il indique à l’utilisateur où il se trouve.
37
Design d’intéraction -
BARRE DE NAVIGATION
Étape 1
Pour changer la langue du site, un menu déroulant est à disposition.
Étape 2
Au survol, la langue change de couleur, et aussitôt sélectionné, le menu se referme.
38
Design d’intéraction -
RUBRIQUE
A. Dès que l’on clic sur l’une des rubrique, B. Lorsque l’on clic sur un sous menu,
un menu arrive sur la gauche.
son sous menu se déroule. Étape 1
Étape 2
C. Au survole, l’image du produit apparait en arrivant sur la gauche comme le précédent, pour aider l’utilisateur dans parcours
39
Design d’intéraction -
CHARGEMENT
Étape 1
Étape 2
Page de chargement. Le logo se forme à
Il affiche la page qu’une fois qu’elle est
mesure qu’il charge.
entièrement.
40
9. Écran
Écrans
42
Écrans -
RESPONSIVE
Respect des dimensions d’écran
Aller à l’essentiel
Le site utilisera le responsive design pour qu’il puisse
Dans un contexte mobile, certains blocs n’ont aucune
d’adapter aux différentes tailles d’écran. Depuis quelque
raison d’apparaitre. Dans la rubrique «Le Monde de DJM»,
temps, les sites responsives sont également mieux réfé-
ils seront remplacés par des liens si l’utilisateur souhaite
rencés par Google et la mise en avant d’une page dépend
en voir plus.
donc de ses capacités d’adaptation.
43
10. Justification des choix
Justification des choix -
TYPOGRAPHIES, COULEURS ET MÉDIAS
Couleurs
Titres
Pour les couleurs j’ai opté pour le noir, le dorée ainsi que
La police Butler est une police à empattement triangulaire
le blanc et diverses nuances de gris pour apporter du
car l’Elzévir est reconnu comme étant élégante. Elle est un
contraste. Cette gamme colorée est souvent associée au
rappel au logo typographique et sera contrastée avec une
luxe et la sobriété. Le noir et le blanc seront dominants car
police sans sérif.
ils transmettent l’idée d’un chic intemporel qui ne se démode pas.
Texte courant La Montserrat est une police très actuelle. Sans empatte-
Images
ment, elle apporte légèreté et simplicité. Ces 18 styles
Le concept étant créé de toute pièce, il n’existe pas de
offrent plusieurs épaisseurs de graisse redoutables pour
visuel. Ils ont donc été imaginés et réalisés intégralement
traiter la hiérarchisation de l’information.
à l’aide d’outil 3D et 2D ce qui présente de multiples avantages comme : des images de haute résolution et de bonne
Ambiance générale
qualité. N’étant pas bridée par les images trouvées sur inter-
Les visuelles du site sont dans le même registre que le
net, cette option laisse place à plus de créativité.
reste du site, à savoir sur des tons chics et intemporels.
45
Dossier de recommandation
réalisé par
Cynthia PETITOT
Sommaire
01. Contexte
05. Personas
02. Benchmark
06. Concept
03. Objectifs
07. Charte Éditoriale
04. Cibles
08. Spécifications Fonctionnelles
2
Pourquoi ce sujet ?
Le monde de l’horlogerie me fascine. C’est un univers chargé d’histoire, très raffiné avec un travail d’excellence que l’on associe au luxe. En tant qu’Infographiste 2D/ 3D, je décide de créer une collection de montres-bracelets en 3D. DJM est un artiste fictif à qui j’attribuerai tous les mérites de ce travail.
3
1. Contexte
Contexte
Les premières montres-bracelets
Un garde-temps incontournable
Au début du XXème siècle, malgré des crises secouant l’horlogerie,
À la fin de la guerre, la montre-bracelet suscite donc grandement
les avancées continuent, et les modes changent. On voit notamment
l’intérêt des hommes, qui vont peu à peu délaisser la montre gousset
apparaître après la montre à gousset, la montre-bracelet, qui est dé-
pour l’adopter.
sormais la plus portée et la plus connue des garde-temps.
Avec le temps, la montre-bracelet devient un objet de toutes les
Cette dernière, imprécise du fait de sa petite taille, devient un acces-
fantaisies et repoussant sans cesse les limites avec des technologies
soire réservé surtout à la gent féminine. C’est toujours dans la poche
toujours plus innovantes.
de la veste prévue à cet effet que les hommes gardent leur montre à gousset.
Une réputation qui évolue vite Les premières montres-bracelets à destination des hommes ne furent pas commercialisées tout de suite. Elles furent d’abord utilisées par des militaires lors de la Guerre de Boers puis par des aviateurs. Jugée pratique, voire indispensable, elle voit sa réputation évoluer très vite.
Source : https://www.maison-bianchi.fr/joaillier-horloger-createur/
5
2. Benchmark
Benchmark -
PREMIER SITE ANALYSÉ
Jacquet Droz Jaquet Droz est une entreprise horlogère suisse créée en 1738, propriété du groupe Swatch. https://www.jaquet-droz.com/
7
Benchmark -
LOI DE PROXIMITÉ
Par moments les sections manquent d’espacement entre elles. Du coup, le contenu se mélange et se confond.
8
Benchmark -
COMPRÉHENSION
Les pictos des différents réseaux sociaux ne sont pas légendés quand on passe la souris.
9
Benchmark -
CONVENTION
Dans l’esprit de l’utilisateur, les étoiles sont associées aux avis et non aux puces d’un diaporama.
10
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte courant en lettres capitales est difficilement lisible.
11
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte comporte trop de mots par ligne. Environ 22 mots.
12
Benchmark -
PREMIER SITE ANALYSÉ
LES PLUS
Site à l’image de la haute horlogerie Bonne architecture de l’information Répond au problème de l’accessibilité
LES MOINS
Règles de lisibilité pas toujours respectées Quelques soucis d’espacement
13
Benchmark -
PREMIER SITE ANALYSÉ
Ce qu’il faut retenir Jaquet Droz recherche l’excellence à tous les niveaux. S’adressant à une riche clientèle internationale, le site s’adapte à plusieurs langues et règle les soucis d’accessibilité. Au-delà du produit et à l’image de la marque, nous sommes sur un site quasiment irréprochable qui accompagne l’utilisateur à obtenir ce qu’il veut.
14
Benchmark -
DEUXIÈME SITE ANALYSÉ
Christophe Claret Christophe Claret est un créateur et concepteur innovant pour de grandes marques horlogères ainsi que pour sa propre marque. https://www.christopheclaret.com/fr/
15
Benchmark -
NOMBRE MAGIQUE DE MILLER
Au delà de 7 éléments, tous s’embrouillent. Trop d’informations.
16
Benchmark -
AFFORDANCE
Il y a un hover mais le clique est inactif. Du coup, il ne permet pas de filtrer l’information.
17
Benchmark -
LOI DE SYMÉTRIE
la page n’est pas structurée, tout se mélange et les marges ne sont pas les mêmes partout.
18
Benchmark -
LOI DE PROXIMITÉ
Il y a une confusion, on ne sais pas quel information appartient à quel élément.
19
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte courant en lettres capitales est difficilement lisible.
20
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte comporte trop de mots par ligne. Environ 21 mots.
21
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte est justifié. Les espacements entre mots sont mal gérés.
22
Benchmark -
SATISFACTION DE L’UTILISATEUR
Il n’y a aucune barre de recherche, l’utilisateur ne peut pas aller à l’essentiel.
23
Benchmark -
DEUXIÈME SITE ANALYSÉ
LES PLUS
Fonctionne très bien en responsive Un style graphique épuré qui met en évidence les produits. Les collections sont présentées par univers ce qui facilite le choix du client.
LES MOINS
Trop d’informations par moment, on s’y perd Problèmes de proximité. Pas d’accessibilité
24
Benchmark -
DEUXIÈME SITE ANALYSÉ
Ce qu’il faut retenir Dans l’ensemble, le site de Christophe CLARET est très agréable et esthétique. En revanche, toutes les pages et informations ne sont pas toujours traitées avec la même exigence. De plus, la barre de navigation trop encombrée n’affiche aucun moteur de recherche ce qui est paradoxal. Pour finir, sur un site de ce standing on s’attend à ce que la question de l’accessibilité soit traitée mais il n’en ait rien. C’est fort dommage.
25
Benchmark -
TROISIÈME SITE ANALYSÉ
Jacob & Co Jacob & Co est un détaillant privé de bijoux et de montre-bracelet, fondé en 1986 par le designer de diamants Jacob Arabo. https://www.jacobandco.com/
26
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte positionner sur l’image rend l’information illisible. Le graphisme prend le dessus sur le contenu.
27
Benchmark -
RÈGLE DE LISIBILITÉ
Problème de hiérarchisation de l’information. Il n’y a pas assez de contraste entre le nom de la montre et le lien cliquable.
28
Benchmark -
RÈGLE DE LISIBILITÉ
Le texte est justifié. Les espacements entre les mots sont de taille irrégulière.
29
Benchmark -
ORGANISATION VISUELLE
Il y a une mauvaise répartition de l’espace entre le haut et le bas de la section. Cela crée une incohérence au niveau du graphisme.
30
Benchmark -
ORGANISATION VISUELLE
Il y a une mauvaise répartition de l’espace. Tout est resserré vers le centre. Le vide prédomine.
31
Benchmark -
CONVENTION
Le logo n’est pas placé dans la nav. Du coup il disparaît dès que l’on scroll et se confond parfois avec le contenu du site.
32
Benchmark -
RAPIDITÉ
Pour trouver une boutique, on propose beaucoup de pays où il n’y pas de boutique. Le filtre n’a donc aucune utilité.
33
Benchmark -
SATISFACTION DE L’UTILISATEUR
Liste des produits accessivement longue et sans la possibilité de filtrer. On ne trouve pas facilement.
34
Benchmark -
TROISIÈME SITE ANALYSÉ
LES PLUS
les produits sont bien mis en avant Site responsive Un univers graphique très présent, en accord avec le concept de la marque et les produits
LES MOINS
Des lacunes au niveau de la lisibilité. Des problèmes d’ergonomie Pas d’accessibilité
35
Benchmark -
TROISIÈME SITE ANALYSÉ
Ce qu’il faut retenir Le site de Jacob & Co d’un point de vue graphique est à l’image de la marque. On retrouve son univers unique. Cependant, on remarque de gros soucis de lisibilité notamment avec des textes très mal gérés, et une mise en page peu maitrisée. L’utilisateur n’optimise pas son temps. La navigation reste assez laborieuse. Trop de filtres qui ne remplissent pas pleinement leur rôle. Pour finir, malgré une clientèle internationale, le site ne propose aucun choix de langue hormis l’anglais et ne se soucis nullement de l’accessibilité.
36
3. Objectifs
Objectifs du site
Faire découvrir la collection de montre de DJM Emmener l’utilisateur dans l’univers de l’artiste Expliquer comment le designer allie art et technologie Montrer la transition de l’oeuvre d’art à l’objet de collection
38
4. Cibles
Cibles -
COEUR DE CIBLE
Les amoureux de l’horlogerie Les collectionneurs les amateurs de mode et de l’hors du commun
40
Cibles -
CIBLE PRINCIPALE
Professionnels de l’horlogerie - Orfèvrerie Artistes - Designers les amateurs d’innovation et haute technologie
41
Cibles -
CIBLE SECONDAIRE
Les éditeurs spécialisés en horlogerie Les blogueurs (ex : JournalduLuxe) Les influenceurs (ex : Edgard l’élégant)
42
5. Personas
PERSONAS -
ATISTE TENDANCE À LA POINTE DES DERNIÈRES TECHNOLOGIES
PROFIL Âge : 31 ans Poste : Tatoueur professionnel Situation familiale : célibataire Localisation : Paris
CARACTÈRE
CRÉATIF
RIGOUREUX
CURIEUX
PASSIONNÉ
HABITUDES DE CONSOMMATIONS Aime les objets de collections (rares et précieux) S’intéresse à la tendance, l’innovation Aime l’originalité, l’hors du commun
John ANDREWS
44
PERSONAS -
ATISTE TENDANCE À LA POINTE DES DERNIÈRES TECHNOLOGIES
BESOINS Aime se démarquer Trouver rapidement ce qu’il cherche Recherche l’exclusivité
CONTRARIÉTÉS Les sites sont rarement à la hauteur de leurs produits Il n’arrive pas toujours à retrouver un modèle repéré Il a le sentiment qu’on fabrique beaucoup en quantité et peu en qualité.
45
PERSONAS -
ATISTE TENDANCE À LA POINTE DES DERNIÈRES TECHNOLOGIES
BIOGRAPHIE John est un tatoueur très talentueux. Étant très connecté, il finit par se faire un véritable nom dans le milieu grâce aux réseaux sociaux. Pour le salon mondial du tatouage, son travail est choisi pour être mis à l’honneur. Pour l’occasion, afin de se démarquer, il souhaite porter un accessoire pour marquer les esprits.
CONTEXTE D’UTILISATION Une semaine avant l’évènement tant attendu, il décide de se rendre à une exposition saluée par les critiques d’art, celle de Damien Joaquim Miller - appelé DJM. En se rendant sur place, il apprit que l’artiste lançait une nouvelle collection de montres faisant écho à ses oeuvres. Subjugué par son univers unique, il prit son portable et se rendit sur le site pour s’acheter une de ces montres originale en série limitée de l’artiste très en vogue.
46
PERSONAS -
MODE ADDICT, AUCUNE TENDANCE NE LUI ÉCHAPPE
PROFIL Âge : 28 ans Poste : Rédactrice en chef d’un magasine de mode Situation familiale : en couple Localisation : Milan
CARACTÈRE
MODERNE
PASSIONÉE
SOCIABLE
DYNAMIQUE
CONSOMMATIONS Aime ce qui est beau et design avant tout à l’affût des dernières tendances Elle n’est pas regardante sur le prix
AUDE MARTINEZ
47
PERSONAS -
MODE ADDICT, AUCUNE TENDANCE NE LUI ÉCHAPPE
BESOINS Aime les objets de collections originales Dénicher les dernières tendances Être au plus proche des créateurs et leurs produits S’abonner aux sites d’artistes de qualité et recevoir leurs actus Trouver facilement les nouveautés
CONTRARIÉTÉS Les sites d’artistes sont rarement à la hauteur de leurs oeuvres Difficile de se faire une idée de l’univers des artistes Des sites pas toujours mis à jour Difficile de trouver le produit qu’elle souhaite rapidemment
48
PERSONAS -
MODE ADDICT, AUCUNE TENDANCE NE LUI ÉCHAPPE
BIOGRAPHIE Aude est une grande passionnée de mode. Présente à tous les évènements du moment, elle est très sociable et ne loupe pas une seule occasion pour rencontrer du beau monde et agrandir son réseau. Rédactrice en chef d’un grand magazine de mode, elle a consacré un numéro spécial à l’artiste Damien Joaquim Miller (aussi appelé DJM )et au lancement de sa nouvelle collection de montre en série limitée.
CONTEXTE D’UTILISATION Pour la parution du nouveau numéro, elle souhaite organiser un shooting photo. Elle se projète et commence à composer les différents looks. Et là, elle se rend compte que la montre «Pink Flamingo» de l’artiste très en vogue DJM serait l’accessoire ultime. Elle décide alors de se rendre sur le site.
49
6. Concept
Concept
Une collection de montres-bracelets Le concept est de présenter le site officiel de montres d’un artiste fictif très en vogue : Damien Joaquim Miller - appelé DJM. Créateur de sculptures flottantes en hologramme hyperréaliste, il a pour habitude de créer l’évènement à travers des expositions à ciel ouvert à l’échelle monumentale. Repoussant les limites de la technologie, il décide de lancer en parallèle une collection rare de montres très originales faisant écho à ses œuvres.
51
7. Charte Éditoriale
Charte Éditoriale -
LE STYLE RÉDACTIONNEL
Vocabulaire
Personnalisation
Bien que nous soyons dans le domaine du luxe, il convient
Un contenu en fonction du public visé par la création d’un
d’utiliser un vocabulaire simple et compréhensible par tous.
espace dédié selon s’il est professionnel ou particulier.
Titres
Texte
Travailler les titres afin qu’ils soient courts et percutants.
Clair, concis et percutant pour retenir l’attention du lecteur.
Écriture web
Pour une immersion optimale, les textes viendront principalement pour appuyer les visuelles.
Qui s’adapte au comportement de l’internaute, et surtout du mobinaute, encore plus pressé et peu attentif.
Adaptation
Langues Un site adapté à l’international en adoptant un style rédactionnel propre à chaque culture.
Langage technique propre à la haute horlogerie traduite en langage client pour ne pas perdre l’utilisateur.
53
Charte Éditoriale -
RÉFÉRENCEMENT
URL du site : www.djm.com
Mots-clés ( SEO)
Balise <title>
montre-bracelet, djm, créateur, sculpture flottante, design,
Chaque page a un titre avec une balise <title> décrivant
hologramme, artiste, oeuvre, horlogerie, luxe, série limitée.
brièvement le contenu.
HTML5
Traitement de texte
Elle sert à révéler la structure de la page au robot qui réfé-
Favoriser les mots en gras et en italique avec les balises:
rence. Permet l’utilisation des bonnes balises car elles ont
<em>, <strong>, <span> et non avec les <b> et <i> qui ne
une forte valeur sémantique.
seront pas pris en compte.
Exemple : Le <header> et le <footer> servent qu’aux référencements, c’est pour aider le moteur de recherche.
Responsive Design les sites responsives sont également mieux référencés
Titres
par Google et la mise en avant d’une page dépend donc
Il y doit avoir un niveau de titre (h1,h2,h3)pour un bon
de ses capacités d’adaptation.
référencement. Plus ils contiendront de mots-clés ou de champs lexicaux en rapport avec le site et mieux il sera référencé.
54
Charte Éditoriale -
RÉFÉRENCEMENT
Balise alt
Meta-description
Permet de décrire une image aux personnes qui ne peuvent
C’est ce qui apparaît comme descriptif sur la page que rend
pas la voir (robots, personnes malvoyantes ou encore personnes
le moteur. De plus elle incite l’utilisateur à cliquer.
utilisant un navigateur n’affichant pas certaines images) contribue aussi au référencement par image.
Réseaux sociaux un site régulièrement actualisé et partagé sur les réseaux
Balise <figure>
sociaux met toutes les chances de son côté pour être mieux
Contient une image et sa légende. Elle référence bien et facilite
référencé sur les moteurs de recherche.
la mise en forme. Elle sera présente à chaque fois qu’il y aura
Un bon contenu est un contenu qui est partagé. But de la
une oeuvre de DJM. Il est possible d’ajouter (un niveau de titre +
manœuvre : créer une vraie relation avec le publique cible.
paragraphe...).
Balise <head>
Nommer les fichiers La plupart des utilisateurs passent par google image pour effec-
Rien ne se voit, il est fait pour le navigateur et le moteur de
tuer des recherches d’où l’importance de nommer les fichiers
recherche.
avant de les importer sur le site.
55
Charte Éditoriale -
LES MÉDIAS UTILISÉS
Images interactives au scroll et au mouvement de la souris pour plus de dynamisme
Gif animés afin d’enrichir l’information (exemple : succession de photos de la montre prise sur différents angles).
Vidéos en haute définition pour la mise en avant des produits et pour plus d’immersion.
56
Charte Éditoriale -
LOCALISATION
Internationale Le site sera traduit en 6 langues différentes dont le français, pour les raisons suivantes : - DJM est un artiste de renommée mondiale - Très actif sur les réseaux sociaux - Le domaine du luxe compte parmi ses fidèles, une clientèle internationale. - L’apparition de la marque dans les médias dédiés à la très haute horlogerie - Expose ses oeuvres aux quatre coins du monde tel que la Biennale de Venise, le centre georges Pompidou à Paris . . .
57
08. Spécifications Fonctionnelles
Spécifications fonctionnelles -
RUBRICAGE
Le monde de DJM
Points de vente
Elle permet à l’utilisateur de mieux connaître l’artiste et son
Un client intéressé peut rapidement être aiguillé par cette
univers.En se rendant sur la rubrique, il a alors accès à:
rubrique en proposant les possibilités suivantes :
L’histoire du designer ainsi qu’à Ses inspirations «à chaque
Boutique DJM, Détaillants agréés, Prendre rendez-vous.
oeuvre sa montre».
Services Collections
Cette rubrique se développe en trois sous-menus : montre
Elle donne l’accès aux produits. Rangé dans les sous-rubriques
volée, mode d’emploi, trouver un point SAV. Le client gagne
suivantes : Nouveautés, Créations DJM et Collaborations. Elle
du temps et est directement pris en charge.
permet à l’utilisateur d’aller à l’essentiel.
59
Spécifications fonctionnelles -
ARBORESCENCE
60
Spécifications fonctionnelles -
FONCTIONNALITÉS
Instagram, Facebook, Tweeter
Le site sera régulièrement actualisé et partagé sur les réseaux
Pour un suivi de qualité, ou bien informé le client, le site pourra
sociaux pour créer une vraie relation avec ses publiques cibles.
être amené à échanger par mail.
Par exemple, instagram pourra faire office de lien pour emme-
Exemple : Suivi SAV, Facturation, Remerciement, . . .
ner l’utilisateur sur le site par le biais d’une landing page.
Postale Newsletter
Lors d’évènements, pour que les clients privilégiés puissent
L’objectif est d’informer l’utilisateur sur des évènements privés,
recevoir leur carton d’invitation ou bien recevoir une pièce
ainsi que la sortie d’exclusivités.
détachée pour leur éviter le déplacement. Ce moyen concerne également tout ce qui induit l’envoi de messages par papeterie, cartes de visite etc.
61
Spécifications fonctionnelles -
WIREFRAME
Parcours utilisateur de John. Il part à la recherche de la montre Savanah.
62
Spécifications fonctionnelles -
WIREFRAME
John repère immédiatement la montre Savanah sur la page d’accueil.
63
Spécifications fonctionnelles -
WIREFRAME
En cliquant sur le lien, il attérit sur la fiche produit qui lui donne les informations nécessaire pour passer commande.
64
Merci.