Webdesigntrends van 2016

Hipmarketing Google 0 Comments

Webdesigntrends

De huidige trend heeft z’n oorsprong in het begin van 2014, toen er op het vlak van webdesign aanzienlijke verbeteringen plaatsvonden met betrekking tot website-ontwikkeling, stijl en contentmanagement. Het grootschalige gebruik van mobiele apparaten heeft ontwikkelaars bijvoorbeeld aangemoedigd om zich steeds meer te richten op de (on)mogelijkheden van webpagina’s op de schermen van smartphones en tablets. Dit leidde vervolgens tot een explosie aan responsive designs, die inmiddels de meest gewaardeerde eigenschap van een website zijn geworden. Andere verbeteringen omvatten de algemene stijl van een webpagina. Sites begon er frisser uit te zien, dankzij de invoering van brede achtergronden, zogenoemde parallax scrolltechnieken en innovatieve hero sliders.

E-commerce-platformen droegen op hun beurt ook veel bij aan het huidige uiterlijk van de meeste internetbronnen. Het enorme wereldwijde succes van WordPress leidde tot de toename van nieuwe websites, die gebruik maakten van de meegeleverde thema’s en de gemakkelijk te gebruiken basis ontwikkeltools. Het nadeel hiervan is natuurlijk wel, dat er inmiddels zo veel websites zijn die er ongeveer hetzelfde uitzien, dat het vaak moeilijk is om het onderscheid te ontdekken in hun inhoud.

Wat kunnen we het aankomend jaar verwachten op het vlak van webdesign? Zal alles hetzelfde blijven of kunnen we iets nieuws tegemoet zien? Welke trends zullen vanaf januari en later hoogstwaarschijnlijk populair worden? Al deze vragen zijn van het grootste belang voor e-commercebedrijven, wiens doel het is om hun websites relevant en aantrekkelijk te houden voor het oog van hun klanten.

Laten we proberen om door de loep te kijken, om zo te zien welke webdesigntrends het verdienen om in 2016 omarmd te worden.

Webdesigntrends van 2016: Een zoektocht naar originaliteit

Zoals we al eerder zeiden is het tegenwoordig nogal lastig om online origineel te zijn. Zodra een website een nieuw ontwerp lanceert, kunt u ervan uitgaan dat binnen een paar weken tientallen andere websites er net zo uit zullen zien. Hierdoor wordt het volstrekt onmogelijk om de ontdekker van de trend te identificeren. De neiging tot massale adoptie is een soort van neveneffect van de enorme verspreiding van informatie op het internet. Er zijn echter nog mogelijkheden voor e-commercebedrijven om hun originaliteit te behouden.

Een manier is om zelfstandig authentieke elementen te maken, zodat anderen ze niet voor eigen gebruik kunnen kopiëren of stelen. Denk hierbij aan op maat gemaakte afbeeldingen en animaties die door bekwame ontwerper zijn gemaakt. Of maak gebruik van de meest handige Flash alternatieven, zoals HTML5, JS, of CSS3. Er is geen speciale techniek die op dit vlak de boventoon voert, dus moet u bereid zijn om te experimenteren met verschillende stijlen en combinaties om zo te ontdekken wat perfect aansluit op uw individuele behoeften.

Een andere manier om de slag om de originaliteit te winnen heeft betrekking op de inhoud zelf. Het is op dat vlak weliswaar echt moeilijk om mensen met iets te verrassen, maar als u nog steeds van plan bent om de aandacht van klanten te trekken zonder dat uw productassortiment verandert, zal u vooral moeten gaan werken aan de meest originele manier van presenteren. Maak de meest geschikte combinatie van afbeeldingen, tekst en titels op één pagina, om zo een frissere uitstraling en een betere feedback van gebruikers te kunnen krijgen.

Flat design

Richt u vooral op een plat of bijna-plat ontwerp

Deze trend is

een onderdeel van de algemene trend in webdesigns die in 2014 begon. U had wellicht zelf kunnen bedenken dat er in dit geval een verband bestaat met de toenemende populariteit van mobiele gadgets. Het heeft er alle schijn van dat deze trend ook in 2016 actueel blijft en dat deze zelfs uit zal waaieren van mobiele websites naar desktopversies.

De eerste kennismaking met het platte ontwerp vond plaats na de release van iOS 7/8 en Android 5.0. In het laatstgenoemde geval werkte ook het exclusieve materiaalontwerppatroon daar in positieve zin aan mee. Dit ontwerp zag er, vanwege een opbouw bestaande uit speciaal kleurgebruik, eenvoudige vormen en een nette typografie, aantrekkelijk uit. Dit zorgde vervolgens voor een groot deel van het minimalisme in de perceptie van de visuele inhoud van een website.

Het belangrijkste voordeel van het platte ontwerp is, dat het bijna geen gewicht in de strijd gooit op het vlak van de laadsnelheid van een pagina. Dat is ook vooral handig als u behoefte heeft aan het verbeteren van de rangschikking in de zoekmachine van Google. Deze methode bevordert niet alleen de algehele responsiviteit van een website, maar geeft ook meer ruimte aan elementen die middels geavanceerde code worden gegenereerd en daarmee de algemene stijl van uw pagina positief beïnvloeden.

Er is ook een nieuwer alternatief voor het oorspronkelijke platte design, wat wordt aangeduid als bijna-plat. Het verschil schuilt in een hogere mate van diepte, complexe schaduwen en een zekere mate van dimensie. Velen zijn het er over eens, dat het bijna-platte design veel meer te bieden heeft aan de toekomstige stijl van webpagina’s. Het ziet er namelijk zowel op desktop- als op mobiele versies aantrekkelijk uit. Google heeft dit ontwerp met succes omarmd voor haar e-mailservice. Het is dus wellicht redelijk om hier rekening mee houden, wanneer het tijd is om een nieuwe opkomende trend vast te stellen.

Micro App

Micro app oplossingen

Micro apps worden vooral op een groot aantal websites ingezet om te voorkomen dat gebruikers eindeloos moeten zoeken en klikken om informatie te kunnen bereiken. Het zijn vederlicht nuttige apps die op het meest geschikte moment tevoorschijn komen op een site: bijvoorbeeld na het scrollen naar het einde van een artikel, tijdens de weergave van een galerie, voor het verlaten van de pagina, enz. Ze zien eruit als eenvoudige informatieblokjes en stimuleren gebruikers een specifieke actie te ondernemen: te registreren, een bestelling te plaatsen, een vraag stellen en nog veel meer. Zodra er een interactie met zo’n informatieblokje ontstaat, wordt de gebruiker automatisch naar een nieuwe pagina of een gespecialiseerde wizard doorgestuurd, die helpt met de rest van de gekozen procedure.

De hulp van deze micro-apps op website kan weliswaar niet bijdragen aan de algehele snelheid, maar het gebruikersgemak van de pagina’s neemt wel toe. Kortom, dit is een belangrijke stap voor het verbeteren van online gebruikerservaringen. Deze techniek heeft dus alle kansen om de komende jaren relevant te blijven op het vlak van webdesigntrends.

Van klikken naar scrollen

De huidige webdesigntrend verschuift snel van simpelweg klikken naar verticaal scrollen, waardoor gebruikers alle benodigde content op slechts één pagina te zien krijgen. Deze techniek werd in eerste instantie vooral door de sociale netwerken gebruikt, totdat iemand besefte dat het ook perfect toegepast kan worden bij andersoortige pagina’s. Het probleem van verticaal scrollen is echter dat het niet gebruikt kan worden voor het weergeven van alle relevante content (vooral als er sprake

is van pure  platte

tekst). Een lezer z

al waarschijnlijk niet uitgebreid de tijd nemen om naar beneden te scrollen om slechts één belangrijk punt te kunnen bekijken.

De verticale scroll-techniek wordt vaak gebruikt voor de landing pages. Deze zijn namelijk speciaal gemaakt om de aandacht van gebruikers te trekken en bevatten de belangrijkste kenmerken van een website. Het is ook een goede methode om in te zetten op websites die uit slechts één pagina bestaan, zodat u op die manier alle beperkt beschikbare content overzichtelijk kunt presenteren.

Het concept van verticaal scrollen is recentelijk opgesplitst in twee populaire richtingen:  eindeloos scrollen en parallax scrollen.

Bij eindeloos scrollen worden gebruikers telkens automatisch nieuwe delen van de content gepresenteerd, zodra de gebruiker het ogenschijnlijke einde van de pagina heeft bereikt. Sociale netwerksites, zoals Tumblr, gebruiken deze methode  om hun abonnees gemakkelijker door een groot aantal foto’s te laten navigeren. Eindeloze scrollen kan zowel voor eenvoudige tweelaags-websites, alsook voor complexere varianten worden gerealiseerd. Denk in dat laatste geval bijvoorbeeld aan geavanceerde animaties in diverse afmetingen door gebruik te maken van CSS3 en HTML5.

Parallax scrollen is een soort scrollen wat gebaseerd is op de illusie van beweging. Ontwerpers ontwikkelden deze  originele grafische technische oplossing, door tijdens het scrollen de achtergrondelementen langzamer te laten bewegen dan wat op de voorgrond te zien is. Dit geeft tevens de mogelijkheid om met verschillende soorten 2D grafieken te experimenteren, wat veelal tot interessante en zelfs artistieke resultaten leidt. Mélanie F is een mooi voorbeeld van de implementatie van high-end parallax scrollen.

Meer aandacht voor de typografie

Hoewel het vinden van een goed lettertype tegenwoordig geen probleem meer is dankzij een heleboel gratis beschikbare fonts op het web, is het omgaan met typografie nog wel steeds een probleem voor veel website-ontwikkelaars. Typografie is van essentieel belang om de aandacht van de gebruiker te trekken en het heeft de macht om:

  • uw tekstuele inhoud relevanter te maken;
  • het design van uw website te verbeteren;
  • uw merk gemakkelijker te laten onthouden.

Aan de andere kant is het natuurlijk ook mogelijk om middels een fout gekozen lettertype de eerste indruk die gebruikers van u krijgen compleet te verprutsen. Als website-eigenaar kunt u op dit vlak eigenlijk geen verkeerde keuze maken, als u de hulp van een bekwame ontwerper inschakelt voor het gebruik van aangepaste lettertypen. Hierdoor wordt uw merk uniek en kan men er makkelijker een associatie mee maken. Vergeet niet dat de typografie niet alleen onderdeel van het ontwerp is, maar vooral ook als middel fungeert om een sfeer te creëren, uw verhaal te vertellen en uw ideeën openbaar te maken.

Dit jaar is vooral het gebruik van grote lettertypes de trend in de typografie. Het is redelijk om aan te nemen dat deze internettrend  ook in 2016 stand houdt en zelfs nog populairder gaat worden. Websites zoals thegrid.io, primeandfire, adayinbigdata en anderen hebben met succes grote typografie bij hun bezoekers geïntroduceerd , wat eraan bijdraagt dat koppen en merknamen beter gelezen worden.

Een grotere nadruk op het testen van bruikbaarheid

Dit wordt zeker een trend van 2016. Het testen van bruikbaarheid is een relatief nieuw, maar zeer progressieve onderdeel van applicatie-ontwikkeling. UX-ontwerpers (waarbij UX staat voor User Experience, oftewel gebruikerservaring) zijn vooral belangrijk voor de ontwikkeling van mobiele en webapps en ze worden tegenwoordig ingezet wanneer er een grote behoefte is aan het creëren van een geavanceerde en zeer gebruiksvriendelijke omgeving. Hoe meer u de bruikbaarheid van uw website of app test, des te succesvoller zal het eindresultaat zijn. Google en Facebook waren de eersten die gespecialiseerde geb

ruikersinstrumenten introduceerden om zo

de algehele prestaties van apps en site

s op hun platformen te kunnen controleren. Volgend jaar zal er naar verwachting nog meer nadruk komen te liggen op het testen van bruikbaarheid. Aarzel dus niet om het eens te proberen.

UI animaties

Na de massale overstap van Flash naar CSS en JavaScript zijn veel slimme oplossingen ingevoerd om de uitstraling van moderne webpagina’s verder te verbeteren. Originele video badges, catchy GIFs en kleine pictogram-animaties zijn steeds vaker dagelijkse kost op het vlak van mainstream webdesign. In het jaar 2016 zal nog uitgebreider gebruik worden gemaakt van exclusieve CSS-transities, JS-bibliotheken en handige tools, zoals GreenSock.

Flash naar CSS en JavaScript

Responsive webdesign

Het is de moeite waard om responsive webdesign wat nader te bekijken. De zogenoemde responsiviteit is inmiddels zo cruciaal geworden, dat veel websites gedoemd zijn te mislukken als ze op dat vlak niet voldoen aan de eisen van de moderne zoekmachines. Zo heeft Google een speciale tool ontwikkeld waarmee website-eigenaren de responsiviteit van hun bronnen kunnen controleren. De middels die tool getoonde resultaten zijn meestal laag als uw site niet mobiel-vriendelijk is. Met een dergelijk lage score heeft u dan waarschijnlijk ook weinig kans op een goede indexering in de zoekresultaten van Google. Een goede reden dus om meer energie te steken in het zo responsive mogelijk maken van uw website.

Responsive webdesign (of gewoon RWD) is niet langer een nieuwe manier van websites bouwen, maar een noodzakelijk onderdeel van elk ontwikkelingsproces. Het combineert vereenvoudigde websitenavigatie, intuïtieve pagina-elementen en een slimmere inhoud van de architectuur met elkaar. Maar het belangrijkste onderdeel van de ontwikkeling ligt op het vlak van de mogelijkheid om site-onderdelen en -inhoud afhankelijk van de breedte van het weergavescherm te kunnen variëren. RWD is gericht op het herkennen van het apparaat dat op dat moment voor de navigatie wordt gebruikt en transformeert een pagina op basis van die informatie naar de meest geschikte vorm. Voor schermen met een lagere resolutie zal de lay-out van een website bijvoorbeeld dusdanig worden aangepast, dat de omvang van de menubalken en de kolommen verticaal geminimaliseerd wordt ten behoeve van de mobiele interface. Hetzelfde is van toepassing op lettertypen en links die gebruikt worden in de inhoud van websites.

Recente studies rondom responsive webdesign, hebben aangetoond dat dergelijke sites een aanmerkelijk hoger percentage bezoekers krijgen van gebruikers die online actief zijn op mobiele apparaten. Dit is een duidelijk bewijst van de kracht van de trend. We kunnen dan ook gerust stellen, dat RWD waarschijnlijk voor een behoorlijk lange periode een basisnorm van moderne websitedesigns zal blijven. Dus ongeacht welke trend erna komt, het zal nog steeds (deels) RWD bevatten voor het bouwen van web- en mobiele toepassingen.

Kaartontwerp voor kleine apparaten

Als een logisch gevolg van de adoptie van responsive webdesigns, is er een toenemende behoefte aan het gebruik van kleinere website-elementen in kleinere interfaces, die op hun beurt op kleinere schermen passen. Dat is het moment waarop het zogenoemde kaartontwerp echt van pas kan komen. Het kaartontwerp geeft de inhoud van uw website in principe weer middels aparte ruimtes die simpelweg uit kaarten bestaan. Hierdoor wordt elk stukje informatie evenredig relevant en aantrekke

lijk voor een kijker. Elke kaart kan de inhoud geheel of ged

eeltelijk weergeven, waardoor ruimtebesparing plaatsvindt en

dit tevens motiverend werkt voor het bekijken van de volledige versie.

Het systeem van de kaartontwerpen wordt inmiddels ingezet door online reuzen als Twitter, Pinterest, Google Now en Apple Glances. De methodiek van het bouwen van kaartontwerpen is echter nog vers genoeg om te zoeken naar originele oplossingen en manieren om ze uit te voeren.

Nieuwe ontwerptalen

Ook talen kunnen in staat zijn designtrends in beweging te zetten. In feite maken nieuwe ontwerptalen het veelal mogelijk om innovatievere oplossingen en stijlen te introduceren. Een nieuw Google materiaalontwerp, wat het levenslicht in 2014 zag, heeft de afgelopen anderhalf jaar uiteindelijke als basis gediend voor de meerderheid van mobiele apps en websites. Een ander voorbeeld is de FlatMetro-taal, die dankzij Microsoft’s Windows 8 populair werd. Deze talen zijn voornamelijk befaamd vanwege hun innovatieve gebruik van typografie, kleuren en animatie in zowel 2D als 3D. We durven dan ook te voorspellen dat we volgend jaar een reeks nieuwere talen zullen gaan zien , die helpen bij het creëren van nog geavanceerdere dingen op het gebied van webdesign.

Visuele verhalen

Het maakt niet uit hoe goed uw inhoud is, als deze niet aan zijn of haar verwachtingen voldoet, dient u te begrijpen dat het nooit een gebruiker zal bereiken. In het algemeen geven gebruikers de voorkeur aan catchy, eenvoudige en duidelijk geformeerde inhoud, in plaats van saaie lange paragrafen vol  platte tekst en foto’s, die hen veelal niets anders vertellen dan dat je de afbeeldingen via Google Images hebt gevonden en ze naar je eigen website hebt gekopieerd. Perfect georganiseerde inhoud moet bestaan uit een fraaie combinatie van tekst, afbeeldingen en zelfs lege ruimte, om zo een kijker te kunnen boeien.

Voor een goede structuur van de inhoud is het belangrijk om te begrijpen dat tekst en afbeeldingen, hoewel verschillend van aard, elkaar aanvullen. Zelfs in de context van een webpagina. U kunt bijvoorbeeld een achtergrond maken, die bestaat uit een foto met een hoge resolutie of wellicht zelfs gebruik maken van video’s en deze vervolgens toepassen met behulp van de eerder genoemde parallax scrolltechniek. Deze methode maakt het mogelijk om waardevolle stukken tekst op de voorgrond te presenteren, terwijl bijpassende foto’s de visuele ondersteuning vormen voor de duiding van de tekst. De Story.glass website is wat dat betreft een zeer goed voorbeeld van het op een slimme manier vertellen van visuele verhalen, die de moeite waard zijn om tot u te nemen. We kunnen erop wachten dat deze techniek door een aantal websites wordt overgenomen en daarmee vervolgens pogen om de beste look voor hun merk te vinden.

Regelmatig de snelheid testen

Met al deze aankomende designtrends, zullen e-commerce retailers meer aandacht moeten gaan besteden aan de hoeveelheid gewicht die ze willen toekennen aan het toepassen van al die innovatieve thema’s en code gegenereerd applicaties op hun websites. Voor een ieder die graag de prestaties van zijn of haar website in de gaten wil houden, raden wij aan gebruik te maken van de Google Page Speed Tool. Hiermee kunt u zien of uw site overbelast wordt door buitensporige elementen en of het nodig is om de prestaties daarvan te verbeteren. Omdat de snelheid een noodzakelijk onderdeel van een Responsive Web Design is, moet u zich richten op een website-ontwerp wat zo snel mogelijk is. In het bijzonder dient u zich te concentreren op:

  • snelle hosting;
  • de voorkeur te geven aan SVG-afbeeldingen in plaats van PNG’s;
  • het maken van een aparte reeks afbeeldingen voor standaard schermresoluties en een aparte reeks voor Retina-displays;
  • het plaatsen van script-tags aan de onderkant van de pagina;
  • het comprimeren van CSS- en JS-bestanden bij de implementatie.

Ghost kn

oppen

Ghost knoppen kunnen perfect gecombineerd worden met een plat ontw

erp, waardoor de totale minimalisme van een webpagina nog beter tot z’n recht

komt. Dergelijke knoppen bestaan uit een klikbaar gebied, wat voorzien is van een transparante achtergrond en een duidelijke grens. In tegenstelling tot een reguliere felgekleurde knop, moedigt deze variant nog meer aan tot klikken.

Sticky navigatiemenu

Deze functie kan perfect worden toegepast bij websites die gebruik maken van verticaal scrollen. Een zogenoemde sticky navigatiebalk is een goede mogelijkheid voor een gebruiker om toegang te krijgen tot een bepaalde websitecategorie, zonder dat men daarvoor noodzakelijk terug dient te keren naar de top van een pagina. Hoewel deze optie enige ruimte op het scherm inneemt, kan de krachtige werking ervan als zeer positief beschouwd worden.

Verborgen menu’s

Verborgen menu’s zijn vooral populair onder degenen die in eerste instantie geen fan zijn van de sticky navigatiebalk. Sommige ontwerpers zien dergelijke menu’s als de belangrijkste bedreiging voor een adequate waarneming van de sitegebruikers, terwijl anderen geneigd zijn om te denken dat ze de ruimte innemen die juist meer bedoeld is voor de inhoud in plaats van navigatie-elementen. Verborgen menu’s worden inmiddels ingezet bij webdesigns voor zowel mobiele als desktop-versies. Het is moeilijk te voorspellen welke menustijl precies de overhand gaat krijgen in de aankomende trend, maar u kunt nu al wel beslissen welke meer bij u in de smaak valt.

Achtergronden met patronen

In eerste instantie lijkt het er misschien op dat patronen op de achtergrond niets te maken hebben met een betere leesbaarheid van de tekst die erboven is geplaatst. Maar de algemene ervaring van webdesigners bewijst het tegendeel. Uit tests is namelijk gebleken dat achtergronden met patronen voor een aanzienlijke verbetering zorgden van de perceptie van een tekst en dat de algemene tijd die aan het lezen ervan besteed werd ook omhoog ging.

Conclusie

Als u denkt dat de hierboven genoemde webdesignfuncties te uiteenlopend zijn om allemaal op één website te worden gebruikt, dan heb je helemaal gelijk. Maar u hoeft niet per se alles in één keer te gebruiken. Sommige van de hedendaagse trends zullen een aantal jaren populair blijven en sommigen zullen pas in het nieuwe jaar in zwang raken, omdat ze wat meer tijd nodig hebben om zich te manifesteren. Toch kunt u nu al evalueren welke trends het meest geschikt kunnen zijn voor uw merk. En – nog belangrijker – wat het meest geschikt is voor uw klanten. Zij zijn per slot van rekening de primaire beoordelers van uw uiteindelijke webdesign.

Bron: Firebearstudio