5 ontwikkelingen die een grote impact hebben op webdesign in 2017

Ge­bro­ken grids en sto­ry­tel­ling

De­sig­ners wer­ken al van­af het be­gin van het web in een be­paald grid om een web­si­te vorm te ge­ven. Zie het als de hei­li­ge graal. Je hebt een aan­tal ko­lom­men daar plaats je vlak­ken in, en je hebt een ba­se­li­ne grid voor je ty­po­gra­fie. Het gaf ons struc­tuur en con­sis­ten­tie. Maar in 2016 de­den wij, de­vel­o­pers, het stan­daard grid in de ban.

Be­drij­ven wil­len ge­brui­kers een steeds be­te­re er­va­ring bie­den. Ze wil­len een ver­haal ver­tel­len en hun vi­sie ver­ta­len naar de­sign dat daar­bij past. Een stan­daard grid vol­doet niet meer. De tech­niek maakt het mo­ge­lijk dat je niet lan­ger hoeft te kie­zen voor blok­je, blok­je, tekst. Je kunt je ei­gen draai ge­ven en van een web­si­te een in­ter­ac­tie­ve ex­pe­rien­ce ma­ken. In het af­ge­lo­pen jaar zag je steeds meer de­sig­ners een ma­nier be­den­ken om dat grid te door­bre­ken. Ook ik deed daar­aan mee.

De il­lu­sie van be­we­ging

Voor Work­Fast web­si­teWork­Fast, een van on­ze klan­ten, pas­te ik sto­ry­tel­ling en off grid-den­ken toe om hun be­drijfs­vi­sie te ver­ta­len naar een on­li­ne ui­ting. Hun vi­sie is: Work­Fast Be­weegt. Hoe ver­tel je dat ver­haal vi­su­eel? Nor­maal plaats je al­les in rech­te lij­nen op een web­si­te. Ik heb het grid com­pleet ge­ne­geerd en wil­de al­les la­ten be­we­gen. Niet met fan­cy ani­ma­ties, maar al­leen met vorm en kleur. Ik koos voor een ge­bro­ken grid-de­sign en cre­ëer­de let­ter­lijk met fi­gu­ren een in­de­ling. El­ke strak­ke lijn staat scheef om de il­lu­sie van be­we­ging te cre­ë­ren.

De­ze ma­nier van den­ken gaan we meer te­rug­zien in 2017. Net als sto­ry­tel­ling de­sign. De­ze ont­wik­ke­ling za­gen we al in 2015, werd be­ter in 2016 en zet door in 2017. Be­drij­ven rich­ten zich het af­ge­lo­pen jaar steeds meer op de user ex­pe­rien­ce. Ze stre­ven naar een ul­tie­me klan­t­er­va­ring en ge­voel speelt daar­bij een be­lang­rij­ke rol. Een van de ma­nie­ren om dat po­si­tie­ve ge­voel over te bren­gen is sto­ry­tel­ling.

Niet al­leen woor­den, maar juist beel­den, vor­men en vi­deo's spe­len een be­lang­rij­ke rol hier­in. Als de­sig­ner ge­bruik ik de vi­sie, pas­sie, dra­ma en per­so­na­ges die le­ven in een or­ga­ni­sa­tie en ver­werk de­ze in mijn de­sign. True sto­ry!

Ato­mic de­sign

In 2017 ver­wacht ik dat we vol­le­dig af­stap­pen van het pa­gi­na per pa­gi­na ont­wik­ke­len van een web­si­te. We gaan naar een com­pleet sys­teem toe, waar­in elk ele­ment uit de web­si­te apart ge­sti­leerd en ge­co­deerd gaat wor­den. Al die ele­men­ten bij el­kaar vor­men ver­vol­gens de web­si­te.

Voor­heen maak­te ik een ont­werp en werk­te dat ont­werp pa­gi­na voor pa­gi­na uit. Het kwam voor dat ik 6 keer het­zelf­de ele­ment, zo­als een but­ton, bouw­de. Met Ato­mic De­sign bouw ik niet 6 keer de­zelf­de but­ton, maar de­sign ik de­ze 1 keer en ge­bruik ik hem over­al waar ik wil.

Word­press kwam al eer­der met Re­pe­a­ta­ble en reu­sa­ble con­tent're­pe­a­ta­ble en reu­sa­ble con­tent'. En de her­bruik­baar­heid van con­tent op een si­te wordt steeds ver­der ont­wik­keld. Een ont­wik­ke­ling die ik van har­te toe­juich. Het maakt het voor ons als de­sig­ners en de­vel­o­pers mak­ke­lij­ker en de pro­duc­ten voor on­ze klan­ten wor­den be­ter. De web­si­te is bij­voor­beeld be­ter schaal­baar en we zijn in staat om snel­ler aan­pas­sin­gen door te voe­ren.

Flat de­sign

Een an­de­re grap­pi­ge ont­wik­ke­ling is die van flat de­sign. Twee jaar ge­le­den werd flat de­sign ge­ïn­tro­du­ceerd. In 2016 werd het ge­per­fec­ti­o­neerd en in 2017 zul­len we er weer van­af gaan be­we­gen. Het idee van flat de­sign is: al­les moet func­ti­o­neel zijn. But­tons, me­nu-items, icoon­tjes, al­les werd ge­stript en al­leen de ba­re es­sen­ti­als ble­ven over.

Maar wat je nu ziet is dat men diep­te mist in ele­men­ten. Diep­te die een func­ti­o­na­li­teit ge­bruiks­vrien­de­lij­ker maakt. Denk aan drop sha­dows of gra­dients. De knop­pen in flat de­sign ken­nen geen scha­duw­tjes. Al­les is recht­toe, recht­aan. Maar in 2017 komt de­ze diep­te weer te­rug. We blij­ven flat, maar dan iets min­der. Hier­door kun­nen ge­brui­kers be­ter on­der­scheid ma­ken tus­sen call to ac­ti­on­but­tons en de rest van het de­sign. Na­vi­ge­ren wordt daar­door nog mak­ke­lij­ker.

Mi­cro in­ter­ac­tie

Een an­der voor­beeld van be­te­re na­vi­ga­tie zijn de mi­cro-in­ter­ac­ties. Heel be­lang­rijk voor de user ex­pe­rien­ce. Op mo­bie­le te­le­foons zien we de­ze klei­ne in­ter­ac­ties vaak te­rug. Een mi­cro-in­ter­ac­ties is een klei­ne, maar krach­ti­ge ani­ma­tie van een be­paald ele­ment. Denk aan de in­ter­ac­tiein­ter­ac­tie als je klikt op een me­nu-icoon of als je aan het ein­de van een pa­gi­na komt. Het is een vi­su­e­le feed­back naar de ge­brui­ker, zo­dat hij weet wat er ge­beurt. Het be­ge­leidt de ge­brui­ker naar de vol­gen­de stap. En­ter­tai­ning en in­for­ma­tief.

In 2017 wor­den de­ze mi­cro-in­ter­ac­ties steeds uit­ge­brei­der en ge­de­tail­leer­der. Ik volg het Ma­te­ri­al De­signMa­te­ri­al De­sign van Goog­le op de voet. In de­ze uit­ge­brei­de 'stu­die' be­kijkt Goog­leGoog­le hoe de­sign kan aan­slui­ten op de ech­te we­reld. Hoe be­we­gen wij ons? Hoe be­we­gen din­gen in een ruim­te? En hoe kun je dat ver­ta­len naar on­li­ne de­sign.

Na­tuur­lijk zijn er nog veel meer trends gaan­de dan ik met jul­lie heb be­spro­ken. We wer­ken in een snel ver­an­de­ren­de we­reld. Als de­sig­ner vind ik het be­lang­rijk om bij te blij­ven en te ex­pe­ri­men­te­ren. Al­leen zo weet ik wel­ke trends om­ge­zet wor­den naar blij­ven­de con­cep­ten.

Ik ben be­nieuwd wat 2017 ons nog meer gaat bren­gen. Ik denk heel veel mooie din­gen. Maar voor nu wens ik jul­lie al­vast fij­ne da­gen!