En presentation om problemet med att ta fram visuell design innan innehållet är klart. Innehållet måste då pressas in i en illasittande kostym. Lösningen är att i stället börja med en innehållsprototyp som ger underlag för den grafiska formen. Börja med verksamheten, inte med dekorationen.

1. Innehåll först
med innehållsprototyper
@axbom

2. @axbom
Lorem!
Ipsum! Dolor sit!
Amet!

3. @axbom

4. @axbom
Hur gör vi när vi ska bygga en ny webbplats?

5. @axbom
– Hur ska den se ut?

6. @axbom

7. @axbom
DIN WEBBPLATS ÄR DETTA DIN WEBBPLATS
VI ÄR UNIKA
LÄS MER
Vi är oerhört unika och särskiljer oss från alla våra
konkurrenter. Även om vår webbplats ser likadan ut.
Alltid. Tre. Kolumner.
Vi skulle kunna ha
fyra kolumner. Men
alla andra har ju tre.
Vi kände oss kreativa
så vill la en bild på en
leende kvinna här.
Webbplatsen dikterar
alltså att vi begränsar
oss till 3 tjänster.
Idén stulen, med all respekt, av: Dave Ellis. / novolume.co.uk

8. @axbom

9. @axbom

10. @axbom
– Hur snygg som helst, nu testar vi!

11. @axbom
– Vänta, var det här innehållet ni ville
kommunicera?

12. @axbom
Ingen vågar ta ansvar för
innehållet. Alla vet nämligen
att om innehållet inte
matchar behoven är sajten
värdelös.

13. @axbom
Användarens resa

14. @axbom
Användarens resa

15. @axbom
Användarens resa

16. @axbom

17. @axbom
DIN WEBBPLATS ÄR DETTA DIN WEBBPLATS
Rubriken skriver vi någonstans
mitt på sidan
Här är det innehåll du som användare söker.
Är du inte glad att du hittade fram hit?
Beroende på vilken sida du hamnat på så
kanske det här i och för sig kanske bara
utfyllnadstext som leder dig vidare till det
innehåll som egentligen hjälper dig att
komma vidare. Vi behövde den här sidan för
designern byggde det så. Lycka till!
Alternativ 1
Alternativ 2
Alternativ 3
Alternativ 4
Alternativ 5
Alternativ 6
Alternativ 7
Alternativ 8
Eftersom vi inte litar på att du
hittar något så lägger vi för
säkerhet skull alla länkar en
gång till i sidfoten också.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Gå vidare till det riktiga innehållet
Mer saker
Eftersom vi inte klarar av
att lösa ditt problem på
den här sidan så vill vi
tipsa om andra sidor.
Ännu mer saker
Sidan blir obalanserad om
vi inte lägger något här så
vi bad Jimmy hitta på
något. Det blev en puff.
Här i högerkanten lägger
vi också några länkar som
ingen orkar förvalta:
Några länkar
Lorem ipsum
Lorem ipsum
Avdelning 1 Avdelning 2 Avdelning 3 Avdelning 4 Avdelning 5

18. @axbom
DIN WEBBPLATS ÄR DETTA DIN WEBBPLATS
Rubriken skriver vi någonstans
mitt på sidan
Här är det innehåll du som användare söker.
Är du inte glad att du hittade fram hit?
Beroende på vilken sida du hamnat på så
kanske det här i och för sig kanske bara
utfyllnadstext som leder dig vidare till det
innehåll som egentligen hjälper dig att
komma vidare. Vi behövde den här sidan för
designern byggde det så. Lycka till!
Alternativ 1
Alternativ 2
Alternativ 3
Alternativ 4
Alternativ 5
Alternativ 6
Alternativ 7
Alternativ 8
Eftersom vi inte litar på att du
hittar något så lägger vi för
säkerhet skull alla länkar en
gång till i sidfoten också.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Gå vidare till det riktiga innehållet
Mer saker
Eftersom vi inte klarar av
att lösa ditt problem på
den här sidan så vill vi
tipsa om andra sidor.
Ännu mer saker
Sidan blir obalanserad om
vi inte lägger något här så
vi bad Jimmy hitta på
något. Det blev en puff.
Här i högerkanten lägger
vi också några länkar som
ingen orkar förvalta:
Några länkar
Lorem ipsum
Lorem ipsum
Avdelning 1 Avdelning 2 Avdelning 3 Avdelning 4 Avdelning 5

19. @axbom
DIN WEBBPLATS ÄR DETTA DIN WEBBPLATS
Rubriken skriver vi någonstans
mitt på sidan
Här är det innehåll du som användare söker.
Är du inte glad att du hittade fram hit?
Beroende på vilken sida du hamnat på så
kanske det här i och för sig kanske bara
utfyllnadstext som leder dig vidare till det
innehåll som egentligen hjälper dig att
komma vidare. Vi behövde den här sidan för
designern byggde det så. Lycka till!
Alternativ 1
Alternativ 2
Alternativ 3
Alternativ 4
Alternativ 5
Alternativ 6
Alternativ 7
Alternativ 8
Eftersom vi inte litar på att du
hittar något så lägger vi för
säkerhet skull alla länkar en
gång till i sidfoten också.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Gå vidare till det riktiga innehållet
Mer saker
Eftersom vi inte klarar av
att lösa ditt problem på
den här sidan så vill vi
tipsa om andra sidor.
Ännu mer saker
Sidan blir obalanserad om
vi inte lägger något här så
vi bad Jimmy hitta på
något. Det blev en puff.
Här i högerkanten lägger
vi också några länkar som
ingen orkar förvalta:
Några länkar
Lorem ipsum
Lorem ipsum
Avdelning 1 Avdelning 2 Avdelning 3 Avdelning 4 Avdelning 5
Nej, men ser man på, där är ju
innehållet jag ville läsa!

20. @axbom
Innehåll
definierar
struktur.
Inte
tv
är
to
m!

21. @axbom

22. @axbom

23. @axbom

24. @axbom

25. @axbom

26. @axbom

27. innehållsprototyp
Vad menas med
?

28. innehållsprototyp
Ett dokument med det innehåll
användaren behöver för att
uppfylla sina mål.
En

29. …alltså inte ett dokument med vackra bilder som får
webbägaren att må bra och känna sig viktig.

30. @axbom
Grafisk design som inte
utgår från innehåll är inte
design, det är på sin höjd
estetisk verksamhet.
Jag dekorerar webbplatser.Vad gör du?

31. @axbom
En innehållsprototyp

32. @axbom
En innehållsprototyp
Utgår från riktiga
behov.
Måste inte läsa tankar

33. @axbom
En innehållsprototyp
Utgår från riktiga
behov.
Är snabb och
kostnadseffektiv.
Måste inte läsa tankar

34. @axbom
En innehållsprototyp
Förstås av alla.
Utgår från riktiga
behov.
Är tillgänglig för alla
att bidra.
Är snabb och
kostnadseffektiv. Även användare
Måste inte läsa tankar

35. @axbom
En innehållsprototyp
Förstås av alla.
Utgår från riktiga
behov.
Är tillgänglig för alla
att bidra.
Är snabb och
kostnadseffektiv.
Hittar inte på
egenskaper.
Även användare
Måste inte läsa tankar

36. @axbom
En innehållsprototyp
Förstås av alla.
Utgår från riktiga
behov.
Är tillgänglig för alla
att bidra.
Är guld värd för en
visuell designer.
Är snabb och
kostnadseffektiv.
Hittar inte på
egenskaper.
Även användare
Måste inte läsa tankar

37. @axbom
En innehållsprototyp
Förstås av alla.
Utgår från riktiga
behov.
Är tillgänglig för alla
att bidra.
Är guld värd för en
visuell designer.
Är snabb och
kostnadseffektiv.
Hittar inte på
egenskaper.
Måste inte passa en
struktur.
Gör att vi jobbar
iterativt med innehåll.
Även användare
Måste inte läsa tankar

38. @axbom
En innehållsprototyp
Förstås av alla.
Utgår från riktiga
behov.
Är tillgänglig för alla
att bidra.
Är guld värd för en
visuell designer.
Är framtidssäker.
Är snabb och
kostnadseffektiv.
Hittar inte på
egenskaper.
Måste inte passa en
struktur.
Gör att vi jobbar
iterativt med innehåll.
Stöd för tillgänglighet Plattformsoberoende
Mobile first
Även användare
Måste inte läsa tankar

39. @axbom
En innehållsprototyp
kan användas för en webbsida, en app…
ja, till och med en tweet.
Syfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Välkomna att ladda ner en gratis innehållsprototyp på axbom.se/ipro

40. @axbom
En innehållsprototyp
kan användas för en webbsida, en app…
ja, till och med en tweet.
Plats för exempel
Syfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Välkomna att ladda ner en gratis innehållsprototyp på axbom.se/ipro
Syfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Vill du bli tydligare med syfte, budskap och värde som din tjänst ger?
Använd en innehållsprototyp. axbom.se/ipro #webbdagarna

41. @axbom
En innehållsprototyp
kan användas för en webbsida, en app…
ja, till och med en tweet.
Plats för exempel
Syfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Välkomna att ladda ner en gratis innehållsprototyp på axbom.se/ipro
Syfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Vill du bli tydligare med syfte, budskap och värde som din tjänst ger?
Använd en innehållsprototyp. axbom.se/ipro #webbdagarna
Plats för exempelSyfte: Dra trafik till en landningssida. Bygg varumärke. För: deltagare på Webbdagarna
Fet *facepalm* när visuell design kommer före innehåll. Ligg ljusår före,
använd en innehållsprototyp: axbom.se/ipro #webbdagarna

42. @axbom
–Matt Jones
“Skribenter är världens snabbaste designers.”

43. @axbom
–Abby Covert
“Skrivande kommunicerar avsikt.”

44. @axbom
En innehållsprototyp
kommunicerar tydligt
syfte, värde och nytta.

45. @axbom
Genom att först ta fram bra,
strukturerat innehåll tillgodoser du
den minsta gemensamma nämnaren i
sättet som användaren konsumerar
innehållet, vare sig det är en liten
skärm, en textläsare eller en TV.
Innehållet funkar överallt.

46. @axbom
enwebbsida.se

47. @axbom
enwebbsida.se/fk

48. @axbom
enwebbsida.se/fk

49. @axbom
enwebbsida.se/fk

50. @axbom
enwebbsida.se/fk

51. @axbom
enwebbsida.se/fk

52. @axbom
enwebbsida.se/fk

53. @axbom
enwebbsida.se/fk

54. @axbom
enwebbsida.se/fk

55. @axbom
– Men vi har inget innehåll!

56. @axbom
– Det finns alltid innehåll!
•Den gamla sajtens innehåll
•Konkurrenters innehåll
•Skriv innehållet!

57. @axbom
Ditt innehåll kommer förändras
Med en innehållsprototyp jobbar du
kollaborativt, iterativt, inkluderande,
generöst och genomtänkt.
Innehållet kommer inte först eller
sist, det händer hela tiden – det är
innehållet som är din verksamhet.
Innehållet visar din avsikt.

58. @axbom

59. @axbom
@axbom
Gratis mall för innehållsprototyp:
axbom.se/ipro