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

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

3. Fredrik Marcus aka FM
Fuck Art
1963-Present
CD/AD/2D/3D/HD inte VD
Let´s Dance
fm@creuna.com
twitter.com/fm
fredrik.marcus@facebook.com

5. AVDELNINGEN FÖR MULTIMEDIA
Multimedia MacZoo
Fredrik Marcus/Lars Blåsjö (1963-)
MarcusProdukter 1992

6. AVDELNINGEN TIDIG INTERNET
Blandad tidig web
Fredrik Marcus (1963-)
Arla/Astra/ASG

7. AVDELNINGEN FÖR
TIDIGA IKONER
Ikoner för System 1
Susan Kare 1954-
Apple Inc 1984 to Present

8. Mobilt
Cell Phone Camera History
http://ca-me-ra.com/
Russina Doll Cellphone

9. Telefonsamtalet är på utdöende 8-)
From ape to I-man
Jesper Waldersten 1969-
waldersten365.com/

10. A smartphone
retrospective _
A SmartPhone Retrospective
Marco Arment
Marco.Org 2010

11. Smartphone platform growth
Symbian Android iOS RIM Windows Mobile Linux Others
2 %
5% 1 % 3%2%
8%
15%
37%
45%
21%
17%
17%
3% 25%
2009 2010
Smartphone platform growth
Horace Dediu
http://www.asymco.com/

12. iPhone
iPhone 4 (2010)
Apple Design Team
Apple Inc 2010 to Present

13. Erfarenheter iPhone
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

14. Upplösningar iOS
Ipad 1024 by 768 pixels upplösning med 132 pixels
per inch (ppi)
iPhone 3GS 480x320 pixels upplösning med
163 ppi
iPhone 4 med 960 by 640 pixels upplösning
med 326 ppi

16. Android
Android OS (2003)
Google Design Team
Google Inc 2005 to Present

17. Erfarenheter Android
Annan 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

18. Fragmentering Android

19. WP7
Windows Phone 7 OS (2010)
Microsoft Design Team
Microsoft Inc 2010 to Present

20. Erfarenheter WP7
Helt 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

21. Panorama WP7

22. 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.

23. Panorama WP7
Segoe WP Regular Segoe WP Semi-Bold
Abcdefghijklmnopqrstuvwxyz1234567890 Abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Bold Segoe WP Semi-Light
Abcdefghijklmnopqrstuvwxyz1234567890 Abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
Segoe WP Light Segoe WP Black
Abcdefghijklmnopqrstuvwxyz1234567890 Abcdefghiіjјklmnopqrstuvwxyz12345678
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIІJЈKLMNOPQRSTUVWXYZ

24. Övriga

25. Mobil Web
Vi 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

26. iPad
iPad 2 (2011)
Apple Design Team
Apple Inc 2011

27. Apples ipad revolution
Den 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

28. Erfarenheter iPad
Tä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)

29. Erfarenheter iPad
Den 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

30. Desktop

31. Erfarenheter Desktop
Varfö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

32. Apps are being webified.
The web is being appified.
The future is bright
for developers.
Flipboard CoFounder
10 miljarder

33. En förflyttning sker NU

34. Touch
TOUCH slår igenom helt
Och all web ska touchanpassas från och med NU

35. Små till större touchskärmar

36. Gestures
Vi kommer att lära oss mer gestures

37. Gestures

38. Olika Skärmar olika
tider på dagen
07:00Frukost 08:30 Går 09:00Jobbar 12:00 Lunch 13:00 22:00
till jobbet Jobbar Hemma

39. Designa för kontexten
Odenplans Tunnelbanestation
Stockholms Stad (1950-)
Copyright Clear Channel

40. Designa för kontexten
UP Series (1969
Gaetano Pesce (1939-)
B&B Italia 1969 to Present

41. Mer intim
att använda
Crapple
Tim Lahan
Poolga

42. Trender
Hö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
Lila elefant
Rörelse för att lättare förstå vad som
Snodd ur reklam händer, inte som kul effekt.
Wired Magazine 2011

43. Key Takeaways
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)
Japansk IkonKille
Eboy
http://hello.eboy.com/eboy/

44. Fredrik Marcus aka FM
1963-Present
CD/AD/2D/3D/HD inte VD
fm@creuna.com
twitter.com/fm
fredrik.marcus@facebook.com
The End