Ardephwerk Case study on designing the logo and graphic design + developpement of the website angecabotin.com

1. CASE STUDY - Recherche
LOGOTYPE - Gamme couleur
www.angecabotin.fr
Mai 2007

2. Rechercher Typographie

3. Couleur Signalétique sur l’arborescence du site

4. AXE 7 Rechercher icon
Recherche icone fait au tour les lettre dans le nom Ange cabotin
Logo et icone ensemble logo sur un fond noir
L’autre déclinaison de logo
logo sur un fond noir

5. AXE 9 Rechecher illustration - icone(G & E )
Recherche illustration - icone fait au tour de la (G et E ) en Ange Cabotin
polices pris : Tschich light et illustration E
Logo et icone ( sans espace ) ensemble Logo et icone ( avec espace ) ensemble
logo sur un fond noir

6. AXE 9 Rechecher illustration - icone(G & E )
Recherche illustration - icone fait au tour de la (G et E ) en Ange Cabotin
polices pris : Tschich light et illustration E
L’autre déclinaison de logo
icone seul
Logo et icone ensemble
L’autre déclinaison de logo

7. Icon et polices ensemble
AXE 1
icon grand centre icon seul
i c o n p e t i t c e n t re
Pol i c e : e x i s t e n c e l i g h t
AXE 2
icon grand centre icon seul
i c o n p e t i t c e n t re
Pol i c e : C a r a m e l l a

8. Icon et polices ensemble
AXE 3
icon grand centre icon seul
i c o n p e t i t c e n t re
Pol i c e : Tr a j a n p ro
AXE 4
icon grand centre icon seul
i c o n p e t i t c e n t re
Pol i c e : Fe l i x t i t l i n g

9. LOGOTYPE modifs au typographie
L’autre déclinaison du Icon et typo qui ne marche pas
Différent déclinaison du Icon et typo.

11. HOME PAGE
Etude sur la bar de navigation
et la gabarit de la home page
30 Mai 2007 Ange Cabotin

12. AXE 1 Etude sur la bar de navigation de la home page
Etude sur les grandes lignes du home page autour la zone de navigation. Etude sur 960 de large
et la hauteur est
illimité
S o i t u n e I m a g e s e n a r r i e r e p l a n p l e i n p a g e.
Que lo g o q u i c h a n g e r couleur au rappor t
de la communication ac t u e l l e.
AD R E S S E E - M A I L
Place pour les images - tex tes etc. .
La zone login
M OT D E PAS S E
MOT DE PASSE OUBLIE ?
D E V E N I R M E M B R E - I N S C R I V E Z - VOUS
Rollover
Segmentation couleur C LU B D E S C R E AT E U R S
La zone navigation QUI SOMMES-NOUS ?

13. Examples d’un mise en page de la home page
QUI SOMMES-NOUS ?
CLUB DES CREAT EURS
La zone navigation DEVENIR MEMBRE - INSCRIVEZ - VOUS
et login ADRESSE E-MAIL
MOT DE PASSE
MOT DE PASSE OUBLIE ?
Attention l’image c’est juste une
exemples

14. AXE 2 Etude sur la bar de navigation de la home page
Etude sur 960 de large et la hauteur
est illimité
S o i t u n e I m a g e s e n a r r i e r e p l a n p l e i n p a g e.
Q u e l o g o q u i c h a n g e r couleur au rappor t
de la communication ac t u e l l e.
ADRESSE E-MAIL
La zone login
Place pour les images - tex tes etc. .
M OT D E PAS S E
MOT DE PASSE OUBLIE ?
D E V E N I R M E M B R E - I N S C R I V E Z - VOUS
Rollover
QUI SOMMES-NOUS ?
Segmentation couleur
La zone navigation

15. AXE 1 Etude sur la placement du textes sur la home page
S o i t u n e I m a g e s e n a r r i e re plan plein page.
Que logo qui cha n g e r couleur au rappor t
de la communication ac tu e l l e.
T R O I S ZO N E T E X T E S P O U R
L A H O M E PAG E
Ventes événementielles. Mode enfant. Tenues exclusives.
Ange Cabotin fédérateur de tendances. ZO N E 1
1 vêtement 1 créateur. Edition limitée.
Privilèges. Collectors. Plaisir.
AD R E S S E E - M A I L
ZO N E 2
Place pour les images - tex tes etc. .
M OT D E PAS S E
MOT DE PASSE OUBLIE ?
D E V E N I R M E M B R E - I N S C R I V E Z - VOUS
QUI SOMMES-NOUS ?
Ventes événementielles. Mode enfant. Tenues exclusives.
Ange Cabotin fédérateur de tendances. ZO N E 3
1 vêtement 1 créateur. Edition limitée.
Privilèges. Collectors. Plaisir.
attention pour la te x te s c 'e s t
juste le placement
i l f a u t q u e j 'e t u d i e l e s s t y l e c s s
9 6 0 px d e l a r g e e t l a h a u t e u r e s t i l l i m i té

16. AXE 2 Etude sur la placement du textes sur la home page
S o i t u n e I m a g e s e n a r r i e r e p l a n p l e i n p a g e. T R O I S ZO N E T E X T E S P O U R
L A H O M E PAG E
Que logo qui cha n g e r couleur au rappor t AT TE N T I O N c 'e s t e n G I F D o n c n e
de la communication ac t u e l l e. compte pas pour les moteur de rechercher
ZO N E 1
T R O I S ZO N E T E X T E S P O U R
L A H O M E PAG E
ADRESSE E-MAIL
ZO N E 2
Place pour les images - tex tes etc. .
M OT D E PA S S E
MOT DE PASSE OUBLIE ?
D E V E N I R M E M B R E - I N S C R I V E Z - VOUS
QUI SOMMES-NOUS ?
ZO N E 3
attention pour la te x te s c 'e s t
juste le placement
i l f a u t q u e j 'e t u d i e l e s p o l i c e s e n g if
9 6 0 px d e l a r g e e t l a h a u t e u r e s t i l l i m i té

17. Etude sur la bar de navigation et Couleur segmentation.
Etude sur 800 x 600 px
Bouton rollover segmentation couleur,
Facile à naviguer, Nous comprendrons le sens du
La couleur du logo changer par rapport de la
lecture en restant, élégant clean.
rubrique avec une léger dégrader de couleur
en arrière plan.
La zone pour la
Bar de navigation
La zone pour la
info, textes,
elements graphic
etc...
PLAN NON MEMBRE

18. Etude sur les Rubriques
Questions:
Entre le Spec et le powerpoint , je comprend pas le sens
les placement du rubrique au terme de navigation
J’ai remis les rubrique dans une
standard. C’est à dire pourquoi mon compte, aide et
ordre plus standard. Qui suivre une
logique de naviguer dans un site
contact sont en premier ? Je sais que vous faisiez de
web.
chose en terme ( marcher business ) mais je ne sais pas
La couleur du logo changer par rapport de la
si c’est la cas.
rubrique avec une léger dégrader de couleur
en arrière plan.
PLAN MEMBRE

19. Etude sur la bar de navigation MEMBRE et NON MEMBRE
Rubrique : Club Des Créateurs
Bouton rollover segmentation couleur,
2eme bar de navigation.
Pour la lecture et développement il vaut mieux Bouton rollover segmentation couleur,
d’avoir tout les info de navigation dans même 2eme bar de nav
endroit.
VENTE L E C LU B D ES MON MON
AIDE
CO N TACT
E N CO U R S C R E AT E U R S CO M P T E PA N I E R
PLAN MEMBRE
PLAN NON MEMBRE

20. PAGE AIDE
RAPPEL DE LA
RUBRIQUE
AIDE
AFFICHAGE D’ UN
RAPPEL DE LA BAR SOUS NAVIGA-
NOTRE DIFFERENCE
N OT R E D I F F E R E N C E
SOUS RUBRIQUE TION
LIVRAISON ET SUIVI
SATISFAIT OU REMBOURSE
SERVICE RELATIONS
CONFIDENTIALITE
CONDITIONS GENERALES
DE VENTE
TEXTES ICI

21. PAGE MON COMPTE * MON PROFILE
AFFICHAGE D’ UN
BAR SOUS NAVIGA-
TION
RAPPEL DE LA
RUBRIQUE
AFFICHAGE D’ UN
G ERER MON PROFIL BAR SOUS
NAVIGATION
1/ Mes coordonnées
2/ Mes adresses de livraison et de facturation
Je trouve que c'est interesse à 3/ Mon adresse e-mail
garder ce place pour communique 4/ Mon mot de passe
5/ Mes préférences
c'est à dire les textes, images 6/ Me désinscrire
rappel des nouvelle compaigne etc..
c'ette endroit vous pouvez changer
vous meme dans le interface du l'admin

22. MON PROFILE LES SOUS PAGE
GERER MON PROFIL
ME DESINSCRIRE
1/ Mes coordonnées
Souhaitez vous ne plus recevoir d’e-mail d’invitation aux ventes ?
2/ Mes adresses de livraison et de facturation
Ne plus recevoir d’e-mails d’invitation signifie que vous pourrez toujours 3/ Mon adresse e-mail
accéder aux ventes mais que vous ne recevrez plus d’invitations par e-mail.
4/ Mon mot de passe
ou 5/ Mes préférences
6/ Me désinscrire
Souhaitez vous résilier totalement votre compte vente-privee.com ?
Résilier votre compte signifie que vous ne pourrez plus accéder au site
angecabotin.fr et que vous ne pourrez plus passer de commande.
N E P LUS RECE VOIR D'E-MAILS R E S I L I E R M O N CO M P T E
*ATTENTION MODIFICATION AU SPEC
il faut ajouter en message de confrim
aprés clic sure les button.
que logo et textes 2 html ferai par Rachael, texts à fournir ming-lie

23. PAGES VENTE ACCUEIL
ACCUEIL
E D I TO
Dans admin * FOND à change par chaque
L’image au fond
vente
à changer par
chaque vente
image ici + plus un lien
sur image vers la page tenue.
ZONE TEXTES ICI
Dans l'admin
on peut changer ici par
chaque vente idem pour les
zone textes et news.
A C C E D E R A U X E XC L U S I V I T E S
ZONE NEWS ICI IDEM *

24. PAGES PRESENTATION 2 TENUES
ACCUEIL
Ame de parisienne
La Bohème
images 1 images 1
à change par vente à change par vente
*FOND à change par vente dan l'admin

25. PAGES PRESENTATION 3 TENUES
ACCUEIL
La Bohème La Bohème La Bohème
image1 image2 image3
* FOND A CHANGER PAR CHAQUE VENTE

26. PAGES VENTE
ACCUEIL
>
V O I R L E S A U T R E S E XC L U S I V I T E S
AT TENTION EDITION LIMITEE
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
images
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
BESOIN AIDE ? 1 800 222 22222

27. PAGES VENTE PANIER
ACCUEIL
>
V O I R L E S A U T R E S E XC L U S I V I T E S
AT TENTION EDITION LIMITEE
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
images
BLOUSE ANNE 50 $
D E TA I L
A J O U T E R A U PA N I E R
BLOUSE ANNE 50 $
reprendre la code ici
D E TA I L
A J O U T E R A U PA N I E R
PANIER
1 x BLOUSE ANNE Supprimer
frais de port: 6€
COMMANDER
16€
il vous reste 15 minutes ava n t expiration du panier
BESOIN AIDE ? 1 800 222 22222

28. PAGES BLOG VOTER
DIALOGUER AV EC LE CREAT EUR RESU LTATS D E S V OT E S PA L M A R E S P O U R Q U O I V OT E R ?
PART I C I P E R V OT E R
Votez pour votre tenue préférée
ZONE TEXTE
VOIR DE TAIL VOIR DE TAIL VOIR DE TAIL
JE VOTE POUR CE T TE TENUE JE VOTE POUR CE T TE TENUE JE VOTE POUR CE T TE TENUE
ZONE TEXTE ZONE TEXTE ZONE TEXTE
IMAGE IMAGE IMAGE
• Ajouter un commentaire - aucun commentaire
• Ajouter un commentaire - Commentaire(1)

29. PAGES VOTER commentaires
D I A LO G U E R AV E C L E C R EAT EU R R E S U LTATS D E S V OT E S PA L M A R E S P O U R Q U O I V OT E R ?
PARTICIPER VOTER
Votez pour votre tenue préférée
ZONE TEXTE
V O I R D E TAI L V O I R D E TAI L V OIR DE TAIL
J E V OT E P O U R C E T T E T E N U E J E V OT E P O U R C E T T E T E N U E J E V OT E POUR CE T TE TENUE
ZONE TEXTE ZONE TEXTE ZONE TEXTE
les
commentaires IMAGE IMAGE IMAGE
gerer par css
non images
que du textes
• Ajouter un commentaire - Commentaire(1)
• VOS COMMENTAIRES
Charmante ta robe, très joli...
*******************************************************************************************************************
Ecrit par : Annabel & Co | 14.06.2007
Charmante ta robe, très joli...
*******************************************************************************************************************
Ecrit par : Annabel & Co | 14.06.2007

30. PAGES VOTER commentaires 2
D I A LO G U E R AV E C L E C R EAT EU R R E S U LTATS D E S V OT E S PA L M A R E S P O U R Q U O I V OT E R ?
• AJOUTER UN QUESTION - COMMENTAIRE
PARTICIPER VOTER
PSEUDO
Votez pour votre tenue préférée
E-MAIL
ZONE TEXTE
QUESTION - COMMENTAIRE
V O I R D E TAI L V O I R DE TAIL VOIR DE TAIL
J E V OT E P O U R C E T T E T E N U E J E V OT E P O U R CE T TE TENUE JE VOTE POUR CE T TE TENUE
ZONE TEXTE ZONE TEXTE ZONE TEXTE
IMAGE IMAGE IMAGE
• Ajouter un commentaire - Commentaire(1)
• AJOUTER UN COMMENTAIRE
soit en pop-up ou soit comme ça
à voir avec micheal de quelle est la
mieux par rapport de son code déja
fait.

31. PAGES RESULTATS DES VOTES
D I ALO GU E R AV E C L E C R EAT E U R R E S U LTATS D E S V OT E S PA L M A R E S P O U R Q U O I V OT E R ?
BAR O M E T R E D E S T E N D ANCES : RESUL ATS DES VOTES
Interview de knuklhead ARCHI V E PAR MOIS
• JUIN
ZONE TEXTE • JUIN
• JUIN
• JUIN
• JUIN
• JUIN
ZONE TEXTE
IMAGE IMAGE IMAGE
ZONE TEXTE ZONE TEXTE ZONE TEXTE

32. PAGES PALMARES
D I ALO GU E R AV E C L E C R EAT E U R R E S U LTATS D E S V OT E S PA L M A R E S P O U R Q U O I V OT E R ?
BAR O M E T R E DES TENDANCES : PALMARES
ZONE TEXTE
( TENDANCE ???) THE BEST OF FILLE
IMAGE IMAGE IMAGE
SCROLL DOWN
ZONE TEXTE ZONE TEXTE ZONE TEXTE
( TENDANCE ???) THE BEST OF GARCON
IMAGE IMAGE
IMAGE

33. CASE STUDY Charte graphique site web
ANGE CABOTIN
JUIN 2007
LES RUBRIQUES ***
MON COMPTE
CONTACT
AIDE
ACCUEIL VENTE

34. LOGOTYPE 1
www.angecabotin.fr www.angecabotin.fr

35. Qui sommes-nous ?
LOGO 2 AXES www.angecabotin.fr

36. LOGOTYPE 2
Devenir membre www.angecabotin.fr

37. Mon compte
www.angecabotin.fr

38. Accueil - Edito
www.angecabotin.fr

39. Presentation des tenues www.angecabotin.fr
La Bohème Ame de parisienne

40. La Bohème tenue
www.angecabotin.fr
Blouse Anne 46 €
Pantalon Léa 44 €
Fichu Emma 12 €

41. Ame de parisienne tenue
www.angecabotin.fr
Robe Clara 63 €
Etole Manon 29 €

42. Club des createurs
www.angecabotin.fr

43. Club des createurs - page voter
www.angecabotin.fr
Ame de parisienne
La Bohème

44. Club des createurs - dialoguer
www.angecabotin.fr
COMMENTAIRES
INTERVIEW CREATEUR
Comment est née votre envie de concevoir une ligne de vêtements haut
de gamme pour enfants ?
J’ai quatre enfants, et je passais mon temps dans les boutiques pour les habiller.
J’ai constaté qu’il y avait peu de vêtements stylés pour les garçons, et pour les
filles il n’y avait pas ce que je recherchais c’est à dire des coupes simples avec
de jolis tissus. Et puis j’ai rencontré Astrid, qui réalisait des vêtements pour ses
deux enfants dans un style très proche du mien. On aime les mêmes choses en
matière de vêtements pour enfants : de belles coupes dans un style un peu rétro
avec des matières nobles.
LIRE LA SUITE >
FORMULAIRE COMMENTAIRES
Vous avez lancé votre 1ère ligne il y a un an, et le succès est déjà là,
comment l’expliquez-vous ?
On a percé grâce à notre look chic et agréable à porter. Pour les filles, c’est un
vrai régal de créer des petites tenues, et dès que c’est mignon et de belle qualité,
les mamans ne peuvent plus résister : « encore une petite robe… , c’est pas grave
elle est trop mimi, je craque ». Les parents adorent habiller leurs enfants, c’est
leur propre image qu’ils reflètent dans leurs tenues.
Comment définissez-vous votre style ?
Quelles sont vos sources d’inspiration ?
Notre style c’est avant tout des lignes droites et épurées, avec de belles matières.

45. Aide
GAMME COLORS FOR LOGO AND WEBSITE www.angecabotin.fr

46. Rachael HAMPTON
c/o ardephwerk (artdeisgnphotographie)
www.ardephwerk.fr // rachael@ardephwerk.fr
T. +33 1 43 57 20 04 // + 33 6 62 46 25 76
24, rue de Lappe 75011 Paris FRANCE