Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Designing and developing products for multiple platforms

1.859 Aufrufe

Veröffentlicht am

As part of our on-going collaboration with the Power BI product teams at Microsoft, our design director and partner Guy Haviv and our CTO Yoram Berkowicz gave a talk to a wide audience of user experience designers and developers at Microsoft ILDC on designing and developing cross-platform mobile experiences and best practices around development & design processes and collaboration.

Veröffentlicht in: Design
  • Shared it, also...GROW YOU DOWNLINE OVERNIGHT - Works with any mlm. Have dozens joining whatever mlm your doing today! Go to: www.mlmrc.com
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • One of the best slides, also...GROW YOU DOWNLINE OVERNIGHT - Works with any mlm. Have dozens joining whatever mlm your doing today! Go to: www.mlmrc.com
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Designing and developing products for multiple platforms

  1. 1. 2015 Microsoft Designing and developing products for multiple platforms Microsoft Power BI Guy Haviv Design Director, Partner Tel Aviv
  2. 2. About Designit 2015 We grow businesses by designing new experiences for humans, enabled by technology. We are a global strategic design firm making innovation happen for the world’s most ambitious companies. We design brands, products, services, digital & mobile experiences and fuse them with technology. Welcome to Designit
  3. 3. Overview San Francisco Madrid Barcelona Aarhus Copenhagen Munich Tel Aviv Sao Paolo Shanghai 300+ 32 28 Designits worldwide Educational Backgrounds Nationalities Tokyo Oslo Stockholm
  4. 4. 2015 Microsoft Part 01 Approaches in design for multiple platforms Designing and developing products for multiple platforms
  5. 5. Microsoft How do we approach designing for multiple platforms? 2015 Q
  6. 6. Microsoft To begin, we need to get to know each platform’s opinionated way of designing user experiences. 2015 Approach
  7. 7. Microsoft Luckily, there are handy documentations of these ‘opinionated’ approaches 2015 Approach
  8. 8. Microsoft A great way to go through a well phrased ‘design manifesto’ for each platform is to read the user interface design guidelines. 2015 Approach Designing for iOS (new section on Apple developer site) developer.apple.com/design/ iOS Human Interface Guidelines developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
  9. 9. Microsoft A great way to go through a well phrased ‘design manifesto’ for each platform is to read the user interface design guidelines. 2015 Approach Android Design developer.android.com/design/index.html Material Design (google design language site) www.google.com/design/spec/material-design/introduction.html
  10. 10. Microsoft Approach Designing the user experience across platforms: 2015
  11. 11. Microsoft Approach One Size Fits All vs. Good Citizen 2015
  12. 12. Microsoft Approach Perhaps it’s better to describe these approaches as a spectrum: 2015
  13. 13. Microsoft Approach Spectrum 2015
  14. 14. Microsoft Approach Spectrum 2015
  15. 15. Microsoft2015
  16. 16. Microsoft2015
  17. 17. Instagram iPhone Android iPhone Android
  18. 18. iPhone Android iPhone Android
  19. 19. iPhone Android iPhone Android
  20. 20. iPhone Android
  21. 21. Waze iPhone Android iPhone Android
  22. 22. Microsoft How do we approach multiple devices and resolutions? 2015 Q
  23. 23. Microsoft 3 common challenges: 1. Screens with different physical sizes (in inches) 2. Screens with different aspect ratios 3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.) Approach 2015
  24. 24. 1. Screens with different physical sizes (in inches) LG G3 5.5 inch 1440 x 2560 Nexus 6 5.96 inch 1440 x 2560 Z3 Xperia Compact 4.6 inch 720x1280 Galaxy S5 Mini 4.5 inch 720x1280 A few examples:
  25. 25. 2. Screens with different aspect ratios (less severe today than ~2 years ago)
  26. 26. 3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)
  27. 27. 2015 Microsoft Approach But this is unrealistic on both iOS and Android, as the tools target pixel sizes specifically, and don’t simulate resizing and stretching on their own. In an ideal world, designers would’ve perhaps wanted to tightly control everything and only target a small set of different sizes.
  28. 28. Microsoft Approach Dealing with these challenges: 2015
  29. 29. 2015 Microsoft Approach Dealing with these challenges: Embrace fragmentation in screen sizes: learn from desktop apps on Windows / Mac OS
  30. 30. 2015 Microsoft Approach Start by establishing an
 approach to resizing. A good place to start is desktop apps (on Mac / Windows) Some inspiration can be from responsive web design, although it is biased towards too much granularity. Let’s look at a quick demonstration. 0
  31. 31. 2015 Microsoft Approach Try to follow the platform’s approach and best practices. e.g. between iPhone 5 and 6, elements stay the same point & pixel size, but are further away from each other, freeing more space for content 1 Visual: www.wearebuild.com
  32. 32. 2015 Microsoft Approach Try to design most screens with scrollable views in mind. Makes the transition from iPhone 4 > 5 much easier. (because it builds upon the desktop app inspiration) 2 If scrolling is not desired, try to plan for a ‘canvas’ view that can be scaled. Visual: http://www.ionuss.com/
  33. 33. 2015 Microsoft Approach Consider designing for just xhdpi on Android and plan for some adjustments for other resolution. We’ve opted for this approach in recent mobile projects and this approach was surprisingly efficient. 3
  34. 34. 2015 Microsoft Approach Test for extremes: small fonts or icons in lower DPIs. Check to see that things pixelate / hint nicely, and are still readable. For example, always use a ‘mini’ Android device + an average size one as the 2 main design preview devices. 4
  35. 35. 2015 Microsoft Part 02 Design & Development Collaboration Designing and developing products for multiple platforms
  36. 36. Design & Development Collaboration Communication between designers, PMs and devs can be tricky in the early stages of a project / feature. Microsoft2015
  37. 37. Microsoft Design & Development Collaboration When a project / feature is in preliminary stages, talking about it is tricky because the language tends to be fuzzy, and the scope unclear. 2015 Visual: http://www.cubebreaker.com/traffic-lights/
  38. 38. Microsoft Design & Development Collaboration Let’s talk about 3 main tools we use to facilitate meaningful conversations between design, PM, & dev teams. 2015
  39. 39. Microsoft Design & Development Collaboration 1. Wireframes 2. Visual design (and specs / redlines / style guides) 3. Communicating about transitions / animations / behaviors 2015
  40. 40. Microsoft Design & Development Collaboration 1. Wireframes 2015 Visual: https://dribbble.com/pons
  41. 41. Microsoft Design & Development Collaboration Wireframes are a great tool in bridging the fuzziness gap. They can be used to clarify requirements, and describe what the user sees and interacts with. Wireframes make theory tangible. 2015
  42. 42. Microsoft Design & Development Collaboration 2015
  43. 43. Microsoft Design & Development Collaboration Often times, it’s useful to build quick clickable prototypes using these wireframes, which help clarify things further. 2015
  44. 44. Microsoft Design & Development Collaboration At this stage, we use several prototyping tools, such as: InVision & Flinto. With Flinto and a bunch of wireframes, you can literally create a tappable mobile / tablet prototypes in under 2 min. quick demo of Flinto? 2015
  45. 45. Microsoft Design & Development Collaboration As part of a design process, the majority of wireframes are drawn and discussed following the information architecture phase. 2015
  46. 46. Microsoft Design & Development Collaboration 2. Visual design (and specs / redlines / style guides) 2015 Visual: https://dribbble.com/shagov
  47. 47. Microsoft Design & Development Collaboration What is the best way to deliver and ensure successful implementation of designs? 2015
  48. 48. Microsoft Design & Development Collaboration We’ve tried many different ways of delivering visual designs. 2015 Visual: http://www.puppygames.net/revenge-of-the-titans/
  49. 49. Microsoft Design & Development Collaboration Choosing the right method often creates a tradeoff between spending more time creating a ‘spec’ and time spent doing adjustments and tuning. 2015
  50. 50. Microsoft Design & Development Collaboration Three common methods are: 2015 1. Delivering designs as well-organized PSD / AIs, developers interpret them independently and then adjust / tune together with designers. 2. Creating component spec sheets covering all components 3. Creating style-guides / red-lines for a large set of screens & states.
  51. 51. Microsoft 1. 2015 1.
  52. 52. Microsoft 1. We’ve found that we are most effective when delivering AI / PSD files directly to developers. 2015 Visual: http://www.alwayswithhonor.com/
  53. 53. Microsoft 1. We’ve found that we are most effective when delivering AI / PSD files directly to developers. 2015 This works well with devs we have a long relationship with, where we can deliver files, and iteratively tune and adjust together. This way, time is spent on adjusting and tuning, instead of on speculatively creating specs which may or may not get used.
  54. 54. Microsoft 2. Create component spec sheets covering all components 2015 2.
  55. 55. Microsoft 2. Create component spec sheets covering all components 2015 In large scale projects, with 100s of screens, it is very useful to create a spec that is component based.
  56. 56. Microsoft2015 3. 3. of screens & states.
  57. 57. Microsoft 3. of screens & states. We also often create fairly exhaustive sets of style-guides and red-lines for clients. Often times, when confidence builds up across teams, the amount of style-guides produced decreases over time, and only major new components are specced. One of the problems is that there is a divergence between the design and the red-line documents. 2015
  58. 58. Microsoft Design & Development Collaboration 2015 3. Communicating about transitions / animations / behaviors Visual: http://nineinchnails.tumblr.com/
  59. 59. Microsoft Design & Development Collaboration Demonstrating animations and transitions can be time consuming, but there are a few handy timesavers we use often. 2015
  60. 60. Microsoft Design & Development Collaboration To best describe an animation / transitions, 2 components are usually required: 1. A concise reference / demo / video 2. A short textual description of elements, movement and timing. (might be affected by terminology) 2015
  61. 61. Microsoft Design & Development Collaboration Each animation can be demonstrated on it’s own, with the best tool for the job. 2015 There’s no need to create a long ‘video’ demonstrating
 a long series of animations.
  62. 62. Microsoft Design & Development Collaboration Sometimes it is a reference from another app, sometimes it’s a Flash / After Effects animation, sometimes it’s something in Keynote. 2015 or use Visual: https://dribbble.com/kingyo
  63. 63. Microsoft Design & Development Collaboration Keynote is a wonderful tool for demonstrating sets of animations and transitions, see this talk from WWDC for reference: 2015 Prototyping: fake it till you make it. WWDC 2014 Microsoft2015
  64. 64. Microsoft Design & Development Collaboration As with design details, tuning animation requires collaboration between devs and designers to tweak & fine-tune. This means it’s best to budget that into the effort estimate for the task. 2015
  65. 65. Let’s take a look at 2 case studies: 2015 Microsoft Design & Development Collaboration
  66. 66. Tawkon 2015 Microsoft Design & Development Collaboration
  67. 67. Design & Development Collaboration
  68. 68. Tawkon Green pulses
  69. 69. Design & Development Collaboration Animatetoshowthesphereopening Animatetoshowthesphereclosing Slideinformationscreenupwardsfromthebottom Slideinformationscreendownwards SwitchtoSafari Slideinformationscreenupwardsfromthebottom Slideinformationscreendownwards
  70. 70. 2015 Microsoft Part 03 Inspiration: Learning to appreciate high fidelity implementation Designing and developing products for multiple platforms
  71. 71. Microsoft High fidelity implementation To achieve optimal results, we need to adopt a commitment to excellence, from maintaining a planned design in general, to working through and lots of small interaction details. 2015
  72. 72. Microsoft High fidelity implementation Superb products are built by designers that are highly communicative & dev teams that are highly collaborative and attuned to detail. 2015 Visual: http://jamzhang.com/
  73. 73. Microsoft High fidelity implementation We have the potential of doing great work when we collaborate with dev teams that acknowledge the importance of placing significant effort on front-end development. and... 2015 Visual: http://www.puppygames.net/revenge-of-the-titans/
  74. 74. Microsoft High fidelity implementation We produce superb experiences when designers are able to communicate and collaborate with these dev teams in an affluent, curious & open manner. 2015 Visual: http://www.puppygames.net/revenge-of-the-titans/
  75. 75. Facebook Paper 2015 Microsoft Inspiration High fidelity implementation Visual: https://www.facebook.com/paper
  76. 76. Egmont2014 High fidelity implementation Visual: https://www.facebook.com/paper
  77. 77. Egmont2014 1. Elements move continuously with the finger, as opposed to being pre-canned. 2. All elements are transitioned in and out 3. An element that goes back gets darker / is overplayed with shadow 4. Content from the web is pre-loaded when possible, and unfolds smoothly 5. Video plays smoothly behind text and icons, no jumping frames, no flickering loading indication 6. Pulling down open views shrinks them back to original form or folds them back into a thumbnail smoothly 7. Pulling down views multiple times performs multiple drill-outs, like hitting back several times, all very fluidly, without interruptions or friction. High fidelity implementation Visual: https://www.facebook.com/paper
  78. 78. Clear
 for iPhone, iPad, Mac 2015 Microsoft Inspiration High fidelity implementation Visual: http://realmacsoftware.com/clear
  79. 79. Microsoft2015
  80. 80. 2015 Microsoft Part 04 How to achieve these results? Designing and developing products for multiple platforms
  81. 81. Microsoft How to achieve these results? Prototyping quickly & early, trying to get the most experience impact with simple prototypes. 2015 1
  82. 82. Microsoft How to achieve these results? We use Quartz Composer + Origami and Framerjs for interaction prototypes where animation and high FPS is needed. 2015
  83. 83. 2015 Microsoft Origami is an extension to Quartz Composer built by Facebook. It has a tricky learning curve, but it provides a way to build performant prototypes, mixing media (video, images, sound) fairly easily. Prototypes unfortunately run only on a Mac. (can be streamed to device with LiveView / Duet Display) How to achieve these results?
  84. 84. Framerjs extracts all layers from a PSD and reconstructs the same layout from these images inside an html. Prototypes are coded against the layer hierarchy, via Javascript / CoffeeScript. Prototypes can run on a mobile device via a ‘player’ app. 2015 Microsoft How to achieve these results?
  85. 85. Microsoft How to achieve these results? Hiding static comps below the implemented UI and switching back & forth Use apps like GluePrint or UberLayer (see video on next slide) 2015 2
  86. 86. Microsoft How to achieve these results? 2015
  87. 87. Microsoft How to achieve these results? Source tree + assets on Dropbox: allow designers to refine by overwriting assets. It works surprisingly well! 2015 3
  88. 88. Microsoft2015 How to achieve these results? Storing app sources on Dropbox allows designers to continuously refine assets and rewrite them right into the sourcetree, allowing quick turnaround of fixes.
  89. 89. Microsoft2015 How to achieve these results? Developers and designers 
 working together. Not waiting for QA time slots only or communicating via issue tracking. 4
  90. 90. Section name Developer mindset Designer mindset 1. Strive for very high-fidelity implementation 2. Keen eye for small interaction details 3. Collaborative, open 4. Can-do-attitude 1. Well versed in target platforms 2. Decisive but recognizes a need for flexibility 3. Makes the right tradeoffs 4. Able to communicate through prototypes, animations, references 2015 Microsoft Ideal mindset:
  91. 91. Part 05 Discussion 2015 Microsoft Designing and developing products for multiple platforms
  92. 92. 2015 Egmont Thank you. Guy Haviv Partner, Design Director Tel Aviv Yoram Berkowicz Chief Technology Officer Tel Aviv

×