Simple Steps to UX/UI Web Design

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

TAGS:

description

Your guide to picking the right User Interface (UI) and creating the best User Experience (UX) in just a short amount of time. Learn how to quickly create mockups, landing pages, and build mock integrations that turn into large ideas. Have more questions about UX/UI? Contact [email protected] for additional information or questions and we will get back to you shortly.

Transcript of Simple Steps to UX/UI Web Design

Presented by Ellie Cachette, VP of Product Marketing, @ecachette

#UXLearn

Simple Steps to UX/UI web design

Agenda

•  Problem •  UX vs UI •  Purposes of UX •  Purposes of UI •  Design Tools •  Summary

What is the problem?

Koombea flow process

UI is how it looks

UX/UI

UX is how it works and feels

- Popcorn - Defrost - 30 seconds

UX-User Experience

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

*Fulfill business goals

1. User acquisition

2. User Activation

3. User Retention

Purpose Behind UX-User experience

How UX solves problems

Interaction Design  

Usability  

Information Architecture  

Visual Design  

Content Strategy  

User Research  

UX  

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

User Definition

Information Architecture

Userflow

Wireframe

Koombea flow process

UX is NOT UI

http://www.uxisnotui.com/downloads/a4.pdf

UI-User Interface

A skillful interface designer understands the importance of providing the user with a

solution to a defined problem.

UI  

Branding

Color, Schemas: font, Logo, Style

Wireframing

•  User Acquisition •  Brand •  Instill trust

Purpose behind UI-User Interface

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!

What NOT to do:

Easy to use Design Tools

HotGloo Hotgloo.com

Balsamiq Balsamiq.com

Invision invisionapp.com

The UX/UI Difference Freelance vs Agency

Freelancer Agency In-house

Pros

Flexibility Creative Brand harmony

Fresh Perspective

Access to latest tech

Access to “assets”

Quick Turnaround Experts

Cons

Limited to specialty Expensive Lack of

creativity

May differ from “brand”

Turnaround times differ Bureaucracy

@koombea

386 Park Ave South, 10th Floor

New York, NY 10016

625 2nd St., Suite 280

San Francisco, CA 94107

Cra 53 # 79-01 L-301

Barranquilla, Colombia

Have questions?

We are here to help.

Email us at

[email protected]

/koombea

#UXLearn