Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frukostseminarium 2011 - Storleken har betydelse

329 views

Published on

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

  • Be the first to comment

  • Be the first to like this

Frukostseminarium 2011 - Storleken har betydelse

  1. 1. STORLEKEN HAR BETYDELSE En vandring i det digitala museet Av Fredrik Marcus 8-)
  2. 2. Fredrik Marcus aka FM Fuck Art 1963-Present CD/AD/2D/3D/HD inte VDLet´s Dance fm@creuna.com twitter.com/fm fredrik.marcus@facebook.com
  3. 3. AVDELNINGEN FÖR MULTIMEDIA Multimedia MacZoo Fredrik Marcus/Lars Blåsjö (1963-) MarcusProdukter 1992
  4. 4. AVDELNINGEN TIDIG INTERNET Blandad tidig web Fredrik Marcus (1963-) Arla/Astra/ASG
  5. 5. AVDELNINGEN FÖR TIDIGA IKONER Ikoner för System 1 Susan Kare 1954-Apple Inc 1984 to Present
  6. 6. MobiltCell Phone Camera Historyhttp://ca-me-ra.com/Russina Doll Cellphone
  7. 7. Telefonsamtalet är på utdöende 8-) From ape to I-man Jesper Waldersten 1969- waldersten365.com/
  8. 8. A smartphoneretrospective _ A SmartPhone Retrospective Marco Arment Marco.Org 2010
  9. 9. 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/
  10. 10. iPhone iPhone 4 (2010) Apple Design Team Apple Inc 2010 to Present
  11. 11. 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
  12. 12. Upplösningar iOSIpad 1024 by 768 pixels upplösning med 132 pixelsper inch (ppi)iPhone 3GS 480x320 pixels upplösning med163 ppiiPhone 4 med 960 by 640 pixels upplösningmed 326 ppi
  13. 13. Android Android OS (2003) Google Design Team Google Inc 2005 to Present
  14. 14. 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
  15. 15. Fragmentering Android
  16. 16. WP7 Windows Phone 7 OS (2010) Microsoft Design Team Microsoft Inc 2010 to Present
  17. 17. 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
  18. 18. Panorama WP7
  19. 19. 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.
  20. 20. Panorama WP7Segoe WP Regular Segoe WP Semi-BoldAbcdefghijklmnopqrstuvwxyz1234567890 Abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZSegoe WP Bold Segoe WP Semi-LightAbcdefghijklmnopqrstuvwxyz1234567890 Abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZSegoe WP Light Segoe WP BlackAbcdefghijklmnopqrstuvwxyz1234567890 Abcdefghiіjјklmnopqrstuvwxyz12345678ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIІJЈKLMNOPQRSTUVWXYZ
  21. 21. Övriga
  22. 22. 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
  23. 23. iPadiPad 2 (2011)Apple Design TeamApple Inc 2011
  24. 24. Apples ipad revolutionDen genomsnittlige analytikerns prognos 2010: 3,3 miljonerAntalet sålda ipads under 2010: 14,8 miljonerAnalytikernas gissningar för iPad 2 2011: 30-55 miljoner
  25. 25. 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)
  26. 26. 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
  27. 27. Desktop
  28. 28. 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
  29. 29. Apps are being webified. The web is being appified. The future is bright for developers. Flipboard CoFounder10 miljarder
  30. 30. En förflyttning sker NU
  31. 31. TouchTOUCH slår igenom heltOch all web ska touchanpassas från och med NU
  32. 32. Små till större touchskärmar
  33. 33. GesturesVi kommer att lära oss mer gestures
  34. 34. Gestures
  35. 35. Olika Skärmar olikatider på dagen07:00Frukost 08:30 Går 09:00Jobbar 12:00 Lunch 13:00 22:00 till jobbet Jobbar Hemma
  36. 36. Designa för kontexten Odenplans Tunnelbanestation Stockholms Stad (1950-) Copyright Clear Channel
  37. 37. Designa för kontexten UP Series (1969 Gaetano Pesce (1939-) B&B Italia 1969 to Present
  38. 38. Mer intimatt använda Crapple Tim Lahan Poolga
  39. 39. 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örelserLila elefant Rörelse för att lättare förstå vad somSnodd ur reklam händer, inte som kul effekt.Wired Magazine 2011
  40. 40. 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/
  41. 41. Fredrik Marcus aka FM 1963-Present CD/AD/2D/3D/HD inte VD fm@creuna.com twitter.com/fm fredrik.marcus@facebook.comThe End

×