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.

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.

• Coolors.co - The super fast color schemes generator
• MaterialUI - FlatUIColors - Material UI Colors (and tons more)
• FlatUIColors - Flat colors (similar to materialui.com)
• Color Wheel - Adobe - Color Wheel, a color palette generator
• Web Gradients - Fresh Backgrounds Gradients

#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”.
   • Färg

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.

• Part 1: Modern colour theory
• Part 1: Traditional colour theory strikes back

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

• A Complete Guide to Dark Mode on the Web
  • Part 6 - Design Considerations

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

$ dbwebb update
$ dbwebb test kmom04

#Revision history