Designing and developing products for multiple platforms

of 92

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
PDF
92 pages
0 downs
21 views
Share
Description
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.
Transcript
  • 1. 2015 Microsoft Designing and developing products for multiple platforms Microsoft Power BI Guy Haviv Design Director, Partner Tel Aviv
  • 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. 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. 2015 Microsoft Part 01 Approaches in design for multiple platforms Designing and developing products for multiple platforms
  • 5. Microsoft How do we approach designing for multiple platforms? 2015 Q
  • 6. Microsoft To begin, we need to get to know each platform’s opinionated way of designing user experiences. 2015 Approach
  • 7. Microsoft Luckily, there are handy documentations of these ‘opinionated’ approaches 2015 Approach
  • 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. 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. Microsoft Approach Designing the user experience across platforms: 2015
  • 11. Microsoft Approach One Size Fits All vs. Good Citizen 2015
  • 12. Microsoft Approach Perhaps it’s better to describe these approaches as a spectrum: 2015
  • 13. Microsoft Approach Spectrum 2015
  • 14. Microsoft Approach Spectrum 2015
  • 15. Microsoft2015
  • 16. Microsoft2015
  • 17. Instagram iPhone Android iPhone Android
  • 18. iPhone Android iPhone Android
  • 19. iPhone Android iPhone Android
  • 20. iPhone Android
  • 21. Waze iPhone Android iPhone Android
  • 22. Microsoft How do we approach multiple devices and resolutions? 2015 Q
  • 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. 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. 2. Screens with different aspect ratios (less severe today than ~2 years ago)
  • 26. 3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)
  • 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. Microsoft Approach Dealing with these challenges: 2015
  • 29. 2015 Microsoft Approach Dealing with these challenges: Embrace fragmentation in screen sizes: learn from desktop apps on Windows / Mac OS
  • 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. 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. 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. 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. 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. 2015 Microsoft Part 02 Design & Development Collaboration Designing and developing products for multiple platforms
  • 36. Design & Development Collaboration Communication between designers, PMs and devs can be tricky in the early stages of a project / feature. Microsoft2015
  • 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. Microsoft Design & Development Collaboration Let’s talk about 3 main tools we use to facilitate meaningful conversations between design, PM, & dev teams. 2015
  • 39. Microsoft Design & Development Collaboration 1. Wireframes 2. Visual design (and specs / redlines / style guides) 3. Communicating about transitions / animations / behaviors 2015
  • 40. Microsoft Design & Development Collaboration 1. Wireframes 2015 Visual: https://dribbble.com/pons
  • 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. Microsoft Design & Development Collaboration 2015
  • 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. 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. 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. Microsoft Design & Development Collaboration 2. Visual design (and specs / redlines / style guides) 2015 Visual: https://dribbble.com/shagov
  • 47. Microsoft Design & Development Collaboration What is the best way to deliver and ensure successful implementation of designs? 2015
  • 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. 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. 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. Microsoft 1. 2015 1.
  • 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. 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. Microsoft 2. Create component spec sheets covering all components 2015 2.
  • 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. Microsoft2015 3. 3. of screens & states.
  • 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. Microsoft Design & Development Collaboration 2015 3. Communicating about transitions / animations / behaviors Visual: http://nineinchnails.tumblr.com/
  • 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. 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. 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. 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. 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. 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. Let’s take a look at 2 case studies: 2015 Microsoft Design & Development Collaboration
  • 66. Tawkon 2015 Microsoft Design & Development Collaboration
  • 67. Design & Development Collaboration
  • 68. Tawkon Green pulses
  • 69. Design & Development Collaboration Animatetoshowthesphereopening Animatetoshowthesphereclosing Slideinformationscreenupwardsfromthebottom Slideinformationscreendownwards SwitchtoSafari Slideinformationscreenupwardsfromthebottom Slideinformationscreendownwards
  • 70. 2015 Microsoft Part 03 Inspiration: Learning to appreciate high fidelity implementation Designing and developing products for multiple platforms
  • 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. 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. 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. 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. Facebook Paper 2015 Microsoft Inspiration High fidelity implementation Visual: https://www.facebook.com/paper
  • 76. Egmont2014 High fidelity implementation Visual: https://www.facebook.com/paper
  • 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. Clear
 for iPhone, iPad, Mac 2015 Microsoft Inspiration High fidelity implementation Visual: http://realmacsoftware.com/clear
  • 79. Microsoft2015
  • 80. 2015 Microsoft Part 04 How to achieve these results? Designing and developing products for multiple platforms
  • 81. Microsoft How to achieve these results? Prototyping quickly & early, trying to get the most experience impact with simple prototypes. 2015 1
  • 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. 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. 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. 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. Microsoft How to achieve these results? 2015
  • 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. 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. 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. 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. Part 05 Discussion 2015 Microsoft Designing and developing products for multiple platforms
  • 92. 2015 Egmont Thank you. Guy Haviv Partner, Design Director Tel Aviv Yoram Berkowicz Chief Technology Officer Tel Aviv
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks