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

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

Designits worldwide

Educational Backgrounds

Nationalities

Stockholm

2015 Microsoft

Part 01

Approaches in design for multiple platforms

Microsoft

How do we approach designing for multiple platforms?

Microsoft

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

Approach

Microsoft

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

Approach

Microsoft

A great way to go through a well phrased ‘design manifesto’ for each platform is to read the user interface design guidelines.

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/

Microsoft

A great way to go through a well phrased ‘design manifesto’ for each platform is to read the user interface design guidelines.

Approach

Android Design developer.android.com/design/index.html

Material Design (google design language site) www.google.com/design/spec/material-design/introduction.html

Microsoft

Approach

Designing the user experience across platforms:

Microsoft

Approach

One Size Fits All vs. Good Citizen

Microsoft

Approach

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

Microsoft

Approach

Spectrum

Microsoft

Approach

Spectrum

Microsoft2015

Instagram

iPhone Android iPhone Android

iPhone Android

iPhone Android iPhone Android

Microsoft

How do we approach multiple devices and resolutions?

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

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

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

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

Visual: 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)

If scrolling is not desired, try to plan for a ‘canvas’ view that can be scaled.

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

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.

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/

Microsoft

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

Microsoft

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

Microsoft

1. Wireframes

2015 Visual: 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.

Microsoft

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

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?

Microsoft

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

Microsoft

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

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

Microsoft

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

Microsoft

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

2015 Visual: 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.

Microsoft

Three common methods are:

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

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

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

Microsoft

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

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

Microsoft

2. Create component spec sheets covering all components

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.

Microsoft

3. Communicating about transitions / animations / behaviors

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

Microsoft

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

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)

Microsoft

Each animation can be demonstrated on it’s own, with the best tool for the job.

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.

or use

Visual: https://dribbble.com/kingyo

Microsoft

Keynote is a wonderful tool for demonstrating sets of animations and transitions, see this talk from WWDC for reference:

Prototyping: fake it till you make it. WWDC 2014

Microsoft2015

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.

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.

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/

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

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

Microsoft2015

2015 Microsoft

Part 04

How to achieve these results?

Microsoft

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

Microsoft

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

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)

Microsoft

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

It works surprisingly well!

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.

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

htmlmaterial design

phrased design manifesto

design language site

different physical sizes

different pixel densities

different aspect ratios

user experiences

global strategic design

Design

one business multiple digital platforms

flexible rendering multiple platforms

selecting and managing multiple new media platforms

the trouble with using multiple marketing platforms

automated testing of mobile applications on multiple...

planning & coaching content for multiple platforms

successfully adapting content to multiple platforms - a...

hybrid applications — your product on multiple platforms

securing multiple mobile platforms - etsi

designing multiple master typefaces

designing multiple master typefaces - adobe

multiple countries & multilingual e-commerce platforms using...

the story of one localization and multiple platforms

rackspace—managing and supporting multiple linux platforms

designing for multiple outputs

designing elegant ux across devices and platforms

how to repurpose content across multiple platforms

rapid prototyping with javascript for multiple platforms

designing embedded virtualized intel(r) architecture...

technologies for live streaming to multiple platforms ·...