Design til små skærme
•
0 likes•614 views
(Danish) ݺߣs fra foredrag om design til mobile enheder. Fokus er ikke lagt på den tekniske udførsel men mere, forståelsen af det ændrede fokus hos modtageren og brugerpositioner når en webside besøges fra desktop og mobil.
Design til små skærme
- 2. ø!
- 4. Hvad sker der? Hvad vil du? Hvad kan du? Hvordan gør du?
- 6. Platformene Hvor kan det vises
- 7. arven
- 9. arven
- 10. en dag i Danmark
- 12. browsere
- 13. browsere
- 14. browsere
- 15. Nuværende tilstand kraftige enheder opdaterede browsere udvidet rækkevidde og platforme stor forskel på skærmstørrelse Portræt eller landskab
- 16. ܲøԲٱ browservindue ikke maksimeret på desktop flere åbne vinduer på store skærme
- 17. ܲøԲٱ Input ændrer vores relation til mediet Mediet ændrer vores relation til designet
- 18. Hvad vil du? Indholdselementer Det nye canvas
- 19. design teknik
- 20. Website WebApp Native App
- 23. WebApp Afvikles over Internet/i en browser Er ofte skrevet med HTML/CSS/JS Browser eksekverer Tynd klient Nem at vedligeholde Virker på tværs af platforme
- 24. WebApp
- 25. WebApp
- 26. Native App Installeres på maskinen Højtydende Dedikeret til én platform Er ofte skrevet platformens eget sprog
- 27. Native App
- 28. Native App
- 29. Hvad kan du? gammel vin på nye flasker
- 30. design teknik
- 31. Webdesigner
- 32. Webdesigner HTML/CSS (JavaScript) Flash (ActionScript)
- 33. Webdesigner HTML/CSS (JavaScript) Website WebApp Native Apps Flash (ActionScript) Native Apps
- 34. Grafisk designer
- 35. Grafisk designer InDesign Layout Typografi
- 36. Grafisk designer & Webdesigner Alt er pixels Du er stadig designer! Kan du lave Web? Kan du Flash? Nyt format Nye brugerpositioner Ny tankegang Nye muligheder
- 37. "nye" teknologier her skal du måske lære nyt
- 38. The Homies iOS: Objective-C (XCode) Android: Java (Eclipse family) Windows Phone: C++/C# (Visual Studio/MonoDevelop)
- 39. Perterapeuterne Mono Project: C++/C# PhoneGap: HTML/JS Flash: ActionScript/AIR
- 40. Klassiske designværktøjer Dreamweaver: HTML/CSS/JS Adobe Flash: ActionScript InDesign: ePub/Flash/HTML
- 41. Udvalgte metoder/ord Responsive design Design Patterns jQuery AJAX (Single Page Application) SPA
- 42. Hvordan gør du? hvordan kommer du igang
- 43. Website WebApp
- 45. Den mobile forskel Du browser ikke det mobile web Du har et specifikt formål med besøget Du kan være motiveret af placeringen Søger lokal information Du kan ofte lide at dele information
- 46. Mobilt hierarki 1. Søgemaskiner 2. Sociale netværk 3. Forretning/Virksomhed 4. Videodelingstjenester http://googlemobileads.blogspot.dk/2011/04/smartphone-user-study-shows-mobile.html
- 47. Mobil funktionalitet Click-to-call (href="tel:12345678) SMS (href="sms:12345678) Links til sociale medier Check-in (Yelp, Google places, 4sq etc.) Maps (Google, Bing) http://googlemobileads.blogspot.dk/2011/04/smartphone-user-study-shows-mobile.html
- 48. Websites indhold K.I.S.S. (keep it simple) Prioriter indholdet Fokuser på konvertering Mobilens muligheder Tap-able ikke clickable Tænk vertikalt Minimer scroll Minimer loadetid mobil/desktop version
- 49. Websites teknologi "Business as usual" Ingen Flash Rolig med JS-effekterne HTML5 og CSS3 er fjong Minimer billedstørrelser CSS gradients media queries
- 52. responsivt design Et layout til flere platforme Nemt at gå til Indbygget i HTML/CSS Unødig stor fil Kompleksitet Hvor skalerbar er du?
- 53. sites designet specifikt til mobile enheder www.site.dk/mobil, m.site.dk e. lign. Templatestyret? Databasestyret indhold? fokuseret layout contra kompromisløsning
- 60. WebApps Et website med en App følelse Oprindelig en desktop ting Uddøende race på mobile enheder? http://www.sumopaint.com/app/
- 68. design guides
- 69. iOS Apple Human Guide Interface ● https://developer.apple. com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introdu ction.html ● https://developer.apple. com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introductio
- 72. Windows Phone Windows Phone Design Guidelines http://dev.windowsphone.com/en-us/design http://dev.windowsphone.com/en-us/develop
- 73. Windows Phone Windows Phone Design Guidelines http://dev.windowsphone.com/en-us/design http://dev.windowsphone.com/en-us/develop
- 74. User Interface enkelt kompleks
- 75. ikoner Systemets ikoner er kendte ... Dine egne er ikke Visuel logik Konsistens Aflæsning Navigation
- 76. menu slider
- 78. Efterligning Du kender platformen De tilgiver ting de kender "If we find something that works, we stick to it" - Steve Krug
- 79. Brug bredden Ofte kan du holde dig til en eller to kolonner. Der kan være indbygget funktionalitet i knapper eller andre interaktive elementer.
- 80. Fokuser på opgaven Det gør brugeren For det meste kun én ting Dyk ind i sitet via enkelte skærmbilleder
- 81. navigation flow http://awesomeinspiration.net/post/42991242214/bmw-app-concept
- 82. Flat design
- 83. Flat design
- 84. Et par programmer
- 85. Dreamweaver responsivt design - HTML5 -PhoneGap
- 86. Muse InDesign tilgang - Ingen kodning - Mobil design
- 87. Edge Animate Websafe animation - Flash/After Effects
- 88. Edge Reflow Responsivt Design - Preview release
- 90. Design Guides Videotræning Kodeskoler Blogs/Artikler Fysisk træning
- 91. Webdesign er webdesign Giv dig tid til at lære reglerne Vær nysgerrig Research ... som du plejer? Navigér i høj sø Tænk på brugeren og behovet Nyttelæsning eller nydelseslæsning
- 92. Karsten Vestergaard @ockley www.hjaelpmignu.dk