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


Topics

1. Principles

2. Process

3. Practical

4. Resources


1. Principles

• Connect

• Communicate

• Control


Principles : Connect

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

• Follow trends and communities.

• Identify subjective and objective.


Principles : Communicate

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

• FILTER.

• Create simple processes for user feedback.

• Highlight features that answer questions.


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.


2. Process

• Research

• Plan

• Initiate


Process : Research

• Indentify apps that stand out to you.

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


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.


Process : Research

• What makes these specific applications stand out?

• Color scheme?

• Navigation?

• Features?


Process : Research

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

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


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.


Process : Plan

• Define appplication features.

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

• FLOWCHART & WIREFRAME.


Process : Initiate

• COMP & PROTOTYPE.

• What does your gut tell you?

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


3. Practical

• Do...

• Know Your Tools

• Examples


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.


Practical : Know Your Tools

• Pixel or Vector?

• Asset Organization

• Export


Practical : Examples


4. Resources

• Absorb

• Learn

• Inspire

• Use


Resources : Absorb

• boxesandarrows.com

• alistapart.com/topics/userscience

• sixrevisions.com

• thinkvitamin.com

• www.uxmag.com


Resources : Learn• Code (avoid DOM)

• codecademy.com

• learn.appendto.com

• Design

• lynda.com

• psd.tutsplus.com


Resources : Inspire

• dribbble.com

• colourlovers.com

• lovedsgn.com

• behance.net


http://dribbble.com/




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/


http://www.teehanlax.com/blog/








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

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

Resources : Use

• www.zambetti.com/projects/liveview

• appcooker.com

• balsamiq.com


http://www.appcooker.com/


