Kursen design (v3)

By . Latest revision .

Kursen Teknisk webbdesign och användbarhet, a.k.a. design, lär webbprogrammeraren att tekniskt förbereda sin webbplats för design och användbarhet.

Kursen syftar till en orientering inom områden design och användbarhet, specifikt för tillämpningsområdet webb. Kursen har tekniken som utgångspunkt, där olika tekniker introduceras och används för att underlätta webbdesign och användbarhet för webbplatsen med syftet att skapa en korrekt och användarvänlig webbplats.

#Förkunskaper

Det formella förkunskapskravet är:

Genomgången kurs i Webbteknologier 7.5hp.

#Innehåll

Kursen omfattar följande områden:

  • Färglära och färgsättning av en webbplats
  • Typografi
  • Lagar och regler kring webbplatser
  • Anpassa webbplats för funktionshindrade
  • Grid-baserad layout
  • CSS-konstruktioner för style med CSS/SASS
  • Bygga tema till webbplats
  • Använda PHP-ramverk för att skapa och designa webbplats

#Mål

Kursens mål är indelade i undergrupper.

#Kunskap och förståelse

Efter genomförd kurs skall studenten:

  • påvisa grundläggande förståelse för teknisk webbdesign och användbarhet genom att skriftligen beskriva och sammanfatta erfarenheter och observationer från övningar och projekt.
  • påvisa goda kunskaper i att anpassa och designa en webbplats via praktiska övningar och projekt.

#Färdighet och förmåga

Efter genomförd kurs skall studenten:

  • självständigt utveckla, dokumentera och presentera ett projekt inom webbdesign och användbarhet.
  • ha god praktisk förmåga att hantera de tekniker, verktyg och miljöer som används för att designa och göra en webbplats användbar.

#Kursmoment

Kursen är uppdelad i kursmoment där varje kursmoment uppskattas till 20h studerande i form av programmering, undersökning, läsande, övningar, uppgifter, redovisning och eftertanke. Alla kursmoment skall redovisas och du samlar alla redovisningar i din me-sida.

#Kmom01: Ramverk, innehåll, style

Vi ska ta oss en titt på den mjukare delen av webbprogrammering, webbdesign och användbarhet. Det handlar också om snabba sidomladdningar, sökmotoroptimering, att skriva för webben och hur vi väljer att organisera webbplatsens material. Vi ska även kolla över de tekniker som används för att uppnå detta.

Instruktion till kursmoment 01.

#Kmom02: SASS och typografi

Vi går igenom hur man kan designa med SASS, som är en preprocessor till CSS. Vi lär oss grunderna, hur vi bygger CSS-filer ifrån våra SASS-konstruktioner.

Vi går även igenom fonter, vad man ska tänka på kring valet av font, var man kan hitta fonter och hur man använder dem tillsammans med SASS. Vi nuddar även ikoner, skillnaden mellan webbläsarna och begreppet minifiering.

Instruktion till kursmoment 02.

#Kmom03: Layout

Med hjälp utav CSS-grid och flexbox går vi igenom hur man kan lägga upp sin layout, vad man ska tänka på och hur de båda teknikerna används.

Vi går även igenom vad polyfill är, hur man kan placera saker utanför sin layout och webbläsarens devtools, som är webbutvecklarens bästa vän.

Instruktion till kursmoment 03.

#Kmom04: Färg

Vi tittar på färger, färghjulet och olika tekniker för att kombinera färger i ett sammanhang, så kallade färgscheman.

Vi jobbar med tekniker kring hur en webbplats kan färgläggas. Men innan det funderar vi igenom om de vanligaste webbplatsern är färgglada eller inte? Det kan vara så att många webbplatser har ett begränsat användande av färger. Om det stämmer, hur kan det komma sig?

Instruktion till kursmoment 04.

#Kmom05: Bilder

Låt oss ägna ett kursmoment åt att testa runt med bilder, bildverktyg och bildformat samt hur vi publicerar bilderna på en webbplats, inklusive responsivitet.

Vi skall se hur vi kan använda bilder för att skapa “bildtunga” teman, här är bilderna en viktig ingrediens i webbplatsens tema.

Instruktion till kursmoment 05.

#Kmom06: Tillgänglighet och prestanda

Vi arbetar med verktyget Google Lighthouse för att på ett tydligt sätt kunna se hur vi kan förbättra vår hemsida.

Instruktion till kursmoment 06.

#Kmom07/10: Projekt och examination

Avslutningsvis gör du ett projekt enligt en specifikation. Projektet är det sista som du gör och tillsammans med alla redovisningar som finns på din me-sida så används detta som underlag för att examinera dig från kursen.

Instruktion till kursmoment 10.

#Kursplan

Kursplanen är kursens formella dokument som fastställts av högskolan. När kursen utvärderas görs det mot kursplanen. I kursplanen kan du läsa om kursens klassificering, syfte, innehåll, mål, generella förmågor, lärande och undervisning, bedömning och examination, litteratur, mm.

Du hittar kursplanen genom att söka på kurskoden PA1436 via BTH’s hemsida.

#Versioner av kursen

Om du påbörjat den äldre version av kursen så skall du också slutföra denna versionen av kursen (eller göra om den nya kursen från start). Alternativt rådgör du med den som är kursansvarig.

För tillfällen från höstterminen 2020 så finns kursmaterialet till design (v3) här.

För tillfällen från hösten 2018 till och med hösten 2019, så finns kursmaterialet till den kursen i design (v2).

För tillfällen fram till och med höstterminen 2017, så finns kursmaterialet till den kursen i design (v1).

#Revision history

  • 2020-08-25: (A, nik) Landningssida för v3.

Document source.