Kmom06: Tillgänglighet och prestanda

By . Latest revision .

Som avslutning på kursen så ska vi kolla över två områden som lätt hamnar i skymundan. Vi börjar med att kolla på begreppet “the final touch” som är bra att vara medveten om i sammanhanget design. Det handlar om det sista penseldraget och att se när man är “färdig” med sin design.

Ibland händer det att man tittar på sin webbplats och ser att den inte känns komplett, något saknas, men man har svårt att sätta fingret på vad det är. Vi pratar om webbplatsens design och känslan den ger när man tittar på den. Det kan vara de små sakerna som gör det, the final touch.

Det är lätt att stirra sig blind på sin egen sida och det är därför viktigt att kolla på den utifrån en kritisk synvinkel. För att hjälpa med detta så kommer vi att analysera vår egen portfolio i jämförelse med tre andra sidor inom samma kategori, personsidor kan vi kalla det.

Tavla Starry Night ([Stjärnenatt i Saint-Rémy](https://sv.wikipedia.org/wiki/Stj%C3%A4rnenatt)) av Van Gogh, 1889, används ofta i undervisning av Art & Design Principles.

Tavla Starry Night (Stjärnenatt i Saint-Rémy) av Van Gogh, 1889, används ofta i undervisning av Art & Design Principles.

Vi kommer även att kolla på hur vi kan förbättra vår sida sett ifrån tillgänglighet, “accessibility” som det heter på engelska. Vi använder oss utav verktyget Google Lighthouse där vi siktar på att nå 100 på samtliga sidor.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Läs följande:

  1. Läs i boken “The principles of Beautiful Web Design”.

    • Kap 3: Texture
    • Kap 1: Layout and Composition (repetera kapitlet, främst delarna med Balance, Unity, Emphasis)

#Design med HTML5 och CSS3

  1. Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.

I sektionen Design tittar vi tillbaka på tidigare sektioner och använder vår kunskap för att skapa en helhet med ett stort fokus på detaljen.

  1. Det har även tillkommit en del i guiden för förra kursmomentet som kan hjälpa er med tillgänglighet.

#Designelement och designprinciper

Gå igenom följande material om designelement och designprinciper, det ger dig en grund i vad det handlar om. Du behöver veta det för att utföra uppgiften.

  1. Titta igenom videos i spellistan Design – principer och element. Där finns samlat ett par korta videor som visualiserar, exemplifierar och förklarar designelement och designprinciper. Titta där för att få en uppfattning om begreppen och se hur de kan användas. I videoserien finns även en föreläsning om “Elements & Principles of Art” (överkurs) som kan vara intressant att titta på i sammanhanget.

  2. Studera ett par olika designprinciper och se hur designelement kan användas för att uppnå dessa principer. Materialet finns på webbplatsen Visual Literacy (oklart om länken fungerar) och en offline-kopia av webbplatsen finns i dokumentet vl.pdf.

  3. Läs mer om designprinciper i “Design Elements & Principles” som visualiserar, beskriver och exemplifierar 20 designprinciper.

  4. Hämta inspiration till designeffekter och designelement via exempel från CodePen. Här är en CodePen sökning på “effects” som ger en god start in bland exempel.

#Tillgänglighet

Gå igenom följande material om tillgänglighet, MDN erbjuder en liten mjukare läsning medans W3 är utförliga guidelines. Det finns även två verktyg som kan hjälpa dig, tillsammans med Google Lighthouse vi använder i uppgiften.

  1. What is accessibility - MDN” erbjuder en kort introduktion till begreppet “accessibility”.

  2. Web Content Accessibility Guidelines (WCAG)” är W3s guidelines kring “accessibility”. Som vanligt när det gäller W3 så är det ganska utförligt, men det är bra att veta att det finns.

  3. Ett annat bra verktyg att använda på sin sida är Toptal Colorblind Web Page Filter som tillåter dig att se hur sidan ser ut med olika typer av färgblindhet. Det kan vara bra att använda på sin sida så man ser att inga färger får dålig kontrast eller överlag få ett hum om hur sidan kan uppfattas av andra.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Utvärdera designprinciper som webbplatser använder sig av”. Du skall skriva en rapport, enskilt eller i grupp.

  2. Gör uppgiften “Tillgänglighet med Google Lighthouse”. Du ska kolla på hur din sida presterar i tillgänglighet enligt Google Lighthouse.

  3. Försäkra dig om att du har gjort dbwebb purepublish me och taggat din inlämning med version 6.0.0 (eller högre) samt pushat ditt repo och dess taggar till GitHub.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Hur känns det att tänka i termer av designelement och designprinciper?
  • Finns det något speciellt du vill lyfta fram från uppgiften “Utvärdera designprinciper som webbplatser använder sig av”. Vad tar du med dig från den uppgiften?
  • Gjorde du några uppdateringar till din egen sida utifrån vad du kom fram till i analysen?
  • Har du en uppfattning om “the final touch” och vad det kan vara i sammanhanget webbdesign?
  • Vilken är din TIL för detta kmom?

#Revision history

  • 2020-10-15: (A, nik) Nysläpp för design-v3

Document source.