SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans

Post on 14-Apr-2017

137 views 1 download

Transcript of SenchaCon 2016: Design Methods for Better Product Development - Andrew Hemans

Design Methods for Better Product Development

Andrew Hemans

Overview• Design Thinking

• Visual Design

• Color

• Layout

• Design Communication

• Critique

• The handoff

2

Design. Develop. Test.

• Plan

• Research

• Talk to users

• Identify a problem

• Prototype

• Sketch multiple solutions

• Refine

• Critique

• Share with your team

• Show to potential users

A closer look at Design.

Design Thinking

Design Thinking Concepts

• Empathize – with your users

• Define – your users’ needs, their problem, and your insights

• Ideate – creating ideas for innovative solutions

• Prototype – to start creating solutions

• Test – validate solutions

Research, or try before you buy.

Research Methods

• Define a need or problem

• How have others attempted to solve this problem

• Define a target persona

• Conduct interviews

• Observe user behavior

Sketch, Critique, Repeat.

Quantity Over Quality.

• Talk is cheap, so is sketching

• Development can get expensive

• Pen and Paper

• Balsamiq

• Sketch/Photoshop

• Sencha Stencils

A Drawing is Worth 1000 words

Visual Design

Four Principals of Design

• Contrast

• Repetition

• Alignment

• Proximity

Color Associations

• Red

• Green

• Blue

• Pink

Layout

• Develop a grid system!

• Plan ahead

• Be thoughtful of where you place elements

• Be empathetic to your user

The Hand-off

Style Guides

• All good maps have a key!

• Include colors, fonts, sizing, etc.

• You can be more specific if needed.

It’s Dangerous to go Alone!

• Include team members from the beginning of your project.

• Check in early and check in often for critique.

• Keep an open mind.

• Everyone cares.