Getting Fun With Design, UI, and All Things Internety

A basic explanation of UI and responsive to executives from my company's peer group. Understanding why responsive and good UI is important.

Transcript

2. THIS IS ME dl@knowclassic.com davidleininger dleininger heyyou dleinin David Leininger Find me, I’! talk nerdy to you...
3. TODAY’S AGENDA AKA... What I’m going to talk at you... 1. What is UI? 2. What is Responsive Web Design? 3. Show and Tell 4. El futuro de Internet en todo el mundo 5. Pizza Party and Team Building Exercises
4. WHAT IS UI? And why "e heck is it so imp#tant? • A user interface is the system by which people interact with a machine.
5. WHAT IS UI? And why "e heck is it so imp#tant? • A user interface is the system by which people interact with a machine. • A user interface is the system by which people interact with a ANYTHING.
6. RON SWANSON Can you rea!y control what "e user is going to do?
7. WHAT IS UI? And why "e heck is it so imp#tant? • Somethings have to be so simple they work without instruction • Others are taught over time to a point that they become second nature.
8. UI CHECKLIST Good UI is clear, concise, and helpful 1. Know your user 2. Pay attention to patterns 3. Stay consistent 4. Use visual hierarchy 5. Provide feedback 6. Be Forgiving 7. Empower your user 8. Speak their language 9. Keep it simple
9. NEW PROBLEMS Now "e user can use a! kinds of devices... iMac, iPhone, iPad... • Mobile phones • Tablets • Retina display computers
10. WHAT IS RWD? Responsive Web Design • Flexible Grids • Media Queries • Flexible Images (at a minimum)
11. IS RWD IMPORTANT? M#e "an you would believe... • Meets users where they are at • Single site, single source of content • Futureproof
12. RWD IS GOOD UI Responsive Web Design • Tailored solution for each screen size • Uses touch and swipe gestures for mobile • Puts important content first
13. MOBILE FIRST What does "at mean? • Worry about essential content first • Reduces content/design bloat • Gives users the content at the top
14. WHAT’S WRONG HERE? How is "is bad UI?
15. SOLUTION Responsive Nav is a sma! part of RWD
16. SHOW AND TELL MediaQuerie.es mediaqueri.es
17. SHOW AND TELL Responsive Web The Boston Globe
18. SHOW AND TELL False Interaction • False Interaction is when the user thinks and feels like they are doing something to interact with the page content, but in actuality they aren’t. • http://simple.com • http://squareup.com/careers/creative • http://knowclassic.com coming soon...
19. THE FUTURE It’s here and it’s awesome • Icon Fonts • New (way m#e awesome) Media Queries
20. QUESTIONS? You’ve got questions... I’ve got answers...