Kmom04: Färg

By . Latest revision .

Låt oss leka runt lite genom att skapa olika stilar, teman, för vår webbplats. Säg att vi skall skapa ett antal teman, ett ljust tema, ett mörkt, ett färgfullt och ett tema som står ut på grund av sin typografi. Det blir flera teman. Finns det något bra sätt att organisera sin LESS-kod så att man bygger upp en struktur som gör det enkelt att återanvända delar av ett tematemats bas-kod?

Låt oss se hur vi kan strukturera LESS-koden på ett smart sätt och samtidigt lära oss grunderna i vissa designkoncept.

De designkoncept vi först väljer att fokusera på är färglära och typografi. Vi tittar på hur man väljer färger och vi prövar olika typografiska val och vi utvärderar hur dessa val påverkar vår design.

Detta är mitt bastema i exemplet.

Detta är mitt bastema i exemplet.

Detta är mitt anpassade `custom` tema.

Detta är mitt anpassade custom tema.

Nu har jag ytterligare anpassat genom att ändra värden för variabler.

Nu har jag ytterligare anpassat genom att ändra värden för variabler.

(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äsanvisningar

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

#Tekniker för att skriva för webben

  1. Läs följande kapitel i guiden “Skriva för webben”.

      1. Rubriker som ger resultat

#Webbdesign och användbarhet

Lös följande artiklar.

  1. Läs artikeln “The Characteristics of Minimalism in Web Design”.

  2. Läs artikeln “An Introduction to Color Theory for Web Designers” som ger insyn i hur man väljer färger 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.

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

  5. Gå tillbaka till boken En praktisk guide till typografi på webben och se om du hitta något kapitel i den som kan inspirera dig till typografiska mästerverk i dina teman.

#Lästips

Följande tips hjälper dig igenom kursmomentet.

  1. Leta reda på en färgväljare (color chooser) som hjälper dig att välja färger och förstå färgscheman som monokromatiskt, kompletterande och triadiskt.

  2. Läs på om grunderna om färgteori och om hur man kan blanda dem förutsatt olika färgscheman.

  3. Ta reda på vad en färgpalett (color palette) innebär för en webbplats och studera exempel på färgpaletter.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Övningar

Genomför följande övning för att förbereda inför uppgifterna.

  1. I uppgiften används en temaväljare som finns i ditt Anax Flat. Läs om temaväljaren och se hur du kan konfigurera den och använda olika LESS-filer som grund till ett tema och din kommande familj av teman.

  2. Läs igenom artikeln “Skapa en familj av teman till Anax Flat”. Artikeln ger dig viss orientering i hur man kan tänka kring familjer av teman och visst underlag i konstruktioner som är bra att ha.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Utvärdera webbplatsers färgval och känslan de signalerar”.

  2. Utför uppgiften “Bygg en bas och en familj av teman”.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

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

  • Hur känner du inför färger och webbplatser? Föredrar du något särskilt ljust, mörkt, färgglatt?
  • Har du funderat på hur webbplatsers färgskala och färgsättning påverkar besökarens känsla av webbplatsen? Bidrar val av typsnitt till den känslan?
  • Hur känns din LESS-struktur så här långt?
  • Hur valde du att göra med ditt eget default tema?
  • Var det något särskilt som du uppfattade som utmanande i detta kmom?

#Revision history

  • 2017-11-17: (C, mos) Genomläst ingör ht17, förtydliganden.
  • 2016-10-26: (B, mos) Bytte plats från kmom03 till kmom04.
  • 2016-10-21: (A, mos) Första utgåvan.

Document source.