PROJET TUTEURÉ Martin&Nash - New Paradise
p.3
- Sommaire
p.4
- Présentation
p.6
- Les clients
p.9
- La marque - La collection
p.11
- Recherche et analyse de la concurrence
p.17
- Identité et ergonomie du site
p.22
- Intégration
p.24
- Bilan personnel
p.26
- Annexes Zoning, Mockups
p.32
- Planches graphiques
p.35
- Analyse détaillée de Look Vintage
p.3
Présentation Français Afin d’appréhender un projet web complet comprenant gestion, graphisme, intégration et développement d’un site web, le projet tuteuré s’oriente vers la mode. En 5 semaines, 3 phases de création et de développement ont eu lieu. Une phase de recherche, une autre d’intégration et une approche finale du projet.
Pour cette création web nous devions faire plusieurs choix sur une courte période. Nous avons eu seulement une semaine pour créer les éléments graphiques qui découlent de l’élaboration des mockups. Puis nous devions nous assurer que notre design était assez simple à réaliser en programmation HTML/CSS.
Dans celui ci, la marque Martin&Nash dévoile une toute nouvelle collection d’accessoires et de mode. Cette ligne vise la tendance et l’accessibilité partout en France. La collection «New Paradise» s’oriente donc vers un public très large. Le «vintage» et le «rétro» placent cette nouvelle collection d’hiver dans les thèmes de l’insouciance, la paix, la légèreté et la liberté.
Nous avons passé des heures à coder de la meilleure mais surtout de la plus rapide façon de coder avec nos niveaux respectifs. Cependant, l’entraide était présente comme dans une équipe de travail afin d’atteindre notre but, la date limite.
Donc beaucoup de choix graphiques et de code ont été écartés dans cette optique. Ce projet fut la meilleur simulation possible pour notre futur emploi en tant que WebDesigner en ce qui concerne l’organisation. Lorsqu’on travail seul on va plus vite, mais au sein d’une équipe nous allons plus loin. C’est pourquoi poser des questions et partager nos connaissances pour enrichir des idées qui n’auraient pu aboutir seules.
Recherches Intégration Finalisation
Semaine 1
p.4
Semaine 2
Semaine 3
English Presentation To apprehend a complete Web project including management, graphics, integration and development of a Web site, the tutored project turns to the fashion universe. In the 5 weeks, 3 phases of creation and development took place. A phase of research, an other one of integration and a final approach of the project globally.
The «vintage» and the «retro» place this new winter collection in the carefreeness, peace, lightness and freedom themes.
For this web creation we had to make several choices in a short period. We had only one week to create the graphics just after the mockup design. Then we had to make sure that our design is quite In this one, the Martin&Nash brand simple to program in HTML/CSS. reveals a quite new collection of accessories and fashion. This We spend many hours to find line aims at the trend and at the the better way to code for weeks accessibility everywhere in France. considering our programming The collection «New Paradise» skills. However we helped each turns towards a very wide public. other just like a workteam because our goal was the deadline.
Semaine 4
So, many graphic and programming choices were canceled to save time. This project was the best professional simulation of our future job in webdesign regarding the organization. When we work alone we are going faster, but in a team we are going further. That’s why asking questions and share some help is always better than trying to make something rough and not decently all alone.
Semaine 5
p.5
LES CLIENTS Steve Nash - Louis Martin
p.6
Les clients Présentation des clients :
L’anglais Steve NASH et le français Louis MARTIN sont de jeunes créateurs de mode et d’accessoires qui se sont rencontrés en 2013 lors de la Dubaï Fashion week. Après de nouvelles rencontres sur Paris, ils ont décidé 3 mois plus tard d’installer un atelier de création et de lancer leur propre marque. Steve a un parcours atypique d’autodidacte qui l’a conduit jusqu’à Paris au service de grandes maisons comme Paco Rabanne et Balmain. Louis a suivi un itinéraire plus classique, diplômé des Arts Décoratifs de Strasbourg, c’est dans diverses maisons de prêt à porter qu’il a fait ses armes.
La nature de la demande/besoin client :
Objectifs de communication du site : Bien qu’il soit un outil de communication, le but du site n’est pas de vendre directement le produit mais de séduire la clientèle. 1) Concevoir l’identité graphique de la collection 2017 «New Paradise», ainsi que le site de présentation principalement autour du lookbook (photos de mise en scène des vêtements et accessoires). 2) Réfléchir, concevoir et développer l’intégralité du produit. Le site n’a pas vocation d’être un catalogue mais le reflet graphique, l’esprit de la collection.
Afin de définir l’esprit de la nouvelle collection j’ai dû, dans un premier temps, effectuer un travail graphique autour de «NewParadise», sous la forme d’un logo/ blason permettant une rapide identification des thèmes abordés par cette dernière. Ce travail graphique a servi de base et a été décliné durant l’élaboration de l’interface du site. La charte graphique, la création du logo/blason et de l’interface web sont donc inspirés de l’ambiance du lookbook et du style de la collection.
Les ressources fournies :
La description de la marque (historique, chronologie). Une présentation de l’atelier et de ses créateurs (bio, parcours, références). Une banque d’images de tenues associées à la collection (lookbook), la banque d’images d’accessoires. Des photos complémentaires de mode et d’ambiance (fond accueil et catalogue). p.7
Les clients - leurs exigences
Contenus et services :
Accueil : Première page observée, elle doit inciter les visiteurs à découvrir l’univers de la collection et leur insuffler rapidement l’identité de cette dernière. Cette page ne doit pas être vide de sens ni redondante par rapport au contenu des autres pages. La marque : Détails et historique de la marque sous forme de dates clés.
Recevoir le catalogue : Cette page permettrait, outre la possibilité pour les éventuels clients de découvrir l’ensemble de la collection, de constituer une base de clientèle ayant la finalité de pouvoir déployer de futurs supports de communication de fidélisation (promotions, news). Cette partie sera composée d’un formulaire avec tous les champs courants.
Développement :
Tous les textes (la marque, les créateurs, points de Les créateurs : vente), les catégories d’accessoires et les photos Tout comme la page « La marque », celle-ci donne qui lui sont associées seront également fournies en les références et la biographie rapide des 2 créateurs. bases de données. Cela peut permettre un affichage dynamique des contenus en PHP. Recevoir le Lookbook : catalogue en fait partie. Partie principale du site puisque vitrine de la collection, le lookbook se compose d’une série de Front : photos mises en scène. Cette partie sera constituée Les informations seront stockées pour constituer une d’un module ludique, interactif et attractif, par base client. exemple en JQuery. Il s’agit de trouver une solution de visionnage ou de consultation animée et vivante. Back : Une table client déjà créée dans la base de données Accessoires : permettra l’enregistrement des données saisies Cette page se présentera sous la forme d’une galerie dans le formulaire. Vous devrez créer une page de photo présentant les différents accessoires liés à consultation de ces données, avec accès restreint la collection. Un soin particulier sera apporté à la (accès avec login et mot de passe, htaccess). recherche d’une solution originale d’affichage et consultation. Points de vente : Ici se retrouvera la liste des différents points de vente, partenaires de la marque. Comme le nombre de boutique est conséquent il faudrait développer une solution ergonomique de présentation basée sur une carte Google Maps (affichages des points de vente). p.8
LA MARQUE LA COLLECTION Martin&Nash - New Paradise
p.9
La marque
La collection
Martin&Nash, association des noms des créateurs, est une marque de prêt à porter au féminin. Les lignes de vêtements se veulent accessibles, tendance ou décalées et s’adressent aux jeunes femmes de 16 à 40 ans. Les vêtements et accessoires sont vendus partout en France dans de grandes et petites enseignes. La marque, outre son nom, ne possède pas d’identité propre, c’est chaque année le style de la collection qui détermine l’identité visuelle des différents supports de communication qui lui sont liés.
Cette nouvelle collection est placée sous le signe de la renaissance et de la paix. A la fois simple et élégante, la collection reprend des codes « vintage» et « rétro » avec une pointe de légèreté, de liberté et d’insouciance. New Paradise, le nom de cette collection de l’Hiver 2017, représente complètement cet état d’esprit.
Le logotype de la collection se devait d’être dans les tons des saisons évoquées. Quoi de mieux lorsque l’hiver arrive ? Un thé, un café ou bien un bon chocolat chaud ? Vous l’aurez compris, l’accent est mis sur l’aspect gourmand et les petits plaisirs en chocolat que nous nous offrons lors de ces saisons.
La particularité de ce logo croquant à souhait est une disposition plutôt inspirée des badges ou des enseignes du genre «Holy’s dinner». La typographie éponyme utilisée «Chocolate Dealer» en est la preuve, la gourmandise et la légèreté du chocolat sont idéales représentant cette nouvelle collection Automne/Hiver de 2017.
p.10
RECHERCHE Analyse concurrence - Graphisme et ergonomie
p.11
Analyse de la concurrence - Adored La première étape ici a été de s’imprégner, de s’inspirer de l’existant mais aussi de faire une analyse concurrentielle en retenant seulement les points forts de chaque site et de les appliquer au mieux à notre création. La recherche est donc une étape nécessaire afin de bien débuter un projet. Avec quelques mots clés, 5 sites principaux sortent du lot.
p.12
Le premier d’entre eux : Adored https://adoredvintage.myshopify.com/ Ce site se distingue par son ambiance insouciante et innocente à la limite de la timidité, l’atmosphère très simple et froide est pourtant accompagnée d’une légèreté et mêle le moderne et le classique dans un bon équilibre.
Dernier Cri Le deuxième : Dernier Cri http://dernierc.tictail.com/ Un site moderne, aux couleurs rétro, simple et ordonné dans l’univers du mannequinat.
p.13
Modcloth Le troisième : Modcloth http://www.modcloth.com/ Une approche plus commerciale, des couleurs chaudes dans une dynamique plus jeune et fraiche en reprenant les codes du vintage mais en laissant les formes modernes à la prÊsentation des produits.
p.14
Sézane
Le quatrième : Sézane http://www.sezane.com/fr Une identité visuelle plus haut de gamme, visant un public d’âge mûr, une architecture moderne et épurée avec beaucoup de textes plutôt que d’images.
p.15
Look Vintage - La friperie en ligne Le cinquième et dernier site : Look Vintage - La friperie en ligne http://shop.look-vintage.com/ Ce dernier site me paraissait le plus judicieux à observer, car il mêle le vintage au rétro et le moderne au classique, tout en étant simple mais ordonné dans la hiérarchisation des informations. Cependant ce site est orienté CMS et donc certains modules sont à éviter. Mais dans la forme, il m’a semblé adapté dans la mesure où il combine un peu tous les points forts des 4 autres cités ci-dessus. En résumé il faudrait retenir : Une ambiance insouciante et légère, un site moderne et ordonné, tout en ayant un attrait commercial et une navigation ergonomique et épurée dans son contenu. Tous les détails de l’analyse se trouvent dans les annexes partie 4 sous forme de grille.
p.16
IDENTITÉ Identité du site - Navigation - Ergonomie
p.17
Identité visuelle L’identité visuelle : «New Paradise» se focalisera sur la saison Automne/Hiver. Très peu de couleurs donc. Le marron, le noir, le blanc et les différents niveaux de gris prendront place dans cette ambiance graphique. Il faut respecter l’intention principale qu’est le vintage, la légèreté et l’innocence, la saison automne/hiver.
La composition doit être claire au premier coup d’œil, Les typographies seront au nombre de 3 maximum l’utilisateur doit comprendre tout de suite comment avec différentes variantes de graisse et de taille. aborder le site et s’imprégner de son ton. Les éléments graphiques doivent être symétriques et ordonnés, reliés par blocs simples de couleurs ou d’images et par catégories. (cf Annexes partie 3.) p.18
Exemple de Mockup Arborescence :
Accueil - Marque - Créateurs - Lookbook - Accessoires - Points de vente - Recevoir le catalogue PDF Images Catégories Article > Lookbook Images > Accessoires
Dans le mockup on remarque que la plupart des images seront cliquables, certaines ne le seront pas car le texte les accompagnant le sera. Les catégories renverront à des galeries en rapport avec celles ci. Certains éléments nécessiteront du Jquery ou du MySQL. Par exemple une page google map où les lieux seront cliquables directement sur le module et indiqueront leur adresse mail et numéro de téléphone. (Pour plus de détails cf : Annexes partie 2.)
p.19
Ergonomie Ergonomie et Arborescence :
Design :
Le site doit être pensé pour différentes résolutions d’écran en responsive si possible.
L’accès et fidélisation :
Les informations clés sont mises en avant par des Le ton doit exprimer la sensibilité particulière du titres, l’utilisateur doit avoir à effectuer le moins de site et permettre d’identifier le domaine d’activité clics possibles pour arriver à la page qu’il souhaite (mode, vintage, léger). atteindre grâce au menu. Le choix des images est en cohérence avec l’intention Les informations doivent le plus possible être de base, des couleurs simples afin d’éviter les présentées sans avoir à manier de scrollbar, le tout écritures claires sur fond flashy. (Noir, blanc, marron, doit rester lisible, la redimension du site n’ayant pas gris, opacités réduites...) Le design doit participer à la d’impact sur la visibilité des textes. lisibilité du contenu.
Sept pages maximum devront être parcourues par l’utilisateur afin d’atteindre le contenu le plus profond, aucune sous rubrique à part les galeries qui se réfèrent aux catégories d’accessoires.
Un bon référencement SEO avec des mots-clés permet de retrouver le site quand on en a besoin, une newsletter sera disponible pour que les utilisateurs restent en contact. Utilisation des balises h1, h2 ,h3, title, meta... La mise en page des textes doit donner envie d’entrer dans le contenu.
La rapidité :
p.20
Il faut peu de chargement pour changer de page, un menu fixe doit être chargé en php pour atteindre les pages principales du site quelle que soit la page chargée, éviter les lourdeurs dans les pages (images de grandes tailles, vidéos chargées automatiquement...) Des fichiers externes pour les scripts et le moins possible de fichiers css liés aux pages (un fichier css pour plusieurs pages si le contenu le permet).
Les choix de l’utilisateur :
Avant tout :
Le contenu :
Pas d’écart entre le vision du concepteur et de l’utilisateur final répondant à la norme ISO 9241. (Efficacité de navigation grâce à une interface grand public, séduire une variété d’utilisateurs.)
Permettre à l’utilisateur de personnaliser le site via un profil notamment, laisser toujours la décision à l’utilisateur (par exemple si on met une musique en fond du site, que l’utilisateur puisse choisir de l’arrêter ou non, idem pour une vidéo).
Pour résumer l’intention : L’ergonomie du site se doit d’être utile (répondre à un besoin pour capter l’internaute) et utilisable afin de faciliter sa satisfaction afin que l’internaute comprenne directement la navigation et reste sur le site pour la réalisation de ses tâches.
Informations fiables sur les produits, provoquer la confiance de l’utilisateur, mise à jour régulière et dates de mise à jour notées. Le contenu est spécialisé Efficience pour accomplir ses objectifs rapidement et dans le domaine de la mode et dans la collection facilement. Satisfaction esthétique, marketing, plaisir «New Paradise», mais aussi dans les informations de navigation. relatant la marque Martin&Nash. Un contenu de qualité, une facilité d’utilisation, un temps d’affichage réduit et des mises à jour régulières inciteront l’utilisateur à revenir sur le site.
Les liens et partenaires :
Permettre à l’utilisateur d’aller sur des sites en relation ayant également un contenu de qualité, ou rediriger l’utilisateur sur le site principal de la marque Martin&Nash.
p.21
INTÉGRATION Extraits de code - Programmation dynamique
p.22
Extraits de code dynamique 1.
2. 3.
1. Html Galerie 2. Html lightbox 3. CSS lightbox
p.23
BILAN PROJET Points Forts/Faibles - Cahier des charges
p.24
Bilan personnel Difficultés rencontrées :
Le code dynamique et le responsive, mais aussi l’html/css m’étaient inconnus. Le design d’un site, son ergonomie, ainsi que son référencement l’étaient également. Un difficulté dans la simplicité du contenu et de son design malgré le grand nombre de pages.
D’autres modules devraient être présents :
- Site en Responsive. - Accessoires disponibles en base de données. - Base clientèle en php. - Footer : liens réels. - Catalogue : Afficher un exemple finalisé de pdf print. - Plus attractif si le prix des articles est disponible ailleurs que sur le catalogue, mais pas suggéré par le Solutions trouvées : Pour un gain de temps considérable, le site est client. Ceci dit, ne pas montrer le prix directement sur statique, le php n’est peu ou pas présent et le Jquery le site peut être une stratégie marketing intéressante. est un bonus possible. Les pages sont présentées sans scrollbar et le plus concis possible. Sources photos et textes/codes : Créateurs : Alexandre Vauthier Points forts : Lisibilité, gain de temps au niveau du graphisme Anthony Vaccarello Images pages de garde : grâce à mes compétences. Pexels Contenu & images site : Points faibles : Aucune notion de code dans ma formation Ressources clients précédente. Confusion par rapport aux modules Ergonomie : inversés et à l’organisation générale du projet tuteuré. Cours Ergonomie De nombreux écarts au niveau de l’ergonomie prévue Comment ça marche et du produit finit se font ressentir par rapport aux Lightbox : Lokesh Dhakar contraintes de temps. Lightsider : Sachinchoolur
Points à améliorer :
Le site dans l’état actuel est seulement un support visuel pour le client. En prenant en compte la deadline, certains affichages ne sont pas adaptés en php local ni sur une autre résolution d’ordinateur. Les liens sont cliquables mais ne réfèrent à aucun site pour l’instant car aucune page facebook n’existe ou compte instagram. Les contenus comprenants du php sont inutilisables dans l’état car le site que vous consultez n’est qu’un prototype, n’est donc pas finalisé, hébergé, ni dans le design ou le développement.
BASSINAT William LP ATC 2016-2017p.25
ANNEXES
1. Zoning - 2. Mockups - 3. Planches Graphiques - 4. Analyse Détaillée
p.26
1. Exemple de zoning page d’accueil :
p.27
2.
p.28
p.29
p.30
p.31
3.
p.32
p.33
p.34
Impression générale (structure/ navigation)
1
2
3
Navigation simple et intuitive
4
5
La navigation n’est pas claire au premier abord, on se perd dans les sections.
X
Impression de « déjà vu » (structure conventionnelle)
X
Complet et original
X
Accessibilité du contenu (lisibilité/ compréhension)
6
1
2
3
4
Lisibilité
X
Contenu compréhensible/ accessible
X
5
4.
Plusieurs catégories, site structuré.
Commentaire
6 Lisible, beaucoup de contenu en scoll malgré tout. Contenu accessible, cependant un lien redirige vers un autre site.
p.35
Contenu compréhensible/ accessible Interactivité
1
2
Interactivité homme-machine Interactivité entre internautes/ communautaire Contenus/ Texte / « Hypertextualité » Fragmenté, dynamique … (bonne organisation de l’info : titres, paragraphes …) Hiérarchisation de l’information (rubriques, sousrubriques) facilitant la navigation « Hypertextualité » importante (liens internes et externes facilitant la navigation et la recherche d’infos) Habillage et images (design)
3
4
5
Quelques problèmes mais réussit dans l’ensemble Pas tellement d’options de contact à part un mail, tel et un livre d’or.
X
1
2
3
4
5
6
X
3
4
5
Site animé, dynamique
X
Fonction esthétique (le site est attractif, les contenus mis en valeur) Fonction ergonomique/ sémantique (codes couleurs, design qui a du sens) La cible visée prise en compte (communauté identifiable ?) Communauté spécifique et identifiable Rubriques/ services spécifiques (adaptés à/ aux cibles primaires) Le site me paraît réellement utile (le site répond à mes attentes)
X
Images HD Slider, lightbox
Produits mis en valeur (studio photo) Ergonomie moyenne à cause des liens sortant changeant de page.
X
2
3
Commenta
6
X
1
Plutôt bien hiérarchisé dans l’ensemble.
Lien externe sur le site de la marque et de vidéos de création/teaser de la marque
X
2
Commenta
Pas vraiment de texte informatif sur les produits ou très peu.
X
1
Commenta
6
X
Qualité des images
p.36
Contenu accessible, cependant un lien redirige vers un autre site.
X
4
5 X
X
X
Commenta
6 Jeunes hommes et femmes de 16 à 40 ans. Différentes catégories disponibles Le client sait de quoi on parle
aires
aires
aires
aires
« Hypertextualité » importante (liens internes et externes facilitant la navigation et la recherche d’infos) Habillage et images (design)
Lien externe sur le site de la marque et de vidéos de création/teaser de la marque
X
1
2
3
4
Qualité des images
5
6 Images HD
X
Site animé, dynamique
X
Fonction esthétique (le site est attractif, les contenus mis en valeur) Fonction ergonomique/ sémantique (codes couleurs, design qui a du sens) La cible visée prise en compte (communauté identifiable ?) Communauté spécifique et identifiable Rubriques/ services spécifiques (adaptés à/ aux cibles primaires) Le site me paraît réellement utile (le site répond à mes attentes) Actions possibles (recherche info, transaction, communication) Temps de téléchargement Possibilité de prise de contacts/ demande d’informations (contact e.mail, formulaire de contact …) Possibilité de réaliser des actions/ transactions (commande en ligne, demande d’informations/ catalogues …) Possibilité de cibler/ affiner la recherche de l’info. (moteurs de recherche, plan cliquable …)
X
Slider, lightbox
Produits mis en valeur (studio photo) Ergonomie moyenne à cause des liens sortant changeant de page.
X
1
2
3
4
5
Jeunes hommes et femmes de 16 à 40 ans. Différentes catégories disponibles
X
Le client sait de quoi on parle
X
1
3
4
5
X
X
Commenta
6 X
X
Commenta
6
X
2
Commenta
Imperceptible Livre d’or, informations connexes (tel, mail) Remise en main propre...
Catalogue disponible en pdf, panier et commandes accessibles.
Aucune barre de recherche
p.37
p.38