17
Design Methods for Better Product Development Andrew Hemans

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

  • Upload
    sencha

  • View
    140

  • Download
    1

Embed Size (px)

Citation preview

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

Design Methods for Better Product Development

Andrew Hemans

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

Overview• Design Thinking

• Visual Design

• Color

• Layout

• Design Communication

• Critique

• The handoff

2

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

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.

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

Design Thinking

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

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

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

Research, or try before you buy.

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

Research Methods

• Define a need or problem

• How have others attempted to solve this problem

• Define a target persona

• Conduct interviews

• Observe user behavior

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

Sketch, Critique, Repeat.

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

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

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

Visual Design

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

Four Principals of Design

• Contrast

• Repetition

• Alignment

• Proximity

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

Color Associations

• Red

• Green

• Blue

• Pink

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

Layout

• Develop a grid system!

• Plan ahead

• Be thoughtful of where you place elements

• Be empathetic to your user

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

The Hand-off

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

Style Guides

• All good maps have a key!

• Include colors, fonts, sizing, etc.

• You can be more specific if needed.

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

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.

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