Kmom04: Färg

By . Latest revision .

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

Ett akromatiskt färgschema med vitt, svart och nyanser av grått.

Ett monokromatiskt färgschema med en basfärg och olika nyanser av den.

Ett complementary färgschema med en röd basfärg och två komplementfärger (blå/grön) på motsvarande sida av färghjulet, som kan användas som försiktigt som accentfärger eller för att kraftfullt färglägga webbplatsen.

Vi jobbar med tekniker kring hur en webbplats kan färgläggas. Men innan det funderar vi igenom om de vanligaste webbplatserna ä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?

Vi lyfter in vår nyfunna kunskap om färger till vårt nuvarande tema och därefter ska vi implementera ett “Dark Theme” på vår hemsida, som bygger på vårt ursprungliga tema. Detta blir en smidig övergång om vi använder oss utav variabler i vår SASS-kod.

Vi gör även ett en studie om webbplatsers val av färger och typografi där vi skriver en rapport som vi publicerar i vår portfolio-sida. Rapporten kan man välja att lösa i grupp eller enskilt.

Klar med kmom04

(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)

#Verktyg

Nedan är några verktyg/hemsidor som kan hjälpa er hitta färger att jobba ifrån.

#Kurslitteratur

Läs följande:

  1. Läs i boken “The principles of Beautiful Web Design”.
    • Kap 2: Color

#Design med HTML5 och CSS3

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

I sektionen Färg tittar vi på hur vi kan använda färg för att skapa en specifik känsla på en webbplats. Vi börjar med en kort introduktion till färgteori för att gå vidare till hur vi kan välja vilka färgar som fungerar tillsammans.

#Om färgteori

Läs följande artikel “Traditional and Modern color theory”, om du finner den intressant. Det handlar om färgteori, varianter av färghjul och hur färgteori lärs ut kontra dess historik.

#Om Dark Mode

Läs igenom följande artikel, främst del 6, kring hur man kan tänka när man applicerar ett mörkt tema på en hemsida.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övning

  1. Arbeta igenom artikeln Sätt upp session i Pico som beskriver hur du sätter upp sessionen i Pico. Detta tillåter oss att byta tema.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Utvärdera webbplatsers färgval och känslan de signalerar”. Du skall göra en analys av webbplatser och skriva en kort rapport. Jobba enskilt eller i grupp. Spara allt i me/portfolio.

  2. Utför uppgiften “Skapa ett mörkt tema” där du jobbar vidare med ditt nuvarande tema och lägger till ett mörkt tema.

  3. Försäkra dig om att du har gjort dbwebb publishpure me och taggat din inlämning med version 4.0.0 (eller högre) samt pushat repot inklusive taggarna till GitHub.

#Resultat & Redovisning

(ca: 1 studietimme)

Läs instruktionen om hur du skall redovisa.

Kom ihåg att publicera din portfölj till GitHub. Använd nedanstående kommandon i terminal när du står i `me/portfolio:

git push
git push origin --tags

Publicera sedan till studentservern med följande kommando:

dbwebb publishpure me

Gör Quiz på Canvas och lämna sedan in din inlämning i den nu upplåsta uppgiften. Länka till din portfölj på studentservern som en del av din inlämning.

#Testa din inlämning

Kommandot dbwebb test testar att grunderna för kmom’et är på plats. Vår rättning utgår från detta kommando.

# Stå i kursrepots rot (dbwebb-kurser/design)
$ dbwebb update
$ dbwebb test kmom04

#Revision history

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

Document source.