Kmom06: Design

Det finns ett begrepp “the final touch” som är bra att vara medveten om i sammanhanget design. Det handlar om det sista penseldraget och att se när man är “färdig” med sin design.

Ibland händer det att man tittar på sin webbplats och ser att den inte känns komplett, något saknas, men man har svårt att sätta fingret på vad det är. Vi pratar om webbplatsens design och känslan den ger när man tittar på den. Det kan vara de små sakerna som gör det, the final touch.

Nåväl, låt oss jobba vidare med olika designer för webbplatser för att träna vår känsla för de små detaljerna. Studera din design och ifrågasätt den. Kanske är det för mycket symmetri, ett osymmetriskt element skapar en bättre balans. Kanske är det förhållandet mellan sidans element som kan justeras till en annan känsla. Eller är det rörelse som saknas i sidan, den känns för stillastående?

Eller kan ett litet designelement vara det som gör att sidan blir mer framträdande och tongivande, något enkelt men som sticker ut och får något att hända med designen, det blir mer liv i den, men intressant.

Låt oss träna på designprinciper och designelement och se om det hjälper oss att jobba med “the final touch”.

Tanken är inte att vi skall bli webbdesigners. Tanken är att vi skall studera några av de tekniker som en designers använder sig av och därmed kan vi bättre förstå hur design fungerar i grunden och det hjälper oss att förstå bakomliggande principer och det hjälper vår dialog med designers.

(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: 6-8 studietimmar)

#Kurslitteratur

Läs följande:

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

   • Kap 3 Texture
   • Kap 1 Layout and Composition (repetera kapitlet, främst delarna med Balance, Unity, Emphasis)

#Design med HTML5 och CSS3

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

I sektionen Design tittar vi tillbaka på tidigare sektioner och använder vår kunskap för att skapa en helhet med ett stort fokus på detaljen.

#Designelement och designprinciper

Gå igenom följande material om designelement och designprinciper, det ger dig en grund i vad det handlar om. Du behöver veta det för att utföra uppgiften.

1. Börja på Wikipedia om Visual design elements och principles. Ambitionen är att du kan identifiera vad som är ett designelement och vad som är en designprincip.

2. Titta sedan igenom videos i spellistan Design – principer och element. Där finns samlat ett par korta videor som visualiserar, exemplifierar och förklarar designelement och designprinciper. Titta där för att få en uppfattning om begreppen och se hur de kan användas. I videoserien finns även en föreläsning om “Elements & Principles of Art” (överkurs) som kan vara intressant att titta på i sammanhanget.

3. Studera ett par olika designprinciper och se hur designelement kan användas för att uppnå dessa principer. Materialet finns på webbplatsen Visual Literacy (oklart om länken fungerar) och en offline-kopia av webbplatsen finns i dokumentet vl.pdf.

4. Läs mer om designprinciper i “Design Elements & Principles” som visualiserar, beskriver och exemplifierar 20 designprinciper.

5. Hämta inspiration till designeffekter och designelement via exempel från CodePen. Här är en CodePen sökning på “effects” som ger en god start in bland exempel.

#Om responsivitet

Läs följande om responsivitet.

1. Läs artikeln “Multi-Device Content” som ger dig en insyn i hur man kan tänka kring innehåll, text och artiklar när det kommer till responsivitet.

#Övningar & Uppgifter

(ca: 10-12 studietimmar)

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

1. Gör uppgiften “Utvärdera designprinciper som webbplatser använder sig av”. Du skall skriva en rapport, ensilt eller i grupp.

2. Gör uppgiften “Skapa tema med designelement”. Du får träna på att använda olika designelement för att lyfta fram din design.

3. Gör uppgiften “Skapa tema enligt designprinciper”. Du får träna på att använda alla tekniker du kan för att lyfta fram din design via olika designprinciper.

4. Försäkra dig om att du har gjort dbwebb publishpure redovisa och taggat din inlämning med version 6.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.

• Hur känns det att tänka i termer av designelement och designprinciper?
• Finns det något speciellt du vill lyfta fram från uppgiften “Utvärdera designprinciper som webbplatser använder sig av”. Vad tar du med dig från den uppgiften?
• Berätta fritt om arbetet med dina teman som bygger på designelement och designprinciper, hur gick det att jobba med designen på det sättet?
• Har du en uppfattning om “the final touch” och vad det kan vara i sammanhanget webbdesign?
• Vilken är din TIL för detta kmom?

Vill du ha svar på frågor och funderingar så ställer du en fråga i forumet.

#Revision history