La (re)naissance d'une marque sur le web

Étude de cas: notre travail pour Yellow Bird Project — www.yellowbirdproject.com

Transcript

1. La (re)naissance d’une marque sur le web
2. PROCESSUS DE CRÉATION D’UNE MARQUE SPÉCIFIQUEMENT POUR LE WEB DESIGN WEB + IDENTITÉ VISUELLE
3. STUDIO DE DESIGN DIGITAL EXPERTISE DANS D’AUTRES DISCIPLINES DE DESIGN
4. Le design web VISUEL STRUCTURE RÉDACTION +++
5. Yellow Bird Project DEUX PASSIONNÉS DE MUSIQUE D’ARTISTES INDÉPENDANTS T-SHIRTS CONÇUS PAR LES ARTISTES VENDU POUR SUPPORTER DIFFÉRENTES CAUSES
8. AU REVOIR SIMONE BLOC PARTY BON IVER BROKEN SOCIAL SCENE CLAP YOUR HANDS SAY YEAH DEVENDRA BANHART ELVIS PERKINS GRIZZLY BEAR HAYDEN HOLLY THROSBY JOSEPH ARTHUR K-OS KING CREOSOTE LAURA VEIRS LITTLE BOOTS METRIC MY BRIGHTEST DIAMOND NEW PORNOGRAPHERS OF MONTREAL RA RA RIOT RILO KILEY STARS THE DEARS THE MAGIC NUMBERS THE NATIONAL THE SHINS WOLF PARADE WOLFMOTHER
9. ACOUSTIC NEUROMA AIDS SOCIETY OF CANADA ALS SOCIETY AMNESTY INTERNATIONAL ART FOR CHANGE BREAD & ROSES COMMUNITY FUND BRITISH HEART ASSOCIATION ELLIOTT SMITH MEMORIAL FUND GLASS CASTERS UNION GREENPEACE INTERVAL HOUSE LAKE ONTARIO WATERKEEPER LE CHAINON MERCY CORPS MUSICOUNTS NATURE CONSERVANCY ONExONE PABLOVE FOUNDATION TEENAGE CANCER TRUST WHALE MUSEUM WORLD
10. Mandat initial ADAPTATION DU SITE EXISTANT : DESIGN + INTÉGRATION
11. Potentiel du projet MUSIQUE D’ARTISTES QUE NOUS RESPECTONS CAUSES QUE NOUS VALORISONS CLIENT EN LEQUEL NOUS CROYONS
12. Recommendation SITE + IDENTITÉ VISUELLE + RÉDACTION
13. Potentiel du projet MUSIQUE D’ARTISTES QUE NOUS RESPECTONS CAUSES QUE NOUS VALORISONS CLIENT EN LEQUEL NOUS CROYONS
14. Potentiel du projet MUSIQUE D’ARTISTES QUE NOUS RESPECTONS CAUSES QUE NOUS VALORISONS CLIENT EN LEQUEL NOUS CROYONS FLEXIBILITÉ DE CRÉATION
15. Mandat adapté REPARTIR À ZÉRO
16. Création d’une marque pour le web : principaux défis
17. Principaux défis SEULE VITRINE : EN LIGNE ÉQUILIBRE ENTRE ESSENCE DE MARQUE ET TECHNOLOGIE SORTIR DU LOT
18. Identité visuelle
19. Identité visuelle INDÉPENDANT ESPRIT COLLECTIF JEUNE CAUSES NOBLES
23. Décisions ILLUSTRATION ICÔNE : OISEAU TYPOGRAPHIE UNIQUE
24. Exploration
31. Illustrateurs : Recherche de collaborateurs
32. EE Storey
33. EE Storey
36. +
39. Wireframe
40. FOOTER NAVIGATION Logo List of all bands Charity drop-down Cart count + link to checkout Newsle er signup Main navigation: Home Catalog About Gallery Press Blog User profile: Login/Logout Welcome Firstname Account link Footer: Contact Shipping FAQ Vendor info Returns Privacy Policy Size Chart MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK) CART COUNTER + LINK TO CHECKOUT LIST OF ALL BANDS + CHARITY DROPDOWN LOGO NEWSLETTER PERSISTENT UI ELEMENTS HOME 1. Branding headline/statement/tagline 2. Product announcement (new shirt) 3. About YBP / Mission (+ link to About) 4. Full catalog (thumbnails + band names) 5. Latest news (from Blog) 6. Latest Press 7. Promotion space 8. Song player (+embed link) Callouts/Special bu ons: 9. Theme Song Page 10. Guitar Lessons 11. Tweet Team 12. Press 13. Blog Phase 2: Twi er Feed Poll 2. PRODUCT ANNOUNCEMENT 4. FULL CATALOG (THUMBNAILS + BAND NAMES) 3. ABOUT YBP / MISSION (+ LINK TO ABOUT) 11. TWEET TEAM CALLOUT 10. GUITAR LESSONS CALLOUT 7. PROMOTION SPACE (IF NEEDED) 8. SONG PLAYER (+EMBED) + 9. LINK TO THEME SONG PAGE 5.. LATEST NEWS + 13. LINK TO BLOG 6. LATEST PRESS +12. LINK TO PRESS 1. BRANDING HEADLINE/STATEMENT/TAGLINE FOOTER NAVIGATION Logo List of all bands Charity drop-down Cart count + link to checkout Newsle er signup Main navigation: Home Catalog About Gallery Press Blog User profile: Login/Logout Welcome Firstname Account link Footer: Contact Shipping FAQ Vendor info Returns Privacy Policy Size Chart MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK) CART COUNTER + LINK TO CHECKOUT LIST OF ALL BANDS + CHARITY DROPDOWN LOGO NEWSLETTER PERSISTENT UI ELEMENTS PHOTO GALLERY 1. Page Header 2. Page navigation 3. Photo thumbnail area 4. Photo thumbnail (w/user and product name) 8. ‘Submit a photo’ bu on 5. ‘Browse by product’ drop-down 6. ‘Browse by user’ drop-down (?) 7. Featured galleries (users) list 9. Most popular photos (?) 3. PHOTO THUMBNAIL AREA 5. BROWSE BY PRODUCT DROP-DOWN 6. BROWSE BY USER DROP-DOWN 7. FEATURED GALLERIES LIST 9. MOST POPULAR PHOTOS 1. PAGE HEADER 1. PAGE NAVIGATION (PAGINATION) 8. SUBMIT A PHOTO BUTTON 1. PAGE NAVIGATION (PAGINATION) - REPEAT 8. SUBMIT A PHOTO BUTTON - REPEAT 4. PHOTO THUMBNAIL (W/ USER AND PRODUCT NAME) Logo List of all bands Charity drop-down Cart count + link to checkout Newsle er signup Main navigation: Home Catalog About Gallery Press Blog User profile: Login/Logout Welcome Firstname Account link Footer: Contact Shipping FAQ Vendor info Returns Privacy Policy Size Chart MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK) CART COUNTER + LINK TO CHECKOUT PERSISTENT UI ELEMENTS 1. NAME OF PRODUCT 2. IMAGES OF PRODUCT 6. DESCRIPTION OF PRODUCT 14. PRODUCT SPECS (AA INFO) 7. BAND INFO 13. CHARITY INFO 5. GALLERY THUMBNAILS (+ LINK TO GALLERY) 8. SHARE BUTTON (SHARETHIS) 16. UPLOAD PICTURE BUTTON 9. SIZE SELECTOR 15. SIZE CHART LINK 11. OUT OF STOCK/SOLD OUT MESSAGE 10. ADD TO CART BUTTON 3. ZOOM BUTTON + 4. ADDITIONAL PHOTOS 12. PREVIOUS / NEXT BUTTONS FOOTER NAVIGATION MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK) CART COUNTER + LINK TO CHECKOUT LIST OF ALL BANDS + CHARITY DROPDOWN LOGO NEWSLETTER USER PROFILE 1. Page Header 2. Greeting 3. Profile Details (+edit) box - User avatar - Name - Email address - Address - Phone - Etc. 4. Order history box 5. Pending 6. Shipped - track bu on 7. Completed orders - re-order bu on 8. Photo Gallery box 9. Most recent photos (preview) 10. See all your photos bu on 11. Add photos 12. Contact Customer service (form) 1. PAGE HEADER + 2. GREETING 3. PROFILE DETAILS (+ INLINE EDIT) 4. ORDER HISTORY BOX 12. CONTACT CUSTOMER SERVICE (FORM) 8. PHOTO GALLERY 9. MOST RECENT PHOTOS (PREVIEW) 10. SEE ALL YOUR PHOTOS BUTTON 5. PENDING ORDERS 6. SHIPPED ORDERS (IN-PROGRESS) 7. COMPLETED ORDERS 11. ADD PHOTOS
41. Design !
42. Environnement concurrentiel DESIGN
58. Opportunités de différenciation DESIGN
59. 1. Style d’illustration DESIGN
60. 2. Look fait à la main DESIGN
61. 3. Contribution collective DESIGN
62. Approche visuelle DESIGN
67. Navigation DESIGN
70. Typographie DESIGN
78. Slogan DESIGN
79. DESIGN TSHIRTS + CHARITY (TO THE TUNE OF INDIE ROCK)
80. DESIGN
82. Photographie DESIGN
102. Gallerie de photos DESIGN
108. Panier DESIGN
110. Mon profil DESIGN
112. Blogue DESIGN
114. Infolere DESIGN
118. Pages d’erreur (404) DESIGN
120. Succès
121. + 34 000 visiteurs / mois
122. Chiffre d'affaires doublé
123. Augmentation de positionnement dans les moteurs de recherche
124. Maintien de crédibilité
125. Extension de l’image visuelle