Style tiles: Voor als een moodboard te 'vaag' is en een ontwerpvoorstel te concreet

Door Sjoerd van Oosten, partner / creative director - @sjoerdvanoosten
18 mei 2012 - 1298 x bekeken -

Als designer heb ik de uitdagende taak om de eerste oplossingen en ideeën visueel en concreet te maken. Dat is in de meeste gevallen niet zo eenvoudig als het misschien op het eerste gezicht lijkt. Er komt namelijk veel meer kijken bij het maken van een ontwerpvoorstel dan veel mensen zich realiseren. Voordat ik aan een ontwerp begin zijn er vaak al een hoop andere deliverables gemaakt, die hun bijdrage leveren aan de totstandkoming van een ontwerp. Denk hierbij bijvoorbeeld aan schetsen op papier, moodboards, wireframes en persona’s. Elk van deze zogenaamde ´tussenopleveringen´ kunnen je als designer helpen om voor jezelf, het team en de klant beter in kaart te brengen welke richting we in willen slaan.

Het E-sites designproces

Het designproces bij E-sites vliegen we grofweg altijd hetzelfde aan. Tijdens een eerste kennismaking met de klant proberen we zoveel mogelijk relevante informatie van de klant te achterhalen. Daarbovenop doen we zelf natuurlijk ook nog onderzoek naar relevante informatie om meer te weten te komen over het project. Zodra er genoeg informatie verzameld is houden we intern een brainstormsessie met het team om tot een concept te komen. Vervolgens gaan we aan de slag met het maken van de eerste schetsen en wireframes. Zodra de eerste ideeën werkbaar zijn is het tijd om deze aan de klant te presenteren. Meestal is dat in de vorm van een uitgewerkt designvoorstel. Soms duurt het enkele dagen voordat er een designvoorstel staat waar we volledig achterstaan. Af en toe gebeurt het dat klanten zich niet kunnen vinden in zo'n voorstel, wat betekent dat we terug gaan naar de tekentafel om een nieuw design te maken. Soms heeft dit als gevolg dat de planning te krap wordt, waardoor het project vertraging oploopt.

Voorkomen is beter dan genezen

Het risico op project vertragingen proberen we natuurlijk zoveel mogelijk te beperken. Wat je eigenlijk wil is lay-out en estethiek zoveel mogelijk scheiden, zodat je in een vroeger stadium veel gerichter feedback van de klant kan krijgen op de stijl van het product. Dat deden we bij E-sites ook al wel met behulp van wireframes en moodboards. Wireframes laten de functionaliteit, hiërarchie en contentplaatsing zien en moodboards ademen de sfeer van de website. Het probleem met wireframes en moodboards is dat ze vaak lastig te begrijpen zijn voor klanten. Veel klanten focussen zich bij het bekijken van een wireframe te veel op details, terwijl het daarbij juist gaat om de grove plaatsing van elementen en interactie. Daarentegen vinden veel klanten moodboards simpelweg te ‘vaag’.

Samantha Warren, Design Director bij Phase2 Technology, zat met hetzelfde probleem en was op zoek naar een manier om eerder feedback te krijgen op de esthetische aspecten van haar designs, zonder dat de klant afgeleid zou raken door de lay-out en functionaliteit. Geïnspireerd door kleurenwaaiers en stofstalen, die gebruikt worden door onder andere schilders, bedacht zij de style tile.

”An interior designer doesn't design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?”

- Samantha Warren

Wat zijn style tiles?

Een style tile is een deliverable binnen het ontwerpproces bestaande uit lettertypes, kleuren, patronen, texturen en verschillende interface elementen, dat de essentie van het ontwerp en de algemene stijl van een website (of ander multimediaal product) kan helpen communiceren. Style tiles zijn een handig hulpmiddel om discussie aan te gaan met het team en/of de klant over de stijl van de website. Bij het maken van een style tile hoef je je niet bezig te houden met de layout en de plaatsing van elementen (wat bij wireframes wel het geval is), maar ligt de focus louter op esthetische aspecten.

Wat zijn de voordelen?

Een groot voordeel van style tiles is dat ze het ontwerpproces helpen versnellen. Een paar verschillende style tiles zijn vaak in een aantal uur gemaakt, terwijl het maken van een design voorstel in de vorm van een uitgewerkt scherm soms wel een paar dagen in beslag kan nemen. Dankzij style tiles kan het maken van het grafisch ontwerp nu tevens parallel lopen aan het maken van het interactie ontwerp. Dit was voorheen een stuk lastiger.

Een ander voordeel van style tiles is dat klanten ze begrijpen, wat betekent dat klanten veel gerichter feedback kunnen geven als het om de grafische schil van de site gaat. In tegenstelling tot moodboards zijn style tiles namelijk vrij straight forward.

Nog een groot voordeel is dat style tiles perfect passen binnen een responsive project. Omdat het aantal verschillende devices met toegang tot internet enorm stijgt, wordt het steeds belangrijker dat websites op verschillende devices goed getoond worden en dus een goede user experience bieden. Omdat de nadruk bij style tiles ligt op verschillende visuele elementen hoef je je niet druk te maken over de verschillende specifieke device afmetingen en breakpoints.

En nu?

We vinden style tiles een interessante ontdekking bij E-sites en we zullen er de komende tijd voorzichtig mee aan het experimenteren slaan. Binnenkort hopen we er de eerste vruchten van te plukken. We'll keep you posted!

Samenwerking met Techtwo officieel

Door E-sites

Nieuwe ontwikkelingen bij E-sites! We bundelen onze krachten met Techtwo Internetdiensten. Waar E-sites een focus kent op complete… - Lees meer

Lees verder