Design Basics for Nashville Software School (full pres)

25
+ Design Basics Nashville Software School Innovative Bootcamp program designed to take you from novice to developer in six months of intensive training and mentoring followed by real project work as an apprentice programmer. http://nashvillesoftwareschool.com/ October 2013

Transcript of Design Basics for Nashville Software School (full pres)

Page 1: Design Basics for Nashville Software School (full pres)

+Design BasicsNashville Software SchoolInnovative Bootcamp program designed to take you from novice to developer in six months of intensive training and mentoring followed by real project work as an apprentice programmer.http://nashvillesoftwareschool.com/

October 2013

Page 2: Design Basics for Nashville Software School (full pres)

+Agenda

Groups

Good Design?

Hands-on Thinking: Nashville B-Cycle What did you learn from your user research? Who is a B-Cycle user? What would you do to make things better? How would you do it?

Pitch it! 

Page 3: Design Basics for Nashville Software School (full pres)

+

Good Design

Page 4: Design Basics for Nashville Software School (full pres)

+Making things better for people.

Page 5: Design Basics for Nashville Software School (full pres)

Functional

Long-lasting

Intuitive User-oriented

Simple

Page 6: Design Basics for Nashville Software School (full pres)

AestheticGood Business“Steal like an artist.”

Page 7: Design Basics for Nashville Software School (full pres)

+GROUP EXERCISE

Good & Bad

Page 8: Design Basics for Nashville Software School (full pres)

+PersonaPersonas are archetypes or characters that represent people you are targeting as users.

Page 9: Design Basics for Nashville Software School (full pres)

+

User Centered Design

Page 10: Design Basics for Nashville Software School (full pres)
Page 11: Design Basics for Nashville Software School (full pres)

MARY, COMMUNITY ORGANIZER: TRAITS

Page 12: Design Basics for Nashville Software School (full pres)

+GROUP EXERCISE

Personas

Page 13: Design Basics for Nashville Software School (full pres)

+GROUP EXERCISE

Make things better

Page 14: Design Basics for Nashville Software School (full pres)
Page 15: Design Basics for Nashville Software School (full pres)

+GROUP EXERCISE

Paper Prototype

Page 16: Design Basics for Nashville Software School (full pres)
Page 17: Design Basics for Nashville Software School (full pres)
Page 18: Design Basics for Nashville Software School (full pres)

+GROUP EXERCISE

Pitch

Page 19: Design Basics for Nashville Software School (full pres)

+For your web sites

It all boils down to…1. Take a deep breath. Step back from your site/app. Walk

around the block. Get some sleep.

2. Look at what your site/app from your Persona’s eyes – not yours.

3. Are the elements in the page nicely laid out in an organized pattern?

4. Are the elements consistent across your site?

5. If you introduced something new and original, did you give the user clues as to how it works?

6. Is there a way for your users to get out of a sticky situation?

7. Is content grouped together logically on your pages?

8. Is the text easy to read?

9. Is it easy to spot the emphasized elements on a page or are there so many colors it’s hard to see?

10. Are your pages crowded? Could there be more space between elements?

11. Now put it in front of someone else and see if they can use it.

Page 20: Design Basics for Nashville Software School (full pres)

+ResourcesWeb Sites

Jakob Neilsen

A List Apart

Fast Co Design

Smashing Magazine

UX Booth

UX Pond Acute Search

UX Stack Exchange

UI Patterns

Patterny

WebDev Refinery

Twitter 

Free ToolsColor Generators

Kuler

Color Combos

Grid Golden Grid System

(Responsive design)

Designs Hongkiat.com (Starter Kits

for Web Designers)

Page 21: Design Basics for Nashville Software School (full pres)

+More Resources

Books

Don’t Make Me Think, by Steve Krug

Design of Everyday Things, by Don Norman

Steal Like an Artist, by Austin Kleon

About Face 3: The Essentials of Interaction Design by Alan Cooper

Design Is a Job, Mike Monteiro

Page 22: Design Basics for Nashville Software School (full pres)

+THANK YOU!

Page 23: Design Basics for Nashville Software School (full pres)

+Good Design is

Functional

Intuitive

User-oriented

Simple

Long-lasting

Aesthetic

Unobtrusive

Useful

Well Thought Out

Engaging

Efficient

Good Business

Page 24: Design Basics for Nashville Software School (full pres)
Page 25: Design Basics for Nashville Software School (full pres)

+Ten Interactive Design Rules to Believe In 1. Design for Users

2. Follow the Grid

3. Recognition Rather than Recall

4. Law of Proximity

5. Color & Contrast

6. Type (Fonts) Matter

7. White Space is Your Friend

8. Consistency & Standards

9. Test. Test Again

10. Steal Like an Artist*

* I did – that’s a title of a book by Austin Kleon