fred spencer: designing a great ui

Desiging a Great UIFred Spencer

Tuesday, September 6, 2011

Intro

• Fred Spencer

• Sr. Application Architect, Appcelerator

• Digital Media Instructor, Rhode Island School of Design, Continuing Education

• Twitter: @anovice

Tuesday, September 6, 2011

Topics

1. Principles

2. Process

3. Practical

4. Resources

Tuesday, September 6, 2011

1. Principles

• Connect

• Communicate

• Control

Tuesday, September 6, 2011

Principles : Connect

• You will never know your audience, but you should know your audience well.

• Follow trends and communities.

• Identify subjective and objective.

Tuesday, September 6, 2011

Principles : Communicate

• Open dialog. Ask for opinions. Make critisim productive.

• FILTER.

• Create simple processes for user feedback.

• Highlight features that answer questions.

Tuesday, September 6, 2011

Principles : Control

• UI should lead.

• Obsess over simplicty and you will more successfully define and argue your point of view.

• Do not sacrifice usability for features.

• You won’t satisfy everyone.

Tuesday, September 6, 2011

2. Process

• Research

• Plan

• Initiate

Tuesday, September 6, 2011

Process : Research

• Indentify apps that stand out to you.

• Ask friends and collegues about the apps they love and use every day.

Tuesday, September 6, 2011

Process : Research

• Ask about apps that have left a lasting impression. Often, these gems aren’t very popular.

• Ask about apps they hate. Often, these gems are popular, evoke passionate opinions and offer incredible insight.

Tuesday, September 6, 2011

Process : Research

• What makes these specific applications stand out?

• Color scheme?

• Navigation?

• Features?

Tuesday, September 6, 2011

Process : Research

• User Experience (UX) is a philosophy and science.

• User Interface (UI) design supports your UX goals.

Tuesday, September 6, 2011

Process : Research

• Audiences will use what is available to them.

• Audiences will rant and rave NO MATTER WHAT.

• These aren’t reasons to cop-out. These are opportunities.

Tuesday, September 6, 2011

Process : Plan

• Define appplication features.

• Consider how you and others would interact with these features.

• FLOWCHART & WIREFRAME.

Tuesday, September 6, 2011

Process : Initiate

• COMP & PROTOTYPE.

• What does your gut tell you?

• Table, merge or eliminate features that don’t work.

Tuesday, September 6, 2011

3. Practical

• Do...

• Know Your Tools

• Examples

Tuesday, September 6, 2011

Practical : Do...

• ...catagorize and abstract features and components so that layouts and assets are consistent, recognizable and reusable.

• ...integrate motion that leads the eye.

• ...define minimum interaction zones.

Tuesday, September 6, 2011

Practical : Know Your Tools

• Pixel or Vector?

• Asset Organization

• Export

Tuesday, September 6, 2011

Practical : Examples

Tuesday, September 6, 2011

4. Resources

• Absorb

• Learn

• Inspire

• Use

Tuesday, September 6, 2011

Resources : Absorb

• boxesandarrows.com

• alistapart.com/topics/userscience

• sixrevisions.com

• thinkvitamin.com

• www.uxmag.com

Tuesday, September 6, 2011

Resources : Learn• Code (avoid DOM)

• codecademy.com

• learn.appendto.com

• Design

• lynda.com

• psd.tutsplus.com

Tuesday, September 6, 2011

Resources : Inspire

• dribbble.com

• colourlovers.com

• lovedsgn.com

• behance.net

Tuesday, September 6, 2011

Resources : Use• Teehan+Lax

• bit.ly/iphone-ui-elements

• bit.ly/android-ui-elements

• bit.ly/iphone-sketch-elements

• http://twitter.github.com/bootstrap/

• https://github.com/280north/aristo/

Tuesday, September 6, 2011

Resources : Use

• www.zambetti.com/projects/liveview

• appcooker.com

• balsamiq.com

Tuesday, September 6, 2011