Kursen design (v1)

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

#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 och innehåll

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.

Instruktion till kursmoment 01.

#Kmom02: LESS och responsiv design

Då är det dags att vi skapar vårt eget tema till webbplatsen. Låt oss fylla vår me-sida med style med hjälp av LESS ooch en god och modulariserad kodstruktur.

Stylen skapar vi med LESS, en preprocessor till CSS. Vi skall skapa en struktur av LESS-filer som blir enkla att återanvända. Stylen vi skapar gör vi responsiv så att den anpassar sig för skärmens storlek. Våra webbplatser måste fungera lika bra på desktop som på läsplatta och mobil.

Instruktion till kursmoment 02.

#Kmom03: Grid, layout och typografi

Låt oss titta på gridbaserad layout, ett grid som bestämmer var vi placerar ut innehållet på webbplatsens sidor. Vi skall titta på ett vertikalt grid som ger oss rader och kolumner och vi skall undersöka ett horisontellt grid som vi även kan kalla ett typografiskt grid.

Instruktion till kursmoment 03.

#Kmom04: Färg

Låt oss leka runt lite genom att skapa olika stilar, teman, för vår webbplats. Säg att vi nu skall skapa ett antal teman, ett ljust tema, ett mörkt, ett färgfullt och ett tema som står ut på grund av sin typografi.

Instruktion till kursmoment 04.

#Kmom05: Bilder

Kursmomentet har ett fokus på att hantera och presentera bilder i olika storlekar i webbplatsen.

Instruktion till kursmoment 05.

#Kmom06: Design

Det finns ett begrepp “the final touch” som jag vill ta upp i sammanhanget design. Det handlar om det sista penseldraget och att se när man är “färdig” med sin design.

Vi tittar på “the final touch” i form av design element och designprinciper.

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

#Referenslitteratur

Följande böcker har jag valt som referenslitteratur. De kan vara bra att ha tillhands och ger lite extra läsmöjligheter. De behövs inte för att klara kursen men vill du bemästra kursens område så är dessa böcker bra startpunkter.

• HTML och CSS-boken

#Läsanvisningar

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

#Lektionsplan och rekommenderad studieplan

Läser du kursen inom ramen för programmet Webbprogrammering (campus/distans) så finns det en rekommenderad studieplan inom programmet.

Läser du kursen som en del i ett kurspaket så finns det en studieplan som är kopplad till kurspaketet.

För dig som studerar kursen som enskild kurs finns det en rekommenderad studieplan kopplad till de kurstillfällen som erbjuds.

Vissa av kurstillfällena har även en lektionsplan som du får i samband med kursstart. Lektionsplanen visar de tillfällena som är schemalagda träffar.

Finns det en lektionsplan så finns ofta bokningar av salar gjorda i bokningsschemat.

Studieplan, eventuell lektionsplan och eventuellt schema finns tillgängligt via kurstillfället på ITs.

Läs mer om den rekommenderade studieplanen och lektionsplanen.

#Lärarstöd och handledning

Schemalagda labbtillfällen, hangouts samt forum och chatt de viktigaste källorna för handledning. Läs om handledning och hjälp-till-självhjälp.

#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.

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.

#Revision history