Style Tiles: communiceren over emotie

, # Webdesign

Design is het gebied waar gevoel en verstand elkaar ontmoeten. Het is om die reden ook het gebied waar de meest emotionele discussies ontstaan tussen de verschillende stakeholders van een project. Iedereen heeft een mening over het design. Dat maakt het moeilijk om te weten waar de waarheid ligt.

Gewoonlijk heb ik gelijk. Dat is een gevolg van het feit dat ik als designer het volledige plaatje in het oog kan houden. Ik denk tijdens het ontwerpen aan verdere toepassingen. Ik hou rekening met de visuele hiërarchie van alle elementen op de pagina. En als verlengde daarvan zorg ik dat alle elementen doorheen de site op een logische manier visueel geordend zijn. Als jij vraagt om dit kleurtje te veranderen, of dat tekstje groter te zetten heeft dat verstrekkende gevolgen. Terwijl jij een pagina ziet, zie ik een systeem.

Heb jij daarom ongelijk? Natuurlijk niet. Als jij een vreemd gevoel hebt bij het design is dat meestal een indicatie dat de stijl niet goed zit. See what I did there? Design is niet hetzelfde als stijl. Stijl is wel een onderdeel van design, maar het is een gevoelsmatige laag. Here there be monsters.

Over gevoel kan je niet discussiëren. Naar een gevoel moet je samen op zoek gaan. Liefst visueel. Precies om die reden werken we met Style Tiles. Dat zijn grafische assets die zich ergens tussen een moodboard en het uitgewerkte design bevinden. Ik kan het uitvoerig omschrijven, maar een voorbeeld zegt zo veel meer:

Style Tile 1 Style Tile 2 Style Tile 3

Style Tiles bevatten meestal een kleurenpalet, een hint rond typografie, iconografie en interface-elementen zoals call to actionknoppen. Ik ben echter volledig vrij om elementen toe te voegen of weg te laten naar smaak. Heb ik een idee voor een decoratief element of een bepaald soort fotografie? Zwier het op de Style Tile.

Het grootste voordeel is dat ik samen met jou erg snel en iteratief op zoek kan gaan naar een gemeenschappelijke basis. Wanneer we de stijl bepaald hebben, verloopt het designproces een stuk vlotter omdat we dan gevoelsmatig al op dezelfde lijn zitten. De daar op volgende beslissingen zijn een complexe synergie van emotionele en rationele beslissingen waar mijn kennis en ervaring als designer écht van pas komen.

Uiteindelijk draait het, zoals steeds in dit vak, om communicatie. Door Style Tiles te gebruiken wordt de gevoelsmatige communicatie gebundeld. Ze zijn niet altijd de oplossing voor een probleem. Maar ze zijn wel een extra stuk gereedschap in de designer toolbox.

Hebben jullie al met Style Tiles gewerkt? En op welke manier? Ik hoor het graag in de reacties!

Meer weten? Advies nodig?

Kom gerust langs voor een kop koffie en een goed gesprek. Wijs geeft strategisch advies, en helpt bij het uitwerken en verbeteren van all things digital.

Gerelateerde diensten

Gerelateerde cases

  • Internationale webshop voor Little Kings and Queens

  • Website voor BTV

Gerelateerde artikels

 

Al 4 reacties

Laat hier een reactie achter of contacteer ons via e-mail

Nicky

Nicky
schreef

Het risico met style tiles is dat je als designer enkel bezig bent met het "inkleuren van de wireframes" en dat mag niet gebeuren. Maar als ik erover nadenk, is dat misschien eerder een gevaar in het algemeen, dat niet per se met style tiles te maken heeft.


schreef

@Nicky : Het risico met style tiles is dat je als designer enkel bezig bent met het "inkleuren van de wireframes" en dat mag niet gebeuren.

Naar mijn mening zijn wireframes even belangrijk (of zelfs nog belangrijker) als het grafische design. Design bepaalt hoe iets *werkt*, en niet alleen hoe iets eruit ziet. Als IA's en grafisch designers nu eens samen zouden werken aan de wireframes (of dat die functie door een cross-profiel wordt uitgevoerd die ervaring heeft in beide domeinen)? Dan is het toch perfect mogelijk om de layout voor bijna 90% af te kloppen in de wireframes?

In sommige situaties kan de Photoshop-fase dan bijna volledig overgeslagen worden. Nu spendeert een designer vaak dagen om alle templates van de wireframe nog eens te her-layouten binnen photoshop om dan uiteindelijk als platte JPG's naar de klant door te sturen voor akkoord. Waarom kunnen we niet van zodra de klant akkoord is met de art direction (style tiles) en de wireframes onmiddellijk in HTML/CSS beginnen werken? Designen in de browser, als het ware.

Enkele voordelen van designen binnen de browser (versus designen binnen photoshop & dan slicen in HTML):

1. In plaats van platte, non-interactieve JPG's krijgt de klant steeds functionerende HTML templates te zien. Hovers, buttons, en andere interactieve elementen zijn onmiddellijk duidelijk.

2. Vaak is client-feedback op designs kleine zaken zoals micro-copy, kleine kleurwijzigingen, etc… (als er een voorafgaand akkoord was op wireframe & art-direction tenminste). Zulke wijzigingen kunnen vaak veel sneller gedaan worden in code dan dat een designer alle PSD's kan aanpassen.

3. Deze techniek is grotendeels immuum voor de gevreesde "de site ziet er in mijn browser anders uit dan in de designs!"-feedback. Want de klant ziet énkel maar werkende HTML in zijn browser en heeft geen vergelijkingspunt. Net als alle andere gebruikers van de site trouwens.

4. Bepaalde webdesign technieken, zoals fluid-layouts, responsive webdesign, etc… zijn zeer omslachtig om in Photoshop te simuleren, maar gaan bijna vanzelf met HTML & CSS.

Toegegeven, designen binnen de browser is niet voor iedereen weggelegd, en verwacht meer interdisciplinaire samenwerking (IA & grafisch designer, grafisch designer & front-end developer, etc…), maar ik denk dat de voordelen van deze manier van werken (de snelheid, vrijheid om te itereren, etc…) voldoende zijn om het toch eens te overwegen.


schreef

@Nicky dat is inderdaad een stelling die ik vaak hoor terugkomen. Maar zoals je zelf al aanhaalt is dat eerder iets waar je in het algemeen wel of niet gevoelig aan bent als designer. Het is natuurlijk niet de bedoeling om een soort colour-by-numbersoefening te doen. Om dat te vermijden moet er wel voldoende contact zijn tussen de persoon die wireframes uitwerkt en de persoon die het grafisch ontwerp verzorgt–als dat niet dezelfde is. Wat Gilles in dat verband zegt klopt volgens mij grotendeels.


schreef

In mijn ogen mag de keuze van de designer nooit de belangrijkste factor van een bepaald design zijn. Door pagina's te testen via google A/B splittesting zal uiteindelijk bepaald worden voor welk design gekozen zal worden. Een goede designer doet al veel werk, omdat hij weet wat wel en niet goed werkt in de basis.

Plaats een nieuwe reactie