Schaalbaar design: hedendaagse werkwijze met flexibel resultaat

23 april 2015 Inzichten /

Hoewel design-in-the-browser al volledig doorgebroken is, blijven statische mockups (Photoshop, Illustrator, Sketch, …) volharden als de standaard design methode 1. Als gevolg bleef ons proces ook statisch. Bij Wijs is design-in-the-browser al een paar jaar de nieuwe standaard. Het is dan ook maar logisch dat ons design proces meegroeit.

Design met code

De origine van dit proces ligt in het erkennen van het web als eigen medium. Daarom was het nodig om onze tools te evalueren en overbodige tussenstappen, zoals statische mockups in Photoshop, te laten vallen.

Het alternatief was voor de hand liggend: werken met code, in de browser, responsive en als het even kan met echte content.

Een andere realiteit

Ontwerpen in Photoshop is een illusie creëren van wat je website/app zal zijn. Je maakt een schilderij van je website, moeilijk schaalbaar en uiteindelijk een wegwerpproduct.

Ontwerpen met code is daarentegen organisch. Het ontwerp groeit van een element collage 2 uit naar een klikbaar, responsive prototype of geïmplementeerd design.

Dankzij design-in-the-browser hangen alle design-elementen aan elkaar vast. Pas je er eentje aan, dan zie je meteen het effect op alle andere. Als een titel langer wordt dan gaat hij over 2 regels. Wordt de tekst groter dan wordt een volgende tekstblok of illustratie verschoven. De impact van een correctie is zo direct zichtbaar en alles blijft consistent.

Prototype waarde

Een statisch design heeft weinig prototype waarde. Een design gemaakt in de browser is daarentegen in elke fase volledig testbaar op je desktop, mobiel toestel en door je eindgebruiker. Geen verrassingen, geen illusies. Dit zorgt ervoor dat mobile-first en device agnostic werken vanzelfsprekend wordt en functionaliteiten vroeg getest en bijgestuurd kunnen worden.

Wat zeggen de tegenstanders?

De voornaamste kritiek op deze werkwijze is dat het onmogelijk zou zijn om creatief te zijn met code. Creativiteit ontstaat uit een idee, een snelle schets op een stukje papier of een bierkaartje, een moodboard of nog iets anders. Tools hebben hier dus weinig invloed op. De tool die je gebruikt, is meestal persoonlijk en wordt bepaald door jouw kennis en specifieke skills. Bij Wijs is elke designer ook een front-end developer. Code en design gaan hier dus hand in hand.

“A tool is really just an opportunity with a handle.”

— Kevin Kelly, co-founder of Wired Magazine

Een schaalbaar design proces

Designen in the browser kan natuurlijk pas tot zijn recht komen als het bijhorende proces even flexibel en organisch is.

Een actieve kickoff

Vanaf de eerste minuut zit de designer mee aan tafel. We bespreken verschillende pistes met behulp van moodboards. We analyseren de concurrentie en schetsen samen mogelijke interfaces. Je zit als klant mee aan het stuur en zorgt ervoor dat we samen geïnformeerde design keuzes maken.

Bouwblokken

Met behulp van een element collage maken we die eerste design keuzes concreet en bepalen we de bouwblokken van je site. Hoe gebruiken we jouw logo (indien je nog geen logo hebt, vangen we dit op met een branding traject dat hier naadloos op aansluit), welke fonts gebruiken we, hoe groot, welke kleur, hoe zien links eruit … ?

Voorbeeld: AXAbank.be element collage

Aanvullend werken we hier ook reeds een belangrijke component uit. Dit kan een product module zijn, een bestelformulier, een blogpost … , alles hangt af van de content en functie van je site. Hiervoor doen we beroep op de informatie architect die op dat moment de functionaliteiten van de site in kaart brengt.

IA, design en klant samen

Nadat we de bouwblokken vastgelegd hebben kunnen we starten. Nog steeds rechtstreeks in de browser, als het kan met echte content, bouwen we je site. Dit doen we samen met jou als klant en de informatie architect.

Sites bestaan voornamelijk uit modules in combinatie met een aantal templates. We starten met de interface (header, navigatie en footer) en de belangrijkste modules. Daarna werken we module per module af samen met een aantal pagina templates. Op die manier creëren we een modulair systeem dat makkelijk schaalbaar is.

“We’re not designing pages, we’re designing systems of components.”

— Stephen Hay, uit Responsive Design Workflow

Is er twijfel of iets wel goed werkt? Dan testen we het samen op ons device lab. Is de site wel bruikbaar? Geen probleem, een user test kan ook meteen omdat alles responsive en klikbaar is.

Lange termijn

Het design van een website stopt natuurlijk niet eens hij live staat. Je online presence groeit en evolueert. Door user feedback stuur je voortdurend bepaalde zaken bij. Het is ook mogelijk om te groeien: je kan landingspagina’s maken, nieuwe modules toevoegen, online campagnes lanceren, applicaties ontwikkelen …

Voorbeeld: AXAbank.be stijlgids

Een stijlgids (of pattern lab) is de ideale aanvulling op je site om de development en evolutie hiervan in goeie banen te leiden. Het bevat alle stijlelementen en documentatie over hoe je ze kan gebruiken. Het dient zowel als naslagwerk bij implementatie en als startpunt bij nieuwe ontwikkeling.

Op basis van een stabiele architectuur

Door ons custom framework, het in-house ontwikkelde Chopstick framework, zorgen we er ook voor dat de codebase modulair, performant en makkelijk aanpasbaar is.

“Tiny Bootstraps, for Every Client.”

— Dave Rupert, uit Responsive Deliverables

In tegenstelling tot kant en klare oplossingen zoals Bootstrap of Foundation 3 creëren we zo een unieke, herbruikbare en schaalbare UI-kit, specifiek voor jouw merk.

Een levende stijlgids

Het is wel essentieel dat de stijlgids up-to-date blijft. Een uitstekend voorbeeld hiervan is die van Lonely Planet. Zodra er iets verandert, worden styleguide en site automatisch aangepast. Op deze manier ontstaat er een levende stijlgids die altijd meegroeit.

Perspectief

Het web is als een medium matuur genoeg om eigen tools en processen mogelijk te maken. Door deze voordelen optimaal te benutten zorgen we voor een schaalbaar design dat je merk perspectief geeft.

“I don’t usually work with agencies much, as their traditional way of working isn’t so well aligned with the product led approach I take. However, when I learned about how Wijs worked—HTML/CSS prototyping, designing in the browser, styleguides, designer–developer crossovers—I knew right away that this wasn’t your typical agency. Seeing these forward thinking approaches in a client-services company was a real breath of fresh air, and made me even more excited to work together.”

— Harry Roberts aka @csswizardry, toen hij bij ons een dag opleiding kwam geven

Lijkt deze lange termijn visie iets voor jouw bedrijf?

Contacteer ons

1. Dit is geen aanval op bestaande processen maar een alternatief dat een aantal belangrijke voordelen oplevert. Producten zoals bijvoorbeeld Invision of Marvel kunnen zeer makkelijk statische mockups klikbaar en testbaar maken waardoor deze ook meer potentieel krijgen en zeker in het geval van iOS en Android applicaties nog steeds de beste keuze zijn.

2. Bij Wijs maken we een dynamische en responsive variant van element collages. Een soort uit de kluiten gewassen style tiles.

3. Bootstrap en Foundation worden soms verkeerdelijk een framework benoemd. Dit zijn eigenlijk reeds volledig uitgewerkte UI-kits. Zeer kwalitatief en klaar om te gebruiken maar extreem tijdrovend om aan te passen. Dus niet de beste keuze als je een uniek design wil.

Lees meer

Nieuwsbrief

Doe zoals meer dan 1700 marketing en design experts en ontvang maandelijks onze nieuwsbrief vol inzichten, tips en verrassende nieuwigheden.