Webdesignvisual designFévrier 2013a RITAteachingRelax In The Air3
workflow
recherche personascontenu task modelarchitecture sitemapwireflow wireframeuser testing visual designintégration htmldév. b...
Où sommes-nous?Pourquoi nous y sommes?Où aller?Comment y aller?stratégieworkflowRelax In The AirFévrier 2013Copyright© 201...
Brief créatif.Inspirer et stimuler avec saconnaissance de la marque.Accompagner le développement créatif.Maintenir le dial...
personas
les personas sontDes représentations devotre public cible baséessur la recherche et lesinterviews.Ces utilisateurs typesdo...
un persona de qualitédoit reposer sur de vraies personnes etun travail de recherche rigoureux
et se concentre sur• les objectifs-clé que les groupesdoivent atteindre• Les comportements des utilisateurs
doit vous permettre deComprendre si oui ou non vosdécisions vont aider l’utilisateur.
• guide à chaque partie d’un projet• Document vivant (à un moment x)• Doit être mis à jour• outil stratégique > nouvelles ...
objectifs• Prendre des décisions de design• Rappeler que de vraies personnesvont utiliser votre produit
• tâches à accomplir• comportements• état d’espritbasés sur...personasRelax In The AirFévrier 2013Copyright© 2013 Relax In...
• Descriptions courtes• se baser sur de vraies personnes• photographies descriptivesque communiquer?personasRelax In The A...
anatomie du persona
objectifs-cléQuels sont les objectifs del’utilisateur?Envies, besoins, attentesQuels sont les besoins et les attentesident...
techniquesInterviews poussées:• Parler à l’utilisateurCall Center/Service client/Helpdesk:• Récolter les feedback et des r...
Mieux comprendre votre audience.Motivations.Réactions.Envies.butpersonasRelax In The AirFévrier 2013Copyright© 2013 Relax ...
• Buts et besoins de l’utilisateur deviennent le point defocus d’une équipe de design.• L’équipe peut se concentrer sur l’...
http://www.slideshare.net/toddwarfel/data-driven-personasliens utiles
customer journey / experience map
Montre ce que fait l’utilisateur et soncomportement à chaque étape d’une tâche.
Destination! Date / heure! Prix! Confirmation!“Je ne cherche pasforcément le moins cher.C’est une combinaison dechoses.”!Dé...
But: un événement sur tous les fronts
But: expérience de rail europe
liens utileshttp://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-maphttp://www.servicedesigntools.org/tools/8htt...
Content precedes design. Design in the absenceof content is not design, it’s decoration.____________________Jeffrey Zeldma...
Résoudre les problèmes structurels.Gérer l’espace.Communiquer du contenu.Apporter le sens au site.contenuworkflowRelax In ...
Au commencement était le chaoscontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
EnumérerAnalyserSéparerRassemblerEnleverCréercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Vos outils:contenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
contenu
CatégorisercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Content requirements for choosing a boutique dressHow do users want content presented:Photos – Large high quality photogra...
architecture
____________________ErgolabTrouver un système dorganisation desinformations optimal, qui soit adapté auxtâches de recherch...
Hiérarchiser.Structurer.Faciliter l’activité cognitive.architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Rel...
Vos outils:architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
structure & hiérarchiearchitectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
sitemap
____________________MC CasalSans sitemap, tu peux toujours courir pour queje fasse ton site.
Colonne vertébrale du site.Document de référenceincontournable.sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 ...
Vos outils:sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
sitemapworkflowACCUEIL /HOMEPAGE:1_HOME_logged1_HOME_nologgedLOGIN PROCESS:1_HOME_nologged_process11_HOME_nologged_process...
© Relax In The Air SàRL - 2012Sitemap2Deal du jourConfirmationCampaign Monitor1ACCUEILCompact version3Deals actuels /Ancien...
wireframe
wireframe____________________WikipediaA website wireframe is a basic visual guide usedin interface design to suggest the s...
Distribuer le contenuDéfinir la structureDéterminer les fonctionswireframeworkflowRelax In The AirFévrier 2013Copyright© 2...
ConceptualiserDéfinir la place de chaque éléments dans l’interfaceConcevoir la navigationCréer la référence visuelleOublie...
Vos outils:wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Mike Rohde
Définir les comportements.Charte d’interaction.wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
wireflow
Créer les liens.Organisation interactive.wireflowworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
La MaisonLes pièces d’exceptionLes instruments d’écritureHaute EcritureLa Maison La MaisonLes pièces d’exception Les instr...
35CHOICE MENUWHAT’S NEW SHOWROOM SHOPWHAT’S NEW SHOWROOM SHOPSHOWROOM 2 SHOP 2SHOP 3WHAT’S NEW 2PHOTO VIEWDEPENDINGON NEWS...
user testing
Permet de mettre à l’épreuve le travail déjàeffectué sur le produit et de faire lesajustements nécessaires.
Nik, 32!Young professional!Loved the clarity ofthe site!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segmen...
user testingworkflowprototypage
user testingworkflowusability testing fonctionnel
Client « Super créa, vraiment on aime beaucoup, parcontre ça respecte pas vraiment notre charte. »Nous « En même temps san...
Couleurs.Typos.Formes.Images.Esthétique.visual designworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Souci du détail.Exigence.Excellence.contrôle qualitéworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
contrôle qualité
stratégiePersonasexp. map / customer journeycontenusitemapwireframewireflowdocumentsrésuméworkflowRelax In The AirFévrier ...
Cours de Web Design part.3
Cours de Web Design part.3
Cours de Web Design part.3
Cours de Web Design part.3
Cours de Web Design part.3
Cours de Web Design part.3
Cours de Web Design part.3
Upcoming SlideShare
Loading in...5
×

Cours de Web Design part.3

1,731

Published on

Cours de webdesign. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

Published in: Design
1 Comment
4 Likes
Statistics
Notes
  • c'est passionnant
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,731
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Cours de Web Design part.3"

  1. 1. Webdesignvisual designFévrier 2013a RITAteachingRelax In The Air3
  2. 2. workflow
  3. 3. recherche personascontenu task modelarchitecture sitemapwireflow wireframeuser testing visual designintégration htmldév. backcontrôle qualitéstratégie
  4. 4. Où sommes-nous?Pourquoi nous y sommes?Où aller?Comment y aller?stratégieworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  5. 5. Brief créatif.Inspirer et stimuler avec saconnaissance de la marque.Accompagner le développement créatif.Maintenir le dialogue.Relax In The AirstratégieworkflowFévrier 2013Copyright© 2013 Relax In The Air
  6. 6. personas
  7. 7. les personas sontDes représentations devotre public cible baséessur la recherche et lesinterviews.Ces utilisateurs typesdonneront la directionpour la vision et le designd’une solution web.
  8. 8. un persona de qualitédoit reposer sur de vraies personnes etun travail de recherche rigoureux
  9. 9. et se concentre sur• les objectifs-clé que les groupesdoivent atteindre• Les comportements des utilisateurs
  10. 10. doit vous permettre deComprendre si oui ou non vosdécisions vont aider l’utilisateur.
  11. 11. • guide à chaque partie d’un projet• Document vivant (à un moment x)• Doit être mis à jour• outil stratégique > nouvelles opportunitésa tout momentquand le créer?personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  12. 12. objectifs• Prendre des décisions de design• Rappeler que de vraies personnesvont utiliser votre produit
  13. 13. • tâches à accomplir• comportements• état d’espritbasés sur...personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  14. 14. • Descriptions courtes• se baser sur de vraies personnes• photographies descriptivesque communiquer?personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  15. 15. anatomie du persona
  16. 16. objectifs-cléQuels sont les objectifs del’utilisateur?Envies, besoins, attentesQuels sont les besoins et les attentesidentifés pour cet utilisateurobjectifs businessQuels objectifs veut atteindrel’entreprise avec cet utilisateur?freins & frustrationsQu’est-ce qui aujourd’hui freinel’utilisateur dans sa tâche?••••••Matériel à dispositioninformations personnellesProfessionLieuAge(ordinateur, tablette,smartphone...)••••••Nom client nom du projetPrénomgeekinessCapacités à utiliser le matérielScénario: décrire brièvement pourquoi cette et comment cette personne utiliserait votre produit
  17. 17. techniquesInterviews poussées:• Parler à l’utilisateurCall Center/Service client/Helpdesk:• Récolter les feedback et des récurrencesRecherches ethnographiques•Observer l’utilisateur dans son environnementnaturel pendant qu’il utilise l’outil
  18. 18. Mieux comprendre votre audience.Motivations.Réactions.Envies.butpersonasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  19. 19. • Buts et besoins de l’utilisateur deviennent le point defocus d’une équipe de design.• L’équipe peut se concentrer sur l’utilisateur.• Sont relativement facile à mettre en place.• Evite le piège de faire ce que l’utilisateur demande vs cequ’il va vraiment utiliser.• Les désaccords sur le design se règlent en faisantréférence aux personas.avantagespersonasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  20. 20. http://www.slideshare.net/toddwarfel/data-driven-personasliens utiles
  21. 21. customer journey / experience map
  22. 22. Montre ce que fait l’utilisateur et soncomportement à chaque étape d’une tâche.
  23. 23. Destination! Date / heure! Prix! Confirmation!“Je ne cherche pasforcément le moins cher.C’est une combinaison dechoses.”!Départ!aéroport!Spécificités!Acheter tickets!“Un siège côtéhublot”!“Il y a peu d’aéroports d’oùje peux voler”!“Je suis flexible avec leshoraires, mais je ne veuxpas me lever trop tôt.”!“Normalement je ne veuxque le vol, mais je vaisregarder si on me proposedes spectaclesintéressants”!“J’imprimerai mon ticketjuste avant le départ.”!L’utilisateur doit pouvoir facilementbouger entre ces différentes optionsdans le but de prendre une décisionjuste et claire.!La personne n’est pas toujoursseule à ce stade de discussion!But: Booker un vol pas cher pour NYC en juillet
  24. 24. But: un événement sur tous les fronts
  25. 25. But: expérience de rail europe
  26. 26. liens utileshttp://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-maphttp://www.servicedesigntools.org/tools/8http://www.uxmatters.com/mt/archives/2011/09/the-value-of-customer-journey-maps-a-ux-designers-personal-journey.php
  27. 27. Content precedes design. Design in the absenceof content is not design, it’s decoration.____________________Jeffrey Zeldmancontenu
  28. 28. Résoudre les problèmes structurels.Gérer l’espace.Communiquer du contenu.Apporter le sens au site.contenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  29. 29. Au commencement était le chaoscontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  30. 30. EnumérerAnalyserSéparerRassemblerEnleverCréercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  31. 31. Vos outils:contenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  32. 32. contenu
  33. 33. CatégorisercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  34. 34. Content requirements for choosing a boutique dressHow do users want content presented:Photos – Large high quality photographs showing the front, back, detailing and a model shot. Copy – Clear and non-patronising. Users want to be reassured by the detailing, heritage and ethics.Summary of core needs:Pictures – What do the products look like? Price –Price, any applicable offers and easily accessibly delivery charges. Sizing and availability – What sizes are available and what are thedimensions of our sizing? Do they have my size? Delivery time – When will I get it?ID Page name What must users do?The core purpose of the page.What support do they need?Include quotes from research.Required elements and suggestionsExisting, new or amended assets.1 Homepage Easily be able to locate and select the dressescategory.If users have been to the site before they wantto get straight into the category listing,however in testing it was noted that users“may get side-tracked by other products on thehomepage”.New users will want to get a sense that thebrand offers the types of clothes they wouldbuy.Images of the latest seasons clothing.Sale and offer information.Clear navigation into the product categories.2 Category listing Easily select a product they like the look of. Colour, price and style are all necessary.An indication of available sizes is useful at thisstage, but can be omitted as long as it’s clearon the product page.“I just like looking through everything availableand clicking through to the dresses I like.”Photos that show the front and back of garments:Price and discount information.Alternate color, if applicable3 Product page Add the dress to their basket. Further images including details and modelshots. Sizing and availability. Delivery andreturns information.“I often buy two different sizes to try both, so Ineed to make sure it’s easy to send the one Idon’t want back”.Large (fullscreen) photos both on and off models.Detailed sizing guide with stock levels for each size and color.Delivery and returns information.Quantity and add to basket.Product description including material, detailing informationand the designer.
  35. 35. architecture
  36. 36. ____________________ErgolabTrouver un système dorganisation desinformations optimal, qui soit adapté auxtâches de recherche de lutilisateur.
  37. 37. Hiérarchiser.Structurer.Faciliter l’activité cognitive.architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  38. 38. Vos outils:architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  39. 39. structure & hiérarchiearchitectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  40. 40. sitemap
  41. 41. ____________________MC CasalSans sitemap, tu peux toujours courir pour queje fasse ton site.
  42. 42. Colonne vertébrale du site.Document de référenceincontournable.sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  43. 43. Vos outils:sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  44. 44. sitemapworkflowACCUEIL /HOMEPAGE:1_HOME_logged1_HOME_nologgedLOGIN PROCESS:1_HOME_nologged_process11_HOME_nologged_process21_HOME_nologged_process31_HOME_nologged_process41_HOME_nologged_process5DEAL DU JOUR / DEAL OF THE DAY2_DETAIL_ADEALS3_DEALS_actuelsMON COMPTE / MY ACCOUNTRECHERCHE / SEARCHDEAL DETAIL SOLD OUT5_DEALS_detail_SoldOutDEAL DETAIL5_DEALS_detailPROFILE11_MONCOMPTE_profil11_MONCOMPTE_profil_password11_MONCOMPTE_profil_password211_MONCOMPTE_profil_photo11_MONCOMPTE_profil_photo211_MONCOMPTE_profil_photo311_MONCOMPTE_profilWARNINGS111_MONCOMPTE_profilWARNINGS211_MONCOMPTE_profilWARNINGS311_MONCOMPTE_profilWARNINGS4CREDITS12_MONCOMPTE_credits12_MONCOMPTE_credits212_MONCOMPTE_credits3ACHATS / PURCHASE14_MONCOMPTE_payes16_MONCOMPTE_payes_detail15_MONCOMPTE_apayer17_MONCOMPTE_apayer_detail15_MONCOMPTE_apayer_payment15_MONCOMPTE_apayer_payment2BONS / VOUCHERSame structure thanpurchases (18, 19, 20)FOOTERTOPDEAL A PROPOS / ABOUT25_TOPDEAL_aboutCONTACT / 26JOBS / 27PRESSE / 28PARTENAIRES / PARTNERS SUBMIT DEAL24_PARTENAIRES_0124_PARTENAIRES_02CONFIRMATION PAGE24_PARTENAIRES_03INFORMATIONSFAQS21_FAQSCONDITIONS DUSE / 22CONFIDENTIALITE / 23IN CONTENT33_RECHERCHE_results2IN DEALS33_RECHERCHE_results1BASKETBASKET WITH OPTIONS MULTIPLE OPTIONS34_PANIER_B1a34_PANIER_B1b34_PANIER_B1cFORMULA34_PANIER_B2SIZE34_PANIER_B3COLOR34_PANIER_B4BASKET WITHOUT OPTIONSNOTIFICATION BASKET31_PANIER_A31_PANIER_BPAY (LOGGED)31_PANIER_C_logged31_PANIER_C_logged131_PANIER_C_logged231_PANIER_C_logged3PAY (NOT LOGGED)31_PANIER_C_nologged31_PANIER_C_nologged231_PANIER_C_nologged3©Copyright Relax In The Air 2013
  45. 45. © Relax In The Air SàRL - 2012Sitemap2Deal du jourConfirmationCampaign Monitor1ACCUEILCompact version3Deals actuels /Anciens deals/Mon compte / 31Panier 8 7Sign Up 3033 9/Kids/Lifestyle/Voyage/Restaurants/Sport4High-Tech5Deal détail11Profil12Crédits15Achats14Payés16Payés détail15A payer17A payer détailSearchRésultats ErreurLogin NewsletterFiltres18Bons18A échanger19UtilisésFiltres20Expirés/ /TopDeal /Infos PartenairesFooter21FAQs22Conditions d’utilisation23Confidentialité25A propos26Contact27Jobs28Presse29Détail (modal window)24Proposer un deal34Taille...
  46. 46. wireframe
  47. 47. wireframe____________________WikipediaA website wireframe is a basic visual guide usedin interface design to suggest the structureof a website.
  48. 48. Distribuer le contenuDéfinir la structureDéterminer les fonctionswireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  49. 49. ConceptualiserDéfinir la place de chaque éléments dans l’interfaceConcevoir la navigationCréer la référence visuelleOublier les problématiques esthétiqueswireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  50. 50. Vos outils:wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  51. 51. Mike Rohde
  52. 52. Définir les comportements.Charte d’interaction.wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  53. 53. wireflow
  54. 54. Créer les liens.Organisation interactive.wireflowworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  55. 55. La MaisonLes pièces d’exceptionLes instruments d’écritureHaute EcritureLa Maison La MaisonLes pièces d’exception Les instruments d’écritureLa MaisonArtistes & professionnelsLoisirsLes Beaux ArtsMaisonLa MaisonArtistes & professionnelsLa MaisonHistoireSavoir-faireShopsContactsLa Maisonafdsdfasdfsdfasdfafadsfjalskdf alkdsfj lkajlakjdf alkdsjf lakdsjgokvokmcklmealk jaeiowvclkml cmaoie aomeoc-WIREFLOWSous-menu pastel / choix des différentspastelsSwitch entre les deux univers:Haute Ecriture & Beaux ArtsPastelsListe roulante de tous les produits dusous-menuCatégories: Pastels, Crayons de couleur,Pinceaux & PeinturesPastels
  56. 56. 35CHOICE MENUWHAT’S NEW SHOWROOM SHOPWHAT’S NEW SHOWROOM SHOPSHOWROOM 2 SHOP 2SHOP 3WHAT’S NEW 2PHOTO VIEWDEPENDINGON NEWS...MY BASKET +MY PLANET FIRSTINFOS ABOUTPROJECTSSLIDESHOW FULL SCREEN
  57. 57. user testing
  58. 58. Permet de mettre à l’épreuve le travail déjàeffectué sur le produit et de faire lesajustements nécessaires.
  59. 59. Nik, 32!Young professional!Loved the clarity ofthe site!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!user testingworkflowRelax In The AirutilisateursFévrier 2013Copyright© 2013 Relax In The Air
  60. 60. user testingworkflowprototypage
  61. 61. user testingworkflowusability testing fonctionnel
  62. 62. Client « Super créa, vraiment on aime beaucoup, parcontre ça respecte pas vraiment notre charte. »Nous « En même temps sans l’avoir vue… Vous pouveznous l’envoyer maintenant qu’on est votre agence. »Client « Non, elle sort pas d’ici. »visual designviedecom.com
  63. 63. Couleurs.Typos.Formes.Images.Esthétique.visual designworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  64. 64. Souci du détail.Exigence.Excellence.contrôle qualitéworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  65. 65. contrôle qualité
  66. 66. stratégiePersonasexp. map / customer journeycontenusitemapwireframewireflowdocumentsrésuméworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air

×