vad hände (inte) med den grafiska profilen?

83
Vad hände (inte) med den grafiska profilen?

Upload: creuna-sverige

Post on 09-Dec-2014

1.021 views

Category:

Documents


7 download

DESCRIPTION

Vi stöter fortfarande på grafiska manualer där hänsyn inte tagits till digitala medier. Det är både märkligt och tråkigt. På detta seminarium reder vi ut vilka faktorer man måste titta djupare på och förstå för att lyckas med en grafisk manual i en digital tid. Vår tes är att man i varumärkets grafiska utformning måste identifiera och ta hänsyn till olika områdens inbyggda restriktioner och möjligheter för att sedan kunna utveckla och detaljera. Vi kallar det den minsta gemensamma nämnaren. Under fyrtiofem minuter ger vi vår syn på webbtypsnitt, responsiva griddar, tillgänglighet, färgvärden och rörelser i digital varumärkesutformning. Fredrik Marcus, Creative Director Creuna Robin Lantz, Designer Creuna

TRANSCRIPT

Page 1: Vad hände (inte) med den grafiska profilen?

Vad hände (inte) med den grafiska profilen?

Page 3: Vad hände (inte) med den grafiska profilen?
Page 4: Vad hände (inte) med den grafiska profilen?

BIG dataInternet of thingsGamificationHyper-connectivityDigital ecosystemLow-hanging fruitDisruptive Business

Vad vi inte kommer att tala om:

Page 5: Vad hände (inte) med den grafiska profilen?

In the dawn of time

Page 6: Vad hände (inte) med den grafiska profilen?

Förhistorisk hårdvara

Power Mcintosh 7200

Apple Design Team

Arla/Astra/ASG

Page 7: Vad hände (inte) med den grafiska profilen?

Fler förhistoriska exempel

GF388

LM Ericsson

December 1994

Page 8: Vad hände (inte) med den grafiska profilen?

Gammal-tv

Page 9: Vad hände (inte) med den grafiska profilen?

90-talswebb

Page 10: Vad hände (inte) med den grafiska profilen?

90-talswebb

Page 11: Vad hände (inte) med den grafiska profilen?

90-talswebb

Page 12: Vad hände (inte) med den grafiska profilen?

90-talswebb

Page 13: Vad hände (inte) med den grafiska profilen?

90-talswebb

Page 14: Vad hände (inte) med den grafiska profilen?

Vad är en grafisk profil/manual?

Page 15: Vad hände (inte) med den grafiska profilen?

Kännsdetta igen?

Page 16: Vad hände (inte) med den grafiska profilen?

Kännsdetta igen?

Page 17: Vad hände (inte) med den grafiska profilen?
Page 18: Vad hände (inte) med den grafiska profilen?
Page 19: Vad hände (inte) med den grafiska profilen?

Internet growth statistics (1995-2013)

0

750

1500

2250

3000

1995 2000 2005 2010 2013

16 millions(0.8% *)

361 millions(5.0% *)

957 millions(13.9% *)

1966 millions(28.7% *)

2749 millions(38.8% *)

* World population using internet

Page 20: Vad hände (inte) med den grafiska profilen?

Internet growth statistics (1995-2013)

0

750

1500

2250

3000

1995 2000 2005 2010 2013

16 millions(0.8% *)

361 millions(5.0% *)

957 millions(13.9% *)

1966 millions(28.7% *)

2749 millions(38.8% *)

* World population using internet

Page 21: Vad hände (inte) med den grafiska profilen?

Vad hände (inte) med den grafiska profilen?

Page 22: Vad hände (inte) med den grafiska profilen?

Om vi säger mobile first, ska vi inte säga digital

first när det handlar om grafiska profilen???

Page 23: Vad hände (inte) med den grafiska profilen?

1962

Page 24: Vad hände (inte) med den grafiska profilen?

2013

Page 25: Vad hände (inte) med den grafiska profilen?

Exempel på digitala ytor

Page 26: Vad hände (inte) med den grafiska profilen?
Page 27: Vad hände (inte) med den grafiska profilen?
Page 28: Vad hände (inte) med den grafiska profilen?
Page 29: Vad hände (inte) med den grafiska profilen?
Page 30: Vad hände (inte) med den grafiska profilen?
Page 31: Vad hände (inte) med den grafiska profilen?

Två STORA förändringar har skett den senaste tiden: upplösning & typografi.

Page 32: Vad hände (inte) med den grafiska profilen?

Upplösning

Page 33: Vad hände (inte) med den grafiska profilen?

Upplösning

Page 34: Vad hände (inte) med den grafiska profilen?

Upplösning

Page 35: Vad hände (inte) med den grafiska profilen?

Upplösning

Page 36: Vad hände (inte) med den grafiska profilen?

Upplösning

Page 37: Vad hände (inte) med den grafiska profilen?

Typografi

Page 38: Vad hände (inte) med den grafiska profilen?

Webbfonter 1996-2002

Page 39: Vad hände (inte) med den grafiska profilen?

Sökresultat:

Page 40: Vad hände (inte) med den grafiska profilen?

Sökresultat:

Alla typsnitt

5414 typsnitt funna :O

Page 41: Vad hände (inte) med den grafiska profilen?

Sökresultat:

Page 42: Vad hände (inte) med den grafiska profilen?

Sökresultat:

Gotham

Ingenting :(

Page 43: Vad hände (inte) med den grafiska profilen?

Browsers + rendering = false

Page 44: Vad hände (inte) med den grafiska profilen?

6 19 16 4.0

7 20 17 5.0

8 21 18 5.1

9 22 19 6.0

10 23

Page 45: Vad hände (inte) med den grafiska profilen?

Responsivt

Page 46: Vad hände (inte) med den grafiska profilen?
Page 47: Vad hände (inte) med den grafiska profilen?
Page 48: Vad hände (inte) med den grafiska profilen?
Page 49: Vad hände (inte) med den grafiska profilen?
Page 50: Vad hände (inte) med den grafiska profilen?

TAKEAWAYS TYPOGRAFI

Använd samma fonter överalltNästan alla typsnitt finns Vikter är viktigtFinns alla glypher du behöver?Läsbarhet Kantutjäming på olika enheterLicensmodell?

Page 51: Vad hände (inte) med den grafiska profilen?

Logotyper

Page 52: Vad hände (inte) med den grafiska profilen?
Page 53: Vad hände (inte) med den grafiska profilen?
Page 54: Vad hände (inte) med den grafiska profilen?
Page 55: Vad hände (inte) med den grafiska profilen?
Page 56: Vad hände (inte) med den grafiska profilen?

v

Page 57: Vad hände (inte) med den grafiska profilen?

Tänk på appar

Page 58: Vad hände (inte) med den grafiska profilen?

Tänk på appar

Tänk på socialamedier

Page 59: Vad hände (inte) med den grafiska profilen?
Page 60: Vad hände (inte) med den grafiska profilen?
Page 61: Vad hände (inte) med den grafiska profilen?
Page 62: Vad hände (inte) med den grafiska profilen?
Page 63: Vad hände (inte) med den grafiska profilen?

Funka på små och stora skärmarVektorer även på webSvg är begränsat “tänk på”Logotypens form Logotyp som appikonLogotypens placeringRörligt? Modulärt? Interaktivt?

TAKEAWAYS LOGOTYPER

Page 64: Vad hände (inte) med den grafiska profilen?

Färger

Page 65: Vad hände (inte) med den grafiska profilen?
Page 66: Vad hände (inte) med den grafiska profilen?

FÄRGERFärger som fungerar på skärm/print!Speciellt anpassade paletterKontraster (även storlekar)TillgänglighetReservera Call to action-färg

Page 67: Vad hände (inte) med den grafiska profilen?

X-faktorn

Page 68: Vad hände (inte) med den grafiska profilen?
Page 69: Vad hände (inte) med den grafiska profilen?
Page 70: Vad hände (inte) med den grafiska profilen?
Page 71: Vad hände (inte) med den grafiska profilen?
Page 72: Vad hände (inte) med den grafiska profilen?

The crazy ones

Think different commercial

Narration by Steve Jobs

Page 73: Vad hände (inte) med den grafiska profilen?

The crazy ones

Think different commercial

Narration by Steve Jobs

Page 74: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Page 75: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Page 76: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Page 77: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Page 78: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Utvärdera och revidera ofta

Page 79: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Utvärdera och revidera ofta

Glöm inte att ha roligt

Page 80: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Utvärdera och revidera ofta

Glöm inte att ha roligt

Kom ihåg att djävulen är i detaljerna

Page 81: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Utvärdera och revidera ofta

Glöm inte att ha roligt

Kom ihåg att djävulen är i detaljerna

Page 82: Vad hände (inte) med den grafiska profilen?

20 NOV 2012 © 2012 CONFIDENTIAL & PROPRIETARY

Tänk på detta kamrater!

Designa för svåraste ytan (digitalt) först

Glöm Arial och Verdana nu!

Analogt och digitalt ska ha samma känsla

Utvärdera och revidera ofta

Glöm inte att ha roligt

Kom ihåg att djävulen är i detaljerna

Page 83: Vad hände (inte) med den grafiska profilen?

Tack!