The document outlines key concepts of UX/UI web design, emphasizing the difference between user experience (UX) and user interface (UI), and their respective purposes. It details the steps involved in UX/UI design, including user research, wireframing, and mockups, while also discussing various design tools. Additionally, it highlights the contrasting pros and cons of freelance versus agency work in this field.

1. Simple Steps to
UX/UI web design
#UXLearn
Presented by Ellie Cachette, VP of Product Marketing, @ecachette

2. Agenda
•
•
•
•
•
•
Problem
UX vs UI
Purposes of UX
Purposes of UI
Design Tools
Summary

3. What is the problem?

4. Koombea flow process

5. UX/UI
UX is how it works and
feels
UI is how it looks

6. - Popcorn
- Defrost
- 30 seconds

9. UX-User Experience
UX, or user experience, is a measure of the
ease and pleasure users enjoy when navigating
a site.

10. Purpose Behind UX-User experience
*Fulfill business goals
1. User acquisition
2. User Activation
3. User Retention

11. How UX solves problems
Usability
Visual
Design
User
Research
Information
Architecture
UX
Interaction
Design
Content
Strategy

12. UX Components
1.
2.
3.
4.
User definition
User sitemaps
UserFlows
Wireframes

13. User Definition

14. Information Architecture

15. Userflow

16. Wireframe

17. Koombea flow process

19. UX is NOT UI
http://www.uxisnotui.com/downloads/a4.pdf

20. UI-User Interface
A skillful interface designer understands the
importance of providing the user with a
solution to a defined problem.

21. UI
Branding
Color, Schemas:
font, Logo, Style
Wireframing

22. Purpose behind UI-User Interface
• User Acquisition
• Brand
• Instill trust

23. How do we get to UI?
1. Problem has been identified
2. User flows and stories are made
3. Experiments to validate persona
4. Wireframes and sketches
5. Mockups with UI included can be made
6. User tested
7. It’s now time to code up the interface – UI Design!

24. What NOT to do:

25. Easy to use Design Tools

26. HotGloo
Hotgloo.com

27. Balsamiq
Balsamiq.com

28. Invision
invisionapp.com

29. The UX/UI Difference
Freelance vs Agency

30. Freelancer
Creative
Brand harmony
Fresh
Perspective
Access to latest
tech
Access to
“assets”
Quick
Turnaround
Cons
In-house
Flexibility
Pros
Agency
Experts
Limited to
specialty
Expensive
Lack of
creativity
May differ from
“brand”
Turnaround
times differ
Bureaucracy

31. 386 Park Ave South, 10th Floor
Have questions?
New York, NY 10016
We are here to help.
625 2nd St., Suite 280
Email us at
San Francisco, CA 94107
mvp@koombea.com
Cra 53 # 79-01 L-301
Barranquilla, Colombia
@koombea
/koombea
#UXLearn