Kurs i UX och responsiv webbdesign

Lektion 1 • Design thinking-processen

Introducerar design thinking-ramverket i fem steg som en problemlösningsmetod. Ger det iterativa tankesätt som tillämpas i alla följande kapitel.

Lektion 2 • Vad UX-design egentligen innebär

Definierar UX bortom estetik och täcker användbarhet, nytta och önskvärdhet. Etablerar den vokabulär som används genom hela kursen.

Lektion 3 • Tillgänglighet och inkluderande design

Etablerar tillgänglighet som ett grundläggande designkrav, inte en eftertanke. Introducerar globala riktlinjer för innehållstillgänglighet och principer för inkluderande design.

Lektion 1 • Enkäter och kvantitativa metoder

Introducerar enkätdesign, användbarhetsbenchmarking och tolkning av analysdata. Kompletterar kvalitativa resultat med mätbara beteendedata.

Lektion 2 • Intervjuer och kontextuell kartläggning

Lär ut tekniker för strukturerade och semistrukturerade intervjuer tillsammans med observation i kontext. Bygger färdigheter för att fånga autentiskt användarbeteende och motivationer.

Lektion 3 • Planera en forskningsstudie

Täcker forskningsmål, omfattning och metodval innan fältarbetet påbörjas. Säkerställer att forskningsfrågor ligger i linje med de designbeslut som ska fattas.

Lektion 1 • Webbplatskartor och innehållshierarkier

Producerar formella webbplatskartedokument som kommunicerar struktur till intressenter och utvecklare. Anpassar innehållshierarkin efter användarnas mentala modeller från forskningen.

Lektion 2 • Kortsortering och trädtestning

Lär ut öppen och sluten kortsortering för att validera kategoristrukturer med användare. Trädtestning verifierar navigeringsetiketter innan visuell design tillämpas.

Lektion 3 • Designa navigeringssystem

Täcker globala, lokala och kontextuella navigeringsmönster för webb och mobil. Kopplar navigeringsdesign till de användaruppgiftsflöden som etablerats i forskningen.

Lektion 1 • Digitala wireframing-verktyg

Täcker branschstandardiserade wireframing-verktyg för att skapa medelupplösta skärmlayouter. Bygger verktygsskicklighet som tillämpas i prototyp- och överlämningsfaserna.

Lektion 2 • Skissning och lågupplösta wireframes

Introducerar snabbskissning och papperswireframes som snabba idégenereringsverktyg. Lågupplösta artefakter kommunicerar layout utan att distrahera intressenter med visuell finish.

Lektion 3 • Bygga interaktiva prototyper

Kopplar ihop wireframes till klickbara flöden som simulerar verkligt produktbeteende. Prototyper avgränsas för att testa specifika användaruppgifter som identifierats i forskningen.

Lektion 4 • Användbarhetstestning med prototyper

Tillämpar prototyper i modererade och omodererade användbarhetstester för att validera designbeslut. Sluter forsknings-design-loopen före investering i visuell design.

Lektion 1 • Layout, avstånd och visuell hierarki

Tillämpar nätsystem, avståndsskalor och visuell tyngd för att styra användarens uppmärksamhet. Konsekventa avstånd och hierarki minskar kognitiv belastning och förbättrar skannbarheten.

Lektion 2 • Typografi för digitala gränssnitt

Täcker typsnittsval, skala, radhöjd och kontrast för skärmläsbarhet. Typografiska beslut påverkar direkt tillgänglighet och varumärkesuppfattning.

Lektion 3 • Färglära och färgsystem för användargränssnitt

Lär ut färgpsykologi, kontrastkrav och systematisk palettkonstruktion. Ett strukturerat färgsystem säkerställer konsekvens över alla gränssnittstillstånd.

Lektion 4 • Ikonografi och bildmaterial

Täcker ikondesignprinciper, bildval och illustrationsstil för användargränssnittssammanhang. Visuella resurser måste förstärka mening utan att skapa tvetydighet.

Lektion 1 • Media queries och brytpunkter

Tillämpar min-width och max-width queries för att anpassa layouter vid definierade brytpunkter. Täcker modern range-syntax och container queries för komponentnivå-responsivitet.

Lektion 2 • CSS Flexbox för responsiva layouter

Lär ut Flexbox-axlar, justering och radbrytning för att bygga endimensionella responsiva komponenter. Flexbox tillämpas på navigeringsfält, kortrader och formulärlayouter.

Lektion 3 • Responsiva bilder och media

Lär ut srcset, sizes och picture-elementet för att leverera bilder i lämplig storlek. Optimerad medieleverans förbättrar prestandan på alla enhetstyper.

Lektion 4 • CSS Grid för komplexa layouter

Täcker grid template areas, auto-placement och namngivna linjer för tvådimensionella layouter. Grid möjliggör sidnivåstruktur som enbart Flexbox inte kan uppnå.

Lektion 1 • Avancerade selektorer och specificitet

Lär ut pseudoklasser, pseudoelement och specificitetshantering för underhållbar CSS. Minskar stilkonflikter som är vanliga i stora responsiva kodbaser.

Lektion 2 • CSS-arkitektur och skalbarhet

Introducerar BEM, utility-first och CSS Modules som metoder för skalbara stilmallar. Skalbar arkitektur förhindrar specificitetskonflikter i stora responsiva projekt.

Lektion 3 • CSS-övergångar och mikroanimationer

Tillämpar övergångsegenskaper för att skapa mjuka tillståndsförändringar som förstärker interaktionsåterkoppling. Mikroanimationer förbättrar upplevd prestanda och styr användarens uppmärksamhet.

Lektion 4 • Keyframe-animationer i CSS

Bygger komplexa flerstegsanimationer med @keyframes för laddningstillstånd och onboarding-flöden. Täcker prestandasäkra egenskaper och animationsorkestrering.

Lektion 1 • Bästa praxis för designöverlämning

Täcker annotering, redline-specifikationer och arbetsflöden för resursexport som minskar otydlighet för utvecklare. Noggranna överlämningsdokument förhindrar kostsamma implementeringsfel.

Lektion 2 • Kvalitetssäkring och testning av responsiv design

Tillämpar testning över webbläsare och enheter för att verifiera att responsivt beteende matchar designintentionen. Kvalitetssäkring sluter gapet mellan designspecifikationer och levande implementation.

Lektion 3 • UX-mått och framgångsmätning

Definierar kvantitativa och kvalitativa mått som kopplar UX-beslut till affärsresultat. Måtten som etableras här vägleder utvärdering efter lansering i slutprojektet.

Lektion 4 • Slutprojekt och portföljpresentation

Syntetiserar alla kursens färdigheter till en komplett fallstudie inom UX och responsiv webbdesign. Portföljpresentationen förbereder deltagarna för professionella designintervjuer.