Bien que ce ne soit pas toujours évident, il serait souhaitable qu’un prototypage soit établi au stade de l’offre, en tout cas en annexe du bon de commande.

Qu’entend-on par prototype ?

Il s’agit d’un document qui schématise (ce qui signifie qu’il n’y a encore aucun graphisme présent à ce stade) la structure des différents types (modèles) de pages (accueil, interne, produit, formulaire …) ainsi que leur enchaînement.

Pour chacune des pages, le prototype décrit :

  1. Les différentes zones
  2. Les éléments de navigation
  3. Les autres composants actifs ou non (diaporama, outil de recherche …)

Par ailleurs, le prototype décrit l’enchaînement des différentes pages.

Comment se présente un prototype ?

Les images ci-dessous sont reprises de l’outil Balsamiq Mockups que nous recommandons plus loin.

Le prototype peut être très simple ou plus sophistiqué, il poursuit toujours le même but : offrir une vision claire de l’organisation du contenu sur la page.


Prototype réalisé avec Balsamiq Mockups

Prototype réalisé avec Balsamiq Mockups



Prototype réalisé avec Balsamiq Mockups

Prototype réalisé avec Balsamiq Mockups


Quelles pages faut-il prototyper ?

On prototype les différentes pages génériques (modèles) :

  • Page d’accueil
  • Page interne
  • Fiche produit ou service
  • Formulaire de contact
  • …

Pourquoi faut-il prototyper ?

  1. Il s’agit du document qui structure toute la réflexion sur le site :
    1. Organisation de l’information
    2. Navigation
    3. Fonctionnalités
    4. Organisation spatiale
    5. Bases ergonomiques
  2. C’est la base des négociations avec le client (prix, délais …)
  3. Le prototype guide et structure le travail des graphistes et des développeurs
  4. C’est un document fondamental  pour organiser la réception du site

Quelles sont les erreurs les plus courantes ?

  1. Ne pas prototyper : cela revient à ignorer que tout projet se base sur un plan. C’est pourtant assez fréquent.
  2. Se lancer tête baissée dans l’intégration graphique : la tentation est grande (et la pression du client est forte) pour « visualiser » le plus vite possible ce que sera le site. C’est effectivement assez flatteur pour le client de voir immédiatement son logo et ses photos apparaître mais c’est mettre les fleurs avant de placer les fenêtres. Les inévitables corrections seront beaucoup plus lourdes, lentes et coûteuses.

Quels sont les outils ?

L’outil de base est le crayon et le papier. C’est assez paradoxal à l’ère de l’informatique mais cela reste l’outil le plus souple pour « croquer » les premières idées.

A partir de là de nombreux outils sont disponibles, des plus simples au plus complexe :

  1. Des outils graphiques comme Microsoft Visio. Bibliothèques de symboles riches, organigramme très souples mais peu adapté en tant qu’outil collaboratif et de prévisualisation.
  2. Protoshare facilite grandement la collaboration entre les équipes, mais aussi avec le client. Il a l’avantage de permettre des enchaînements dynamiques (je clique sur un bouton et le prototype de la page de destination apparaît) et donc de donner une vision très précise des fonctionnalités offertes ainsi que de la navigation. Seule ombre au tableau : il ne semble pas possible de directement récupérer le travail pour lancer le travail de découpe. C’est un produit hébergé, exécutable dans un browser (coût 19$ / mois, essai 30 jours).
  3. Adobe Fireworks CS4 facilite grandement le travail et a fortement évolué :
    1. Génération d’un fichier PDF navigable (et annotable par le client et les collaborateurs)
    2. Production du squelette HTML /CSS prêt à être enrichi par les éléments graphiques
  4. Balsamiq Mockups mérite également le détour (79$, version online en cours de développement) : volontairement basé sur une présentation assez « brute » afin de favoriser le feed back, l’outil permet de collaborer et enchaîner les écrans.
  5. Axure est un outil très puissant et professionnel (coût : 589$) : utilisation de masters, contrôle de version, collaboration …

105 commentaires pour “Prototypage, création des gabarits de pages, wireframes”

  1. Peter Severin, le 19 novembre, 2009 disait:

    Les utilisateurs Eclipse, Aptana, Flex Builder et autres ont un outils de prototypage intégré: http://wireframesketcher.com

  2. 1misconception, le 22 juin, 2022 disait:

    2speeches

  3. 1instance, le 4 juillet, 2022 disait:

    2divorced

  4. dissertation writing tutor, le 5 juillet, 2022 disait:

    tips for writing a dissertation https://professionaldissertationwriting.org/

  5. custom dissertation writing services, le 5 juillet, 2022 disait:

    books thesis dissertation help https://professionaldissertationwriting.com/

  6. online edd no dissertation, le 5 juillet, 2022 disait:

    dissertation writing tutors https://helpwithdissertationwritinglondon.com/

  7. proposal writing company, le 5 juillet, 2022 disait:

    best rated essay writing service https://dissertationwritingcenter.com/

  8. dissertation writing services reviews, le 6 juillet, 2022 disait:

    dissertation writing support https://dissertationhelpexpert.com/

  9. dissertation vs thesis, le 6 juillet, 2022 disait:

    dissertation thesis writing https://accountingdissertationhelp.com/

  10. dissertation abstracts, le 6 juillet, 2022 disait:

    dissertation meaning https://examplesofdissertation.com/

  11. dissertation example, le 6 juillet, 2022 disait:

    help with dissertation proposal https://writing-a-dissertation.net/

  12. uk dissertation writing help quotes, le 6 juillet, 2022 disait:

    18 month doctorate without dissertation https://bestdissertationwritingservice.net/

  13. help with dissertations, le 6 juillet, 2022 disait:

    dissertation https://businessdissertationhelp.com/

  14. phd dissertation help, le 6 juillet, 2022 disait:

    cheap dissertation help in los angeles https://customdissertationwritinghelp.com/

  15. thesis dissertation, le 6 juillet, 2022 disait:

    master dissertation https://writingadissertationproposal.com/

  16. dissertation database, le 7 juillet, 2022 disait:

    dissertation fellowships https://dissertationhelpspecialist.com/

  17. masters dissertation writing services, le 7 juillet, 2022 disait:

    dissertation help galway https://dissertationhelperhub.com/

  18. dissertation writing, le 7 juillet, 2022 disait:

    dissertation help glasgow https://customthesiswritingservices.com/

  19. casino online com, le 25 juillet, 2022 disait:

    newest online casino real money https://download-casino-slots.com/

  20. online casino sverige, le 25 juillet, 2022 disait:

    riversweeps online casino free bonus https://firstonlinecasino.org/

  21. betmgm casino online, le 26 juillet, 2022 disait:

    caesars online casino pa https://onlinecasinofortunes.com/

  22. four winds casino online, le 26 juillet, 2022 disait:

    live online casino pa https://newlasvegascasinos.com/

  23. best online casino payouts, le 26 juillet, 2022 disait:

    iowa online casino https://trust-online-casino.com/

  24. gta online diamond casino heist, le 26 juillet, 2022 disait:

    real casino slots online https://onlinecasinosdirectory.org/

  25. online casino slot games, le 26 juillet, 2022 disait:

    codeshare online double down casino https://9lineslotscasino.com/

  26. twin river casino online, le 26 juillet, 2022 disait:

    vegas casino online $100 no deposit bonus codes 2021 https://free-online-casinos.net/

  27. online games casino, le 26 juillet, 2022 disait:

    online pa casino https://internet-casinos-online.net/

  28. online casino scams, le 26 juillet, 2022 disait:

    sugarhouse online casino https://cybertimeonlinecasino.com/

  29. best online casino usa real money, le 26 juillet, 2022 disait:

    best online casino sign up bonus https://1freeslotscasino.com/

  30. casino royale online free, le 26 juillet, 2022 disait:

    no deposit online casino bonus https://casino-online-roulette.com/

  31. free online casino games for fun, le 27 juillet, 2022 disait:

    vegas casino online no deposit bonus codes https://casino-online-jackpot.com/

  32. trusted casino online, le 27 juillet, 2022 disait:

    was bedeutetwaygern online casino https://onlineplayerscasino.com/

  33. pa online casino, le 27 juillet, 2022 disait:

    real casino games online https://ownonlinecasino.com/

  34. online casino for real money, le 27 juillet, 2022 disait:

    how to beat online casino slot machines https://all-online-casino-games.com/

  35. what is vpn?, le 7 août, 2022 disait:

    best vpn service reddit https://freevpnconnection.com/

  36. vpn free windows, le 7 août, 2022 disait:

    best vpn for binance https://shiva-vpn.com/

  37. free vpn service, le 7 août, 2022 disait:

    best vpn service https://ippowervpn.net/

  38. business vpn, le 8 août, 2022 disait:

    best cheap vpn reddit https://imfreevpn.net/

  39. free vpn for windows 10, le 8 août, 2022 disait:

    best vpn service lifehacker https://superfreevpn.net/

  40. browsec vpn, le 8 août, 2022 disait:

    best vpn for windows 2022 https://free-vpn-proxy.com/

  41. best free vpn for dark web, le 8 août, 2022 disait:

    cisco vpn https://rsvpnorthvalley.com/

  42. gay dating grinder, le 23 août, 2022 disait:

    which senior gay dating app has most members lakeland fl https://gay-singles-dating.com/

  43. gay dating naked, le 23 août, 2022 disait:

    feminen gay dating sites https://gayedating.com/

  44. which gay dating app has most members, le 23 août, 2022 disait:

    dating guys when 18 gay https://datinggayservices.com/

  45. online dating simulator, le 24 août, 2022 disait:

    chat dating https://freephotodating.com/

  46. datiing websites, le 24 août, 2022 disait:

    date online https://adult-singles-online-dating.com/

  47. adult dating site, le 24 août, 2022 disait:

    best app for meetings online free https://adult-classifieds-online-dating.com/

  48. fdating login, le 24 août, 2022 disait:

    online dating app https://online-internet-dating.net/

  49. on line dating services, le 24 août, 2022 disait:

    free dating site chatting https://speedatingwebsites.com/

  50. online websites, le 25 août, 2022 disait:

    top sites dating https://datingpersonalsonline.com/

  51. online dating best sites, le 25 août, 2022 disait:

    fdating site https://wowdatingsites.com/

  52. online dating site, le 25 août, 2022 disait:

    connect singles https://lavaonlinedating.com/

  53. best free online dating websites, le 25 août, 2022 disait:

    searchingforsingles https://freeadultdatingpasses.com/

  54. dating free site, le 25 août, 2022 disait:

    f dating site https://virtual-online-dating-service.com/

  55. free woman paid debit video, le 25 août, 2022 disait:

    positive single https://zonlinedating.com/

  56. free online dating sites, le 25 août, 2022 disait:

    dating site for https://onlinedatingservicesecrets.com/

  57. river belle online casino, le 30 août, 2022 disait:

    online crypto casino https://onlinecasinos4me.com/

  58. casino online usa, le 30 août, 2022 disait:

    gta 5 online casino mystery prize how to claim https://online2casino.com/

  59. goldennugget casino online, le 30 août, 2022 disait:

    same day payout online casino https://casinosonlinex.com/

  60. kik chat gay penis, le 2 septembre, 2022 disait:

    free asain gay chat lines https://newgaychat.com/

  61. free gay webcam chat rooms, le 3 septembre, 2022 disait:

    gay massachusetts chat https://gaychatcams.net/

  62. pnp zoom gay chat rooms, le 3 septembre, 2022 disait:

    free gay video chat room https://gaychatspots.com/

  63. chat gay vegas, le 3 septembre, 2022 disait:

    gay masturbation chat https://gay-live-chat.net/

  64. gay danish english chat rooms, le 3 septembre, 2022 disait:

    gay bdsm chat https://chatcongays.com/

  65. chat aveneu gay, le 4 septembre, 2022 disait:

    free gay bays chat https://gayphillychat.com/

  66. gay teen cam chat, le 4 septembre, 2022 disait:

    indiana gay chat https://gaychatnorules.com/

  67. gay senior chat, le 4 septembre, 2022 disait:

    gay videeo chat https://gaymusclechatrooms.com/

  68. gay sex cam chat mobile android, le 4 septembre, 2022 disait:

    live gay chat https://free-gay-sex-chat.com/

  69. free gay chat room by zip code, le 4 septembre, 2022 disait:

    gay chat roulettye https://gayinteracialchat.com/

  70. gay priest chat, le 20 octobre, 2022 disait:

    pnp zoom gay chat rooms https://gaymanchatrooms.com/

  71. write my economics paper, le 20 octobre, 2022 disait:

    buy papers online for college https://term-paper-help.org/

  72. writing paper services, le 20 octobre, 2022 disait:

    need someone to write my paper for me https://sociologypapershelp.com/

  73. instant paper writer, le 20 octobre, 2022 disait:

    do my papers https://uktermpaperwriters.com/

  74. i don't want to write my paper, le 20 octobre, 2022 disait:

    college papers to buy https://write-my-paper-for-me.org/

  75. write my paper for me, le 21 octobre, 2022 disait:

    buy cheap papers online https://doyourpapersonline.com/

  76. buy college papers, le 21 octobre, 2022 disait:

    papers help https://top100custompapernapkins.com/

  77. can someone write my paper, le 21 octobre, 2022 disait:

    pay someone to write a paper for me https://researchpaperswriting.org/

  78. paper writing company, le 21 octobre, 2022 disait:

    custom written paper https://cheapcustompaper.org/

  79. thesis paper help, le 21 octobre, 2022 disait:

    do my college paper https://writingpaperservice.net/

  80. write my paper co, le 21 octobre, 2022 disait:

    best paper writing service https://buyessaypaperz.com/

  81. where to buy college papers, le 21 octobre, 2022 disait:

    write my paper college https://mypaperwritinghelp.com/

  82. cheap custom written papers, le 21 octobre, 2022 disait:

    can someone write my paper for me https://essaybuypaper.com/

  83. need someone to write my paper for me, le 21 octobre, 2022 disait:

    help with writing paper https://papercranewritingservices.com/

  84. order papers online, le 21 octobre, 2022 disait:

    paper help writing https://premiumpapershelp.com/

  85. buy college paper online, le 21 octobre, 2022 disait:

    help with paper writing https://ypaywallpapers.com/

  86. writing paper services, le 21 octobre, 2022 disait:

    pay to do my paper https://studentpaperhelp.com/

  87. 1abnormally, le 26 janvier, 2023 disait:

    3sanctified

  88. coursework on a resume, le 5 février, 2023 disait:

    degree coursework https://brainycoursework.com/

  89. coursework writing services, le 5 février, 2023 disait:

    custom coursework https://courseworkninja.com/

  90. coursework info, le 5 février, 2023 disait:

    coursework samples https://mycourseworkhelp.net/

  91. coursework only degree, le 5 février, 2023 disait:

    differential equations coursework https://courseworkdownloads.com/

  92. coursework help uk, le 5 février, 2023 disait:

    coursework on a resume https://courseworkinfotest.com/

  93. differential equations coursework, le 5 février, 2023 disait:

    coursework plagiarism checker https://coursework-expert.com/

  94. coursework plagiarism, le 5 février, 2023 disait:

    creative writing english coursework https://teachingcoursework.com/

  95. coursework writing help, le 5 février, 2023 disait:

    buy coursework online https://buycoursework.org/

  96. do my coursework for me, le 6 février, 2023 disait:

    https://courseworkdomau.com/

  97. single senior dating site online, le 8 février, 2023 disait:

    dating services contact australia https://freewebdating.net/

  98. singles site, le 8 février, 2023 disait:

    free and best https://jewish-dating-online.net/

  99. single women online, le 8 février, 2023 disait:

    bbw dating sites https://free-dating-sites-free-personals.com/

  100. totally free dating on facebook, le 8 février, 2023 disait:

    dating best site https://sexanddatingonline.com/

  101. best internet dating sites, le 8 février, 2023 disait:

    matchmaking dating https://onlinedatingsurvey.com/

  102. free dating online dating, le 8 février, 2023 disait:

    dating site online https://onlinedatingsuccessguide.com/

  103. single site web, le 8 février, 2023 disait:

    ourtime login canada https://onlinedatinghunks.com/

  104. sabrina carpenter boyfriend, le 8 février, 2023 disait:

    fb dating https://allaboutdatingsites.com/

  105. which online dating site is best?, le 8 février, 2023 disait:

    40 online dating https://freedatinglive.com/

Laissez un commentaire

You must be connecté pour laisser un commentaire.