Een waarheidsgetrouwe weergave

Het verschil tussen wireframes en mock-ups

De vormgeving bepalen voor een site met meer dan een paar pagina’s begin je best met het maken van mock-ups of wireframes. De twee begrippen zijn gedeeltelijk inwisselbaar, afhankelijk van wat je ermee bedoelt. Een wireframe in zijn puurste vorm is een schematische versie van een site zonder inhoud. Een mock-up is een waarheidsgetrouwe weergave van hoe de site eruit zal zien, zonder functionaliteit.

Tussen twee stoelen

Vormgeven zonder inhoud is geen goed idee, dus ik bezig meestal een tussenvorm. Mock-ups die qua waarheidsgetrouwheid niet verder gaan dan geschetste blokjes en kadertjes. Maar wel met realistische inhoud, als het even kan.

Dat begint meestal op papier, met wat losse wat-komt-waar-ideetjes. Een schets met blokjes en hier en daar een woordje tekst. Van zodra het aantal van dat soort schetsjes begint op te lopen, wordt het onoverzichtelijk en heel lastig om kleine of grote aanpassingen te doen. Dankzij Balsamiq verhuis ik die schetsen al heel snel naar de computer.

Wat is Balsamiq?

Balsamiq is een bescheiden programma voor Windows of Mac, eigenlijk niet veel meer dan een verzameling voorgetekende tekstvakken, knoppen, tabs, etc. die je op een canvas kan slepen. Daar kan je ze vergroten, verkleinen, vullen met tekst. Mock-ups in Balsamiq maak je door voor elke pagina een schets te maken en die op te slaan als een .bmml bestand. Je kan die onderling aan elkaar koppelen via knoppen of links. In een ‘preview’ kan je zo dan door het ontwerp van de site site heen surfen, om een idee te krijgen van hoe dat in realiteit zou verlopen. Meer is het niet.

Waarom is het zo geweldig?

De visuele stijl is erg schetsmatig, waardoor iedereen waar je die mock-ups aan laat zien, meteen weet: ‘dit is een schetsje, geen definitief design’. Dat is heel intuïtief duidelijk. Als mock-ups er strakker en kleurrijker uitzien is het vaak onduidelijk wat de relatie met de definitieve look nu precies is. Zeker voor mensen die op vlak van webdesign leken zijn. Ik heb vroeger vaak veel tijd verloren met dat duidelijk te maken.

Een andere populaire mock-up tool is Axure. Daar heb je veel meer mogelijkheden, het is een veel krachtiger programma waar je ook al heel wat functionaliteit kan simuleren (logica van formulieren en zo). Voor een gemiddelde website vind ik dat overkill. Je wil snel een idee krijgen van hoe de site aanvoelt. Of de relatie tussen pagina’s en onderdelen klopt, of het allemaal bij elkaar past en of de content er wat evenwichtig uit komt. Dat lukt het beste als je gewoon vlakjes en knoppen snel op hun plaats kan zetten. Nu maak ik quasi nooit web-apps, dus mijn ervaring is gekleurd en Axure is eigenlijk niet te vergelijken met Balsamiq (ze liggen in aankoopprijs al ettelijke honderden dollars uit elkaar). Maar, net als Dreamweaver en Photoshop overigens, wordt Axure ook vaak gebruikt als het spreekwoordelijke kanon voor de al even spreekwoordelijke mug.

Balsamiq benadert volgens mij het dichtste de naturel die je hebt bij het op papier schetsen en die voortkomt uit het minimum aan technologische overhead. Dat zorgt ervoor dat je gericht blijft op de essentie en niet bezig bent met het gereedschap dat je gebruikt, maar concentreert op het resultaat. De makers van Balsamiq houden dat ook bewust zo. Het is één van de enige plekken waar Comic Sans op z’n plaats is en niet opvalt. Bij elke vraag om nieuwe features wordt gewikt en gewogen of dat niet zou afleiden van de kerntaak van het programma.

Mankement

Het enige wat ik nog mis bij Balsamiq is een manier om onderdelen die doorheen een site gebruikt worden (een navigatiebalk, bijvoorbeeld) centraal te kunnen aanpassen, een soort ‘symbol’ of ‘embed’ functie. Maar dat komt eraan, naar verluidt.

Shoppen!

Balsamiq kan je online kopen voor $79.