Designen in de browser

Door Lieve Sonke, art director
8 februari 2016 - 3202 x bekeken - Categorieën: Kennis, Innovatie

Ons vak is continu in beweging. Als designers moeten we mee evolueren met de snelle ontwikkeling van digital. Elke week worden er tientallen nieuwe technieken en tools bedacht om ons vak beter en sneller uit te oefenen. In de afgelopen jaren zien we vooral de grens tussen design en development steeds meer vervagen. Hoe komt dit? En wat zijn de voordelen?

Van Photoshop naar Chrome

Wat ons betreft zijn de tijden voorbij waarbij we alles tot in de pixels nauwkeurig uitwerkte in Photoshop, Fireworks of Sketch. We willen als designers sneller ontdekken of iets gaat werken of niet. Hoe iets aanvoelt op Safari mobile. Gaat die toffe interactie wel werken zonder 12 kantjes Javascript? Daardoor krijgen onze developers die het uiteindelijk bouwen ook een veel beter gevoel bij onze ideeën. Waar dit voorheen statische comps waren zijn het nu interactieve pagina’s of views waar ze doorheen kunnen navigeren. Front-end developers zijn op deze manier in staat om ons veel sneller te adviseren, over of iets goed gaat werken of niet. Last but not least, de klant krijg ook een veel beter beeld van onze ideeën.

Super! maar hoe dan?

Natuurlijk heeft elke webdesigner een basiskennis van html en css, maar we zijn visueel ingesteld. We willen snel ideeën kunnen vormgeven. Om dit volledig 'from scratch' te gaan doen kost ons teveel tijd. Dit is ook niet onze expertise. Gelukkig zijn er allerlei tools die het mogelijk maken om te designen in de browser. De ene complexer dan de ander. Handige webtools voor rapid prototyping zijn bijvoorbeeld UXpin of Macaw. Deze tools werken met een drag and drop principe. Je sleept als het ware allerlei componenten op het een leeg canvas. Denk hierbij aan formuliervelden, buttons, tekst en basisvormen. Zodra deze componenten op de gewenste plaatsen staan kan er interactie aan worden toegevoegd.  

Een stap verder

Erg handig voor prototyping deze tools, maar bruikbare code komt er (nog) niet uit. Dat is jammer, want dit betekent dat onze front-end developers alles alsnog from scratch moeten gaan opzetten. Maar zou dit ook anders kunnen? Ik denk het wel, maar het vergt ook een multidisciplinaire aanpak van designers. Er zijn allerlei html frameworks en boilerplates die we als designers kunnen gebruiken als vertekpunt. Denk bijvoorbeeld aan Bootstrap of Skeleton. Allerlei componenten als grids, buttons, tekststijlen en formulieren zijn hierin al voor gedefinieerd. Waar UXpin en Macaw met drag and drop werken is dat bij deze toolkits net even anders. Ze werken op basis van scripts, html en css. Een mooi moment dus voor ons als designers om onze basiskennis html, javascript en css weer eens aan te scherpen.

Front-end designers. De toekomst?

Als art director ben ik voornamelijk betrokken bij de strategie & concept fase van onze projecten. Het uitzetten van een stijl en tone-of-voice zijn hierbij de belangrijkste onderdelen. Ik zie wel veel voordelen voor designers en developers om te designen in de browser. In de toekomst zal de grens tussen deze twee disciplines steeds meer vervagen. Een positieve ontwikkeling wat mij betreft. Zeker omdat we bij E-sites met scrum werken, is het belangrijk dat disciplines parallel aan elkaar werken. We zijn zelf nog volop aan het experimenteren met deze workflow, maar de eerste bevindingen zijn erg positief. Het zou mooi zijn als designers ideeën high-level kunnen uitschetsen in de vorm van wireframes en een uitgebreide styleguide waarin elk grafische element is uitgewerkt. Om vervolgens samen met front-end te bouwen.

Sneller samen tot een beter tastbaar resultaat komen, dat is waar we voor willen gaan.

 

Bluetonium released

Door E-sites

Onze oplossing, geschreven in Swift, die bluetooth communicatie tussen apparaten eenvoudiger maakt. Open-sourced code, te vinden via Github… - Lees meer

Lees verder