frukostseminarium 2011 - storleken har betydelse

44
STORLEKEN HAR BETYDELSE En vandring i det digitala museet Av Fredrik Marcus 8-)

Upload: creuna-sverige

Post on 26-May-2015

223 views

Category:

Documents


0 download

DESCRIPTION

Titta på både ett underhållande och tankeväckande frukostseminarium om webb och storlek. Seminariet handlar om att jobba med olika storlekar på skärmar, men också om att filstorleken har blivit viktigt igen i en tid när allt fler når internet genom trådlösa inte alltid snabba uppkopplingar. STORA och små idéer från internets och Creunas eget svar på Willy Wonka. Talare: Fredrik Marcus

TRANSCRIPT

Page 1: Frukostseminarium 2011 - Storleken har betydelse

STORLEKEN HAR BETYDELSEEn vandring i det digitala museet

Av Fredrik Marcus 8-)

Page 2: Frukostseminarium 2011 - Storleken har betydelse
Page 3: Frukostseminarium 2011 - Storleken har betydelse

Fredrik Marcus aka FM1963-PresentCD/AD/2D/3D/HD inte VD

[email protected]/[email protected]

Fuck ArtLet´s Dance

Page 4: Frukostseminarium 2011 - Storleken har betydelse
Page 5: Frukostseminarium 2011 - Storleken har betydelse

AVDELNINGEN FÖR MULTIMEDIA

Multimedia MacZoo

Fredrik Marcus/Lars Blåsjö (1963-)

MarcusProdukter 1992

Page 6: Frukostseminarium 2011 - Storleken har betydelse

AVDELNINGEN TIDIG INTERNET

Blandad tidig web

Fredrik Marcus (1963-)

Arla/Astra/ASG

Page 7: Frukostseminarium 2011 - Storleken har betydelse

Ikoner för System 1

Susan Kare 1954-

Apple Inc 1984 to Present

AVDELNINGEN FÖR TIDIGA IKONER

Page 8: Frukostseminarium 2011 - Storleken har betydelse

Mobilt

Cell Phone Camera History

http://ca-me-ra.com/

Russina Doll Cellphone

Page 9: Frukostseminarium 2011 - Storleken har betydelse

Telefonsamtalet är på utdöende 8-)

From ape to I-man

Jesper Waldersten 1969-

waldersten365.com/

Page 10: Frukostseminarium 2011 - Storleken har betydelse

A smartphone retrospective _

A SmartPhone Retrospective

Marco Arment

Marco.Org 2010

Page 11: Frukostseminarium 2011 - Storleken har betydelse

Smartphone platform growth

45%

3%17%

21%

8%

5%1 %

Symbian Android iOS RIM Windows Mobile Linux Others

37%

25%

17%

15%

3%2%2 %

2009 2010Smartphone platform growth

Horace Dediu

http://www.asymco.com/

Page 12: Frukostseminarium 2011 - Storleken har betydelse

iPhone

iPhone 4 (2010)

Apple Design Team

Apple Inc 2010 to Present

Page 13: Frukostseminarium 2011 - Storleken har betydelse

Enkel grafikhantering. Två olika storlekar på skärmar

Nya upplösningen på iPhone 4 är en revolution

Allt grafik är PNG

Appstore är en enkel och bra distributionskanal För att hitta och uppdatera 8-)

Börjar kännas lite omodern i gränsnittet

Helvetica Neue som typsnitt

Respektera operativet

Kolla din design hela tiden på telefonen

Se till att alla i teamet använder telefonen i fråga

Erfarenheter iPhone

Page 14: Frukostseminarium 2011 - Storleken har betydelse

Ipad 1024 by 768 pixels upplösning med 132 pixels per inch (ppi)

iPhone 3GS 480x320 pixels upplösning med163 ppi

iPhone 4 med 960 by 640 pixels upplösning med 326 ppi

Upplösningar iOS

Page 15: Frukostseminarium 2011 - Storleken har betydelse
Page 16: Frukostseminarium 2011 - Storleken har betydelse

Android

Android OS (2003)

Google Design Team

Google Inc 2005 to Present

Page 17: Frukostseminarium 2011 - Storleken har betydelse

Erfarenheter AndroidAnnan grafikhantering än iPhone. Anpassar för Low Medium och High DPI. Påminner om webb.

Fragmenterad plattform när det gäller OS-version och antal devicer och prestanda

Skönt att slippa Apples App store 8-)

Droid Sans som typsnitt

Respektera operativet och porta INTE iPhonedesign

Kolla din design hela tiden på telefonen

Kolla inte bara i emulator utan i devicen i fråga

Se till att alla i teamet använder telefonen i fråga

Page 18: Frukostseminarium 2011 - Storleken har betydelse

Fragmentering Android

Page 19: Frukostseminarium 2011 - Storleken har betydelse

WP7

Windows Phone 7 OS (2010)

Microsoft Design Team

Microsoft Inc 2010 to Present

Page 20: Frukostseminarium 2011 - Storleken har betydelse

Erfarenheter WP7Helt annan ballpark än dom andra OSen

Fokuserar på att få saker gjorda

Känns fortfarande väldigt tidigt. Lite svårt att ersätta med.

Segoe WP som typsnitt

Alla telefoner har nu 800 x 480 pixlars format

Befriande med annat gränsnitt. Content NOT Chrome

Läs in dig noga innan du sätter igång

Typografi och rörelse är viktigare på denna än andra OS

Userinterfacet kallas Metro

Se till att alla i teamet använder telefonen i fråga

Page 21: Frukostseminarium 2011 - Storleken har betydelse

Panorama WP7

Page 22: Frukostseminarium 2011 - Storleken har betydelse

UI Design and Interaction Guide WP7

1) Clean, light, open, and fast: It is visually distinctive, contains ample white space, reduces clutter and elevates typography as a key design element.

2) Content, not chrome: It accentuates focus on the content that the user cares most about, making the product simple and approachable for everyone.

3) Integrated hardware and software: Hardware and software blend into each other and create a seamless user experience from single-button access to Search, Start, Back and the camera to on-board sensor integration.

4) World-class motion: The Windows Phone 7 touch and gesture experiences on capacitive screens are consistent with Windows 7 on the desktop and include hardware-accelerated animations and transitions to enhance the user’s experience at every turn.

5) Soulful and alive: A personalized, automatically updated view into the information that matters most to the user is enabled and brings to life a cinematic photo and video experience by having a fully integrated Zune media player experience.

Page 23: Frukostseminarium 2011 - Storleken har betydelse

Panorama WP7Segoe WP RegularAbcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP BoldAbcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP LightAbcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Semi-BoldAbcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP Semi-LightAbcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

Segoe WP BlackAbcdefghiіjјklmnopqrstuvwxyz12345678ABCDEFGHIІJЈKLMNOPQRSTUVWXYZ

Page 24: Frukostseminarium 2011 - Storleken har betydelse

Övriga

Page 25: Frukostseminarium 2011 - Storleken har betydelse

Mobil WebVi brukar bygga för iOS och Android och resten blir mobil webb

Funkar på alla övriga devicer

Capability detection

Utvecklingskostnader mot att utveckla OS-specifika appar

Mobil web lämpar sig inte så bra på grafikintensiva saker

Hur många olika operativsystem klar man av som kund

Operativsystem att kolla: Palm/HP webOS

Och Microsoft vad gör dom

Page 26: Frukostseminarium 2011 - Storleken har betydelse

iPadiPad 2 (2011)

Apple Design Team

Apple Inc 2011

Page 27: Frukostseminarium 2011 - Storleken har betydelse

Apples ipad revolutionDen genomsnittlige analytikerns prognos 2010: 3,3 miljoner

Antalet sålda ipads under 2010: 14,8 miljoner

Analytikernas gissningar för iPad 2 2011: 30-55 miljoner

Page 28: Frukostseminarium 2011 - Storleken har betydelse

Erfarenheter iPadTänk om kring interaktionsdesign och design! Det som fungerar på iPhone fungerar inte automatiskt på iPad!

Skärmen är mycket större fysiskt

Det virtuella tangentbordet är större

Både iPhone och iPad kan hantera multi-touch, men det är egentligen bara på iPad det går att använda två händer.

Lägg in skisserna I keynote för att simulera rörelse och för att visa kunden olika sidor. Du får också en bättre förståelse

Bättre prestanda mot iPhone men mindre internminne (obs gäller endast endast original iPad)

Page 29: Frukostseminarium 2011 - Storleken har betydelse

Erfarenheter iPadDen stora ytan gör att man kan och vill se fler saker samtidigt.

The iPad is a post PC Device. “PCs are going to be like trucks. Less people will need them… This transformation is going to make some people uneasy. The PC has taken us a long way.

Designing for iPad: Reality Check

2010 by Oliver Reichenstein.

informationarchitects.jp

Page 30: Frukostseminarium 2011 - Storleken har betydelse

Desktop

Page 31: Frukostseminarium 2011 - Storleken har betydelse

Erfarenheter DesktopVarför inte mer Fluid = Utnyttja ytan mer

Hemmet har inte plats för två STORA skärmar

Vanliga människor klarar sig på mobil/platta

Just nu sker innovationen på mobilsidan/tablet

Nästa krig utkämpas om TV-skärmen

Page 32: Frukostseminarium 2011 - Storleken har betydelse

10 miljarder

Apps are being webified. The web is being appified.

The future is bright for developers.

Flipboard CoFounder

Page 33: Frukostseminarium 2011 - Storleken har betydelse

En förflyttning sker NU

Page 34: Frukostseminarium 2011 - Storleken har betydelse

Touch

TOUCH slår igenom heltOch all web ska touchanpassas från och med NU

Page 35: Frukostseminarium 2011 - Storleken har betydelse

Små till större touchskärmar

Page 36: Frukostseminarium 2011 - Storleken har betydelse

Gestures

Vi kommer att lära oss mer gestures

Page 37: Frukostseminarium 2011 - Storleken har betydelse

Gestures

Page 38: Frukostseminarium 2011 - Storleken har betydelse

07:00Frukost 08:30 Går till jobbet

09:00Jobbar 12:00 Lunch 13:00 Jobbar

22:00 Hemma

Olika Skärmar olika tider på dagen

Page 39: Frukostseminarium 2011 - Storleken har betydelse

Designa för kontextenOdenplans Tunnelbanestation

Stockholms Stad (1950-)

Copyright Clear Channel

Page 40: Frukostseminarium 2011 - Storleken har betydelse

Designa för kontextenUP Series (1969

Gaetano Pesce (1939-)

B&B Italia 1969 to Present

Page 41: Frukostseminarium 2011 - Storleken har betydelse

Crapple

Tim Lahan

Poolga

Mer intim att använda

Page 42: Frukostseminarium 2011 - Storleken har betydelse

TrenderHögupplöst både på telefoner och snart på desktop och displayer

Typografin kommer med upplösningen

Cleant och platt som motreaktion

Fejkade metaforer ska bort

Texturer, mönster, detaljer, rörelser

Rörelse för att lättare förstå vad som händer, inte som kul effekt.

Lila elefant

Snodd ur reklam

Wired Magazine 2011

Page 43: Frukostseminarium 2011 - Storleken har betydelse

Man vill göra allt överallt. Inte bara på stan utan också hemma (i soffan i sängen)

Fundera vad ni vill göra innan ni går in i att utveckla för många plattformar

Genomdesignade enkla fokuserade tjänster regerar (även på web)

Det är lättare än någonsin att påverka ett varumärke genom att differentiera och ha bättre tjänster än sina konkurrenter (tyvärr också genom att ha dåliga)

Key Takeaways

Japansk IkonKille

Eboy

http://hello.eboy.com/eboy/

Page 44: Frukostseminarium 2011 - Storleken har betydelse

Fredrik Marcus aka FM1963-PresentCD/AD/2D/3D/HD inte VD

[email protected]/[email protected]

The End