Hoe ontwerp je een onderscheidende website?

21 februari 2012 om 09:31

Veel sites lijken tegenwoordig op elkaar, dus hoe zorg je voor een onderscheidend design? En hoe zorg je ervoor dat je ontwerp bij de identiteit van je klant past, of liever nog: versterkt? Kernwaarden, design principles en signature elements kunnen je daarbij helpen.

Wehkamp - Bijenkorf - VD

De websites van Wehkamp, Bijenkorf en V&D hebben veel gelijkenis

Kernwaarden, design principles en signature elements

Kernwaarden van een bedrijf kun je gebruiken om design principles op te stellen voor je ontwerp. Een design principle maakt duidelijk waar (de ervaring met) de website aan moet voldoen: het is een geconcretiseerde kernwaarde, en het kan een eigen identiteit aan een website geven. Je kunt design principles weer doorvertalen naar signature elements: grafische elementen in de user interface, die de kernwaarden visueel ondersteunen.

Klinkt dit nog wat abstract? Dat is het ook, dus lees snel verder.

Kernwaarden

Kernwaarden – in het Engels beter bekend als core values – zijn de waarden die een bedrijf omschrijven. Wie wil het bedrijf zijn? Waar staat het voor? Welke identiteit streeft ze na?

Wehkamp.nl heeft bijvoorbeeld als waarden:

De Bijenkorf heeft als waarden:

Als kernwaarden in de communicatie naar buiten goed geïmplementeerd worden, dan geven kernwaarden een eigen gezicht en identiteit aan een bedrijf.

Design principles

De hierboven genoemde kernwaarden kunnen meerwaarde hebben voor je ontwerp, door ze te gebruiken als basis voor design principles.

Design principles vertalen de kernwaarden van een bedrijf naar de essentie van de ervaring met de website of applicatie: “It’s a statement of what you want the essence of the experience to be”.

Heeft een bedrijf (nog) geen duidelijk geformuleerde kernwaarden? Dan kun je eenvoudig een lijst opstellen met kernwaarden, en het bedrijf daar 5 of 6 uit laten kiezen die bij hen passen.

Voorbeeld

Een voorbeeld: stel dat je ontwerpt voor een bedrijf dat als één van haar kernwaarden “toegankelijk” heeft. Dan kan een design principle zijn dat de gebruiker het gevoel moet krijgen dat het bedrijf eenvoudig benaderbaar is.

Dit zou je in je ontwerp kunnen vormgeven door verschillende contactmogelijkheden een prominente plek in het ontwerp te geven. Daarnaast kun je dit verder ondersteunen met signature elements, waarover later meer.

Overigens kun je er ook voor kiezen om de design principles niet (alleen) te baseren op de kernwaarden van het bedrijf. Een andere mogelijkheid is om de design principles te baseren op gebruikersonderzoek. In dat geval maak je niet zozeer de identiteit van het bedrijf, maar de wensen van de gebruikers leidend.

Tot slot is het ook nog mogelijk om design principles op te stellen die de experience met de website beschrijven, zónder dat ze gebaseerd zijn op kernwaarden of gebruikersonderzoek. Ook dit kan al helpen om onderscheidend te zijn en de user experience te verhogen. Dan Saffer geeft tips waar design principles aan moeten voldoen (slide 39).

Overigens gebruikt Dan Saffer design principles op een wat andere manier: je kunt design principles op meerdere manieren inzetten. Als je hier meer over wilt weten kun je de links onderaan dit artikel lezen.

Zijn design principles nieuw?

Design principles bestaan al een tijd, en worden door veel grote bedrijven gebruikt. Bijvoorbeeld door Google en Microsoft:

Design principles van Google

Hier zie je dat design principles bij het omschrijven vrij abstract zijn. Pas bij het ontwerpen maak je ze concreet.

Zoals gezegd hoef je niet per se de kernwaarden van het bedrijf als uitgangspunt te nemen, je kunt ook specifiek kernwaarden voor een toepassing definiëren. Zoals Google bijvoorbeeld doet voor Google agenda:

Design principles voor Microsoft Windows 7

Signature elements

Signature elements zijn vaak het meest zichtbaar: dit zijn de concrete uitingen van design principles in de user interface. Een signature element kan van alles zijn:

Fourseasons

Fotografie is een duidelijk signature element van de (18 miljoen dollar kostende!) site van Fourseasons


Een voorbeeld om een signature element te illustreren: het bedrijf waar je voor ontwerpt heeft als kernwaarde nog steeds “toegankelijk”. Het bijbehorende design principle: “de gebruiker moet het gevoel krijgen dat het bedrijf eenvoudig benaderbaar is”. Signature elements om dit gevoel te versterken zou dan het gebruik van veel witruimte kunnen zijn, een royale regelhoogte, zachte kleuren, prominente contactmogelijkheden, vriendelijk lachende mensen in fotografie, 16 punts fontgrootte etc.

Samenvattend

Het gebruik van kernwaarden, design principles en signature elements kan in eerste instantie wat abstract overkomen. Een korte samenvatting van deze begrippen:

kernwaarden: beantwoorden de vraag wie het bedrijf wil zijn, en waar ze voor staan;
design principles: een design principle maakt duidelijk waar (de ervaring met) de website aan moet voldoen: het is een geconcretiseerde kernwaarde;
signature element: een concrete uiting van een design principle in de user interface.

Het voorbeeld uit dit artikel nog even samengevat:

Voordelen

Deze werkwijze kost je bij het ontwerpen wel wat extra tijd in de beginfase, maar de voordelen wegen hier absoluut tegen op:

Volgens mij zijn dit genoeg redenen om bij een volgend project je klant te vragen: wat zijn jullie kernwaarden?

Links

http://www.designophy.com/article/design-article-1000000064-design-principles-at-microsoft.htm – Luke Wroblewski over design principles gebruikt bij Microsoft

http://www.slideshare.net/ugleah/ux-team-of-one-sxsw-2009-1161299 – Being a UX team of one, een deel gaat over design principles

http://wik.ed.uiuc.edu/index.php/Web_2.0_Group_2_SU_09 – Voorbeeld van Wiki design principles (table 4 “Wiki design principles”)

http://www.uie.com/brainsparks/2011/05/05/jared-spool-the-essential-principles-behind-great-design-principles-live/ – Jared Spool, The essential principles behind great design principles

http://www.slideshare.net/cpetzny/ux-london-redux-dan-saffer – Dan Saffer over design principles (vanaf slide 36)

(Met dank aan een artikel van Henk Wijnholds voor de inspiratie).

Over de auteur

Ivo Bosma
Ivo werkt als interactie ontwerper en usability expert bij Concept7. http://www.ivobosma.nl/
http://www.concept7.nl
  • Menno

    Goed artikel. Leuk ook om die Design Principles te lezen, en hoe de desbetreffende bedrijven ze zelf interpreteren. Ik dacht trouwens dat Google's #1 Priniciple was 'Don't be evil' :)

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

      @Menno: ik heb het even opgezocht, maar het schijnt een informeel motto te zijn 😉 (zie Wikipedia).

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

    Sterk en helder artikel Ivo!

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

    Weer een fijn artikel Ivo.

  • Louis Jansen

    Ik ben altijd wat sceptisch over design artikelen en alle abstracte zaken maar vind dit een erg leuk en tastbaar voorbeeld hulde!

    En nu even een kijkje nemen op Fourseasons.com om te kijken hoe een site van $18 mio eruit ziet én werkt 😉

  • http://www.bartvandenbelt.nl Bart

    Mooi artikel. Ik ben al geruime tijd op zoek naar een designer die mijn kernwaarden kan omzetten naar een prachtige template voor wordpress. Iemand die écht creatief is en buiten de box denkt zonder de standaard webconventies uit het oog te verliezen. Iemand suggesties?

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

      Hallo Bart,

      ik ken niet zo veel designers die werken met kernwaarden en design principles, dus ik kan je niet helpen… Wellicht dat iemand anders wel een paar namen voor je heeft. Succes!

    • http://bulhofenco.blogspot.com/ Wilma Bulhof

      Beste Bart wat zijn je kernwaarden? Bedoel je hiermee de Visie; Missie enzovoort van je bedrijf?
      Ofwel de onderscheidende gedachte achter al je communicatie welke natuurlijk niet los staan van de kernwaarde van je bedrijf.
      Als het goed is werkt elke vormgever daarmee want anders ben je als ontwerper blind aan het schieten lijkt mij geen goede zaak, op termijn ook veel duurder.
      Misschien is het goed de zgn creatieve briefing eens door te lopen zie: http://bulhofenco.blogspot.com/p/de-creatieve-bri
      Wil je meer weten neem dan contact op.
      vriendelijke groet en succes