Tirsdag, d. 21. September, 2010 - 26 kommentarer

Wireframing: Hvad er det? hvorfor skal du bruge tid på det?

I mit daglige arbejde med webdesign og webudvikling, har jeg gjort mig rigtig mange tanker omkring vigtigheden i wireframing.

Alligevel med vigtigheden heraf, så bliver det ikke altid praktiseret korrekt eller overhovedet praktiseret. Er det uvidenhed? Er det måske slet ikke nødvendigt eller er der helt andre kræfter på spil?

Jeg forsøger at give mine bud på, hvorfor vi ikke MÅ overse dette værktøj i vores arbejde med webdesign, websites og webudvikling.

Indholdsfortegnelse

  1. Hvad er wireframing?
  2. Hvorfor skal du bruge tid på wireframing?
  3. Gode råd til dit arbejde med wireframing
  4. Gode eksempler på wireframing
  5. Gode værktøjer til wireframing
  6. Andre omkring wireframing
  7. Konklusion
  8. Afgiv en kommentar

1. Hvad er wireframing?

Selvom, at jeg ikke er en helt uerfaren webdesigner, så er wireframing stadigvæk ret nyt for mig, og derfor vil jeg lade andre om en god beskrivelse heraf.

Wikipedia om wireframing

A website wireframe (also “web wire frame”, “web wireframe”, “web wireframing”) is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.

Kilde fra Wiki

Alligevel synes jeg ofte, at man kan blive i tvivl, når vi snakker stregtegninger, prototypes, mockups og alle de andre benævnelser.

Da jeg er kongen af blogindlægget her, tillader jeg mig at komme med mit helt eget – måske helt hen i vejret – postulat.

Mange termer for det samme

For mig er wireframes, stregtegninger eller mockups omtrent det samme bare med forskellige termer. Nogle er lavet i hånden mens andre er rentegnet og forfinet via software. De tjener alle et formål – det at hjælpe webdesigneren, udvikleren, virksomheden og kunden – i at få det bedst mulige ud af projektet. Derimod er prototypes ikke just helt det samme i min verden, men derimod en helt anden snak.

Kilde: Michael Østergaard

2. Hvorfor skal du bruge tid på wireframing?

Du er jo sikkert en ninja i Photoshop, meeen?

3. Gode råd til dit arbejde med wireframing

Jeg har tænkt over en række gode råd, der kan hjælpe dig i dit arbejde med wireframing. Byd endelig ind med flere :)

4. Gode eksempler på wireframing

Jeg har samlet et par gode eksempler, du bør kigge nærmere på.

5. Gode værktøjer til wireframing

Jeg har samlet en række gode ressourcer, du kan bruge i din dagligdag med webdesign og -udvikling.

6. Andre omkring wireframing

Sidst men ikke mindst, så har jeg også samlet et par gode blogindlæg, relevant for emnet. Har du interesse i wireframing, så brug lidt tid på at læse dem.

7. Konklusion

Wireframing er ikke guds gave til webdesignere, webudviklere, virksomheden eller kunden, men det er et godt værktøj, der i sidste ende kan bevirke en absolut mere holdbar webløsning.

Som jeg ser det, skal du altid overveje, hvornår, det kan betale sig at bruge tid wireframing. Men men men (ja det evige men), du kan altid bruge lidt tid på at lave et par hurtigere wireframes i hånden, hvis projektet ikke har en så håndgribelig størrelse.

Det er ikke nogen dum idé at have en simpel afstemning med kunden omkring, hvad deres kommende website skal indeholde eller hvordan brugerne skal komme rundt og meget andet.

Kort sagt, wireframing er et fedt værktøj – uanset projektets størrelse. Størrelsen af projektet afgører blot, omfanget af dine/jeres wireframes.

Hvad siger du som læser? Har du mange erfaringer med wireframing? Eller har du ligesom jeg tit tænkt på dem, men aldrig rigtigt fået muligheden for at afprøve dem i vid udstrækning? Måske hele begrebet er helt nyt for dig, men ikke desto mindre betyder din mening også noget – del den med os!

Skriv en kommentar

Relaterede blogindlæg

  1. CSS Sprites – Hvad er det? Og hvordan benytter jeg dem?
  2. Mit bud på, hvad vil det sige at være webdesigner
  1. Kasper Bergholt - På Twitter
    Tirsdag, d. 21. September, 2010 - kl. 21:33

    Interessante links, du har samlet omkring wireframing.

    Jeg er ikke selv webdesigner, men er interesseret i processerne bag godt design.

    Hvilket program bruger du til at lave wireframes i/med?
    .-= Seneste blogindlæg: Ugens top fire fra Bergholts opskrifter- Andebryst- rødvinssauce- osso buco og boeuf bourguignon =-.

  2. Michael Østergaard - På Twitter
    Torsdag, d. 23. September, 2010 - kl. 07:19

    Tak skal du have Kasper.

    Helt enig, linkene er nogle rigtig gode ressourcer, når/hvis man skal arbejde med wireframes.

    Desværre har jeg ikke arbejdet med wireframes ud over simple stregtegninger, men håber på at få prøvet flere kræfter med hele processen med tiden.

  3. Steffen Aunsbjerg - På Twitter
    Torsdag, d. 23. September, 2010 - kl. 16:05

    Jeg arbejder som informationsarkitekt og UX-designer og mere end 50% af min tid går med wireframing.

    Der forskellige typer af wireframes som du selv er inde. Men en hi-fidelity-wireframe (prototype) kommer mest til sin ret, når der er tale om en høj grad af kompleksitet. Ofte i forbindelse med eBusiness-løsninger, web 2.0- løsninger eller lignende. Altså webløsninger hvor der skal beskrives en masse templates og states. Den slags er umuligt at skrive sig ud af i lange word-dokumenter.
    Det god ved wireframen er at den stadig lever undervejs i projektet og fungerer enormt godt som referenceramme imellem kunde og øvrige projektdeltagere, når der skal diksuteres indhold fremfor farver og runde hjørner. Desuden repræsenterer den en uundværlig dokumentation i form af et aftalegrundlag med kunden.

    Hvis jeg er til en indledende workshop med kunden, bruger jeg sommetider Balsamiq til at sketche op og sikre mig at vi forstår hinanden… men med det samme jeg begynder at blive konkret springer jeg over i Axure. Og her er det muligt at skabe klikbarhed, illustrere navigation og lignende.
    Jeg skriver naturligvis en masse kommentarer undervejs til henholdvis designer og udvikler, men sikrer mig at disse bliver forankret inde i wireframen.

    Standard-websites kan så meget mere idag end for bare 2-3 år siden. Derfor er der opstået en behov for for en spidskompetence på lige netop dette område. Og ligesom med grafiske-designere har min slags også vidt forskellig baggrund. Nogle er filosoffer, mens andre er grafikere eller landskabsarkitekter.
    Jeg kan fx. ikke kode, men har enormt stor fokus på det forretningsmæssige koncept, brugervenligheden og processen generelt.

    Jeg oplever tit at de web-designere jeg samarbejder med, har armene over kors på de indledende møder, indtil vi lærer hinanden at kende. Fortvivl ikke. En informationsarkitekt kan ikke erstatte en web-designer!. Og hvis han forsøger, vil det være uambitiøst – for tit og ofte modstrider lækkert design med god informationsarkitektur og vice-versa.
    Jeg foretrækker ikke at arbejde sammen med designere der kun er pixel-pushere. En god web-designer formår derimod også at udfordre min wireframe via egen forståelse for brand, brugervenlighed og teknik. For imellem overgangen fra wireframe til grafisk design udspringer altid nye ideer og muligheder. Derfor involverer jeg altid designeren på et så tidligt stadie som muligt – så han/hun også kan få mulighed for at sætte sit kreative præg på løsningen.
    I dag er web ikke længere en standalone ting eller en flad hjemmeside for virksomhederne. Ofte er det noget der skal kunne spille på tværs f andre platforme og medier. Derfor er det vigtigt at projektdeltagerne kan tænke tilstrækkeligt holistisk, men samtidigt være specialister på eet område. Og derudover være gode til at gøre opmærksom herpå.

    Jeg og en tidligere kollega vil i løbet af kort tid begynde at undervise specifikt i Axure.
    Kontakt mig eventuelt via http://www.saunsbjerg.dk hvis det kunne være interessant for din virksomhed.

    ps. Jeg bliver nødt til at rose dine blogindlæg. Du har tydeligvis en god forståelse for online kommunikation i sin bredeste forstand.

  4. Michael Østergaard - På Twitter
    Torsdag, d. 23. September, 2010 - kl. 17:32

    Steffen, sikke en grundig forklaring. Jeg tror du har opnået rekorden i den længste kommentar – absolut ikke negativt ment :)

    Det er meget spændende læse om, hvordan du arbejder med wireframes. Kan fornemme, at jeg har meget at lære – endnu, hvilket blot er skønt.

    Bortset fra det, så fornemmer jeg, at vi har nogenlunde samme billede af, hvad en webdesigner bør være for en type, hvilket jeg faktisk også har skrevet om :)

    Sidste men ikke mindst, mange tak for rosen. Det varmer og motiverer super godt. :D

  5. Daniel
    Lørdag, d. 25. September, 2010 - kl. 19:18

    Jeg har kun hørt om wireframe modeller, og set et par enkelte eksempler, men ville helt klart ønske det var noget der blev praktisere hvor jeg arbejder.
    Som programmør synes jeg ofte der er for mange spørgsmåltegn, når man bare får stukket et design i hånden. Som du skrev i indlægget, er jeg overbevist om det også vil hjælpe til, med at lave en kravspecifikation, både for virksomhed og kunde.

  6. Michael Østergaard - På Twitter
    Lørdag, d. 25. September, 2010 - kl. 22:53

    Mange tak før din kommentar, Daniel :)

    Jeg tror ikke nødvendigvis, at wireframes alene kan hjælpe på spørgsmålene. Her vil jeg mene, kravspecifikationen kommer tilsyn ret, som du nævner.

    Ellers bør programmøren også være med helt.fra start, efter min mening.

  7. Daniel Due - På Twitter
    Tirsdag, d. 26. oktober, 2010 - kl. 22:05

    Jeg kan godt huske, du nævnte du ville skrive om wireframes. Og jeg må da tilstå det er en god artikel du har skrevet. Du forstå at lave uddybende artikler det fedt at se :)

    Jeg har også kun brugt wireframes, til 1 opgave. Vi skulle redesigne en søgeportal til en bestemt målgruppe. Der skulle tænkes reklamer ind i de forskellige resultatsider. Forskellige visninger skulle være mulige, og kunden var meget tændt på ord som usability. Så vi lavede wireframes over alle funktionaliteter, ca 40 sider, samt design udkast til forsiden. Kundne sprang senere fra, fordi de ikke ville betale for de timer der var brugt på wireframes og design.

    Ved ik hvad vi lærte af den omgang. Måske at wireframes, høre til i budgetter der tillader det.

    Men godt indlæg :)

  8. Michael Østergaard - På Twitter
    Onsdag, d. 27. oktober, 2010 - kl. 07:27

    Mange tak for de rosende ord, Daniel. Det er skønt at høre, når der bliver sat pris på ens arbejde :)

    Omkring kunderne, så er der bare mange, der ikke vil betale. Jeg ved ikke helt, hvorfor de tror, det koster “gratis”. En blankpoleret Mercedes får du jo heller ikke for slik.

    Ellers handler det måske om at gøre det klart for kunderne, hvad prisen indeholde, hvad budgettet er. Få dem til at forstå, hvorfor der skal bruges tid/penge på det. Det er i hvertfald ikke nemt at tage slåskampen bagefter.

    Igen, mange tak for din kommentar, yderst værdsat :)

  9. Michael Østergaard - På Twitter
    Lørdag, d. 11. december, 2010 - kl. 12:26

    Jeg har netop opdateret indlægget med et ekstra link fra Zurb:
    http://www.zurb.com/article/511/building-on-opportunity–sketches

  10. Michael Østergaard - På Twitter
    Lørdag, d. 25. december, 2010 - kl. 10:57

    you should wireframe more than you design, you should design more than you code. design twice, code once.

    http://forrst.com/posts/design_process-0t9

  11. Michael Østergaard - På Twitter
    Onsdag, d. 29. december, 2010 - kl. 21:55

    Mere interessant læsning relevant for emnet:

    http://www.uxforthemasses.com/rapid-prototyping/
    http://www.userfocus.co.uk/articles/paperprototyping.html

  12. Michael Østergaard - På Twitter
    Onsdag, d. 12. januar, 2011 - kl. 20:25

    To Sketch or Not to Sketch:
    http://designinformer.com/sketch-question/
    .-= Seneste blogindlæg: Det er det hele værd =-.

  13. Michael Østergaard - På Twitter
    Tirsdag, d. 25. januar, 2011 - kl. 18:44

    A List Apart:
    http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool/

    Dem går man jo aldrig galt i byen med ;)
    .-= Seneste blogindlæg: Køb jakker og armbånd fra Jack and Jones- Mishumo eller Police =-.

  14. Michael Østergaard - På Twitter
    Lørdag, d. 29. januar, 2011 - kl. 18:42

    Undervurdér ikke en krydsedulle:

    http://www.alistapart.com/articles/the-miseducation-of-the-doodle/

  15. Michael Østergaard - På Twitter
    Søndag, d. 6. februar, 2011 - kl. 00:22

    Et interessant blogindlæg, der til dels taler imod brugen af wireframes:

    http://www.attackofdesign.com/why-wireframes-can-hurt-your-project

  16. Michael Østergaard - På Twitter
    Mandag, d. 7. februar, 2011 - kl. 21:05

    Hos Six Revisions kan du læse et ret så dybdegående blogindlæg omkring wireframing – ikke mindst alle fordelene:

    http://sixrevisions.com/user-interface/wireframing-benefits/

  17. Michael Østergaard - På Twitter
    Tirsdag, d. 8. februar, 2011 - kl. 19:09

    Jeg har opdateret blogindlægget med et ekstra værktøj:

    http://www.mockupbuilder.com/

  18. Michael Østergaard - På Twitter
    Tirsdag, d. 15. februar, 2011 - kl. 19:18

    Alternativ måde at lave wireframes på, men faktisk ret interessant, da måden bringer fokus væk fra layout.

    http://www.attackofdesign.com/a-simpler-and-faster-alternative-to-wireframes

  19. Michael Østergaard - På Twitter
    Mandag, d. 21. februar, 2011 - kl. 21:28

    Voldsom stor ressource, både mobilt og web:
    http://www.2expertsdesign.com/resources/40-free-web-and-mobile-ui-wireframe-kits-and-resources

  20. Michael Østergaard - På Twitter
    Fredag, d. 28. oktober, 2011 - kl. 09:12

    Video tutorial på wireframing med Axure.

    http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-website-in-progressive-steps-wireframing/

  21. Gitte Merrild
    Mandag, d. 2. april, 2012 - kl. 15:07

    Tak for jeres mange input. Har I overhovedet nogle links, der er på dansk?

  22. Michael Østergaard - På Twitter
    Mandag, d. 2. april, 2012 - kl. 15:35

    Hej Gitte,

    Jeg er glad for, de mange links kan bruges. Jeg har dog ikke nogle på dansk. De bedste er altid på engelsk, er min erfaring.