Voorbij web 2.0 design: 3 tips

web 2.0 designAl snel na de opkomst van web 2.0 begon zich ook een stijl te vormen die onder de noemer ‘web 2.0 design’ door het leven gaat. Het is een verzameling van ongeschreven regels die dicteren dat een moderne website op z’n minst kleurverloop, ronde hoekjes, een handvol spiegelingen en een embleem heeft. En niet te vergeten: iedere aanwijzing moet minstens 48 punts zijn.

Ik ben nog steeds opzoek naar de redenen achter dit design manifest. Werden onze ogen echt zo slecht ingeschat dat taken als: “download dit”, “klik hier” zo schreeuwerig gepresenteerd moesten worden? Ging het wellicht om het pronken met de vergaarde Photoshop kennis, of was het een poging om te laten zien dat web 2.0 toch totaal niet verward moest worden met die oude, trage, gure web 1.0 tijden?

Maar laten we niet te lang stil staan bij het verleden. Laten we op zoek gaan naar goede voorbeelden die nu online te vinden zijn. Ik heb namelijk het gevoel dat we langzaam in de richting van een nieuwe set design regels bewegen. Ik zal drie websites beschrijven, die – hoewel ze verschillen – ook een hoop gemeen hebben.

Flickr.com
Flickr.com waarschijnlijk een van de oudste web 2.0 websites die niet werd getroffen door het bling-virus. De interface is helder en eenvoudig, maar zeker niet saai of kil.

flickr.jpg

CNN.com
CNN.com, werd vorig jaar voorzien van een geheel nieuwe look, en slaagde er in om de schaduw effecten helemaal uit te bannen. In plaats daarvan werd de gehele site voorzien van een prachtig geballanceerd spel van grijze en witte vlakken, met hier en daar een knal rood (zonder gradiënt) knopje.

cnn.jpg

Hulu.com
Hulu.com, is een jonge Amerikaanse video site, die nog maar een paar maanden online is. Het is wellicht een van de beste voorbeelden hoe je een site kunt maken waarbij de content ook gelijk de design structuur vormt. (Momenteel nog in beta, maar een login kan binnen een dag worden aangevraagd, bekijk deze site voor meer screenshots)

hulu1.jpg

Drie manieren om web 2.0 design achter je te laten

Wat is het dat al deze sites delen, hier een kleine samenvatting:

1. Grid en witruimte
Design je site met mathematische precisie, maak een grid, waarbij iedere kolom een bepaalde breedte heeft, en hou je aan dat grid. Een andere manier om dingen te laten opvallen is niet om ze extreem groot op je site neer te zetten, maar ze te voorzien van een stevige dosis wit ruimte. Hulu maakt erg goed gebruik van dit principe sommige objecten staan zo eenzaam en alleen dat je er haast wel op moet klikken. Mark Boulton schreef er goede tutorial over, Khoi Vinh schreef ook een duidelijke blog post en begeleidt deze met een duidelijke handleiding (pdf).

2. Typografie
Typografie behelst veel meer dan alleen het kiezen van een lettertype om te gebruiken. Zonder zelfs maar van lettertype te veranderen kun je twee teksten van elkaar laten verschillen door een andere regelafstand, een andere grijs toon, een andere dikte, grootte of hellingshoek. Opnieuw heeft Mark Boulton hier een prachtige serie van blogposts aan gewijd. Een ander goed punt om te beginnen is Oliver Reichenstein’s artikel over typografie.

3. Kleuren en grijstinten
Zoals ik al eerder schreef: het gebruik van verschillende grijstinten is een eenvoudige manier om twee teksten van elkaar te onderscheiden, en als je je dan ook nog beperkt tot een of twee kleuren dan heb je de formule voor een mooie maar rustige site al bijna te pakken. Vooral Flickr blijft een goed voorbeeld voor de grijstint liefhebber. Veerle schreef hier een goed artikel over en ColorLovers en Adobe’s Kuler zijn ook de moeite van een bezoek waard.

Samenvattend: beheers het palet van grijstinten, zorg voor voldoende wit ruimte en ontwikkel een verslavende behoefte voor ordening. En je zult zien dat je in staat bent om drop-shadows, spiegelingen, kleurverlopen en grote stervormige emblemen achter je te laten.

Dit artikel verscheen eerder in een Engelstalige versie op The Next Web.

Interessant?

Lees dan ook onze andere artikelen over , , , .

Reacties

  1. Sjors,
    goed artikel. Dat artikel van Reichenstein is inderdaad erg goed en als je het dan toch over typografie hebt: die site van information architects japan is echt prachtig! (http://www.formforce.com)

  2. Damn, goed stuk informatie. Krijg meteen zin om mijn eigen site over de kop te halen!

  3. Ik dacht al toen ik het las, dit komt me zo bekend voor :)

  4. Sjors, inderdaad een uitstekend artikel, met prima resources.

    Duidelijk en helder geschreven met goede tips.
    Nu gelijk maar eens aan een nieuw niet Web 2.0 design voor mijn sites en blogs gaan werken…

  5. @ Sjors: Uitstekend verhaal! Niet alleen erg interessant maar ook goed naar praktijk vertaalbaar. Wat vind je in dit verband van het gebruik van iconen, wel of niet Web 2.0?

    Ben ook benieuwd of er op het vlak van navigatie en informatiearchitectuur bepaalde ontwikkelingen te spotten zijn. MIsschien iets voor een volgende artikel?

    @ Rutger: Dank voor de link naar Information Architects Japan, eveneens een verhaal om te smullen!

  6. Prima verhaal Sjors! Ik vroeg me ook al af waarom spiegelingen, ronde hoeken en dropshadow zo must is. Mijn nieuwe site is dan ook gebouwd met flickr.com als voorbeeld. Undesign rules…

  7. Sjors en anderen.
    Ik ben 20 jaar geleden als graficus opgeleid en bespeur in jouw tips veel “eeuwenoude” do’s uit de opmaakwereld van het drukwerk. (Grid als uitgangspunt, subtiel kleurgebruik en kleurfonts, niet te veel lettertypen gebruiken voor onderscheid maar spelen met spatiering, interlinie etc.)Het geeft mij het gevoel dat we over alle nieuwigheden die het web ons de afgelopen 10 jaar gebracht heeft heen zijn gaan kijken en terugvallen op oude grafische waarden.

    Wie deelt dat gevoel?

  8. Goed stukje over de design regels voor Web2.0 sites.
    Ik vind alleen de voorbeelden wat mager. Een site als POPSUGAR vind ik veel meer Web2.0 dan de CNN site. Voornamelijk door het gebruik van de felle kleuren (fuchsia), bijpassende icons en grote fonts. Web2.0 sites lijken vaak te zijn opgezet voor bijziende mensen met een IQ van 85, maar dit KISS concept werkt uiteraard geweldig. Zo zie je maar, makkelijk behapbare hapklare brokken werken het best.

    Grappig om te zien overigens dat de comment van Robin geen ‘nofollow’ heeft en de andere comments wel. Daarom zomaar een willekeurige link toegevoegd om te zien wat er bij mijn comment gebeurt. Waarschijnlijk door Frank himself overwritten met een do follow.

  9. Ah, ik begrijp het … dit is een link naar de site vanaf de blog site van Robin; een reciprocal link. Het wordt dus gewaardeerd door Frank wanneer je terug linkt naar deze site.

    Hoe krijg ik zo’n ‘Reacties elders’ op jouw site Frank?
    Uiteraard eerst zelf een link naar dit artikel plaatsen, maar hoe krijg ik de link op deze pagina ?

    Hoor graag van je …

  10. @ Tuscoz, als iemand in een andere blog verwijst naar een Frankwatching-verhaal dan wordt er een Trackback-ping gerealiseerd. Hoe dat werkt lees je hier: http://nl.wikipedia.org/wiki/Trackback.

    Er wordt dus NIETS overwritten ;)

  11. Hi Sjors,

    Ik heb een tijdje geleden de Engelse versie van jouw artikel gelezen. Sindsdien kijk ik anders naar websites met overdreven veel web 2.0 design. Tx.

  12. Flickr.com is zondermeer het beste voorbeeld van hoe je een website ’2.0′ kan maken zonder dat je gelijk drop shadows en reflections nodig hebt. Ik vind ‘m overigens niet alleen erg ‘schoon’, ook interface technische / usability-wijs gezien is er erg goed over nagedacht. Je merkt echt dat er een paar mensen veel tijd aan hebben besteed om tot de kern te komen van wat een foto-sharing site moet zijn.

  13. Goed artikel! Het haalt de blindheid op web2.0 i.c.m. glans, schaduws en overtrokken lettergroottes eindelijk eens weg.

    Er is een periode geweest dat een web2.0 site vooral werd bepaald door het uiterlijk, terwijl het hele concept niet web2.0 was, iets wat ik veel belangrijker vind (zie ook http://www.3mindme.com, web2.0 concept, maar geen design)

    Ik ga mijn sites ook maar eens kritisch bekijken….Tnx voor de tips! (maar subtiele gradients blijf ik mooi vinden ;)

  14. iedereen bedankt alvast voor de feedback en extra links, toch altijd leuk om te zien dat een blog artikel pas echt gemaakt wordt als het online staat.

    @Frank, iconen en web2.0 das nogal een vraag :) Ik denk dat als je iconen ziet als onderdeel van je “typografisch” karakterset, je er dezelfde “regels” op los kunt laten, ik zou niet weten hoe je youtube of flickr goed zou kunnen laten werken zonder de iconen die ze nu gebruiken, maar ook daarvoor geldt, dat ze je niet te gemoed hoeven te schreeuwen.

    Navigatie-structuur is ook wel een interessante, veel inhoud gerelateerde websites beginnen een beetje dezelfde dingen op dezelfde plaats te krijgen, maar dat lijkt me geen verkeerde ontwikkeling (Er is een klassiek boekje over dit onderwerp “Don’t make me think” van Steve Krug)

    @Peter, ik deel een deel van je gevoel, sommige dingen zijn vroeger al eens een keer goed doorgedacht, en soms lijkt webdesign dit wel te negeren omdat het nieuw en anders wil zijn. Mijn meeste van mijn punten zijn dus ook redelijk klassieke grafische lessen. Zelf heb ik een digitale media opleiding gedaan, dus als je er wellicht nog een paar goede oude lessen weet, deel het met ons :)
    Overigens ben ik wel van mening dat ontwerpen voor het beeldscherm en met name voor interactie dusdanig afwijkt van de oude grafische ontwerpschool, dat het zeker terecht is, dat er tegenwoordig ook focus is op nieuwe dingen.

    @Tuscoz, Cnn was bedoeld als een voorbeeld van een website die de web2.0 klassiekers probeert te ontwijken :)

    @Jeroen, ik hou ook wel van subtiele gradiënts stiekem :) Ik denk ook dat een van de belangrijkste argumenten tegen mijn artikel zou zijn, dat het een hele serie erg saaie websites oplevert, die wellicht voor de grafici onder ons geweldig zijn, maar door de gewone gebruiker, wit leeg en kaal bevonden worden. De voorbeelden die ik gebruikte zijn dat ook websites waarbij de content van derde (teksten, foto’s, video’s) veel belangrijker is dan de “sfeer” van de website zelf. Voor een website als Heineken, of een ander A-merk is het vooral belangrijk het merk gevoel te communiceren, en dat is vaak gevuld met veel kleur, geluid en beeld.

  15. @ Sjors, ai ik voel me ineens oud als jij dit zo schrijft. Ik weet nog dat zo’n 20 jaar geleden de eerste Mac op de ontwerpafdeling waar ik toen werkte werd binnengedragen. De oude typografen vonden het rommel wat er uit kwam. Ikzelf was operator op een Aesthedes ontwerpcomputer. Toen hypermodern. Maar goed, terug naar het onderwerp.

    Het eerste wat me te binnen schiet is “Tekstwijzer” (SDU ISBN 9789012051217) Uit 1982van Karel Treebus. Een van die oude typografen. Tweedehands leverbaar via onze dikke blauwe vrienden. Een “gids voor het grafisch verwerken van tekst”. De basis voor leesbare pagina’s/schermen is niet zo anders, zoals jij al aangeeft. Verschil met Webdesign zit hem vooral in de opdracht die je als ontwerper hebt om je lezer “door de interactiviteit heen te loodsen”. Het gaat daarmee over de “flow” van een bezoeker door de site heen. (en niet alleen van voor naar achter, zoals bij een boek.)
    Daarover zijn de artikelen van Ferry den Dopper over “informatiegeur” hier op Frankwatching een mooi voorbeeld. Dutch Design is in het grafische en de industriele vormgeving een begrip. Maar hoe zit dat met Dutch Webdesign?

  16. Om een goed web 2.0 website te maken, moet je naar mijn mening ook een xxx 2.0 concept hebben!

  17. Beetje ‘off topic’, maar erg interessant artikel; een kijkje vooruit naar Web 3.0.
    http://howtosplitanatom.com/news/how-to-define-web-30-2/

  18. Voldoet de startpagina van Google niet al jaren aan wat je hier beschrijft? Ik ben overigens sterk voorstander van deze minimalistische stijl. Lekker overzichtelijk.

  19. Ik vermoed dat er eindelijk een no-nonsense layout aan het opkomen is.

    Misschien wel onder invloed van de microblogs.

  20. Misschien is het raadzaam dit nu nog eens te bekijken. We zijn nu inmiddels weer 2 jaar verder.

  21. Goed idee, ik zal er zeker over na denken!

Plaats een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn met een * aangegeven.

Verschijnt je reactie niet, dan is deze mogelijk in de spam terechtgekomen. Mail ons dan even!