designing and developing products for multiple platforms
TRANSCRIPT
![Page 1: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/1.jpg)
2015 Microsoft
Designing and developing products for multiple platforms
Microsoft Power BI
Guy Haviv Design Director, Partner Tel Aviv
![Page 2: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/2.jpg)
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
![Page 3: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/3.jpg)
Overview
San FranciscoMadrid
Barcelona
Aarhus
Copenhagen
Munich
Tel Aviv
Sao Paolo
Shanghai
300+
32
28
Designits worldwide
Educational Backgrounds
Nationalities
Tokyo
Oslo
Stockholm
![Page 4: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/4.jpg)
2015 Microsoft
Part 01
Approaches in design for multiple platforms
Designing and developing products for multiple platforms
![Page 5: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/5.jpg)
Microsoft
How do we approach designing for multiple platforms?
2015
Q
![Page 6: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/6.jpg)
Microsoft
To begin, we need to get to know each platform’s opinionated way of designing user experiences.
2015
Approach
![Page 7: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/7.jpg)
Microsoft
Luckily, there are handy documentations of these ‘opinionated’ approaches
2015
Approach
![Page 8: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/8.jpg)
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/
![Page 9: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/9.jpg)
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
![Page 10: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/10.jpg)
Microsoft
Approach
Designing the user experience across platforms:
2015
![Page 11: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/11.jpg)
Microsoft
Approach
One Size Fits All vs. Good Citizen
2015
![Page 12: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/12.jpg)
Microsoft
Approach
Perhaps it’s better to describe these approaches as a spectrum:
2015
![Page 13: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/13.jpg)
Microsoft
Approach
Spectrum
2015
![Page 14: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/14.jpg)
Microsoft
Approach
Spectrum
2015
![Page 15: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/15.jpg)
Microsoft2015
![Page 16: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/16.jpg)
Microsoft2015
![Page 17: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/17.jpg)
iPhone Android iPhone Android
![Page 18: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/18.jpg)
iPhone Android iPhone Android
![Page 19: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/19.jpg)
iPhone Android iPhone Android
![Page 20: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/20.jpg)
iPhone Android
![Page 21: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/21.jpg)
Waze
iPhone Android iPhone Android
![Page 22: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/22.jpg)
Microsoft
How do we approach multiple devices and resolutions?
2015
Q
![Page 23: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/23.jpg)
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
![Page 24: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/24.jpg)
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:
![Page 25: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/25.jpg)
2. Screens with different aspect ratios (less severe today than ~2 years ago)
![Page 26: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/26.jpg)
3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)
![Page 27: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/27.jpg)
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.
![Page 28: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/28.jpg)
Microsoft
Approach
Dealing with these challenges:
2015
![Page 29: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/29.jpg)
2015 Microsoft
Approach
Dealing with these challenges:
Embrace fragmentation in screen sizes: learn from desktop apps on Windows / Mac OS
![Page 30: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/30.jpg)
2015 Microsoft
Approach
Start by establishing anapproach 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
![Page 31: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/31.jpg)
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
![Page 32: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/32.jpg)
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/
![Page 33: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/33.jpg)
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
![Page 34: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/34.jpg)
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
![Page 35: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/35.jpg)
2015 Microsoft
Part 02
Design & Development Collaboration
Designing and developing products for multiple platforms
![Page 36: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/36.jpg)
Design & Development Collaboration
Communication between designers, PMs and devs can be tricky in the early stages of a project / feature.
Microsoft2015
![Page 37: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/37.jpg)
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/
![Page 38: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/38.jpg)
Microsoft
Design & Development Collaboration
Let’s talk about 3 main tools we use to facilitate meaningful conversations between design, PM, & dev teams.
2015
![Page 39: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/39.jpg)
Microsoft
Design & Development Collaboration
1. Wireframes 2. Visual design (and specs / redlines / style guides) 3. Communicating about transitions / animations / behaviors
2015
![Page 40: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/40.jpg)
Microsoft
Design & Development Collaboration
1. Wireframes
2015 Visual: https://dribbble.com/pons
![Page 41: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/41.jpg)
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
![Page 42: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/42.jpg)
Microsoft
Design & Development Collaboration
2015
![Page 43: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/43.jpg)
Microsoft
Design & Development Collaboration
Often times, it’s useful to build quick clickable prototypes using these wireframes, which help clarify things further.
2015
![Page 44: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/44.jpg)
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
![Page 45: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/45.jpg)
Microsoft
Design & Development Collaboration
As part of a design process, the majority of wireframes are drawn and discussed following the information architecture phase.
2015
![Page 46: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/46.jpg)
Microsoft
Design & Development Collaboration
2. Visual design (and specs / redlines / style guides)
2015 Visual: https://dribbble.com/shagov
![Page 47: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/47.jpg)
Microsoft
Design & Development Collaboration
What is the best way to deliver and ensure successful implementation of designs?
2015
![Page 48: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/48.jpg)
Microsoft
Design & Development Collaboration
We’ve tried many different ways of delivering visual designs.
2015 Visual: http://www.puppygames.net/revenge-of-the-titans/
![Page 49: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/49.jpg)
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
![Page 50: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/50.jpg)
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.
![Page 51: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/51.jpg)
Microsoft
1.
2015
1.
![Page 52: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/52.jpg)
Microsoft
1.
We’ve found that we are most effective when delivering AI / PSD files directly to developers.
2015 Visual: http://www.alwayswithhonor.com/
![Page 53: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/53.jpg)
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.
![Page 54: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/54.jpg)
Microsoft
2. Create component spec sheets covering all components
2015
2.
![Page 55: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/55.jpg)
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.
![Page 56: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/56.jpg)
Microsoft2015
3.3. of screens & states.
![Page 57: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/57.jpg)
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
![Page 58: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/58.jpg)
Microsoft
Design & Development Collaboration
2015
3. Communicating about transitions / animations / behaviors
Visual: http://nineinchnails.tumblr.com/
![Page 59: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/59.jpg)
Microsoft
Design & Development Collaboration
Demonstrating animations and transitions can be time consuming, but there are a few handy timesavers we use often.
2015
![Page 60: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/60.jpg)
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
![Page 61: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/61.jpg)
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’ demonstratinga long series of animations.
![Page 62: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/62.jpg)
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
![Page 63: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/63.jpg)
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
![Page 64: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/64.jpg)
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
![Page 65: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/65.jpg)
Let’s take a look at 2 case studies:
2015 Microsoft
Design & Development Collaboration
![Page 66: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/66.jpg)
Tawkon
2015 Microsoft
Design & Development Collaboration
![Page 67: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/67.jpg)
Design & Development Collaboration
![Page 68: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/68.jpg)
Tawkon
Green pulses
![Page 69: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/69.jpg)
Design & Development Collaboration
Animate to show the sphere opening
Animate to show the sphere closing
Slide information screen upwards from the bottom
Slide information screen downwards
Switch to Safari
Slide information screen upwards from the bottom
Slide information screen downwards
![Page 70: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/70.jpg)
2015 Microsoft
Part 03
Inspiration: Learning to appreciate high fidelity implementation
Designing and developing products for multiple platforms
![Page 71: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/71.jpg)
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
![Page 72: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/72.jpg)
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/
![Page 73: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/73.jpg)
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/
![Page 74: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/74.jpg)
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/
![Page 75: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/75.jpg)
Facebook Paper
2015 Microsoft
Inspiration
High fidelity implementation
Visual: https://www.facebook.com/paper
![Page 76: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/76.jpg)
Egmont2014
High fidelity implementation
Visual: https://www.facebook.com/paper
![Page 77: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/77.jpg)
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
![Page 78: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/78.jpg)
Clearfor iPhone, iPad, Mac
2015 Microsoft
Inspiration
High fidelity implementation
Visual: http://realmacsoftware.com/clear
![Page 79: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/79.jpg)
Microsoft2015
![Page 80: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/80.jpg)
2015 Microsoft
Part 04
How to achieve these results?
Designing and developing products for multiple platforms
![Page 81: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/81.jpg)
Microsoft
How to achieve these results?
Prototyping quickly & early, trying to get the most experience impact with simple prototypes.
2015
1
![Page 82: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/82.jpg)
Microsoft
How to achieve these results?
We use Quartz Composer + Origami and Framerjs for interaction prototypes where animation and high FPS is needed.
2015
![Page 83: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/83.jpg)
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?
![Page 84: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/84.jpg)
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?
![Page 85: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/85.jpg)
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
![Page 86: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/86.jpg)
Microsoft
How to achieve these results?
2015
![Page 87: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/87.jpg)
Microsoft
How to achieve these results?
Source tree + assets on Dropbox: allow designers to refine by overwriting assets.
It works surprisingly well!
2015
3
![Page 88: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/88.jpg)
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.
![Page 89: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/89.jpg)
Microsoft2015
How to achieve these results?
Developers and designers working together.
Not waiting for QA time slots only or communicating via issue tracking.
4
![Page 90: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/90.jpg)
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:
![Page 91: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/91.jpg)
Part 05
Discussion
2015 Microsoft
Designing and developing products for multiple platforms
![Page 92: Designing and developing products for multiple platforms](https://reader034.vdocuments.us/reader034/viewer/2022051315/55a5d9091a28aba56e8b465f/html5/thumbnails/92.jpg)
2015 Egmont
Thank you.
Guy Haviv Partner, Design Director Tel Aviv
Yoram Berkowicz Chief Technology Officer Tel Aviv