Page 1

Projet Tuteuré Rapport

Chrétien Noémie - LP ATC Métiers du Web - Session 2013-2014


Sommaire

1. Présentation du sujet

• Le domaine de la mode • La marque et ses créateurs • Son positionnement • Collection: Neverland • La cible • Les objectifs/Message

3 4

2. La demande

• Brief • Analyse concurrentielle • Les contraintes/les moyens • Le ton • Délai

5 6->8 9

3. Charte graphique/identité visuelle

• Ambiance • Recherches • Le logo Scott & Hugues • Logo Neverland • Les couleurs • Significations • Les typos • Elements graphiques • Ergonomie • Zoning • Maquettes

10 11 12 13 14 15->17

4. Développement

• MLD /Tables • Base de données • Map • PHP

5. Bilan personnel

18 - 19 20 21

2


1. Présentation du sujet - Le domaine de la mode « La mode se démode, le style jamais. » Coco Chanel

L

a Mode est une manière de s'habiller. C'est un phénomène qui renvoie au regard de la société et aux codes qu'elle impose. C’est avant tout une recherche de l’esthétique (notamment pour les grands créateurs) mais c‘est aussi un moyen d'affirmer son rang social, son groupe social, son pouvoir d'achat et sa personnalité. Elle marque de manière créative une période, elle l’identifie.

- La marque et ses créateurs

M

arque de prêt à porter féminin venant du nom de deux créateurs de mode qui se sont rencontrés en 2012 lors de la Dubaï Fashion Week: Thomas Scott (un anglais) et Julien Hugues (un français). L’association de leurs noms a formé le nom de leur marque «Scott & Hugues». Ils décident donc d’installer trois mois plus tard un atelier de création et d’y lancer leur propre marque.

« La mode, c’est ce qui se démode. » Jean Cocteau

L

a mode est un perpétuel recommencement. La mode incite donc à renouveler nos vêtements avant qu’ils ne soient usés ou inadaptés.

- Son positionnement

S

cott & Hugues est une ligne de vêtements qui se veut accessible, à la fois tendance, chic et décalée. La marque se vendra dans toute la France dans quatres enseignes: H&M, Bérénice, MammaFashion et Gabrielle Geppert. (55 boutiques)

3


1. Présentation du sujet - Les objectifs/ Message

- La Collection

L

a nouvelle collection 2014 lancée par Scott & Hugues s’appelle «NeverLand». Cette nouvelle collection est placée sous le signe de la renaissance et de la paix, à la fois simple et élégante. Cette dernière reprend des codes «vintages» et «rétro» avec une pointe de légéreté, de liberté et d’insouciance. Cette collection représente entièrement cet état d’esprit.

- La cible

L

a marque s’adresse aux femmes de 16 à 40 ans. Issues de classes sociales moyennes voire aisées. La cible regroupe aussi les différentes clientèles des magasins distributeurs.

L

a marque comporte différents objectifs de communication et de vente, afin de réussir dans la vente de prêt à porter féminin: • Faire connaître/se développer la marque et la collection 2014 • Promouvoir cette nouvelle collection. • La rendre accessible à la cible visée. • Une identité visuelle et graphique forte, attrayante, correspondant au message de la collection. • Reconnaissance de la marque et de sa collection grace à des logos impactants. • Développer un style propre à la marque, qui saura se distinguer de la concurrence.

4


2. La demande - Brief

I

l nous est demandé de concevoir le logo de la marque Scott & Hugues, la nouvelle identité graphique de la nouvelle collection 2014 ainsi que le site Internet de présentation de cette collection. Notre mission sera de mettre en avant le LookBook et les accessoires. Le site sera le reflet graphique de l’esprit de la collection.

Il aura pour but de séduire la clientèle. Dans un premier temps, il faudra effectuer un travail graphique autour du nom «NeverLand». Il servira de base pour l’élaboration de l’interface d’un site web dynamique. L’ambiance des photos du LookBook et du style de la collection nous servirons pour créer notre logo et notre interface web. Le site web comportera les pages suivantes: accueil (facultatif ), la marque, les créateurs, le lookbook, les accessoires, les points de ventes et un formulaire de fidélisation.

Dans un second temps, nous développerons le site internet en créant la base de données et un back-office afin de pouvoir modifier et/ou supprimer différentes données sur le site, et stocker les informations du client renseignées dans le formulaire.

5


2. La demande L

C

- Analyse concurrentielle

a marque Scott & Hugues a pour objectif de se démarquer des autres marques de prêt à porter féminin. Comparaison de trois grandes marques de prêt à porter féminin «chic» .Une cible et une gamme de prix similaire à Scott & Hugues. Et des univers proche de NeverLand.

N

af Naf

ommunication Barre de navigation en haut de page. Site principalement illustratif par les blocs de photos. On y retrouve une page historique sous forme de frise et un système de géolocalisation pour trouver les boutiques les plus proches. Le lookBook informel sur les prix des vêtements.

E

rgonomie Le contenu se range sous forme de blocs. Nous emmène vers les différentes rubriques. Hiérarchisation des blocs par leur taille. LookBook mis en avant par un bloc majeur.

Logo

Nav

Nav

Nav

LookBook

Géolocalisation

Historique de la marque

footer

Site noir et blanc, sobre, raffiné et moderne. Seule touche de couleur grâce aux photos. Dynamise le site. On se plonge bien dans l’univers de la marque. Des teintes fraiches et légères, et à la fois pétillantes. 6

Zoning Nav

Design

Nav

Nav

Site complet, on y trouve un maximum d’informations sur la marque. Illustré pour donner envie d’aller voir ce qu’il y a derrière.

B e a u c o u p d’informations arrivent directement sur la première page. Peu d’identité si on enlève les photos.


2. La demande

C

- Analyse concurrentielle

K

ookaï

Présentation de la marque

ommunication Un accès rapide vers les réseaux sociaux sur la gauche de la page. Les clients peuvent continuer à suivre la marque sur ces derniers afin de partager des données. Logo simple mais impactant à l’arrivée sur le site. LookBook complet et informel. Système de géolocalisation pour retrouver les magasins Kookai en France.

Z

E

rgonomie Système de navigation, avec une barre de menu complète. On peut accéder à un m a x i m u m d’informations et de pages avec un menu déroulant au survol des rubriques principales.

Logo Nav Nav Nav menu déroulant

Site chaleureux, teintes brunes avec une touche de rouge. Blocs entourés dans des cadres pour un esprit de luxe et de féminité. On entre bien dans l’ambiance de la marque. Cadrée et luxueuse, mais un peu folle (par ses formes éclatées). 7

oning

Nav

Design

Nav

Site complet. Deux couleurs bien harmonisées: beige et rouge. Se démarque par son identité visuelle.

LookBook Géolocalisation

footer

On se perd un peu dans la barre de menu, trop de contenu.


2. La demande - Analyse concurrentielle

C

op Copine

LookBook

C

ommunication Barre de navigation horizontale en haut. Seuls le logo et le orange au survol nous rappelle la marque. Le slider de présentation de la collection est mis en avant par la présentation sur des mannequins femmes. Jeunes femmes, représentant bien la cible de la marque. On y retrouve un système de carte, pour retrouver les magasins Cop Copine les plus proches de chez nous.

E

rgonomie Un format très allongé. LookBook slider classique avec défilement de la gauche vers la droite. Facile de navigation. Peu de texte. Peu de défilement vers le bas. Le contenu principal tient à l’écran.

Z

oning Logo

Nav Nav Nav Nav

Retrouver les boutiques

footer

Design

Site épuré, sur fond blanc, texte en noir. Une touche de couleurs modernes et saturées fait ressortir et met en valeur la collection. Mais pas de surcharge couleurs. Contenu en noir et blanc, qui met en valeur les photos du LookBook (en couleurs. Une seule couleur est présente dans le site: police orange au survol des onglets (rappel logo marque)

Le contenu reste clair, on y trouve les informations importantes, pas de contenu inutile. Classique, sobre, mais efficace. Pas d’identité propre (mis à part sur la vidéo d’accueil, présentant la collection, que l’on peut passer). Se démarque peu de la concurrence.

8


2. La demande - Le ton

- Les contraintes/les moyens

N

ous devons faire attention respecter les points suivants:

L

à

• Présenter la marque, de manière à la valoriser • Rendre le site attractif et attrayant • Interface simple et épurée: facilité de navigation • Inciter le client à se rendre en magasin pour acheter «NeverLand» • Représenter de l’esprit de la collection • Fidéliser le client • Se démarquer des sites concurrents • Dépôt du nom de domaine du site Internet : www.scott-hugues.com

a collection devra refléter un esprit «vintage» «rétro», féminin, classieux, sérieux et chic.

- Délai

L

e projet se déroulera sur 4 semaines en trois phases: • 30/09 - Début du projet • Du 1/10 au 6/10 Phase 1: Gestion de recherches, réflexions, maquette

projet,

• Du 7/10 au 13/10 Phase 2: Intégration, mises en page • Du 14/10 au 24/10 Phase 3: Fin de l’intégration, modules annexes, développement, finitions • 24/10 - Remise du rapport • 25/10 Soutenance

9


Ambiance

10

Le site devra reprendre des teintes pastels/vieillies, l’ambiance dÊgagÊe par ces photos.


3. Charte graphique - Recherches

Proche de la matière et de l’humain

D

d NeverLan

NerverLand

NerverLand

es recherches associées au vintage, reprenant l’univers des photos, proche de la nature.

Neverland, bol d’air frais et de fraicheur

Le ruban reprenait l’idée de tissu, en rapport avec la couture, le travail fait main, et aussi le coté rétro. Posé, regard captivant, envie de voir la suite. Couleurs chaleureuses.

11


3. Charte graphique - Le logo Scott & Hugues

- Les couleurs #6F7072 RVB: 111 - 112 - 114 #D6C38D RVB: 214 - 195 - 141

L

e logo de la marque donne une image morderne de celle-ci. Il reste neutre, afin de s’adapter aux ambiances des différentes collections.

- Le logo Neverland

- Significations

C

hoix de deux couleurs claires, pastels, associées à une couleur qui réhausse le ton. Le rouge choisi tend vers le vintage.

- Les typographies

Matchbook L

e logo de la collection attire l’oeil par sa couleur impactante. Sa typographie manuscrite fait ressentir une touche de légèreté dans la séparation de Never et Land, et son côté filaire.

#A422726 RVB: 169 - 39 - 38

U

ne typo claire, épurée, bien représentative de la marque. Sérieux de la marque. Fine et lisible.

Desyrel U

ne typo manuscrite pour un côté vintage/ rétro. Assez filaire. Dans l’air du temps.

12


3. Charte graphique - Eléments graphiques

F

avicon Il se retrouve au niveau de l’onglet de la page. Réduction avec les initiales des deux créateurs aux couleur de la collection.

A

rrière-plan de la page d’accueil. Femme de la cible, couleurs rétros, nous met directement dans l’ambiance de la collection.

C

onnexion aux réseaux sociaux pour se tenir informer de l’actualité de la marque. Disposé dans le footer pour ne pas prendre trop d’importance. Un petit plus à la marque.

R

Thomas Scott Julien Hugues

N

uban: rétro, couture, mode. Mettre en avant des données

avigation: forme ronde (rappel des points) Formes très arrondies

P

uces: rappel élément du logo. Pour lister, séparer des éléments

C

adre de survol et selection: meilleure ergonomie

13

A

rrière-plan du site.

Opacité très réduite pour ne pas déranger la lisibilité des informations. Visible sur toutes les pages pour ne pas perdre la marque de vue: on sait que l’on est toujours sur le site de Scott & Hugues. Elément récurent.


3. Charte graphique - Ergonomie

- Zoning

L

e site internet a une largeur défini de 1280 pixels. L’image de fond est fixe, avec une opacité très réduite afin de ne pas gêner la lecture du site.

La page d’accueil est le premier

Logo

contact avec le client, elle a pour but de l’attirer dans le site, afin de découvrir la collection.

Nav

Nav

Nav

Nav

Nav

Nav

L

14

e client peut à tout moment revenir sur la page d’accueil en cliquant sur le logo.

U

ne navigation simple grâce à la barre de menu qui reste présente en haut du site pour permettre au client de se dirriger plus facilement sur le site.

L

e footer est fixe. Permet de garder un lien visible vers les réseaux sociaux.

Logo

Nav

Nav

Nav

Nav

Nav

Header

Nav

Body

Contenu

Fb

Footer


3. Charte graphique - Maquettes

15

attrayante inciter à aller voir plus loin, dès le premier coup d’oeil. Accès direct LookBook en cliquant sur le logo de Scott & Hugues effet de survol au dessus des differentes rubriques faciliter la navigation lien vers page d’accueil reste possible sur le logo NeverLand


3. Charte graphique - Maquettes

16

P P

age de référence des créateurs de la marque et biographie rapide de ces derniers. Le client peut alors connaître les origines et la rencontre de ses deux créateurs de mode.

On peut y voir un aperçu du menu déroulant vers

«marque» ou «historique» au survol de la rubrique «La marque»

age accessoires. Galerie photos classée, présentant les différents accessoires liés à la collection.

Un

rangement par catégorie sous forme de slider JQuery a été conçue. J’ai fait de grandes modifications graphiques sur ce dernier (voir en bas à droite le slider d’origine) Les accessoires défilent de gauche à droite et inversement.


3. Charte graphique - Maquettes

17

O

n peut retrouver toutes les boutiques partenaires qui distribueront la marque dans les points de ventes. Le client zoom sur la ville ou la région de son choix et il clic sur une des clés . Elle lui indiquera donc les coordonnés pour s’y rendre.

Une page de formulaire permet pour les éventuelles

clientes de découvrir l’ensemble de la collection. Ce formulaire permettra de récuperer une base de clientèle et un contact avec cette dernière. Le catalogue lui sera donc envoyée après récupération des données.


4. Développement - MLD /Tables

- Base de données - Cleints

18

C

réation de la base de donnée à partir du logiciel PhpMyAdmin. Trois tables on était rentrées: accessoires, catégories et clients.

Récupération des données du client

L

a table «clients» va permettre de récuperer les données entrées dans le formulaire de fidélisation.

On y insert tous les champs necessaires, des informations que l’on souhaite avoir. Que l’on récupère par la suite.


4. Développement - Base de données - Accessoires

Table catégories, insertion

19

Champs accessoires

Dans la table accessoire, on y a entré les champs necessaires pour un accessoire. Dans la table catégorie, on y a inséré les cinq catégories existantes que l’on a répertorié sous forme de numéros. Pour finir, dans la table accessoire on a inséré les differents accessoires de la marque, identifiés par catégories.

Insertion des accessoires


4. Développement - Map

L

a page des points de vente a été réalisée à l’aide de Google Map Engine. Avec un compte Google, j’ai pu créer une carte et insérer le fichier boutiques.xml avec tous les coordonnés des boutiques. J’ai ensuite pu personnaliser l’affichage. (couleurs, forme du pictogramme).

Le logiciel a généré un

lien que j’ai ensuite copié sur ma page.

J

- PHP

’ai lancé la requète SQL me permetant de récuperer les informations saisies dans la BDD.

P

Lancement d’une requète

our ensuite pouvoir afficher l’image et le nom de l’accessoire.

Par manque de connaissance et de temps, je n’ai pas pu traiter et réaliser le back-office nous permettant de modifier, ajouter, ou supprimer facilement des accessoires.

20


5. Bilan personnel I

l a été interessant de devoir réaliser un projet intégralement, du graphisme, jusqu'à l’aboutissement final de l'intégration et de son développement. Durant ce projet j’ai pu améliorer mes compétences en intégration et découvrir le language du développement. Grâce à ce projet j'ai pu en apprendre d'avantage sur ce qu'était une base de données. De plus, j'ai pu apprendre à utiliser et comprendre PhpMyAdmin.

J'ai dû rendre le site simple et facile d'utilisation, sachant se démarquer de la concurrence, grâce à une identité graphique propre à la collection. Il est important de suivre les tendances web actuel, afin de créer un site en accord avec ce qui se réalise actuellement.

Avec un peu plus de temps et de cours, il aurait sans doute était plus rapide et facile de réaliser notre site. Il a fallu gérer et répartir ce temps qu'il nous a été donné, pour réaliser de A à Z un site Internet dynamique. Avec l’entraide de mes camarades et de mes profs, j’ai pu relier une base de données avec le site Internet en employant le language PHP, qui m’était encore entièrement inconnu au début de ce projet.

J'aurai souhaité, avec plus de compétences pouvoir réaliser le back-office (la partie admin) afin de gérer et modifier plus facilement les pages accessoires et les données du formulaire. De plus, j’aurai souhaité pouvoir adapter mon site Internet en responsive, pour plus d’options de visionnage.

21

Rapport projet Tuteuré LP Oct 2013  

Le site web réalisé a été intégré et développé dans une base de données.

Read more
Read more
Similar to
Popular now
Just for you