Essentiële ontwerptrends, december 2016
Is het je wel eens opgevallen dat een bepaald ontwerpelement gewoon blijft opduiken? Zelfs die kleine details die er enigszins onbeduidend uitzien, kunnen indicatoren van ontwerptrends zijn. Dat geldt in het bijzonder voor de elementen in de verzameling van deze maand.
Elk van deze trends - witte randen met een webontwerp, cinemagraphs en kleine laadanimaties - zijn ogenschijnlijk eenvoudige details die de visuele ervaring voor gebruikers verbeteren.
Dit is de trend in het ontwerp van deze maand:
1) Witte randen
Meer webontwerpen gebruiken witte randen of kaderen rond de omtrek van het ontwerp in de webbrowser. Het is een nieuwe draai aan een oud idee toen er meer websites werden gebouwd naar bepaalde formaten en framing werd gebruikt voor vreemde browserbreedten.
Het is iets dat vervaagde toen meer ontwerpers opteerden voor responsieve ontwerpen op volledige breedte.
De nieuwe draai met framing is interessant en is een leuke manier om een canvas voor het ontwerp te maken. De meeste sites die deze trend gebruiken, bevatten een witte, maar niet verplichte, rand rond het ontwerp. Het is een paar pixels breed en wordt meestal rond drie of vier zijden van het ontwerp geplaatst. (Sommige kiezen ervoor om het kader van de onderkant van het ontwerp te laten staan om scrollen te stimuleren.)
Het leuke van de witte rand is dat het ontwerp schoon is met witte lijnen die kunnen helpen om focus te brengen op sterke kleurkeuzes, het oog van de rand van het scherm naar andere lichte elementen (zoals tekstvakken of call-to-action) trekken en randafwerking kan helpen een achtergronddoek te maken voor parallax-scrollen of andere geanimeerde effecten.
Camden Town-brouwerij doet dit uitzonderlijk goed. De witte omlijsting vult zich tussen de elementen van het ontwerp om diepte en focus voor de gebruiker te creëren. Witte scheiding scheidt elke nieuwe inhoudsectie op het scherm en draagt bij aan de algemene organisatie van het ontwerp. (Bovendien brengen witte accenten echt het sterke rode en zwarte kleurenpalet naar voren om te voorkomen dat de combinatie te overweldigend wordt.)
2) Cinemagraphs
Cinemagraphs zijn foto's met een bewegingselement erin. Het kan van alles zijn, van een foto van een persoon die met zijn ogen knippert tot de subtiele bewolking in de lucht waar niets anders beweegt. Hoewel de meest voorkomende toepassingen van de designtrend nog steeds lijken te zijn in advertenties en sociale media, beginnen webontwerpers deze "live-foto" -techniek ook te integreren.
Het werkt omdat gebruikers geïntrigeerd zijn door beweging. Het is effectief om veel van dezelfde redenen dat video een goede optie is om de aandacht van een gebruiker te trekken. Beweging en actie is boeiend. Het is interessant. Het voelt echt.
Als het gaat om het werken met cinemagraphs, is de bonus dat je een ontwerp met beweging kunt maken, maar zonder een deel van de hoge productie die bij een videoproject hoort.
De truc om cinemagraphs te laten werken, is door de beweging in de werkelijkheid te rooten. Zelfs als de scène meer ingebeeld is, zoals Monochrome Parijs , de wetten van de natuurkunde zouden van toepassing moeten zijn op beweging op het scherm. Water stroomafwaarts stromen, bijvoorbeeld, de zwaartekracht zou een kracht moeten zijn in hoe beweging plaatsvindt.
De beweging moet ook eenvoudig en subtiel zijn. Te veel beweging en een video is misschien een betere optie. Wat gebruikers in een cinemagraph aantrekt, is dat verrassingselement. Wat eruitziet als een foto in een hero image heeft eigenlijk iets dat erin gebeurt. Die kleine divot helpt mensen erbij te betrekken, houdt ze langer bezig met het ontwerp en leidt hopelijk tot een websiteconversie.
3) Tiny Loading Animations
Laadtijden zijn een groot probleem. Maar u kunt niet altijd rekening houden met de snelheid van het netwerk waarop een gebruiker zich bevindt; dat is waar kleine laadanimaties een groot probleem kunnen worden.
Wat anders is aan de kleine laadanimatietrend is dat je het soms ziet, soms ontwerp je geen element. Het ontwerpteam heeft hoe dan ook speciale aandacht besteed om ervoor te zorgen dat elke gebruiker met een positieve ervaring naar de website komt.
Deze kleine animaties zijn herkenbaar aan het feit dat ze niet echt deel uitmaken van de gebruikerservaring die meetelt voor het algemene websitedoel. Het is een eenvoudig, klein element dat even snel de aandacht trekt terwijl het ontwerp van de primaire site wordt geserveerd.
Het leuke van de trend is dat deze kleine laadanimaties echt klein zijn, van de grootte van het beeld zelf tot de actie op het scherm, er is niet veel te zien, maar wat er is, is absoluut heerlijk.
Hier zijn drie geweldige voorbeelden:
- Hannah Purmort's loading animation is een enkele beweging in de tegenovergestelde kleurencombinatie van het hoofdscherm. De streek wordt ook in het scroll-effect door het ontwerp gevoerd.
- Susa Ventures heeft een klein pictogram met een klein balkje. Deze grijpt je aandacht omdat de kleine gorilla visueel interessant is en je nieuwsgierig maakt naar de inhoud van de website.
- FPG gebruikt een schets die op het scherm lijkt te worden getekend terwijl de rest van de startpagina wordt geladen. De enige cue dat het eigenlijk een laadanimatie is, is dat de rest van het scherm veel gedetailleerder is als het eenmaal is geladen met hardloopvideo en nog meer schetsen. Het effect is naadloos en is bijna voorbij voordat de gebruiker zich realiseert dat het is begonnen.
Conclusie
Details vormen de kern van elk goed ontwerp. Het is belangrijk om te onthouden dat het ontwerpen van (en rekening houden met) dingen die niet elke gebruiker zal opmerken belangrijk is. Dat is de manier waarop elk van deze trends met elkaar in verband staat - door kleine ontwerpelementen die geen vanzelfsprekend onderdeel vormen van de algehele esthetiek.
Die kleine elementen kunnen het ding zijn dat je website echt onderscheidt voor een gebruiker. Het is misschien het element van verrukking dat iemand terugbrengt naar jouw ontwerp. Details kunnen de onderscheidende factor zijn tussen succes en falen.
Van welke trends hou je nu (of haat)? Ik zou graag enkele van de websites willen zien waar je gefascineerd mee bent. Stuur me een link op Twitter ; Ik hoor graag van je.