Een style tile als basis voor de look & feel van jouw website.

Style tiles zijn al geruime tijd een vast onderdeel van ons ontwerpproces. In dit artikel leggen we je graag uit wat een style tile is, hoe we deze in ons ontwerpproces gebruiken en welke voordelen ze bieden voor het realiseren van jouw nieuwe website.

Het begint bij de verkenningsfase

In deze fase verkennen we de diverse uitdagingen in het project. Natuurlijk hebben we een briefing ontvangen en hebben we een beeld van wat er moet komen. Er resten echter nog genoeg vraagtekens die weggenomen moeten worden. Vragen zoals: met welke doelgroep(en) moeten we rekening houden en wat vindt de doelgroep belangrijk om te bereiken? Tegen welke dingen lopen zij nu aan? Maar ook: wat zijn de algehele doelstellingen van de website en hoe maken we dit meetbaar? Met welke content hebben we te maken en hoe zit de contentarchitectuur in elkaar? Aan het eind van de verkenningsfase is het de bedoeling dat we met elkaar klaarstaan in de startblokken om verder te gaan met het ontwerp en de realisatie van de website.

Om in de realisatiefase snel van start te kunnen gaan, is het belangrijk dat we weten wat de algehele visuele stijl van de website gaat zijn. Daarom valt een style tile, ook wel de look & feel van je website, bij ons in de verkenningsfase. Op basis van alle input en informatie uit de gevoerde gesprekken, gaan we aan de slag met het maken van de eerste opzet voor een style tile.

Maar wat is dat nou, zo’n style tile?

Snel samengevat zou je kunnen zeggen dat een style tile een manier is om een bepaalde visuele stijl te communiceren naar jou als klant. Een style tile bevat diverse elementen zoals kleuren, typografie, vormen, lijnen, texturen en bepaalde UI elementen. UI elementen zijn de diverse visuele elementen op jouw website waar de gebruiker interactie mee heeft, denk bijvoorbeeld aan een button. In principe vatten we alle elementen die richting geven aan een visuele stijl samen in een ‘tile’, oftewel een ‘tegel’. Dit zorgt ervoor dat je in één oogopslag een goede indruk krijgt van de visuele online stijl. Een style tile is echter nooit helemaal volledig, het is een product wat gedurende de tijd nog verder kan evolueren. Het biedt wel houvast tijdens het verdere ontwerpproces.

Maar waarom dan een style tile?

Wanneer je nog geen duidelijke visuele stijl voor je website hebt staan, of de stijl is erg verouderd, kan het uitwerken en ontwerpen van hele pagina’s veel verwarring scheppen. Bij het ontwerpen van hele pagina’s ga je ook aan de slag met het ontwerpen van functionaliteiten. Hierbij is het lastig om feedback op visuele stijl en de functie van onderdelen van elkaar te scheiden. Je moet hierbij namelijk al goed nadenken over zaken als: lay-out, plaatsing van elementen en content. Dat kan erg lastig zijn als je ook moet nadenken over een visuele stijl. Het is daarom af te raden om te beginnen met het ontwerpen van hele pagina’s van je website.

Waarom gebruiken we geen andere middelen zoals een moodboard? 

Een moodboard is een tool die ingezet wordt in branches zoals advertising of interieurontwerp. Je kunt hiermee snel een bepaalde sfeer neerzetten door middel van kleuren, typografie en beeld. Echter geeft een moodboard niet een totaalbeeld van de visuele stijl. Vooral de vertaling naar online komt hier niet in voor. Een moodboard toont niet goed hoe bepaalde specifieke online elementen eruit zien. Denk bijvoorbeeld aan buttons, een nieuwsblok of een winkelmandje.

Scheiden van functie en vorm

Wij kiezen ervoor om in de beginfase van een project style tiles te gebruiken. We zorgen er met het maken van een style tile voor dat we de focus goed kunnen leggen op een visuele stijl en dat onze aandacht niet wordt vertroebeld door zaken die in dit stadium nog niet van belang zijn, zoals het ontwerpen van diverse functionaliteiten. Kort gezegd: we scheiden de functie van vorm zodat we deze nog beter kunnen beoordelen, los van elkaar. Vorm kunnen we zo goed beoordelen op gewenste uitstraling. Functionaliteiten, lay-out en content kunnen we dan beoordelen op de vraag: “Hoe dragen deze bij aan de gebruikersbehoeften en bedrijfsdoelen?”.

Webtoegankelijkheid en style tiles

Zoals inmiddels wel duidelijk is, zijn style tiles van fundamenteel belang in ons ontwerpproces om de visuele elementen van een website te definiëren. Style tiles spelen ook een cruciale rol in webtoegankelijkheid, doordat ze de toon zetten voor kleurencombinaties, het tonen van voldoende kleurcontrast en het gebruik van typografie in de nieuwe stijl.

Omdat we vroeg in het proces aandacht besteden aan webtoegankelijkheid, zorgen we ervoor dat we standaarden zoals de WCAG (Web Content Accessibility Guidelines) goed kunnen naleven. Dit heeft dan ook een positieve impact op de gebruikerservaring van alle bezoekers. Het zorgt ervoor dat we een website kunnen creëren die niemand uitsluit, en daarmee vergroten we jouw bereik in de digitale wereld.

Werken wij dan helemaal geen pagina’s meer uit?

Als je nu denkt dat we alleen nog maar style tiles maken: zeker niet! We zien het maken van een style tile echt als een hulpmiddel om het ontwerpproces sneller op gang te brengen. Wanneer we een style tile maken, starten we vaak parallel aan de contentarchitectuur van je website. In de contentarchitectuur wordt duidelijk welke content wordt aangeboden, hoe onderlinge relaties opgezet kunnen worden en hoe de eindgebruiker de content zo gemakkelijk mogelijk kan bereiken. In deze contentarchitectuur markeren we een aantal pagina’s als kernpagina’s. Deze kernpagina’s zijn de belangrijkste pagina’s van jouw website en zullen we uitwerken in een responsive design.
We ontwerpen liever kernpagina’s, omdat dit efficiënter is dan het uitwerken van alle pagina’s van een website. Door kernpagina’s te ontwerpen kunnen we goed kijken naar welke onderdelen hergebruikt kunnen worden. Door hergebruik van onderdelen kunnen we meer tijd besteden aan het verbeteren van de gebruikerservaring, zoals de ontwikkeling van toffe functionaliteiten of het gebruik van micro interacties.
Ook met het ontwerpen van kernpagina’s kun je goed zien hoe elementen uit de style tile samenkomen tot een webontwerp. Hiermee wordt het nog duidelijker hoe je website eruit gaat zien. 

Ben jij toe aan een nieuwe website? Of kan je online stijl wel een verfrissing gebruiken?

We helpen je hier graag bij!