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.

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

#Färg

Lös följande artiklar för att få en bakgrund i allmän layout kopplad till färger och färgscheman.

  1. Läs artikeln “The Characteristics of Minimalism in Web Design”. Artikeln sammanställer ett antal webbplatsers karaktäristik och diskuterar kring valet av stil och färgval. Fokuset är på minimalism, att “hålla det enkelt”.

  2. Läs artikeln “An Introduction to Color Theory for Web Designers” som ger insyn i hur man väljer färger och färgschema för en webbplats.

  3. Läs kapitel 13 i boken Web Design - The Complete Reference. Det handlar om “Color and Usability” och “The Hidden Meaning of Colors” och ger en kort introduktion till färger och webbdesign.

#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-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Kommentera kort om skrivuppgiften, något som är värt att nämna från arbetet med den?
  • Vilket färgschema valde du till ditt tema och hur valde du att använda färgerna (mer eller mindre eller lika mycket av alla färger)?
  • Valde du att jobba med accentfärg och isåfall hur?
  • Hur valde du att lösa ditt dark theme? Gjorde du en kopia på ditt vanliga tema? Eller löste du det med imports?
  • Vilken är din TIL för detta kmom?

#Revision history

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

Document source.