Hold a lecture recently on a UI course about my process of designing web apps.

1. Just Design It
An approach to web app design
by Karri Saarinen
LABS
kiskolabs.com

2. Hi, I work with
Co-founder Partner, UX & Design
http://www.arcticstartup.com http://kiskolabs.com

3. My approach to design projects
1 Concept Brief
2 Sketching
3 Wireframes
4 Mockups
5 Implementation
6 Lifecycle

4. Let’s say we’re desiging
a photosharing site for
twitter users.

5. 1 Concept
Define the core for the project/product.
What’s the problem we are trying to solve?
eg. Sharing photos easily on twitter
Why? - People want to share photos on twitter
Who is the customer? - Twitter population
(online hipsters)
Goals - Able to upload, view and share photos

6. End up with a
Concept Brief
The doc should have
sections like:
- Problem
- Solution
- Goals
- Views
- Personas

7. Personas have two goals:
A persona:
“Evan the 30-year old developer who loves twitter”
Discover and keep the person who
you’re designing for clear in your mind.
(You can’t design for everyone)
End UI or feature debates
(Q: Do we need printing option?
A: No. Evan doesn’t have a printer)

8. 2 Sketch
1 List views on piece of paper
2 List elements on a view
3 Group elements with letters, prioritize
4 Draw
Thrash as much as you can!

9. 2 SKETCH:
List views
- Photo view
- Upload form
- Account
- Homepage
- Sign up / Sign in
Can you remove or merge some views?

10. 2 SKETCH:
List elements on a view
Start with the most important view.
1 Photo
2 Caption
3 Share on twitter / short url
4 Submitter
5 Avatar
6 Comments

11. 2 SKETCH:
Group elements on a view
Start with the most important view.
1 Photo
A 2 Caption
3 Share twitter button
4 Submitter
B 5 Avatar
C 6 Comments

12. 2 SKETCH:
Group elements on a view
B Evan
A
1 Photo
2 Caption
3 Share twitter button
A B 4 Submitter
My Cats 5 Avatar
C Jack
Cool C 6 Comments
Sam
Awesome cats

13. 2 SKETCH:
Thrash what you can
B Evan
A
My Cats
Maybe we don’t
C Jack
Cool
need comments
Sam
Awesome cats
for now

14. 3 Wireframes
Transform sketches to more detailed
wireframes
Wireframes are good for
communicating the project to clients/developers...
Draw layout
(header, content, sidebars, footers, boxes)
Add elements
(text, links, buttons, images, forms)

16. 4 Mockups
Design the different views in Photoshop
- Start with a grid or guides
- Have whitespace
- Natural colors, use real text (not lipsum)
- Choose colors, typography, feel

18. Use Grid Use whitespace
Makes things Usually you can’t use
much clearer too much

19. Web design is 95%
typography.
- Information Architects, Inc
http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

20. 5 Implement
Good web/ux designer should
know how to code.
- Do the html, css, javascript
- Test and polish the experience
- Design the states and content
(errors, notifications, forms, content)

21. Designers should spend 80% of
time redesigning existing features
while only 20% on new features.
- Dave McClure

22. Designers spend 95% of their time
on new things.
- The sad truth

23. 6 Design Usage Lifecycle
1 First Contact
2 First Time Use
3 Ongoing use
4 Passionate use
5 Death

24. 6 Design Usage Lifecycle
1 First Contact Try to “Onboard”
people from 1 to 4
2 First Time Use
with:
3 Ongoing use - Welcome screens
4 Passionate use - Emails
- Help text
5 Death - Tutorials
- “10% profile done”

25. Thanks.
email: karri@karrisaarinen.com
http://karrisaarinen.com
http://twitter.com/karrisaarinen
http://kiskolabs.com
http://www.arcticstartup.com