designing and developing products for multiple platforms

2015 Microsoft

Designing and developing products for multiple platforms

Microsoft Power BI

Guy Haviv Design Director, Partner Tel Aviv

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

Overview

San FranciscoMadrid

Barcelona

Aarhus

Copenhagen

Munich

Tel Aviv

Sao Paolo

Shanghai

300+

32

28

Designits worldwide

Educational Backgrounds

Nationalities

Tokyo

Oslo

Stockholm

2015 Microsoft

Part 01

Approaches in design for multiple platforms


Microsoft

How do we approach designing for multiple platforms?

2015

Q

Microsoft

To begin, we need to get to know each platform’s opinionated way of designing user experiences.

2015

Approach

Microsoft

Luckily, there are handy documentations of these ‘opinionated’ approaches

2015

Approach

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/

http://developer.apple.com/design/

http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

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

http://developer.android.com/design/index.html

http://www.google.com/design/spec/material-design/introduction.html

Microsoft

Approach

Designing the user experience across platforms:

2015

Microsoft

Approach

One Size Fits All vs. Good Citizen

2015

Microsoft

Approach

Perhaps it’s better to describe these approaches as a spectrum:

2015

Microsoft

Approach

Spectrum

2015

Microsoft2015

Instagram

iPhone Android iPhone Android

iPhone Android

Waze


Microsoft

How do we approach multiple devices and resolutions?

2015

Q

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

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:

2. Screens with different aspect ratios (less severe today than ~2 years ago)

3. Screens with different pixel densities (in DPI / PPIs: xhdpi, xxhdpi, @2x @3x, etc.)

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.

Microsoft

Approach

Dealing with these challenges:

2015

2015 Microsoft

Approach

Dealing with these challenges:

Embrace fragmentation in screen sizes: learn from desktop apps on Windows / Mac OS

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

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

http://www.wearebuild.com

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/

http://www.ionuss.com/

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

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

2015 Microsoft

Part 02

Design & Development Collaboration



Communication between designers, PMs and devs can be tricky in the early stages of a project / feature.

Microsoft2015

Microsoft


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/

http://www.cubebreaker.com/traffic-lights/

Microsoft


Let’s talk about 3 main tools we use to facilitate meaningful conversations between design, PM, & dev teams.

2015

Microsoft


1. Wireframes 2. Visual design (and specs / redlines / style guides) 3. Communicating about transitions / animations / behaviors

2015

Microsoft


1. Wireframes

2015 Visual: https://dribbble.com/pons

https://dribbble.com/pons

Microsoft


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

Microsoft


2015

Microsoft


Often times, it’s useful to build quick clickable prototypes using these wireframes, which help clarify things further.

2015

Microsoft


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

Microsoft


As part of a design process, the majority of wireframes are drawn and discussed following the information architecture phase.

2015

Microsoft


2. Visual design (and specs / redlines / style guides)

2015 Visual: https://dribbble.com/shagov

https://dribbble.com/shagov

Microsoft


What is the best way to deliver and ensure successful implementation of designs?

2015

Microsoft


We’ve tried many different ways of delivering visual designs.

2015 Visual: http://www.puppygames.net/revenge-of-the-titans/

http://www.puppygames.net/revenge-of-the-titans/

Microsoft


Choosing the right method often creates a tradeoff between spending more time creating a ‘spec’ and time spent doing adjustments and tuning.

2015

Microsoft


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.

Microsoft

1.

2015

1.

Microsoft

1.

We’ve found that we are most effective when delivering AI / PSD files directly to developers.

2015 Visual: http://www.alwayswithhonor.com/

http://www.alwayswithhonor.com/

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.

Microsoft

2. Create component spec sheets covering all components

2015

2.

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.

Microsoft2015

3.3. of screens & states.

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

Microsoft


2015

3. Communicating about transitions / animations / behaviors

Visual: http://nineinchnails.tumblr.com/

http://nineinchnails.tumblr.com/

Microsoft


Demonstrating animations and transitions can be time consuming, but there are a few handy timesavers we use often.

2015

Microsoft


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

Microsoft


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.

Microsoft


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

https://dribbble.com/kingyo

Microsoft


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

http://www.apple.com

http://www.apple.com

Microsoft


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

Let’s take a look at 2 case studies:

2015 Microsoft


Tawkon

2015 Microsoft


Tawkon

Green pulses


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

2015 Microsoft

Part 03

Inspiration: Learning to appreciate high fidelity implementation


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

Microsoft


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/

http://jamzhang.com/

Microsoft


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...



Microsoft


We produce superb experiences when designers are able to communicate and collaborate with these dev teams in an affluent, curious & open manner.



Facebook Paper

2015 Microsoft

Inspiration


Visual: https://www.facebook.com/paper

https://www.facebook.com/paper

Egmont2014




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.




Clearfor iPhone, iPad, Mac

2015 Microsoft

Inspiration


Visual: http://realmacsoftware.com/clear

http://realmacsoftware.com/clear

Microsoft2015

2015 Microsoft

Part 04

How to achieve these results?


Microsoft


Prototyping quickly & early, trying to get the most experience impact with simple prototypes.

2015

1

Microsoft


We use Quartz Composer + Origami and Framerjs for interaction prototypes where animation and high FPS is needed.

2015

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)


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


Microsoft


Hiding static comps below the implemented UI and switching back & forth

Use apps like GluePrint or UberLayer (see video on next slide)

2015

2

http://glueprintapp.com/

http://twelvetwenty.nl/apps/uberlayer

Microsoft


2015

Microsoft


Source tree + assets on Dropbox: allow designers to refine by overwriting assets.

It works surprisingly well!

2015

3

Microsoft2015


Storing app sources on Dropbox allows designers to continuously refine assets and rewrite them right into the sourcetree, allowing quick turnaround of fixes.

Microsoft2015


Developers and designers working together.

Not waiting for QA time slots only or communicating via issue tracking.

4

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:

Part 05

Discussion

2015 Microsoft


2015 Egmont

Thank you.

Guy Haviv Partner, Design Director Tel Aviv

Yoram Berkowicz Chief Technology Officer Tel Aviv

designing and developing products for multiple platforms

Design

htmlmaterial design

phrased design manifesto

design language site

different physical sizes

different pixel densities

different aspect ratios

user experiences

global strategic design