6 dingen die ik onthoud van SmashingConf Barcelona

Geschreven door Bram op 25/10/2017

Smashing Magazine is voor mij een van de meest toonaangevende (online) magazines op het vlak van webdesign en frontend. Die combinatie maakt het zo interessant. Het gaat niet louter over design, maar ook over usability, CSS en HTML.

SmashingConf Barcelona stond daarom met stip in mijn agenda genoteerd, en stelde niet teleur. Twee dagen lang deed ik tonnen inspiratie op van absolute autoriteiten in mijn vakgebied. Dat vraagt om een kleine recap, in de vorm van 6 take-aways.

“Geïntegreerde communicatie vraagt om brand guidelines en design principles.”

Brad Frost toonde aan hoe verschillende teams binnen een onderneming, zoals designers, developers maar ook salespersonen, beter kunnen samenwerken aan de hand van design principles en guidelines. Als iedereen toegang heeft tot een database met dezelfde huisstijl en guidelines, is de output altijd mooi in lijn met wat de onderneming wil uitstralen.

Dat lijkt misschien voor de hand liggend, het gebeurt veel te weinig. Brad Frost toonde aan dat er veel handige hulpmiddelen zijn. Met tools zoals Brand.ai of Frontify, krijgen teams altijd en overal toegang tot de juiste fonts, logo’s, huisstijl en een pak algemene richtlijnen. Developers vinden er zelfs syntax-richtlijnen en copywriters do’s & dont’s omtrent tone-of-voice van de bedrijfscommunicatie.

Die tools zijn op zich weinig wereldschokkend, maar het is indrukwekkend wat je er allemaal in kan samenbrengen.

“Een seconde duurt online niet altijd even lang.”

Stéphanie Walter is een usability expert die met heel kleine aanpassingen de tevredenheid van websitebezoekers verhoogt. Het gekke is: eigenlijk past ze niets aan op het vlak van gebruiksvriendelijkheid. Ze wees erop dat er ook zoiets is als perceptie. Omdat we in passieve wachtmodus de wachttijd met 36% overschatten, kan je ervoor zorgen dat de websitebezoeker in actieve modus blijft.

Je kreeg vast al eens te maken met dit nieuw usability-fenomeen. Wie op Pinterest scrollt, ziet een fractie van een seconde een gekleurd vlak vooraleer de foto ingeladen is. Puur psychologisch krijgen we daar een lekker gevoel bij: het gaat vooruit. Kleine animaties kunnen het verschil maken. Walters verklaarde daarom ook de oorlog aan saaie laadschermen. Een kleine animatie tijdens het laden, maken die eeuwigdurende seconden plots verdraagzaam. Een kwestie van een beetje magie en stimulatie van het brein.

“Gebruik SVG”

Tyler Sticka ging op zijn knieën zitten en smeekte webdesigners om meer SVG-bestanden te gebruiken in ontwerpen. Dat bestandsformaat is “even oud om een auto te besturen” maar wordt gek genoeg amper gebruikt. De voordelen zijn nochtans groot: SVG-afbeeldingen zijn vectorieel, waardoor je er geen extra retina-versie voor hoeft te maken.

Heel leuk om dat te horen, aangezien we onlangs bij Newance de SVG-bestanden uitgeprobeerd hebben voor een nieuwe website. Een aanrader!

“Breek de regels van de kunst!”

Het is altijd verfrissend om tijdens een conferentie naast best practices ook eens iets te zien met een hoek af. En misschien net daarom dat die voorbeelden het meest bijblijven. Vitaly Friedman - mede-organisator van de conferentie - toonde ons een hoop websites die doelbewust bepaalde regels aan de laars lappen.

Niet minder dan geniaal vond ik de website voor Hans Brinker Budget Hotel. Dat hotel werd ooit verkozen tot slechtste ter wereld, waarna de hotelketen dat uitspeelde en een ware cultstatus uitbouwde. De website spreekt voor zich: 1000 verschillende fonts, verkeerde uitlijning en maffe foto’s. Geef toe: het plaatje klopt helemaal.

Andere leuke, rebelse voorbeelden:

  • Probeer eens aan te duiden dat je minderjarig bent op de website van Austin Beer Works
  • Bloomberg publiceerde een special over Elon Musk die héél erg nineties is
  • De website van het Franse webbureau Waaark staat bol van de maffe animatie-effecten

“Gebruik Font Face Observer om webfonts in te laden.”

Correct webfonts inladen is belangrijk. Met Font Face Observer heb je controle bij het inladen van je webfonts. 

Font Face Observer werkt met verschillende web font services zoals: Google Fonts, Typekit, Fonts.com, and Webtype.

Bekijk de website van Font Face Observer of gebruik de onderstaande code:

CSS:

 

Javascript:


var font = new FontFaceObserver('Output Sans');
font.load().then(function () {
  console.log('Output Sans has loaded.');
});
    

 

“Waaaaaauw.”

Kijk, als designer kan ik af en toe uit mijn lood geslagen zijn door bloedmooi ontwerp. Ik ontdekte op SmachConf Barcelona het werk van Gemma o’Brien & Yuko Shimizu, en kan alleen maar diep onder de indruk zijn.

Daarom sluit ik graag af met deze wonderbeelden:

Geschreven door
Bram Lodens

Webdesigner. Ontwerpt webpagina’s, maar spreekt ook een aardig mondje programmeertaal. Liep de Marathon van Amsterdam in 3:30:12.

Plaats een reactie

Reageer op dit artikel

Wordt niet weergegeven op de website.