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 webbplatsern ä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 skapar en knapp handfull teman för att jobba med färger och typografi och samtidigt träna oss i att organisera LESS-koden så att den blir återanvändbar mellan olika teman. Att använda LESS-variabler (och moduler) gör att vi kan återanvända ett bastema och anpassa det för olika sammanhang.

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

#Kurslitteratur

Läs följande:

1. Läs i boken “The principles of Beautiful Web Design”.

   • Kap 2: Color
   • Kap 4: Typography (repetera)

#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ärgshema 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 colour theory”, om du finner den intressant. Det handlar om färgteori, varainter 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 responsivitet

Läs följande om responsivitet.

1. Kika snabbt igenom artikeln “A More Modern Scale for Web Typography”. Poängen med artikeln är att hantera typsnitt på ett responsivt sätt. Fundera igenom om detta konceptet är något för dig.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

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

2. Utför uppgiften “Teman med färger och typografi”. Spara allt i me/redovisa.

3. Försäkra dig om att du har gjort dbwebb publishpure redovisa 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ågon som är värt att nämna från arbetet med den?
• Berätta kort om din tanke bakom respektive teman, hur tolkade du “minimalistisk”, “colorful” och “dark”.
• Vilket färgschema valde du till respektive 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 tänkte du kring valet av typografi?
• Berätta om din kodstruktur av teman, jobbade du med bastema och hur löste du anpassningarna till de olika temana?
• Vilken är din TIL för detta kmom?

#Revision history