UX & UI Design 101
•
29 likes•4,870 views
UX & UI design process with some mobile specific points. Originally presented to DreamIt Ventures in Philadelphia.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to UX & UI Design 101
Similar to UX & UI Design 101 (20)
Recently uploaded
Recently uploaded (20)
UX & UI Design 101
- 1. Experience & Interface Design Kevin Jackson @chuise kj@chuise.com
- 2. What are we going to talk about? • Design • My Design Process & Tools • 15 Design Tips
- 3. Let’s talk about design.
- 5. “We need a really good UX.”
- 6. UX != UI
- 7. UX is tricky because it doesn’t refer to any one thing. Interface design, visual styling, code performance, uptime, and feature set all contribute to the user’s “experience.” Ryan Singer, Basecamp
- 8. Design is a process.
- 9. Define Sketch Prototype Build Analyze
- 10. Define Sketch Prototype Build Analyze
- 11. What are you trying to accomplish?
- 12. Define Sketch Prototype Build Analyze
- 13. Why do we sketch?
- 14. Sketching allow us to rapidly generate and capture ideas.
- 15. Kevin M Hoffman goodkickoffmeetings.com Design Studio/Prototyping Exercise
- 16. Konigi 8-Up Template — konigi.com
- 17. Konigi 8-Up Template — konigi.com
- 19. Keep it simple. Sketching ain’t pretty.
- 20. Communicate the basic idea.
- 23. Define Sketch Prototype Build Analyze
- 26. Wireframes allow us to refine ideas.
- 27. Start adding precision to our ideas.
- 28. Image Credit: P.J. Onori, somerandomdude.com
- 29. Can I get that in cornflower blue?
- 30. Can I get that in cornflower blue?
- 31. EventUpon for iPhone Login / First Use Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Cancel Interests Save Let's get to know each other. Select 3 or more interests so we can find some great events for you to attend. Entrepreneurs Job Seekers Investment Mobile Cloud Computing EventUpon Find local and attend local events. Serendipitous networking. Login with Twitter Login with Twitter 1. First Open On first open the user is presented with a choice of social networks to use to authenticate and create an account with EventUpon. If a user does not have an account with any of the listed auth sources, they are given the opportunity to use their email address to create an account. 1. Twitter Login Selected If Twitter is selected the iOS account access notification will appear. Login with Twitter 1. Twitter Account Access Not Allowed If the user selects "Don't Allow", they are directed back to the auth selection options. Select a Twitter account chuise 1. Twitter Account Selection If the user allows EventUpon to access their Twitter accounts, the iOS account selection panel appears. 1. Location Services Notification The user must allow EventUpon to use location services in order for certain features, such as check-in, to work correctly. API Notes After authentication method is chosen the StumbledUpon user account is automatically created. The authentication service should be stored along with the user account. EventUpon Find local and attend local events. Serendipitous networking. Login with LinkedIn "EventUpon" would like access to Twitter accounts. Don't Allow OK Find local and attend local events. Serendipitous networking. Login with LinkedIn EventUpon Find local and attend local events. Serendipitous networking. Login with Twitter Cancel "EventUpon" would liked to use your location. Don't Allow OK Connect with Facebook Or use your email address. EventUpon Find local and attend local events. Serendipitous networking. Connect with Facebook Or use your email address.
- 32. Take your idea and break it in half. Jason Fried, Basecamp
- 33. Take it away until it breaks.
- 38. Wireframes help us clearly communicate our ideas.
- 40. Development Team
- 42. Management Development Team Designers
- 46. Omni Group OmniGraffle omnigroup.com
- 49. Image Credit: P.J. Onori, somerandomdude.com
- 51. Define and refine interactions.
- 52. EventUpon for iPhone Login / First Use Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM Cancel Interests Save Let's get to know each other. Select 3 or more interests so we can find some great events for you to attend. Entrepreneurs Job Seekers Investment Mobile Cloud Computing EventUpon Find local and attend local events. Serendipitous networking. Login with Twitter Login with Twitter 1. First Open On first open the user is presented with a choice of social networks to use to authenticate and create an account with EventUpon. If a user does not have an account with any of the listed auth sources, they are given the opportunity to use their email address to create an account. 1. Twitter Login Selected If Twitter is selected the iOS account access notification will appear. Login with Twitter 1. Twitter Account Access Not Allowed If the user selects "Don't Allow", they are directed back to the auth selection options. Select a Twitter account chuise 1. Twitter Account Selection If the user allows EventUpon to access their Twitter accounts, the iOS account selection panel appears. 1. Location Services Notification The user must allow EventUpon to use location services in order for certain features, such as check-in, to work correctly. API Notes After authentication method is chosen the StumbledUpon user account is automatically created. The authentication service should be stored along with the user account. EventUpon Find local and attend local events. Serendipitous networking. Login with LinkedIn "EventUpon" would like access to Twitter accounts. Don't Allow OK Find local and attend local events. Serendipitous networking. Login with LinkedIn EventUpon Find local and attend local events. Serendipitous networking. Login with Twitter Cancel "EventUpon" would liked to use your location. Don't Allow OK Connect with Facebook Or use your email address. EventUpon Find local and attend local events. Serendipitous networking. Connect with Facebook Or use your email address.
- 53. Get a feel for things.
- 55. Change is hard.
- 57. POP popapp.in
- 69. Define Sketch Prototype Build Analyze
- 71. Take it away until it breaks.
- 72. 155 Design Tips
- 73. Define Sketch Prototype Build Analyze
- 75. Create and nurture engaged users.
- 76. Usage Analytics
- 77. Users, Sessions, Devices, OS Version, Time in App, Retention
- 78. User Feedback
- 79. A/B Testing
- 81. Personalization
- 83. Tools
- 84. Google Analytics, Mixpanel, Localytics
- 85. Commercial Break
- 86. Signup for free useartisan.com.
- 87. Back to our program.
- 89. Define Sketch Prototype Build Analyze
- 90. 155 Design Tips
- 91. 5 Design Tips
- 92. #1 Tap Targets
- 93. 1 Add to Cart Cancel ★
- 96. Visual hierarchy is the organization and prioritization of content as a means to communicate a message. Hack Design, hackdesign.org
- 98. Overcast App, Marco Arment
- 99. #3 Contrast
- 100. #3 Contrast
- 101. In the town where I was born Lived a man who sailed to sea And he told us of his life In the land of submarines ! So we sailed up to the sun Till we found the sea of green And we lived beneath the waves In our yellow submarine ! We all live in a yellow submarine Yellow submarine, yellow submarine We all live in a yellow submarine Yellow submarine, yellow submarine
- 102. In the town where I was born Lived a man who sailed to sea And he told us of his life In the land of submarines ! So we sailed up to the sun Till we found the sea of green And we lived beneath the waves In our yellow submarine ! We all live in a yellow submarine Yellow submarine, yellow submarine We all live in a yellow submarine Yellow submarine, yellow submarine
- 103. Buy Now!
- 104. Documents > Design Documents
- 105. #4 Spacing
- 106. Play the greater man's game, to bounce off my losses So I can earn the acres the houses the horses Of course it's much greater than your Benz or your Lex The engine to my comprehension is just too complex Much too complex, EFX/effects be live like Das Making moves down South, to avoid the chaos And never, flaunt the coin ‘cause dime-getters be gazin' They call me Luther Van, they say my style is so Amazin' Play the greater man's game, to bounce off my losses So I can earn the acres the houses the horses Of course it's much greater than your Benz or your Lex The engine to my comprehension is just too complex Much too complex, EFX/effects be live like Das Making moves down South, to avoid the chaos And never, flaunt the coin ‘cause dime-getters be gazin' They call me Luther Van, they say my style is so Amazin'
- 107. People of the world we got to have balance. People of the world we got to have balance.
- 108. Overcast App, Marco Arment
- 109. Forecast.io
- 110. #5 Controls
- 111. Image Credit: Apple
- 112. Vagaro App
- 113. What’s good for the Apple isn’t good for the Android.
- 115. Design is a process.
- 116. Thanks. ! Kevin Jackson Design Director, Artisan Mobile kj@chuise.com @chuise