the UI DESIGN PROCESS

COMP 126: Practical Web Design & Development for Everyone

UI design

is design for the point of human-computer interaction

• inputs
• navigation
• informational components
• containers

what does UI consider?

UI design patterns

Useful and usable aesthetic choices

THE UI PROCESS

Note: the following process stages aren't always included in every design process or always followed in this sequence, and the level of formality and attention paid to each can vary widely between projects. Not all these steps are required to complete A5 in this class.

know your users

• who is your target audience?

• consider, observe, talk, listen, interview 

• users plan their actions in a system based on their predictions of what will happen

• those predictions (and thus, actions) are based on their prior experience of your system and other systems like it

• it's about what your users believe, not what you know

UI BASICS TO CONSIDER

1. What's the problem space you're working in?

2. Information architecture: color, contrast, position, hierarchy

3. UI design: logical/visual connections; similarity; guiding features; calls to action/visual differences; minimalism; aesthetic usability effect

4. Design patterns: what are they? Are they effective?

user research & user persona/e

user stories

"As a [type of user/stakeholder], I want to [task/functionality], so that I can [result/benefit]."

"As a customer, I want to quickly save items to a shopping cart, so that I can return to consider purchasing them later."

"As a potential client, I want to read prior clients' reviews, so that I can decide whether to make an appointment."

the user flow diagram (of your user story/stories)

single-user flow

multi-user flow

lo-fi wireframing

mid-fi wireframing

moodboards

THE style guide

hi-fi wireframing

the interactive prototype