Upload
fredrik-johansson
View
155
Download
2
Embed Size (px)
Citation preview
Mobile first!Fredrik JohanssonArt Director, Vinter
[email protected] 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."