itinéraire d'une maquette web

  • View
    213

  • Download
    0

Embed Size (px)

Text of itinéraire d'une maquette web

  • Du zoning au mockupen passant par le moodboard, le wireframe, les style tiles et le prototype

    itinraire dune maquette webpar Romy Duhem-Verdire Kiwi Party 2013

  • Romy Duhem-Verdire

    http://romy.tetue.net

    Consultante web UXergonomie et accessibilit

    http://romy.tetue.nethttp://romy.tetue.net

  • ?mockupzoning

    wireframe

    maquette

    proto

    moodboardcroquis

    storyboard

    style tiles

    mindmap

    arbo

    sketch

    fil de fer

    gabarit

    tendances

    blue print

    bauche

    template

    charte

    moonboots

    design

    habillagegraphisme

    sitemap

    draft

    rendu

    intgration

    squelettes

    squelettes

    intgration

    templating

    roughesquisse ergo

    kiwi

  • sketchcroquis

    Outils:Papier et crayons

    Sneakpeekit, InterfaceSketch

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    Source: Vimeosketches bySockyung Sox Hong

    Jeter ses ides sur papier

    http://sneakpeekit.com/http://sneakpeekit.com/http://interfacesketch.tumblr.com/http://interfacesketch.tumblr.com/http://www.flickr.com/photos/soxiam/2182204230/http://www.flickr.com/photos/soxiam/2182204230/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Conception ergonomique

  • zoning

    Outils:Papier et crayons

    ou PowePoint, LibreOffice, etc.en ligne : Wireframe.cc, Cacoo

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    Source: http://www.protoshare.com

    Identifier les principales zones+ lister les contenus

    ne pas en oublieret hirarchiser

    http://www.libreoffice.org/http://www.libreoffice.org/https://wireframe.cc/https://wireframe.cc/https://cacoo.comhttps://cacoo.comhttp://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/http://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/

  • Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    Outils:Papier et crayons

    ou Balsamiq, Pencilen ligne : Moqups, Mockflow, Mockingbird

    wireframemaquette filaire

    Il complte le zoning,en rentrant dans le dtail

    de chaque bloc

    http://www.balsamiq.com/http://www.balsamiq.com/http://pencil.evolus.vnhttp://pencil.evolus.vnhttps://moqups.comhttps://moqups.comhttp://mockflow.com/http://mockflow.com/https://gomockingbird.com/https://gomockingbird.com/

  • prototype

    Outils:Axure

    HTML/CSS/JSBoostrap, Foundation, Dummy

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    Pages fonctionnelles,cliquables et interactives,

    qui peuvent servir des tests dutilisabilit

    Source : Wireframes & Prototypes: Is There Really aDifference?

    http://www.axure.com/http://www.axure.com/http://foundation.zurb.com]http://foundation.zurb.com]http://t13h37.fr/dummyhttp://t13h37.fr/dummyhttp://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/http://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    zoning wireframe prototype1 2 3maquette filaire

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Habillage graphique

  • moodboardplanche dinspiration

    Outils:Panneau daffichage

    ou Keynote, PowerPoint, etc.

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    pingler les ides qui viennent

  • Outils:StyleTil.es

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    style tileplanche de style

    Source : Style Tiles and How TheyWork, A List Apart, 2012

    Plusieurs planchespour choisir le style,

    amorcer la charte graphique

    http://styletil.es/http://styletil.es/http://www.alistapart.com/articles/style-tiles-and-how-they-work/http://www.alistapart.com/articles/style-tiles-and-how-they-work/

  • mockupmaquette graphique

    Du zoning au mockup, itinraire dune maquettepar Romy Duhem-Verdire - Kiwi Party 2013

    Outils:Photoshop, The Gimp,

    Photoshop Etiquette Manifesto

    Prvisualisation haute fidlitdu rendu graphique

    http://www.photoshopetiquette.com/http://www.photoshopetiquette.com/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    mockupstyle tilesmoodboard

    1 2 3planches de style maquette graphiqueplanche dinspiration

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Workflow idal

  • +1 2 3+ +

    Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    zoning wireframe prototypemaquette filaire

    mockupstyle tilesmoodboardplanches de style maquette graphiqueplanche dinspiration

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    zoning wireframe prototype

    mockupstyle tilesmoodboard

    + +

    maquette filaire

    planches de style maquette graphiqueplanche dinspiration

    1 amorcer letravail(en interne)

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    zoning wireframe prototype

    mockupstyle tilesmoodboard

    + +

    maquette filaire

    planches de style maquette graphiqueplanche dinspiration

    2 validationavec le commanditaire

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    zoning wireframe prototype

    mockupstyle tilesmoodboard

    + +

    maquette filaire

    planches de style maquette graphiqueplanche dinspiration

    +3testeravant production

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Exemples

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    mockupzoning

    Source : L'extranet assurs Thlem assurances :le making-of du point de vue d'une petiteagence web, LunaWeb - 2010

    http://www.lunaweb.fr/labs/cas-client-thelem-extranet/http://www.lunaweb.fr/labs/cas-client-thelem-extranet/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Source : Web site design approach using discovery, user segmentation, moodboards, wireframes, mockups, and CSS production, Dean Burney

    zoning + moodboard

    mockup

    http://www.deanburney.com/approach/http://www.deanburney.com/approach/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Source : Mattrunks change de peau, nouvelle version - 2012

    mockupswireframes

    http://www.mattrunks.com/fr/blog/journal/nouvelle-version-2012http://www.mattrunks.com/fr/blog/journal/nouvelle-version-2012

  • Source : Les Style Tiles, un nouvel outil pour le webdesigner ? Marie Alhomme, Le train de 13h37 - 2012

    style tiles mockupsresponsive

    Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    http://letrainde13h37.fr/4/style-tiles-nouvel-outil-pour-webdesigner/http://letrainde13h37.fr/4/style-tiles-nouvel-outil-pour-webdesigner/

  • Source : Make Your Mockup inMarkup, byMeagan Fisher, 24 ways - 2009

    prototype

    habillage graphiquedans le navigateur

    Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    http://24ways.org/2009/make-your-mockup-in-markup/http://24ways.org/2009/make-your-mockup-in-markup/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Source : Wireframes & Prototypes: Is There Really aDifference? ProtoShare - 2010

    + mockups ?

    wireframe

    prototypehaute fidlit

    http://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/http://www.protoshare.com/2010/12/01/Wireframes-and-prototypes/

  • Du zoning au mockup, itinraire dune maquette par Romy Duhem-Verdire Kiwi Party 2013

    Des questions ?

    http://romy.tetue.net/990

    @tetue

    https://twitter.com/tetuehttps://twitter.com/tetuehttp://romy.tetue.net/990http://romy.tetue.net/990