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;
• Adobe InDesign CS4;
• Balsamiq;
• Lucid Spec;
• Mockupscreens;
• Omnigraffle 5;
• Smartdraw.

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.

Voordelen Fireworks CS3

• Zeer uitgebreide opmaak mogelijkheden en flexibiliteit
• Eenvoudig beheer van meerdere pagina’s
• Gebruik van lagen mogelijk
• Zelf je eigen library samen stellen
• Veel exportmogelijkheden
• Pixelnauwkeurig
• Samenwerken met vormgevers die gebruik maken van Fireworks

Nadelen Fireworks CS3

• Het aanpassen van de standaard symbols werkt omslachtig in vergelijking met andere pakketten
• Demo functionaliteit beperkt
• Geen standaard annotatie mogelijkheden
• Omdat je eenvoudig grafisch kunt vormgeven bestaat het risico dat je de wireframes te mooi gaat maken, waardoor deze hun functie kunnen verliezen
• Prijzig (hoewel je Fireworks ook voor grafisch ontwerpen kunt gebruiken)

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.

Voordelen InDesign CS4

• Zeer uitgebreide opmaak mogelijkheden en flexibiliteit
• Gemakkelijk beheer pagina’s
• Automatische documentopties (paginanummering, inhoudsopgave)
• Uitbreidbare objectenlibrary

Nadelen InDesign CS4

• Interface niet intuïtief: pakket heeft een leercurve
• Beperkte demo opties
• Weinig standaardwidgets
• Geen standaard flowchart objecten
• Prijzig (!)
• Risico dat je je wireframes te mooi maakt

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.

Voordelen Balsamiq

• Uitgebreide standaard widgetlibrary
• Elke week gratis nieuwe widget en applicatie updates
• Grote community
• Het opzetten van een wireframe is snel en simpel
• Gemakkelijk hanteerbare applicatie interface

Nadelen Balsamiq

• Er kunnen geen masters worden gebruikt
• Geen goede manier om annotaties te maken
• De exportmogelijkheden zijn beperkt tot PNG’s of een XML file
• Het is niet mogelijk om rechtstreeks vanuit Balsamiq demo’s te genereren
• Je kunt geen eigen widgetlibrary aanmaken

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.

Voordelen Lucid Spec

• Snel en simpel wireframes of een demo opzetten
• Veelgebruikte pagina componenten bestaan als widgets (een aantal daarvan werken ook in de demo)
• Standaard kun je per pagina(element) annotaties opnemen

Nadelen Lucid Spec

• De demo kan niet geëxporteerd worden naar veelgebruikte formaten als HTML, Flash etc. Hiervoor is een speciale Lucid Spec player nodig (gratis)
• De demo beperkt zich tot het navigeren van pagina naar pagina (met uitzondering van functionele widgets)
• De opmaakmogelijkheden van de specificaties in Lucid Spec zijn te beperkt. Verdere opmaak zal in een ander pakket (bijvoorbeeld Word) moeten gebeuren
• Geen mogelijkheid om zelf een widgetlibrary aan te leggen

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 2^e monitor slepen om je canvas groter te maken.

Voordelen Mockupscreens

• Relatief snel en gemakkelijk wireframen
• No-nonsense

Nadelen Mockupscreens

• Eénmansbedrijf
• Libraries zijn niet uitbreidbaar
• Geen grouping van elementen
• Demomogelijkheid is beperkt en oogt niet professioneel

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.

Voordelen Omnigraffle 5

• Actieve community
• Gemakkelijk beheer van meerdere pagina’s, lagen en masters
• Zelf je eigen library samen stellen
• Veel exportmogelijkheden
• Snel een simpele demo maken

Nadelen Omnigraffle 5

• Uitgebreidere prototype interactie vergt Applescript kennis
• Symbolen zijn niet werkend in demo
• Geen standaard annotatie mogelijkheden
• Paginanummering alleen mogelijk met scripts
• Interface kan intuïtiever en gebruiksvriendelijker (mogelijke leercurve)
• Alleen beschikbaar voor de Mac

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.

Voordelen Smartdraw

• Uitgebreide, goede symbols
• Slim flowcharten
• Goede GUI
• Integratie met Microsoft Office

Nadelen Smartdraw

• Het is niet mogelijk meerdere pagina’s in een document op te nemen, omdat je op één groot canvas werkt. Hierdoor worden je projecten al snel onbeheersbaar (!)
• Panels zijn niet te verslepen/aan te passen waardoor je slechts een deel van je scherm kunt gebruiken
• Sorteren van items in library is niet mogelijk
• Geen masters mogelijk
• Geen demo/prototyping mogelijkheden

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.