Mediaweb | Dood aan Photoshop en lorem ipsum

Accepteer bij je volgende website redesign geen Photoshop mockups en lorem ipsum dummy teksten!

Dat garandeert namelijk de hopeloze mislukking van je kostbare project. En accepteer ook geen ontwerp dat niet responsive is, tenzij er hele goede redenen voor zijn.

De afgelopen twintig jaar hebben wij web designers onze ontwerpen steevast aan onze opdrachtgevers gepresenteerd in de vorm van Photoshop mockups.

Doorgaans waren deze voorzien van lorem ipsum dummy teksten. Om de echte teksten maakte niemand zich druk tot na de oplevering van het content management systeem (CMS).

Deze methode werkte lekker voor ons als ontwerpers, want een mooi plaatje verkoopt makkelijk.

Mooi plaatje

Deze methode werkte lekker voor ons als ontwerpers, want een mooi plaatje verkoopt makkelijk.

En voor de opdrachtgevers was het ook prima, want zo waren ze het al gewend van hun reclamebureau.

Die presenteerde de nieuwe campagnes per slot van rekening ook altijd op een mooi zwart foamboard met lorem ipsum teksten erin. Dat zag er in ieder geval professioneel uit.

Overzichtelijke tijden

Zolang wij websites ontwierpen voor vaste schermafmetingen, was er ook niet zoveel aan de hand.

We kozen gewoon de grootste gemene deler en de rest moest maar een nieuwe computer kopen.

In het begin hielden we ons aan 640x480. Na verloop van tijd was daar 800x600, later 1024x768 en daarna 1280x800.

Het waren overzichtelijke tijden.

Eens in de zoveel jaar konden we onze grid aanpassen aan de grootste gemene deler en klaar was Kees. Er was één constante: de resoluties werden steeds hoger. Tot 2008.

Revolutie

Toen was daar ineens de nieuwste trend: 320x480.

Wat zullen we nou hebben?!

De nieuwste computer had ineens een veel kleinere resolutie!

Die nieuwe computer was de iPhone en hij ontketende een revolutie.

Vandaag zien wij in onze webstatistieken geen gemene delers meer.

Onze websites worden bezocht door talloze apparaten met resoluties die uiteenlopen van 240×320 tot 2560×1600. Daar valt niet tegenop te photoshoppen!

Lorem watsum?

Lorem ipsum teksten zijn dummy teksten die in een ontwerp aangeven waar tekst wordt gebruikt.

Zo kan de ontwerper webpagina’s ontwerpen inclusief typografie, zonder dat hij al hoeft te beschikken over echte teksten.

Ontwerpers zijn dol op Lorem ipsum.

Het  past altijd prachtig in de fraaie ontwerpen die ze aan je presenteren.

En daar gaat het dus fout.

Want een webpagina ontwerpen zonder dat je beschikt over echte content is als het ontwerpen van een maatpak zonder de maten van de drager op te nemen.

Het ontwerp staat mijlen ver af van de werkelijkheid. Zowel qua vorm, als qua inhoud.

En wat krijg je dan?

Inderdaad: de prachtige pagina header blijkt in werkelijkheid niet die strakke sixpack uit het ontwerp, maar een bolle bierbuik die over de strakke broekriem heen puilt.

Het ontwerp staat mijlen ver af van de werkelijkheid. Zowel qua vorm, als qua inhoud.

Photoshop mockups van een homepage en een paar vervolgpagina’s zeggen niets over de interactie tussen gebruiker en website.

En ze zeggen nog minder over hoe de website zich zal gedragen op al die verschillende schermen die we tegenwoordig hebben.

Proefdrukken

Beide middelen zijn gewoon niet geschikt voor het ontwerpen van websites.

Photoshop is bedoeld voor het bewerken van foto’s. Daarin is het onovertroffen.

Lorem ipsum dateert uit een tijd dat drukwerk nog met de hand werd gezet. Het stelde drukkers in staat proefdrukken te maken voordat de definitieve tekst beschikbaar was. Bijvoorbeeld om een bepaald lettertype te testen.

Interactie

Bij een presentatie van een website ontwerp in de vorm van Photoshop mockups moet de ontwerper altijd uitleggen hoe de interactie zal verlopen. “Zo ziet het menu eruit als je de pagina opent. En zo wanneer je met je muis over het menu-item beweegt. En zo als je erop klikt.”

Responsive websites

Door z’n statische aard is Photoshop al helemaal ongeschikt om responsive websites in te ontwerpen.

Om te presenteren hoe de website er op een smartphone, tablet, laptop, desktop, smart TV, enzovoorts, enzovoorts uitziet, is veel te veel werk.

Dus het ontwerp dat je mag goedkeuren zal er in de praktijk meestal heel anders uitzien.

Wat valt er dan nog goed te keuren?

Overigens hebben ze dit bij Adobe ook al door. Het nieuwe programma Adobe Edge heeft Adobe speciaal ontwikkeld voor het ontwerpen van responsive websites.

Content eerst

Zorg er bij je volgende website redesign voor dat je eerst de content van de website goed in kaart brengt.

Daarna zet je pas een ontwerper aan het werk.

Maak je geen zorgen, want ‘content’ betekent niet ‘alle kopij’  (Jeffrey Zeldman). Zorg gewoon voor voldoende echte content om mee te werken.

Grootse onthulling

Eis vervolgens van de ontwerper dat hij of zij je vanaf het begin nauw bij het ontwerptraject betrekt.

Geen wekenlange radiostilte gevolgd door een grootse onthulling van een paar Photoshop mockups, maar stapsgewijze presentaties van het ontwerp in wording:

  1. De hiërarchie van de content in de vorm van flow charts en eenvoudige wireframes.
  2. Style tiles’ waarin de branding en de visuele taal van de website worden gepresenteerd.
  3. Schetsen van de belangrijkste gebruikerspaden (user journeys) die bezoekers zullen afleggen op de website.
  4. Een werkend prototype dat al responsive is ontworpen en werkt in de browser van je smartphone, tablet en desktop.

Vergewis je er ook van dat al die ontwerpfasen worden getest op echte gebruikers. Dat scheelt heel veel narigheid verderop in het proces.

Moeten Photoshop en lorem ipsum echt dood?

De titel van dit artikel is natuurlijk wat provocerend.

Photoshop en lorem ipsum hoeven niet ècht dood.

Ontwerpers kunnen nog prima gebruik maken van Photoshop en lorem ipsum teksten tijdens hun creatieve zoektocht naar vormoplossingen.

Maar het moet ze wel worden verboden om ooit nog een ontwerp van een website te presenteren als een statisch Photoshop bestand met lorem ipsum teksten erin

Laat staan dat ze het printen en op foamboard presenteren.

Update 5 juli 2013. Dit moet je lezen: Continuous Design and the NoPSD Movement

Voortaan een mailtje ontvangen als er een nieuwe post is? Schrijf je in op onze nieuwsbrief. Wij spammen niet: privacyverklaring.

Werk met ons

Denk je eraan om een nieuwe, duurzame website te laten maken? Wil je weten of Mediaweb daarvoor de beste partij is? Lees dan deze pagina en kijk of we goed bij elkaar passen. Je mag natuurlijk ook gelijk contact opnemen.

Leestip: Website Laten Maken: 13 Valkuilen

Wil je:

1) Deze post delen? Help je vrienden en relaties door ze op deze blog post te wijzen. Klik hieronder op een of meer social networks van je keuze en spread the word.

2) Een reactie plaatsen? Heb je tips aanvullende tips? Heb je een vraag of opmerking? Laat een reactie achter hieronder om het met ons en onze lezers te delen.

3) Nooit meer een blogpost missen? Loop geen handige tips en wetenswaardigheden mis. Schrijf je in voor onze nieuwsbrief. Dan krijg je een kort mailtje zodra we een nieuwe blog post hebben geplaatst.

Deze post delen?

e book online marketing checklist 2018

Meer inspiratie voor 2019?

Wekelijks een e-mail notificatie ontvangen als onze nieuwste blog live staat?
Ja graag! →

4 reacties op “

  1. Gravatar for alexkokillustration@gmail.com

    alexkokillustration@gmail.com

    Eindelijk een post die mij aansprak de voorgaande vielen net buiten mijn tuintje..als illustrator werk ik nu overigens aan een stijl ( met een soort rasterpunten )die overeind blijft tussen smartphone, high res monitor , Abri, krantenpagina en glossy-spread...
    • Gravatar for Eric van Hall

      Eric van Hall

      Hi Alex. Bedankt voor je reactie. Ik ben benieuwd naar de stijl waar je het over hebt. Kun je daar al iets van laten zien?
  2. Gravatar for Nicolline van der Spek

    Nicolline van der Spek

    Her Eric, gelezen. Leest weer lekker weg in je vertrouwde losse schrijfstijl. Over de techniek weet ik niet zoveel, maar content eerst! sprak me erg aan.

    Goed bezig!

Reageren niet meer mogelijk.