storleken slideshare

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

Upload: e9carsch

Post on 05-Dec-2014

676 views

Category:

Design


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. Fredric Marcus, Creative Director

TRANSCRIPT

Page 1: Storleken slideshare

STORLEKEN HAR BETYDELSEEn vandring i det digitala museet

Av Fredrik Marcus 8-)

Page 2: Storleken slideshare
Page 3: Storleken slideshare

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

[email protected]/[email protected]

Fuck ArtLet´s Dance

Page 4: Storleken slideshare
Page 5: Storleken slideshare

AVDELNINGEN FÖR MULTIMEDIA

Multimedia MacZoo

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

MarcusProdukter 1992

Page 6: Storleken slideshare

AVDELNINGEN TIDIG INTERNET

Blandad tidig web

Fredrik Marcus (1963-)

Arla/Astra/ASG

Page 7: Storleken slideshare

Ikoner för System 1

Susan Kare 1954-

Apple Inc 1984 to Present

AVDELNINGEN FÖR TIDIGA IKONER

Page 8: Storleken slideshare

Mobilt

Cell Phone Camera History

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

Russina Doll Cellphone

Page 9: Storleken slideshare

Telefonsamtalet är på utdöende 8-)

From ape to I-man

Jesper Waldersten 1969-

waldersten365.com/

Page 10: Storleken slideshare

A smartphone retrospective _

A SmartPhone Retrospective

Marco Arment

Marco.Org 2010

Page 11: Storleken slideshare

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: Storleken slideshare

iPhone

iPhone 4 (2010)

Apple Design Team

Apple Inc 2010 to Present

Page 13: Storleken slideshare

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: Storleken slideshare

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: Storleken slideshare
Page 16: Storleken slideshare

Android

Android OS (2003)

Google Design Team

Google Inc 2005 to Present

Page 17: Storleken slideshare

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: Storleken slideshare

Fragmentering Android

Page 19: Storleken slideshare

WP7

Windows Phone 7 OS (2010)

Microsoft Design Team

Microsoft Inc 2010 to Present

Page 20: Storleken slideshare

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: Storleken slideshare

Panorama WP7

Page 22: Storleken slideshare

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: Storleken slideshare

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: Storleken slideshare

Övriga

Page 25: Storleken slideshare

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: Storleken slideshare

iPadiPad 2 (2011)

Apple Design Team

Apple Inc 2011

Page 27: Storleken slideshare

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: Storleken slideshare

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: Storleken slideshare

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: Storleken slideshare

Desktop

Page 31: Storleken slideshare

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: Storleken slideshare

10 miljarder

Apps are being webified. The web is being appified.

The future is bright for developers.

Flipboard CoFounder

Page 33: Storleken slideshare

En förflyttning sker NU

Page 34: Storleken slideshare

Touch

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

Page 35: Storleken slideshare

Små till större touchskärmar

Page 36: Storleken slideshare

Gestures

Vi kommer att lära oss mer gestures

Page 37: Storleken slideshare

Gestures

Page 38: Storleken slideshare

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: Storleken slideshare

Designa för kontextenOdenplans Tunnelbanestation

Stockholms Stad (1950-)

Copyright Clear Channel

Page 40: Storleken slideshare

Designa för kontextenUP Series (1969

Gaetano Pesce (1939-)

B&B Italia 1969 to Present

Page 41: Storleken slideshare

Crapple

Tim Lahan

Poolga

Mer intim att använda

Page 42: Storleken slideshare

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: Storleken slideshare

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: Storleken slideshare

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

[email protected]/[email protected]

The End