Webdesign zonder keurslijf

8 februari 2011 om 23:26

Veel websites zijn saai. Door ze heen klikken is eigenlijk net zoiets als bladeren door een telefoongids of woordenboek. Als je eenmaal hebt gevonden wat je zocht moedigt het ontwerp je niet echt aan om verder te bladeren. En hoewel dat in het geval van een telefoongids prima is, is dat voor veel websites juist ongunstig. Het doel van vrijwel elke website is juist om bezoekers te prikkelen om er langer te blijven en vaker terug te komen, niet waar?

Hoewel elke pagina in de papieren uitgave van Bright fraai vormgegeven is, is dat niet het geval bij de online variant. Elke pagina is gegoten in hetzelfde “keurslijf” waarbij de presentatie en plaatsing van tekst en beeld vast staat.

Toegegeven, een “gekeurslijfde” website kan er best mooi uit zien! Maar als je er één pagina van hebt gezien heb je ze allemaal wel gezien. Elke pagina gebruikt hetzelfde stramien, dezelfde typografie, kleuren en vormen. Er valt er wat dat betreft verder niets te ontdekken.

Drie verschillende bestemmingen op de website van een groepsreisorganisatie, één template. Strak en fris, maar o zo saai. Kijk er eens door je wimpers naar en zoek de verschillen. Hoe kan zo’n generieke pagina mij nu inspireren tot inschrijven voor een groepsreis?

Een offline benadering tot een online medium

Dat het ook anders kan hebben webdesigners zoals Gregory Wood en Jason Santa Maria laten zien op hun blogs: schoolvoorbeelden van “editorial design” toegepast op het web. Om preciezer te zijn:  “editorial webdesign”.  Elk artikel is een verrassing; inhoud en vormgeving beïnvloeden elkaar op een manier waardoor de boodschap maximaal versterkt wordt.  In plaats dat elk artikel in “het sjabloon” gegoten wordt, bepaalt juist de inhoud de typografie, kleur en vlakverdeling van de pagina.

Elk artikel op de blog van designer Jason Santa Maria heeft zijn eigen vormgeving. Santa Maria neemt veel vrijheid: zelfs logo, navigatie en typografie variëren qua stijl per pagina.

Gregory Wood is iets conservatiever: hij beperkt zich tot een paar lettertypen voor de koppen en de broodtekst en laat de navigatiebalk bovenin onveranderd.

Jongens als Greg en Jason zijn dankzij hun “offline roots” uitstekende vormgevers en spreken naast vloeiend Engels ook nog eens HTML en CSS. Ze benaderen de vormgeving van hun blog posts met een “offline-attitude”. Het is daarom niet verwonderlijk dat hun websites zo opzienbarend zijn. Die attitude werkt prima voor persoonlijke blogs van webdesigners, maar in hoeverre is het mogelijk en zinvol voor bijvoorbeeld e-commerce-, corporate- en nieuwssites? Laten we eerst kijken naar een definitie van editorial design.

Editorial design

Bij “editorial design” bepaalt het onderwerp van de publicatie het formaat, de kleuren, vlakverdeling, fotografie en typografie. Hierdoor is inhoud en presentatie eenheid, waardoor de boodschap zo helder mogelijk wordt overgebracht. Het resultaat is esthetisch aantrekkelijk en – zoals vaak de bedoeling – commercieel effectief.

“Offline” designers besteden over het algemeen veel tijd en zorg aan de vormgeving van elke individuele pagina binnen een publicatie. Om die reden lezen we zo graag onze geabonneerde Bright of  WIRED magazines “van kaft tot kaft” en bladeren we elk jaar geïnspireerd door de nieuwe IKEA gids, maar klikken we na het lezen van een via google gevonden pagina vaak niet verder naar de rest van de site. Elke pagina lijkt op elkaar en het ontwerp prikkelt de bezoeker simpelweg niet genoeg om de site verder te “ontdekken”.

 

Editorial webdesign

De laatste jaren lijkt er echter een “revolutie” op gang te komen, waarbij we steeds meer idiosyncrasieën uit de offline publishing wereld online zien worden toegepast. Denk bijvoorbeeld aan het gebruik van creatieve typografie (steeds vaker dankzij webfonts), paginavullende fotografie, originele illustraties, vrijere vlakverdelingen en variërende kleurpaletten. Dit soort websites onderscheiden zich sterk van het gros dat ontworpen is vanuit de geijkte “telefoongids”- of “onderdelencatalogus”-benadering.

De papieren versie van De Pers is een mooie krant om te zien: frisse kleuren, mooie typografie, fotografie en originele illustraties. Elke dag is er een cover story waar nét iets meer tijd aan is besteed qua vormgeving. Jammer genoeg is die zorg en aandacht niet terug te zien op de online versie van het artikel.

Natuurlijk, de duizenden artikelen die een website als Wehkamp.nl telt en de dagelijkse publicatiefrequentie van Wired.com maakt het ondoenlijk en onpraktisch om elke pagina apart vorm te geven. Daar is het web veel te dynamisch voor. Editorial webdesign kan echter op een andere manier worden toegepast. Bijvoorbeeld op landingpages, categorie pagina’s, een dagelijkse “cover story”, een maandelijkse “special”, een uitgelicht artikel enzovoorts. Editorial webdesign kan op deze manier een website voldoende verrassend, inspirerend en prikkelend maken.

 

De online uitgaven van Design Made In Germany worden met grote zorg en aandacht vormgegeven en gecodeerd in HTML en CSS. Het zou ondoenlijk zijn voor De Pers om elk artikel op deze manier vorm te geven, maar bijvoorbeeld wél de cover stories.

 

Bladeren door de website van dans/theaterschool Alvin Ailey is als bladeren door een glossy. Hoge kwaliteit fotografie, mooie typografie. De website ademt de klasse uit van de school zelf. Elke pagina op de site is een verrassing.

 

Jongerenmagazine Dorst publiceert elke dag een nieuw artikel met een nieuw design. Typografie is altijd conform VPRO-huisstijl terwijl er vrijheid is in kleurgebruik, illustraties en positionering van elementen.

 

Groepsreisorganisatie Shoestring past op kleine schaal “editorial webdesign” toe: elke bestemming heeft haar eigen header, bestaande uit grote fotografie met daarop een quote gezet in een bij de bestemming passende typografie. De header zet een inspirerende sfeer neer, veel meer dan de postzegelformaat-grote afbeeldingen die we bij andere reisorganisaties vaak online zien.

 

De specials van Fontanel onderscheiden maar in een ding van haar normale artikelen: ze hebben grote headers bestaande uit mooie fotografie en typografie, de broodtekst is verder volgens template.  Ik zie de header als het equivalent van de illustratie of foto bij een magazine spread, op één van de pagina. Het kost wat extra moeite qua design, maar dat mag bij een special. Anders ziet het er ook niet uit als een special, toch?

De tijd is rijp

De tijd is rijp om je als webdesigner zo veel mogelijk te ontdoen van het keurslijf van “web-safe fonts”, rigide grids en “postzegelformaat” afbeeldingen, zodat je je kunt inzetten voor meer editorial webdesign. Buiten de reden dat het web er gewoon veel mooier uit zal gaan zien waardoor de beleving ervan veel intenser zal zijn, zijn er ook praktische redenen om het juist vandaag de dag te doen.

Met de ontwikkeling van CSS3, HTML5 en Webfonts en een groeiende ondersteuning ervan in moderne browsers is er op het gebied van grafische vormgeving steeds meer mogelijk.

Met de komst van WOFF zal cross-browser Webfont-typografie mogelijk zijn.

Daarnaast heeft breedband internet er voor gezorgd dat we in staat zijn grote bestanden binnen no-time te downloaden. Vroeger mochten afbeeldingen niet groter zijn dan een visitekaartje om het aantal Kb’s ervan te beperken, tegenwoordig mogen ze schermvullend zijn en van een hoge kwaliteit. De servers die ons voorzien van deze grote bestanden worden steeds goedkoper en krachtiger. Al deze ontwikkelingen openen de deur tot nieuwe creatieve mogelijkheden op het web.

Paginagrote fotografie op de websites van WeTransfer, BNN en Nalden: tegenwoordig binnen no-time ingeladen in de browser van de bezoeker.

Een belemmerende factor kan het eventueel voor de website gebruikte content management systeem zijn. Het CMS moet immers flexibel genoeg zijn om individuele pagina’s apart te kunnen vormgeven. Preciezer gezegd zou het CMS op zijn minst in staat zijn om een unieke stylesheet te koppelen aan een specifieke pagina.

Gelukkig zijn er oplossingen voor veel gangbare systemen. Om er maar een paar te noemen: WordPress, Drupal, ExpressionEngine en Joomla! bieden deze oplossing, “out of the box” of in de vorm van een plugin.

De tijd is kostbaar

Aan dit alles zit een keerzijde: editorial webdesign kost meer tijd en geld dan de gemakkelijk “one template fits all”-benadering die vandaag de dag nog steeds veel gebruikt wordt.

Echter, het cliché “de concurrent is maar één klik verder” is nog steeds van toepassing op het web en usability experts zoals Nielsen hebben bewezen dat esthetisch aantrekkelijk vormgegeven websites over het algemeen meer vertrouwen wekken bij gebruikers. Een goede reden om een website boven die van de concurrent te verkiezen.

 

Twee online winkels die handgemaakte artikelen verkopen. Het ontwerp links is best netjes maar heeft qua uitstraling niets te maken met de artikelen dat het verkoopt; het lijkt wel een kant en klare generieke template dat geleverd werd bij het CMS. Het ontwerp rechts ademt één en al “hand made”. De eigenaar ervan begrijpt het belang van een goede, sfeervolle “winkelinrichting” en liet elke pagina apart ontwerpen. Dat kost misschien wat extra tijd en geld, maar de extra investering in vormgeving en front-end codering levert ongetwijfeld een veel hogere conversie op.

Uiteraard blijft in veel gevallen lastig of zelfs onmogelijk om extra zorg te besteden aan de presentatie van een specifieke webpagina. Het devies luidt: doe het waar het mogelijk is. Misschien niet de artikel detail pagina’s en gegenereerde lijsten, maar wel de etalages, landingpages, specials, homepages enzovoorts.

E-commerce gigant Wehkamp doet het zo: naast de standaard produktlijsten (links) biedt het de bezoeker ook op maat gemaakte thema pagina’s (rechts) die “glossy” aandoen.

Hoewel er bij kleine zelfstandige en MBK-bedrijven vaak meer ruimte is voor creativiteit hebben grafisch ontwerpers bij grote corporaties te maken met de zogenaamde huisstijlpolitie: de mensen die je prachtige ontwerp nakijken volgens de regels uit de “huisstijlbijbel”, die jij bewust of onbewust op een creatieve manier hebt proberen te buigen. Zo’n online styleguide kan een keurslijf zijn en na te lange blootstelling aan de grafisch ontwerper elke creatieve uitspatting murw slaan. Editorial webdesign lijkt in die gevallen onmogelijk, tenzij je de politie weet te overtuigen dat het verschil tussen de online en offline huisstijl handboek tegenwoordig veel kleiner mag zijn, om de hierboven genoemde redenen.

In mijn ervaring blijkt opmerkelijk genoeg de offline variant vaak veel flexibeler: keuze uit meer lettertypen, meer kleuren, vrijer gebruik van fotografie etcetera. Volgens mij stamt de starre houding nog uit de tijd dat het web een “onvolwassen medium” was, beperkt door “web-safe fonts”, inflexibele CMS’en en trage internetverbindingen. Het web huisstijl handboek zal een ontwikkeling moeten doormaken die editorial webdesign op corporate-schaal mogelijk maakt.

 

Leuk en aardig, wie gaan al die pagina’s vormgeven?

Met de opkomst van smartphones, e-readers en tablets is een verschuiving van offline naar online gaande. Dat betekend dat mensen minder van papier en meer van scherm zullen gaan lezen. Mensen zullen onbewust hogere eisen gaan stellen aan het esthetische aspect van hun digitale kranten, boeken en tijdschriften, maar ook websites. Dankzij deze ontwikkeling zullen steeds meer vormgevers uit de offline wereld voor het scherm gaan ontwerpen.

De kans dat de traditionele garde ontwerpers zich ontpoppen tot Santa Maria’s en massaal op front-end development zullen storten acht ik niet zo groot. Een nauwe samenwerking tussen ontwerper en front end developer (een soort “dtp-er”), of het gebruik van geavanceerde WYSIWYG software lijkt me waarschijnlijker.

De overgang naar van publishing op ouderwets papier naar het scherm is in volle gang. Onder andere Wired en de nieuwe dagelijkse krant Daily brengen publicaties speciaal voor de iPad uit, alhoewel in “app”-vorm. Als je het mij vraagt zal het niet lang duren voordat we dit soort publicaties niet als app downloaden, maar gewoon kunnen benaderen in onze webbrowsers.

Conclusie

Ooit worstelden webdesigners met de beperkingen van het medium; nu duizelen ze bij het denken aan de mogelijkheden ervan. Websites kunnen zoveel meer prikkelend en memorabel zijn wanneer we ze benaderen op een “offline” manier. Met de opkomst van snel internet, HTML5, CSS3 en tablets opent zich voor de webdesigner van vandaag een wereld aan mogelijkheden. Het is hoog tijd voor webdesign zonder keurslijf.

Verder lezen

Twee online winkels die handgemaakte artikelen verkopen. Het ontwerp links is best netjes maar heeft qua uitstraling niets te maken met de artikelen dat het verkoopt. Het ontwerp rechts ademt één en al “hand made”.

Over de auteur

Carsten Altena
Carsten Altena is een grafisch ontwerper met een affiniteit voor clean, lean, user-centered en toegankelijk webdesign. Naast grafisch ontwerp heeft hij ook veel ervaring als front-end developer, en was hij een van de eersten in Nederland die webstandaarden zoals XHTML en CSS omarmden. http://www.carstenaltena.nl/creeert/
  • http://www.carstenaltena.nl/creeert Carsten Altena

    Hey, dat Treesaver ziet er interessant uit! Kende ik nog niet, thanks.

  • http://twitter.com/thomasgeurink @thomasgeurink

    Mijn favoriete voorbeeld hiervan waar het ook echt meerwaarde heeft: http://thebolditalic.com/

  • http://www.freshter.com Mike van Hoenselaar

    Een erg helder en duidelijk artikel. Mijn mening hierin is vaak dat het in heel erg veel gevallen met mate moet gebeuren. vanuit een ontwerpersoogpunt is het allemaal leuk een aardig. Maar vanuit een gebruiksvriendelijkheidsoogpunt sla je dan al snel door en kun je continu opnieuw beginnen met de juiste conversie voor elke pagina.

    Natuurlijk heb je er steengoede voorbeelden bij zitten waar dat wel goed gedaan is, maar het ligt compleet aan het doel van de website waarin dat soort zaken makkelijk danwel moeilijk kunnen.

    Desalniettemin is het een thema dat iedere keer terug blijft komen en veelal afhankelijk is van budget. Heel veel potentiele klanten begrijpen dat niet en denken dat ze met 1 of 2 templates over hun gehele website uit gaan komen. Ik probeer er continu vanuit de gebruiker naar te kijken. En daarvoor kan ik wel zeggen dat nog steeds geldt less is more.

    Vond het een erg inspirerend artikel. Super!
    PS: Het artikel is wel wat te lang. Misschien opknippen in kortere artikels.

  • http://www.freshter.com Mike van Hoenselaar

    Een erg helder en duidelijk artikel. Mijn mening hierin is vaak dat het in heel erg veel gevallen met mate moet gebeuren. vanuit een ontwerpersoogpunt is het allemaal leuk een aardig. Maar vanuit een gebruiksvriendelijkheidsoogpunt sla je dan al snel door en kun je continu opnieuw beginnen met de juiste conversie voor elke pagina.

    Natuurlijk heb je er steengoede voorbeelden bij zitten waar dat wel goed gedaan is, maar het ligt compleet aan het doel van de website waarin dat soort zaken makkelijk danwel moeilijk kunnen.

    Desalniettemin is het een thema dat iedere keer terug blijft komen en veelal afhankelijk is van budget. Heel veel potentiele klanten begrijpen dat niet en denken dat ze met 1 of 2 templates over hun gehele website uit gaan komen. Ik probeer er continu vanuit de gebruiker naar te kijken. En daarvoor kan ik wel zeggen dat nog steeds geldt less is more.

    Vond het een erg inspirerend artikel. Super!
    PS: Het artikel is wel wat te lang. Misschien opknippen in kortere artikels.

    • http://www.ivobosma.nl Ivo Bosma

      Hoi Mike,

      leuke reactie. Ik ben het met je eens dat niet elke website hier geschikt voor is, en je punt mbt usability is terecht.

      Voor een persoonlijk blog van een grafisch vormgever kun je je waarschijnlijk meer vrijheid veroorloven dan een grote e-commercespeler. Eea is heel erg afhankelijk van het doel en je doelgroep, maar ik denk dat je desondanks binnen elke site toch een mate van vrijheid kunt veroorloven waarbij de usabity goed blijft.

      • http://www.carstenaltena.nl/creeert Carsten Altena

        Thanks! Vandaag de dag is het inderdaad vaak een kwestie van tijd en geld. Denk wel dat we dat in de toekomst steeds meer hebben te besteden voor de vormgeving van online publicaties, naarmate de oude media langzaamaan verdwijnt.

        Verder ben ik van mening dat juist extra aandacht aan de vormgeving van een pagina de gebruikersvriendelijkheid ervan verhoogt. Zo'n pagina zal meer tot de verbeelding spreken, meer connectie maken met de aanschouwer ervan.

  • http://www.freshter.com Mike van Hoenselaar

    Hmm zonder Javascript vertoont het formulier bij mij wel kuren.

  • http://geerthoekzema.ml Geert Hoekzema

    Interessant artikel. Het inspireert om verder te denken dan de bestaande kaders. Ik ben het alleen wel eens met bovenstaande lezer (mike) dat dit met mate moet gebeuren. Je moet niet de gebruiksvriendelijkheid uit het oog verliezen. Het hebben van een offline attitude op online media klinkt misschien wel leuk, maar tot voor kort hield dat in dat je online gewoon een kneus was en niet snapte hoe websites werkten.

    Daarnaast worden, mijn inziens, wat storende aaname's gedaan in het artikel om het te onderbouwen. Bijvoorbeeld: "Het ontwerp links is best netjes maar heeft qua uitstraling niets te maken met de artikelen dat het verkoopt;" [...]. Het ontwerp rechts ademt één en al “hand made”.[...] de extra investering in vormgeving en front-end codering levert ongetwijfeld een veel hogere conversie op.

    Dit is natuurlijk een pure aanname die net zo goed andersom zou kunnen uitpakken. Kijk een beetje uit daarmee. Want je zou ook kunnen zeggen dat vanuit gebruiksvriendelijkheid de linker pagina beter is vormgegeven en daarom voor meer conversie zorgt. Dat vind ik logischer klinken dan dat "een mooie ontwerp" voor meer conversie zorgt. Mijn ervaring is dat met name gebruiksvriendelijkheid ervoor zorgt dat mensen doorklikken en dat juist fancy ontwerp ervoor zorgt dat mensen niet verder klikken en weer weggaan.

    • http://www.carstenaltena.nl/creeert Carsten Altena

      Dank je! Ik bedoel er mee te zeggen dat een mooier ontwerp meer tot de verbeelding spreekt, en meer connectie maakt met de aanschouwer ervan. Uiteraard moet een pagina "kloppen" qua usability. Mooie vormgeving is daar in principe ondergeschikt aan. Maar: een al gebruikersvriendelijke pagina die OOK nog eens een inspirerende, tot de verbeelding sprekend design heeft zal naar mijn mening voor NOG betere conversie zorgen.