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

Foto van Andree

Geschreven door Andrée Lange

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

Artikel

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

door

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.

“Style tiles helpen ons om snel een visuele richting te geven aan een project, zonder te verzaken in onderdelen als functionaliteiten. We kunnen de visuele stijl eerlijk beoordelen.”

Andrée Lange
Digital Designer

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.

Styletile Per Saldo

Voor Per Saldo hebben we in de verkenningsfase een style tile gemaakt om de visuele stijl goed te kunnen duiden.

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. Omdat nog niet duidelijk is welke stijl gehanteerd moet worden en je wel al aan de slag gaat met het ontwerpen van functionaliteiten, is het lastig om feedback op visuele stijl en functionaliteiten goed van elkaar te scheiden. Je moet hierbij namelijk al goed nadenken over zaken als: lay-out, plaatsing van elementen en content. Erg lastig als er ook gelijktijdig nagedacht moet worden 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 vaak gebruikt wordt in branches zoals advertising of interieurontwerp. Een moodboard kan snel een bepaalde sfeer neerzetten door middel van beelden van kleuren, typografie en beeld, te verzamelen op een bord. Een moodboard geeft echter niet een totaalbeeld van de visuele stijl. Vooral de vertaling naar online komt hier niet in voor. Er wordt niet goed getoond hoe bepaalde specifieke online elementen eruit zien. Denk bijvoorbeeld aan buttons, een nieuwsblok of een winkelmandje.

“Met een style tile zorgen we ervoor dat we onze keuzes niet baseren op smaak, maar op gebruikersbehoeften en bedrijfsdoelen.”

Thumbnail van Andrée
Andrée Lange
Digital Designer

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?”.

Moodboard zijn niet specifiek genoeg, mock-ups zijn te gedetailleerd, styletiles zijn precies goed en bieden snel mogelijkheid tot een online look & feel!
Moodboards zijn te vaag en mock-ups zijn te specifiek. Style tiles zorgen voor de juiste balans.

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. 

Styletile en homepage van de website Regionale Belasting Dienst

Voorbeeld van Regionale Belasting Groep waarbij goed te zien is hoe een style tile wordt doorvertaald naar een web design.

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

We helpen je hier graag bij!

Over de auteur

  • Andrée Lange

    Andrée Lange

    Digital Designer

    Als Digital Designer bij Level Level werk ik samen met het team aan mooie WordPress websites. Ik vertaal de vraag van de klant naar een mooi, gebruiksvriendelijk product dat goed aansluit op de eindgebruiker.

    Ga naar de team pagina van Andrée Lange

Vertel ons meer over je plannen en ambities!

We zijn klaar om jullie online uitdaging op te pakken.