“Dit artikel is het eerste in een nieuwe rubriek genaamd ‘3 op een rij’. In deze rubriek bespreken we steeds kort drie tools, producten, oplossingen of andere webdesigngerelateerde zaken. Heb je een onderwerp dat je graag besproken wilt hebben, laat het ons dan weten via mail, twitter of in de comments!”

Het opzetten van de juiste structuur en het op de goede plek plaatsen van interface-elementen en functies is een belangrijk onderdeel van het designproces. Misschien wel het allerbelangrijkst. Om in een vroeg stadium al de opzet van de site in orde te krijgen, kun je, of liever, moet je gebruikmaken van wireframes. Een wireframe laat de kale structuur van de website zien, waarin verschillende elementen gebruikt worden om content- en designelementen weer te geven. Op deze manier kan snel en goed gecommuniceerd worden wat de bedoeling is. Dat kan richting de designers, maar ook naar de klant. Daarnaast vormen ze ook een goed startpunt voor eerste usabilitytesten en de basis van eerste HTML-prototypes.

Als je met wireframes (dus zonder volledig uitgewerkt ontwerp) richting je klant gaat, heb je eerder kans dat de klant commentaar gaat geven op de basis en basisfunctionaliteit van de website. Het is een feit dat mensen directer commentaar geven op iets wat al af lijkt. ‘Deze kleur vind ik niks,’ hoor je dan vaak, terwijl je eigenlijk wilde weten wat ze van de plaatsing van een knop vonden. Aan het andere uiterste zijn mensen ook vaak wat terughoudend om commentaar te geven op iets wat zij een volledig design vinden. Ze zien dat je er veel werk in gestoken hebt en willen je niet op je teentjes trappen door te zeggen dat ze het niets vinden.

Wireframes zijn snel en goedkoop te maken. Werk in eerste instantie met pen en papier, want hiermee teken je het makkelijkst je eerste ideeën uit. Vervolgens werk je de beste schetsen uit in een wireframetool. Dat kunnen grote applicaties als Microsoft Visio of Axure zijn, maar ook met Photoshop kun je goed wireframes opzetten. In deze tijd van webapplicaties is het echter ook mogelijk om gebruik te maken van applicaties die specifiek voor dit doel ontworpen zijn. In dit artikel nemen we drie van deze nieuwe online hulpmiddelen onder de loep: Creately, Mockingbird en HotGloo.

Creately

Voor alle applicaties geldt dat ze volledig online werken en daardoor overal vandaan bereikbaar zijn. Creately is de enige uit het stel dat al de kostenstructuur bekend heeft gemaakt, de andere twee verkeren nog in vrije bèta. Creately is gratis te gebruiken in de Public-variant, maar dan moet je genoegen nemen met een watermerk en publiekelijk te bekijken wireframes. Wil je meer, dan kun je vanaf $4,95 per maand een account nemen.

Creately is ook meteen de meest uitgebreide tool. Het is niet alleen geschikt voor het maken van wireframes, maar ook bijvoorbeeld flowcharts en bedrijfsprocessen. Hierdoor is het een groot product geworden, maar de makers zijn er toch in geslaagd alles zo simpel mogelijk te houden. De interface is gebouwd in Flash en werkt behoorlijk vlotjes. Het drag-and-drop-principe is uitstekend uitgewerkt en vooral door de contextuele menu’s zullen er vele minuten priegelen bespaard worden.

Het starten van een project is simpel. Kies het juiste type, in dit geval Web Design en vervolgens een van de templates of een volledig leeg scherm. Als je scherm opgebouwd is kun je simpelweg beginnen met het slepen van de benodigde elementen. Via het Properties-scherm kun je aanpassingen maken en ook vanuit de contextuele menu’s kun je snel je wijzigingen opgeven.

Als je wireframe volledig opgebouwd is, kun je deze delen met je collega’s of klanten. Exporteren kan naar pdf, XML of als afbeelding. Wil je een interactieve variant van je wireframe maken, dan is dat met Creately geen probleem. Erg handig om eerste gebruikerstesten mee uit te voeren.

+ Enorm uitgebreid, deelmogelijkheden, interactiviteit toevoegen, revisies bijhouden

- Prijs, overdaad(?)

Mockingbird

Mockingbird is van een heel andere orde. Deze tool is sowieso het nemen van een kijkje waard, want het is gebouwd op het Cappuccino-framework . Zonder gebruik te maken van Flash hebben de makers van Mockingbord een krachtige webapplicatie neergezet.

De interface is simpel en kaal en de elementen die je in je wireframe kunt gebruiken zijn allemaal wat minder clean dan bij Creately. Toch maakt dat niet zoveel uit, want het maken van wireframes gaat uitstekend. Met simpele drag-and-drop-bewegingen heb je in no-time een bruikbare opzet klaar. De onafhankelijke pagina’s kun je ook nog aan elkaar linken, waardoor je snel een klikbaar prototype in elkaar hebt gezet. Ook hier kun je het resultaat delen en exporteren. De samenwerkingsopties zijn op het moment echter minimaal, maar aangezien Mockingbird nog in ontwikkeling is kan dit allemaal nog uitgebreid gaan worden.

+ Simpel, snel, veel elementen, interactiviteit toevoegen, delen

- In opbouw, beperkte mogelijkheden, geen prijzen bekend

HotGloo

De in Duitsland gebouwde wireframe-tool HotGloo bezit in ieder geval de aantrekkelijkste en best uitgewerkte interface. Sowieso heeft deze tool een aantal uitstekende pluspunten. Zo valt direct het enorm handige Properties-schermpje op. Hierin kun je bijvoorbeeld van een kader de afmeting opgeven, de fonts bepalen of afgeronde hoeken toevoegen. Ook is vanuit dit scherm direct interactiviteit toe te  voegen en dat kan dan weer in de Easy of Expert Mode. Aan de linkerhand is een lagenscherm te vinden, hierin staan alle gebruikte elementen opgegeven en zijn op deze manier snel selecteerbaar. De individuele lagen kun je ook tijdelijk onzichtbaar maken. Enorm handig om juist dat verborgen element te vinden of om twee voorstellen met elkaar te vergelijken.

Een volgend pluspunt is de Review-modus. Hierin wordt de uiteindelijke wireframe interactief weergegeven, inclusief sitemap en mogelijkheid om notities toe te voegen. Op deze manier kan er snel getest worden en kunnen externe partijen snel commentaar leveren op het werk. Als laatste is er dan nog een chatmogelijkheid waarbij je tijdens het samenwerken aan het prototype kunt overleggen, of verantwoordelijkheid overdragen. Zo kun je iemand dus rechten geven, maar deze ook weer intrekken. HotGloo is erg compleet en fijn in gebruik. Eigenlijk is er niet veel meer te wensen, ook al is het nog een bètaversie.

+ Interface, snel, samenwerken, handige properties-schermen, lagen en states

-  Geen prijzen bekend, verder nauwelijks eigenlijk

Conclusie

Er zijn enorm veel tools op de markt waarmee je wireframes kunt maken. Veel mensen gebruiken nog Photoshop of grote en dure applicaties als Axure of Visio, maar een kleine rondgang langs een aantal (meestal gratis) online tools laat zien dat er veel moois te vinden is. In deze kleine test komt vooral HotGloo er erg goed vanaf. HotGloo is compleet, snel, goed ontworpen en voorzien van zeer goede  samenwerkingsmogelijkheden. We zijn benieuwd wat de kosten van deze mooi tool gaan worden. Tot die tijd moedigen we iedereen eens te werken met wireframe-tools. Je zult zien dat je in korte tijd enorm veel kunt bereiken en dat ze binnen no-time in je workflow zijn opgenomen.

1. Xander zegt:
   25-01-2010 om 16:43

   Mockingbird heb ik zojuist getest en dat werkt echt prima.
   Ik maak normaal gesproken altijd een zwart/wit print zonder vormgeving, maar alleen met placeholders voor content. Dan kan de klant duidelijk zien hoe de indeling zal zijn.
   Dit is een standaard onderdeel van het functioneel ontwerp dat de klant een compleet beeld geeft van hoe de website gaat werken. Met dit document kan hij eventueel naar een ander web-bureau gaan om deze de opdracht te geven het functioneel ontwerp uit te werken.
   Dit doe ik vaak in photoshop door met blokken te slepen.
   Die methode werkt ook, maar is niet ideaal. Met Mockingbird ben ik in een paar minuten klaar.

2. nikoline zegt:
   27-01-2010 om 19:00

   Jumpchart werkt ook goed, en nadat je het wireframe hebt opgezet kun je de code gelijk gebruiken voor de webstructuur, als basis.

3. Preludio webdesign zegt:
   17-02-2010 om 19:58

   Dit soort tools zijn beetje achterhaald. Bij een efficient prototype hoort altijd een globale uitwerking van CSS (en javascript cq jQuery) om te voorkomen dat een door de klant geaccordeerd ontwerp technisch toch niet, of met veel problemen, haalbaar is. Kun je opnieuw beginnen

Naam (verplicht)

E-Mail (zal niet worden gepubliceerd) (verplicht)

Website