Review wireframe pakketten (deel 2)

27 november 2009 om 13:35

Vorige week hebben we in ‘Review wireframe pakketten (deel 1)’ al een aantal wireframe pakketten besproken. Vandaag bespreken we de laatste pakketten uit de test:

Adobe Fireworks CS3

Platform: Windows en Mac
Prijs:
415 euro per licentie

Adobe Fireworks CS3 is een grafische ontwerp tool voor het web. Hoewel voor veel designers het gebruik van Fireworks nog geen standaard is, is dit pakket in opmars (zie ook het eerder verschenen artikel van Carsten Altena ‘Photoshop vs Fireworks’).

Naast grafische ontwerptool beschikt Fireworks ook over een aantal functionaliteiten die het mogelijk maken om te wireframen. Zo is er een uitgebreide standaard library beschikbaar, kunnen er gemakkelijk nieuwe symbols voor de library worden geproduceerd, is het mogelijk om meerdere pagina’s in één document te bewaren en beschikt Fireworks over vele exportmogelijkheden. Daarnaast kan er ook een simpele HTML demo worden gegenereerd en kun je wireframes eventueel hergebruiken bij het grafisch ontwerp.

FireworksCS3

Voordelen Fireworks CS3

Nadelen Fireworks CS3

Conclusie Fireworks CS3

In de basis is dit een goed pakket om wireframes in te maken. Het biedt erg veel opmaakmogelijkheden, het beheren van meerdere pagina’s en elementen is gemakkelijk door de pages en layers functionaliteit en door de vele exportmogelijkheden (HTML, afbeeldingen) is het gemakkelijk te delen met zowel de opdrachtgever als collega’s.

Helaas is het omslachtiger dan andere wireframe pakketten om de standaard widgets (symbols) aan te passen, en omdat dit een veelvoorkomende handeling is gaat dit ten koste van de snelheid van werken. Daarnaast dien je alle annotaties handmatig toe te voegen en is de demomogelijkheid beperkt.

Links

http://www.adobe.com/devnet/fireworks/articles/wireframing.html – Tutorial hoe wireframen met Fireworks
http://www.adobe.com/products/fireworks
– Productpagina Adobe Fireworks

Adobe InDesign CS4

Platform: Windows en Mac
Prijs:
€ 1010 voor 1 licentie

Adobe InDesign is een ontwerptool voor online en offline publicaties. Hoewel dit pakket zich dus niet specifiek richt op wireframes, biedt het wel een aantal functionaliteiten die dit mogelijk maken. In InDesign is het mogelijk om met meerdere pagina’s in één document te kunnen werken. Hierbij kan automatisch paginanummering worden opgenomen, en je kunt een inhoudsopgave genereren.

Met InDesign kun je zelf objecten creëren en opslaan in een library, zodat je deze objecten later kunt hergebruiken. Standaard worden een aantal objectlibraries meegeleverd, zoals een buttonlibrary. De objecten kun je per pagina op een layer plaatsen. Het is wel mogelijk om flowcharts te maken, maar hier zijn helaas geen standaard objecten voor beschikbaar. Een voordeel van InDesign is dat je veelgebruikte pagina’s en objecten gemakkelijk kunt hergebruiken door masters toe te passen.

De interface waarin je de objecten creëert en libraries aanmaakt wijkt af van de meer gangbare pakketten zoals Fireworks en Photoshop, waardoor deze niet zo intuïtief aanvoelt en een leercurve creëert die hoger is dan bij andere wireframe pakketten.

Er zijn verschillende manieren om een document te exporteren: je kunt je document exporteren naar losse afbeeldingen, flash en klikbare PDF. In de klikbare PDF zijn een aantal basisacties mogelijk, zoals het navigeren van pagina naar pagina en het afspelen van geluid.

InDesign

Voordelen InDesign CS4

Nadelen InDesign CS4

Conclusie InDesign CS4

InDesign stelt je in staat om professioneel uitziende wireframe documenten te creëren. Hierbij zijn de pagina-beheermogelijkheden en de automatische documentopties zoals paginanummering en inhoudsopgave erg handig.

Het ontbreken van standaard interface en flowchart objecten is jammer, maar oplosbaar door éénmalig energie te stoppen in het creëren van een standaard library. Helaas is de interface van het pakket niet intuïtief, wat een drempel opwerpt om te werken in het pakket.

De mogelijkheden om klikbare PDF’s en Flash (demo’s) te creëren is handig, maar (te) beperkt. Zeer interactieve websites en applicaties kunnen niet goed met InDesign gesimuleerd worden.

Daarnaast is InDesign geen standaard pakket waarmee grafische ontwerpers de vormgeving voor websites in ontwikkelen. Hierdoor is het bronbestand niet gemakkelijk uitwisselbaar (wat wel een voordeel is van bijvoorbeeld Fireworks).

Links

http://betacampus.com/blogs/group/gui/15 – Library
http://emptyfield.com/blog/2007/03/free-indesign-library-wireframe.html
– Wireframe library
http://www.adobe.com/products/indesign/family
– Productpagina InDesign

Balsamiq

Platform: Mac, Windows en Linux
Prijs:
€ 55 euro desktop single user license (er zijn diverse prijs overeenkomsten mogelijk voor meerdere gebruikers)

Balsamiq is een populaire applicatie waarmee het mogelijk is om zogenaamde ‘sketchy’ wireframes te maken. Balsamiq beschikt over een zeer uitgebreide standaard widgetlibrary en wekelijks worden er nieuwe widgets uitgebracht door zowel het bedrijf als de gebruikerscommunity.

De exportmogelijkheden beperken zich tot afbeeldingen (PNG) en XML, hoewel het wel mogelijk is om middels een extern programma genaamd Napkee een klikbare HTML demo te maken van de Balsamiq wireframes. Balsamiq kan als desktopapplicatie of als plugin voor andere applicaties (zoals Xwiki, Confluence en JIRA) worden gebruikt. Binnenkort komt er ook een webversie van uit.

Balsamiq

Voordelen Balsamiq

Nadelen Balsamiq

Conclusie Balsamiq

Het is een prettig pakket om snel en simpel wireframes mee op te zetten. De veelheid aan bestaande widgets, en de snelheid waarmee nieuwe widgets worden ontwikkeld dragen hier ook zeer aan bij. Er ontbreekt echter een handige manier om annotaties toe te voegen en bij meerdere wireframes worden de tabs onderaan al snel onoverzichtelijk. Het maken van een HTML demo is alleen mogelijk door een programma te kopen dat is ontwikkeld door een externe partij. Hierdoor is Balsamiq in onze ogen ongeschikt als volwaardig wireframepakket, hoewel het wel geschikt kan zijn voor simpele mockups van 1 of 2 schermen. Voor het wireframen van zeer uitgebreide applicaties kent Balsamiq te veel nadelen.

Links

http://www.napkee.com/ – Extern programma om Balsamiq mockups om te zetten naar HTML demo
http://mockupstogo.net/
– Widget downloads voor Balsamiq
http://www.balsamiq.com
– Productpagina Balsamiq

Lucid Spec

Platform: Windows
Prijs:
€ 335 euro per licentie (bulkkorting is mogelijk)

Lucid Spec is een wireframe-, specificatie en demotool die veel gemeen heeft met een aantal concurrerende pakketten. Er is een kleine standaard widgetlibrary beschikbaar waarbij veel van de widgets functioneel werkend zijn gemaakt (bijvoorbeeld een datumprikker). Het is mogelijk om meerdere pagina’s in één bestand te beheren.

Met de widgets is het eenvoudig om snel wireframes te maken en hier een simpele demo van te genereren. Helaas is voor het bekijken van de demo een eigen Lucid Spec player nodig. Daar staat wel tegenover dat Lucid Spec standaard de mogelijkheid bevat om annotaties aan de widgets en pagina’s toe te voegen, die vervolgens weer geëxporteerd kunnen worden als RTF bestand.

Lucid Spec

Voordelen Lucid Spec

Nadelen Lucid Spec

Conclusie Lucid Spec

De gedachte achter Lucid Spec is goed, alleen is de uitvoering op veel punten nog (te) zwak. Zo is er weinig controle over de opmaak van de annotaties in Lucid Spec, waardoor dit in een extern pakket gedaan moet worden. Ook het feit dat de demo alleen met de speciale Lucid Spec player te bekijken is is een nadeel (hoewel de pagina’s met annotaties wel als RTF bestand kunnen worden gedeeld).

Links

http://www.elegancetech.com/LS/LS.aspx – Productpagina Lucid Spec

Mockupscreens

Platform: Windows
Prijs: € 89,95 euro single user license

Mockupscreens is een programma dat speciaal ontwikkeld is om te wireframen. Omdat het geen hybride pakket is kun je na een kleine gewenningsperiode al snel wireframen. De wireframes kun je vervolgens wel omzetten in een clickable demo, maar niet in een prototype. De demo is echter niet meer dan een index.html die de screenshots ontsluit, waardoor de demo-optie beperkt is en er niet erg professioneel uitziet.

Een belangrijk aspect bij de afweging voor dit pakket is dat het een éénmansbedrijf is: de maker reageert snel en goed op vragen, maar dat het een risico is voor de voortzetting en de ontwikkelsnelheid mag ook duidelijk zijn. Daarnaast is de user interface op punten voor verbetering vatbaar: zo is het bijvoorbeeld onduidelijk welke pagina actief is in de boomstructuur, en kun je geen panels naar een 2e monitor slepen om je canvas groter te maken.

Mockupscreens

Voordelen Mockupscreens

Nadelen Mockupscreens

Conclusie Mockupscreens

Om snel een simpele demo te maken waar je doorheen kunt klikken zou Mockupscreens geschikt kunnen zijn. Voor grotere projecten, projecten waarbij prototyping belangrijk is of als je een veeleisende wireframer bent is dit pakket te licht: te simpel, te weinig mogelijkheden, te weinig te customizen.

Links

www.mockupscreens.com – productpagina van Mockupscreens

Omnigraffle 5

Platform: Mac
Prijs:
83 euro voor Omnigraffle 5 en 144 euro voor Omnigraffle 5 Pro

Omnigraffle is een diagram en grafiekpakket voor de Mac dat veel lijkt op Microsoft Visio voor de PC. Omnigraffle maakt gebruik van stencils met symbolen, waardoor het ook te gebruiken is voor het maken van wireframes. De interface van het pakket zal de gebruikers van Visio redelijk bekend voorkomen, maar voor gebruikers die onbekend zijn met Visio zal de leercurve iets hoger liggen dan voor concurrerende pakketten.

Er zijn verschillende wireframestencils online beschikbaar met de meest voorkomende interface symbolen. Een actieve community van Omnigraffle gebruikers zorgt voor telkens nieuwe en vernieuwde wireframe stencils. Omnigraffle biedt ook hulpmiddelen waarmee de gebruiker zelf nieuwe symbolen kan maken. Er kunnen meerdere wireframepagina’s per document worden beheerd, en je kunt layers en masters gebruiken.

De wireframes kunnen geëxporteerd worden naar verschillende formaten waaronder afbeeldingen, PDF en zelfs als Visio of Photoshopbestand. Het is mogelijk om simpele demo-interacties (navigatie van pagina naar pagina) aan te geven om klikbare PDF’s te maken. Ook ingewikkeldere interacties kunnen worden aangeven, maar hiervoor is wel kennis van Applescript nodig.

Omnigraffle

Voordelen Omnigraffle 5

Nadelen Omnigraffle 5

Conclusie Omnigraffle 5

Hoewel het er in eerste instantie niet voor bedoeld is, is Omnigraffle een geschikt pakket om wireframes in te maken. De vele wireframestencils zijn handig in het gebruik, en Omnigraffle beschikt over verschillende hulpmiddelen om waar nodig zelf symbolen toe te voegen.

De interface kan nog een stuk intuïtiever en gebruiksvriendelijker: dit vormt een (kleine) belemmering in het gebruik. Wanneer je Visio hebt gebruikt zul je dit pakket sneller oppikken.

Het is een nadeel dat er voor sommige uitgebreidere handelingen, zoals paginanummering en geavanceerdere interacties, scripts uitgevoerd moeten worden. Gelukkig is er een actieve community die in deze scripts voorziet.

Voor de Mac gebruikers is OmniGraffle één van de betere alternatieven.

Links

http://konigi.com/tools/omnigraffle-wireframe-stencils – Veelgebruikte stencils van Konigi
http://graffletopia.com/stencils/351
– Stencils voor Omnigraffle
http://developer.yahoo.com/ypatterns/about/stencils
– Yahoo stencils
http://www.omnigroup.com/applications/OmniGraffle
– Productpagina OmniGraffle

Smartdraw

Platform: Windows
Prijs: € 133 voor één licentie

Smartdraw is een veelzijdig pakket: van flowcharts, grafieken, mindmaps tot netwerkschema’s en meer. Het is niet puur bedoeld als wireframe pakket, maar dit behoort wel tot de mogelijkheden. Smartdraw heeft een slimme interface, bevat standaard veel symbols en heeft integratie met Microsoft Office.

Bij het evalueren van Smartdraw werd al snel een grote beperking zichtbaar: Smartdraw hanteert één groot canvas waar je op werkt, waardoor je document niet meerdere pagina’s kan bevatten. Het is weliswaar mogelijk om het canvas in meerdere pagina’s te exporteren naar PDF, maar om serieus te wireframen is dit een te groot struikelpunt.

Smartdraw

Voordelen Smartdraw

Nadelen Smartdraw

Conclusie Smartdraw

Smartdraw is een uitgebreid pakket, maar niet geschikt voor wireframen omdat je al snel het overzicht kwijt raakt door de beperkingen van het single-page concept. Daarnaast kun je geen masters gebruiken en ontbreekt het aan demo- en prototyping mogelijkheden.

Links

www.smartdraw.com – Productpagina Smartdraw

Eindconclusie

Geen winnaar

Omdat de eisen en wensen aan wireframes zo uiteenlopen, is er geen overall winnaar aan te wijzen: het ultieme wireframe pakket bestaat (nog) niet.

Uiteraard hangt ook veel af van het doel dat je met je wireframes hebt. Wij hebben een aantal pakketten besproken zodat je een beeld hebt welk pakket geschikt kán zijn voor jouw doeleinden, maar er is maar één manier om daar echt achter te komen: test het. Hoe veeleisender je bent, hoe sneller je tegen beperkingen van een pakket aan zult lopen.

Onze keus

Wij hebben uiteindelijk Axure aangeschaft, omdat deze het beste aan ónze wensen voldoet. Wij zochten een pakket met ruime prototypingmogelijkheden, waarmee je eenvoudig kunt wireframen, met meerdere designers aan één project kunt werken en dat geschikt is voor grote, complexe projecten.

Hebben we in jouw ogen een pakket gemist dat absoluut in deze test had thuisgehoord? Reageer hieronder en laat het ons weten!

PS: ben je nog lang niet uitgelezen over wireframes? Lees dan ‘35 Excellent wireframing resources‘ van Smashingmagazine.

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • Pingback: Tweets die vermelden Heeftstijl.nl - Nederlands webdesign magazine » Review wireframe pakketten (deel 2) -- Topsy.com()

  • Pingback: Heeftstijl.nl - Nederlands webdesign magazine » Review wireframe pakketten (deel 1)()

  • http://intensedebate.com/people/milanvanbruggen Milan

    Top artikel! Ik heb zelf ook met Axure gewerkt om een clickable demo in elkaar te zetten, wat uitstekend beviel. Er missen inderdaad nog wat zaken die in een pakket als Fireworks niet weg te denken zijn (padding, rotatie e.d.), maar toch lijkt het mij de officieuze winnaar :)

  • dingenontwerper

    Dusss .. werk aan de winkel .. wie o wie realiseert het eerste pakket waarmee je goed kunt annoteren, demo-en EN waarbij je niet weer een los pakket hebt waar losse bestandjes uit komen maar wat een completere workflow biedt …

    • http://www.misterjames.nl Marijn de Jong

      Het is wachten op de grotere bedrijven. Microsoft is al bezig en Adobe komt binnenkort ook met een product (Catalyst geloof ik) uit. Ik ben alleen bang dat de producten van beide bedrijven wederom niet volledig zijn toegespitst op wireframes en dat daarom de zoektocht naar het ultieme pakket zal blijven voortduren.
      My recent post Interaction pattern 1: Faceted navigation

  • http://www.hotgloo.com WD Becvar

    We have just released the free beta version of HotGloo *The Online Wireframe Application* come and say hi.

    With HotGloo you will:
    *smoothen the planning process
    *get a clearer picture of site informations
    *provide a precise framework for designers & programmers
    *build up a more intense project relationship with clients
    *improve the communication process

    http://www.hotgloo.com

    Looking forward hearing from you!

    WD Becvar
    @HotGloo

  • http://www.ivobosma.nl Ivo Bosma

    @Dingenontwerper mooi samengevat :)

    @VVD Becvar will definitely have a look at HotGloo

  • Ruud

    Goede review, ook ik roep Axure uit tot officieuze winnaar voor grotere projecten. Ook al zijn ze er nog niet, zoals ik in deel 1 al zei.
    Balsamiq lijkt me ideaal voor kleinere projecten.

    • http://www.mrjames.nl Marijn de Jong

      Er zijn mensen die zweren bij Balsamaq omdat zij ook vooral het liefst werken met wireframes die geschetst lijken. Dergelijke meningen onderstrepen zij door te zeggen dat de aandacht van gebruikers het meest naar de functionaliteit en het minst naar de vormgeving wordt getrokken door het gebruik van schetsachtige wireframes.

      Mocht je Balsamiq een keer bij klanten gaan testen, dan ben ik zeer benieuwd naar je ervaring met zowel het pakket als de klantreacties op de vorm van de wireframes.
      My recent post Interaction pattern 1: Faceted navigation

  • Maurice

    Voor grote projecten is Prototype Composer erg mooi (http://www.serena.com) snel bouwen en in 1 klik een functioneel ontwerp er uit poepen redelijk duidelijk in gebruik maar wel even mee spelen om de logica (die voor een techneut wel logisch is) door te krijgen.

    leuk artikel bij de weg !!!

  • Jeroen van der Ent

    voor de eenvoudigere webprojecten kun je ook eens kijken naar Iplotz, http://iplotz.com, momenteel probeer ik die zelf uit en werkt wel soepel en snel.

  • http://www.ivobosma.nl Arjen Dijksma

    Hallo Maurice,

    dank voor je compliment. Ik ga Prototype Composer eens beter bekijken, ik ken het programma nog niet.

  • berry

    kom op jongens, nadeel Omnigraffle 5 alleen voor de mac… dit zet je toch ook niet neer bij programma's die alleen voor win pc's werken…

    • http://intensedebate.com/people/milanvanbruggen Milan

      Berry, als je iets beter zou kijken zie je dat 3 programma's werken op windows en mac, 3 programma's windows-only zijn en één programma mac-only is. Dus, je opmerking 'programma's die alleen voor win pc's werken' klopt niet.

      Ik werk zelf op een Mac, en kan makkelijk met windows applicaties werken (VMWare), maar volgens mij is het lastiger mac applicaties onder windows te draaien. Wel degelijk een nadeel dus.

  • http://www.dutchbridge.nl/webdesign-diensten.php matthijs

    top artikel, ik zelf gebruik iPlotz

  • Knoops

    Flairbuilder ziet er ook veel belovend uit

    Ik denk dat er twee doelgroepen zijn die op hun honger blijven zitten.
    Functioneel analist: en website designer. Ik val onder de eerste categorie
    Ik wil vooral iets dat snel werkt en clickbaar is en niet te veel kost.
    Het is bedroevend hoe dat de support is van deze tools.
    Flairbuilder heeft de meest uitgebreide set van gui elements maar geen generatie van HTML dus het is wel weggegooide moeite. Maar als flairbuilder nog een beetje extra werkt aan zijn gui elementen lijkt het mij al heel bruikbaar.

    Iemand nog tips voor andere visio stencils?

    Ik heb ook ooit gewerkt met een framework van mijn vorige werkgever. Zij boden een tag library aan om zo in eclipse zeer snel pagina die werken te genereren. Je kon er veel mee maar werkte te traag.

    Joachim

  • jazz

    mockingbird ontbreekt nog

    • http://www.ivobosma.nl Ivo Bosma

      Uit de beschikbare pakketten hebben we een selectie moeten maken, Mockingbird is toen afgevallen om te reviewen. Bedankt voor je reactie iig