Design and development better together

59
Design + Development Gregory Raiz

Transcript of Design and development better together

Page 1: Design and development better together

Design + Development

Gregory Raiz

Page 2: Design and development better together

Presented by:

Title+

Page 3: Design and development better together
Page 4: Design and development better together
Page 5: Design and development better together
Page 6: Design and development better together
Page 7: Design and development better together

Features Usability

Performance Technology

Design

Page 8: Design and development better together

Features Usability

Performance Technology

Design

Features Usability

Performance Technology

Design

Page 9: Design and development better together

Design

Page 10: Design and development better together

Aesthetic Usability Effect

Page 11: Design and development better together

Aesthetic Usability Effect

How things look

Page 12: Design and development better together

It’s design!

Page 13: Design and development better together

Functional, Usable, Beautiful

Page 14: Design and development better together

2000 XP

Page 15: Design and development better together

Better design leads to ♥

Page 16: Design and development better together

RaizlabsCreative Solutions

Page 17: Design and development better together
Page 18: Design and development better together

Better design leads to ♥

Page 19: Design and development better together

Design + Usability

Development

Page 20: Design and development better together
Page 21: Design and development better together

Something’s not right.

Page 22: Design and development better together

Slick Great

Smooth Awesome

Useful Helpful

Slow Clunky Janky Buggy

Confusing Complex

Page 23: Design and development better together

Design Development

Page 24: Design and development better together

Slow Clunky Janky Buggy

Confusing Complex

Page 25: Design and development better together

Performance is a feature

Slow

Page 26: Design and development better together

Sub-Second 1 Second

3-5 Seconds 5+ Seconds

30 Seconds +

Page 27: Design and development better together

Pixels and animations between the screens

Clunky

Page 28: Design and development better together
Page 29: Design and development better together

Design for both the happy paths & thorny paths

Janky

Page 30: Design and development better together
Page 31: Design and development better together

Quality is inversely related to the number features

Buggy

Page 32: Design and development better together
Page 33: Design and development better together

State and modality are hard to design and predict

Confusing

Page 34: Design and development better together
Page 35: Design and development better together

Compositions may not work if they weren’t designed with real data.

Complex

Page 36: Design and development better together

Die Zusammensetzungen können nicht funktionieren, wenn sie nicht mit realen Daten entwickelt wurden.

Complex

Page 37: Design and development better together

Slick Great

Smooth Awesome

Useful Helpful

Page 38: Design and development better together

Inconsistent Non-standard Special-Case Gratuitous API Limited

Platform Limited Performance Constrained

Page 39: Design and development better together

Things that look the same should act the same

Inconsistent

Page 40: Design and development better together

Nothing Profile Menu

Page 41: Design and development better together

Things that look system or stock should act like they are system.

Non-Standard

Page 42: Design and development better together
Page 43: Design and development better together

Items should only behave differently if they are truly special

Special Case

Page 44: Design and development better together

Being fancy for no good reason

Gratuitous

Page 45: Design and development better together
Page 46: Design and development better together

We can only display the data or do what is possible

API or Platform

Page 47: Design and development better together

If we do this, things get slow.

Performance Constraints

Page 48: Design and development better together

Communication and Balance

Page 49: Design and development better together

HIG (Human Interface Guidelines) API Diffs

Common Language

Page 50: Design and development better together

Designer DesignsDeveloper Checks It

Developer CodesDesigner Checks It

Page 51: Design and development better together

Traditional Waterfall Process

Page 52: Design and development better together

Users Only Experience Shipped Products

Page 53: Design and development better together

I don’t care what your spec says… CODE WINS

Page 54: Design and development better together

Loading Indicators Performance Empty States

Error Conditions First Run Experience

Etc. Etc.

Page 55: Design and development better together

Agile isn’t just for developers

13

Page 56: Design and development better together

3

Agile isn’t just for developers

73

Page 57: Design and development better together

Design + Development

Page 58: Design and development better together

Page 59: Design and development better together

Thank you.

@graiz