Ltu vinter fredrik_johansson

Mobile first!Fredrik JohanssonArt Director, Vinter

fredrik.johansson@vintermail.seskype freddejohanssontwitter fredrikjohansson.comfacebook.com/sirfredrik

Generellt kan man tänka att, en webb är värdelös om den inte bidrar till ett eller båda av följande:

1. Stödjer ett viktigt affärsmål för ägaren

2. Hjälper en användare (eller kund) att slutföra en uppgift

interaktivt berättande

Mänskliga mekanismer är alltid föremål för påverkan av omvärlden och kommer därför alltid vara under ständig förändring.

animation!Walt Disney skapade från sista rutan och framåt. Det var funktionen

som styrde. Frågan "Vad är det önskade resultatet?" Animation är alltså synonymt med önskad aktion/förflyttning. Animation är alltså "reaktion".

mänskliga mekanismer*

Mänsklig psykologi består av stora antal funktionellt specialiserade mekanismer som var och en är känsliga för specifika former av kontextberoende information som kombineras,

koordineras och integreras med varandra för att skapa uttryckt beteende.

011010110

typografi“Good typography is invisible. Bad typography is everwhere.”

använd inte fler än tre*

Det handlar om identitet, läsbarhet och sunt förnuft. Och att man använder sig av bra webfonts eller websafetypsnitt :)

serif/ san serif

Teckensnitt. Läsbarhet. Smart typografi. Den typografiska helheten.

google webfonts

Gratis arkiv av typsnitt som ger designers mer möjligheter att skapa attraktiva siter och web applications. Alla typsnitten är även Open Source (gratis & anpassningsbara).

“Välj, jämför, använd...” http://www.google.com/webfonts#HomePlace:home

bildenRetorik. Kontext. Komposition.

formenForm och innehåll. Text och bild. Då och nu. Fyra designprinciper.

fyra design-principer

Kontrast. Balans. Linje. Rytm.

färgenFunktionell färg. Hur vi ser färg. Val av färger.

ljudetLjudets uppgift. Sound Design. Inception.

samspeletDelaktighet. Ord och bild. Harmoni. Ett litet test...

tänk längre!

Lär känna din målgrupp genom dialog och research. Hur passar du själv in?

• Vem är användaren/Hur ser målgruppen ut?

• Vad är deras huvudsakliga syfte?

• Vad är deras begränsningar?

• Vad behöver de (verkligen) göra?

läs inte tankar!

Att läsa tankar fungerar inte för Uri Geller och det kommer inte fungera för Dig Heller:)

Designa för en funktion och inte för ett format!

teknologin gör framsteg

Vi har börjat designa för fler och fler plattformar. Vi lär oss och använder nya verktyg hela tiden men Web Design processen ser oftast den samma ut.. Är inte det sjukt märkligt?

mobile!Varför har detta idag blivit ett samlingsord för allting som inte är desktopbaserat?

Fokusera på användaren och innehållet. Skärmen avgör. Syfte. Inventera och prioritera.

smartphonestablets

desktops

smartphonestablets

desktops

kontrollera

fördjupa

administrera

desktop datorer

På en stationär dator förväntar vi oss ofta få all information levererad direkt till skärmen. Ingen sortering krävs, den gör vi själva. Vi har dom

verktyg vi behöver nära till hands.

tabletsPå en surfplatta förväntas vi göra ett aktivt val:

Om vi vill läsa håller vi platten som en bok och vi får en smal feed med nyheter och om vi vill interagera med

innehållet håller vi plattan liggandes.

smart phonesDen allmänna uppfattningen är att vi på en smartphone

vill berätta vad vi gör eller läsa feeden från andra.

1600 pxl

1600 pxl

1. Meny (navigering)2. Logo3. Introtext4. Huvudpersoner5. Avsändare/disclaimer

1440 pxl

1024 pxl

800 pxl

<600 pxl

<600 pxl

1. Content inventering (behovsanalys)

Våra läsare ska kunna förd-jupa sig i karaktärerna och navigera mellan olika delar.

1. Meny2. Logo3. Huvudartikel4. Huvudobjekt5. Avsändare/disclaimer

<600 pxl

1. Content inventering (behovsanalys)

2. Referens wireframe

Våra läsare ska kunna förd-jupa sig i karaktärerna och navigera mellan olika delar.

1. Meny2. Logo3. Huvudartikel4. Huvudobjekt5. Avsändare/disclaimer

1

2

5

4

3

<600 pxl

1. Content inventering (behovsanalys)

2. Referens wireframe

3. Linjär design

Våra läsare ska kunna förd-jupa sig i karaktärerna och navigera mellan olika delar.

1. Meny2. Logo3. Huvudartikel4. Huvudobjekt5. Avsändare/disclaimer

1

2

5

4

3

content first!

Lösningen blir idag allt oftare att vi designar inifrån och ut. Egentligen handlar det alltså om hur Funktion + Form = Design. Och utan Funktion eller Form så är Design egentligen

bara Konst alltså.

content first!

Börja din designprocess utan verktyg och addera endast dom verktyg du behöver, när du behöver dom. Skriv, skissa och diskutera! ..skriv, skissa och diskutera mer...

content first!

Mycket av vårt beslutsfattande baseras på tekniska begränsningar. Detta är inte bra! Enheternas plattformar förändras hela tiden. Nya möjligheter och framsteg avlöser

varandra. Content är ett framtidssäkrat designtänk.

less is more!

Går det att skala bort någonting och framhäva funktionen ytterligare? (Nu är vi tillbaka i grundprincipen om att den generella tanken är att webben

ska stödja/ha en funktion eller driva till ökad affärsnytta för våra kunder.)

be stupid.

"Forget everything you ever learned about graphic design. Even the things I've told you here today."