Innehåll först med innehållsprototyper

En presentation på Webbdagarna i Göteborg 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.

Transcript

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 – Vilka sajter gillar du?
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 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
33. @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
34. @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
35. @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 exempel Syfte: 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
36. @axbom –Matt Jones “Skribenter är världens snabbaste designers.”
37. @axbom –Abby Covert “Skrivande kommunicerar avsikt.”
38. @axbom En innehållsprototyp kommunicerar tydligt
 syfte, värde och nytta.
39. @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.
40. @axbom enwebbsida.se
41. @axbom enwebbsida.se/fk
42. @axbom enwebbsida.se/fk
43. @axbom enwebbsida.se/fk
44. @axbom enwebbsida.se/fk
45. @axbom enwebbsida.se/fk
46. @axbom enwebbsida.se/fk
47. @axbom enwebbsida.se/fk
48. @axbom enwebbsida.se/fk
49. @axbom – Men vi har inget innehåll!
50. @axbom – Det finns alltid innehåll! •Den gamla sajtens innehåll •Konkurrenters innehåll •Skriv innehållet!
51. @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.
52. @axbom
53. @axbom @axbom Gratis mall för innehållsprototyp: axbom.se/ipro