Kursen design (v2)

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, horisontell och vertikal
• CSS-konstruktioner för style med CSS/LESS/SASS
• Bygga tema till webbplats
• Använda PHP-ramverk för att skapa och designa webbplats
• Sökmotoroptimering

#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

Låt oss kika på några av de mjukare aspekterna inom webbprogrammering. Det handlar om webbdesign och användbarhet. Men det handlar också om snabba sidladdningar, sökmotoroptimering, att skriva för webben och hur vi väljer att organisera webbplatsens material. Även om vi tittar på de mjuka aspekterna så är tanken att vi lära oss “hårda” tekniker för att jobba med de mjuka. Låt se vad det kan innebära i praktiken. Vi bygger vår första style med CSS.

Instruktion till kursmoment 01.

#Kmom02: LESS och responsivitet

Temat, eller stylen, skapar vi med LESS, en preprocessor till CSS. Vi lär oss grunderna i LESS och hur vi bygger CSS-filer från LESS-konstruktioner.

Vi försöker bygga en modulär struktur av LESS-filer som vi delar in i LESS-moduler. Det skapar en grund av style-kod som blir enkla att återanvända i andra sammanhang, eller längre fram när vi gör fler teman och anpassar våra teman.

Instruktion till kursmoment 02.

#Kmom03: Grid, layout, typografi

Vi skall titta på ett vertikalt grid som ger oss kolumner tillsammans med mellanrum¸ gutter, som skapar ett vitt utrymme, så kallat white space. Här kan vi placera våra regioner i rader.

Vi tittar sedan vidare på ett horisontellt grid som vi även kan kalla ett typografiskt grid, eller ett baseline grid där syftet är att alla typografiska element vilar på en rad i ett tänkt horisontellt rutnät för att skapa en vertical rythm i de typografiska elementen.

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: Design

Det finns ett begrepp “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.

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.

#Kurslitteratur

Måste jag skaffa kurslitteraturen?

#Kurslitteratur

Som kurslitteratur har jag valt följande böcker, tillsammans med ett antal artiklar som finns tillgängliga på nätet.

Det finns läsanvisningar i samband med varje kursmoment.

• The Principles of Beautiful Web Design

#Övrig litteratur

I varje kursmoment kan det tillkomma läsanvisningar i till exempel artiklar, manualer och webbmaterial.

#Läsanvisningar

Här följer en sammanställning av de läsanvisningar till kurslitteraturen som ges i varje kursmoment.

#Rekommenderad studieplan

Kursen har en rekommenderad studieplan som visar en översikt över kursens olika moment och när de i tiden bör utföras för att studenten skall ligga i fas med kursens planering.

I studieplanen visas när rättning sker av respektive inlämnat moment samt när det finns möjligheter att göra restinlämningar.

Läs mer om den rekommenderade studieplanen.

#Lektionsplan

Det finns en lektionsplan som visar en detaljplanering för undervisningen i kursen, vecka för vecka.

Läs mer om lektionsplanen.

#Handledning

Förutom den planerade undervisningen enligt lektionsplanen så kan du få hjälp och stöd i kursens chatt och i forumet. Chatten lämpar sig för korta enkla frågor och forumet för mer utredande och längre frågor och svar. Om du inte får svar i chatten så rekommenderas att du postar i forumet.

Läs om lärarstöd och handledning.

#Betygsättning

Det finns ett särskilt dokument som beskriver hur bedömning och betygsättning sker.

#Ladok

Enligt kursplanen finns ett antal ladokmoment och de är kopplade till kursens kursmoment enligt följande.

Den sista inlämningen bestämmer kursens slutbetyg vilket utfärdas när samtliga moment godkänts.

Läs mer om rapportering av resultat.

#Kursutvärdering och kursutveckling

Det finns ett särskilt dokument som beskriver hur arbetet med kursutvärderingar och kursutveckling sker. Det är oerhört viktigt för mig att du säger till vad du tycker om kurs och kursmaterial, du kan alltid hojta till i både forum, chatt eller mail.

Läs om hur vi jobbar med kursutvärdering och kursutveckling.

#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å används kursmaterialet till design (v3).

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

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

#Revision history