CodeSchool The Elements of Web Design All Levels

Course Overview
What we will learn

• Navigation Best Practices
• Persona Creation • Form Design
• User Testing • Homepage Best Practices
• Site Organization • Pricing Page Design
• Sketching and Wireframing • Mobile Design Best Practices

Fundamentals of Design
Suggested Course
Learn the basics of:

• Type
• Color
• Layout
So… Is This Course UX or UI?
Well… it’s a bit of both.
User Experience User Interface Design

• Ideation • Interaction Design
• Experience Mapping • Usability Design
• Persona Creation • Visual Design
• Scenario Mapping • Icon Design
• Prototyping and User Testing • Color and Type
Level 1
Section One: Personas
The Product Design Brief
“Hi, I’m
Amanda.”
• Users can easily find and read articles

• Users can publish and comment on articles
• Users need a dashboard with analytics
• Users need to purchase peer reviews
First, We Need to Get to Know Our Users
Our Users • How much work experience do they have?

Demographics • What’s their professional background?
• What are their needs and interests?
Goals and Tasks • How are they currently trying to meet this need?
• When and where would they use this service?
Environment
Concerns
How Can We Gather Persona Information?
• Make educated assumptions “But we don’t
have users yet —
• Conduct a focus group this is a new
product.”
• Interview current users
• Hire a third-party research team
We need a way to organize

information about our user.
What Does a Persona Entail?
Note: Personas are descriptions of
the Recipe users within our target audience.
Pull Quote Fictitious Name

Job Title
Image
Demographics
Goals Concerns
A Pull Quote and Image
Pull quote
the Recipe
Image
“I only have a minute.”
Fictitious Name
Job Title
Demographics
Goals Concerns
Demographic Information
Fictitious name
the Recipe
Title
Walter Whalen
Dept. Manager at Wyatt Technology
Married with 2 kids Marital status
Goals Concerns
User Goals
the Recipe
Walter Whalen
Married with 2 kids
Goals Concerns
• Read about the latest trends
• Share his knowledge
• Find peer reviewers
Goals
The User’s Concerns
the Recipe
Walter Whalen
Married with 2 kids
Goals Concerns Concerns

• Read about the latest trends • Can I co-write articles?
• Share his knowledge • Can I read on my iPad?
• Find peer reviewers • Can I save articles?
Our First User: Walter Whalen
Persona 1: Walter
Walter Whalen
Married with 2 kids
Goals Concerns
Our Second User: June Leigh
Persona 2: June
“I want to make the next great discovery.”
June Leigh
Intern at DuPont
Single, no kids
Goals Concerns
• Follow her peers • Read articles from phone
• Get paid to peer review • Write articles from phone
• Read stories on polymer • Be alerted on new articles
Our Two Personas
a le n June Leigh
Wa l t e r Wh
e ch n ol ogy Intern at DuPont
at Wy a t t T
M an age r
Dept. Single, no kids
i t h 2 k i d s
M a r r i e d w
These personas will

evolve as people use the site.
4 Key Benefits of Creating Personas
“Hmm. I see now
why we needed these
before wireframes.”
• They separate you from your work.
• They help you empathize with the user.
• They focus decision-making and personalize the users.
• They create a shared understanding of the users.

Most Major Organizations Use Personas
Level 1
Section Two: Design & Test
What Is User-centered Design (UCD)?
User-centered design is a process in

which the needs, wants, and limitations
of a user are given extensive attention
at each stage of the design process.
June Leigh
Intern at DuPont
a le n
h no kidschn lo gy
l t er W
Single, o
t Te
Wa e r a t Wya t
t . Manag s
Dep k i d
d w i th 2
Ma rrie
We’ve already started this
process by creating personas!
Building and Testing Each Feature
• Identify primary feature to build based on personas
• Understand why the personas need this feature
• Research how other people have solved this problem
• Sketch and/or wireframe our ideas
• Test our designs with users in our target audience
Walter’s Needs
Walter Whalen
Married with 2 kids
Goals Concerns
June’s Needs
“I want to make the next great discovery.”
June Leigh
Intern at DuPont
Single, no kids
Goals Concerns
• Follow her peers • Read articles from phone
• Get paid to peer review • Write articles from phone
• Read stories on polymer • Be alerted on new articles
Finding Our First Feature to Build
• Users can easily find and read articles
• Users can publish and comment on articles
• Users need a dashboard with analytics
• Users need to purchase peer reviews
“It looks like

June’s and
Walter’s needs
match up with
this feature.”
Step Two: Understand Why Users Need This
Why Our Personas Want This Feature
Feature: Find and read articles
We know Walter wants
to quickly find and read
the latest stories primarily
on his iPad.
And June wants to read

stories specific to her discipline
and typically on her phone.
Step Three: Research How Others Solved This
How Tumblr Solved This
Search and category links in the top left.
How Tumblr Solved This
Keywords associated with my search

Sorting and filtering options
Four-column layout
How Medium Solved This
User actions with search input
Social
connections
for personal
interactions
Top trending
content
Two-column layout
Step Four: Sketching and Wireframing
• Identify primary feature to build based on Personas
• Understand why the Persona’s need this feature
Rough Sketching Your Feature
Sketching helps quickly get ideas out with less commitment.
Low-fidelity
sketches are great
for exploring UI
concepts.
Wireframing Your Feature
Wireframes are a higher fidelity, clear communication of ideas.
Wireframes are good

for validating overall
effectiveness of the
design.
Using a Wireframing Tool
OmniGraffle Sketch Balsamiq

Put Good Copy in Your Wireframe
“Ugh, how am I
supposed to know
what to do? I don’t
speak lipsum.”
What? Now I know

vs. what to look for.
Step Five: Prototyping and Testing
Printed Wireframe One
Sorting
Search
Categories
Two-column layout
Printed Wireframe Two
Sorting Search
Categories
Three-column layout
The Five-second Usability Test
Three Simple Questions

• What does this feature do?
• What do you like about it?
• What don’t you like about it?
Things to Keep in Mind When Testing
• Remember that you are testing the feature, not the users.
• Always remain neutral — you are there to listen and watch.
• Do not jump in and help participants, and don’t lead them.
• Take good notes — capture what they do and what they say.
• Test between five and seven users at a time.
The Notes I Ended Up With
Testing Results:
• “I prefer the two-column layout — it’s easy to read.”
• “I like the categories in the right column but would 
rather have sorting up top and search in the right.”
• “I don’t like the tiles — they’re confusing.”
• “I’d rather the avatar be below the article. I’m more 
interested in the content, not who wrote it.”

Adding More Features and Testing as We Go
You should test throughout the entire design process — from sketches to live code.
Initial designs Live code

Level 2
Section One: Information Architecture
What Is Information Architecture?
“The site’s doing great,
but with all this new
activity, I feel like we
need some structure!”
Information Architecture Is All Around Us
Eda Nakagawa Kamol Ouoni Namamugi Nhonoodori
Nippe
Onda
Bandobashi
Tsurumi
Nakak Asson
Transfer station
Laogo
Mitsuzawa
Bashamichi
Tokaichibe
Gurmyoli Koyssu
Konanchuo
Izumi-Chuo
Mutsuura
Nagatsuta
Izmino
Maita
Yokohama
Minami Uminckoen
Nogishi
Hekkejima Centre-Kita Azamino

Train stop
Hinode Tobe
Taka Kishinekoen
Yokohamashiel-Line
Yamatae Iahkawacho Tokyu-Touyoko-Line
Tokyu-Denentoshi-Line
Nippe Ofuna
Kodomonokuni-Line
Seasaide-Line
Sachlura
Color-coded train lines

Minatomirai-Line
Fukuura
Information Architecture Is All Around Us
Primary Iconography Secondary

information information
The Four Ways We Find Content on the Web
• Known items
We know what we want, and we know where to find it.
• Exploratory
We know what we want, but we’re not sure where it is or how to find it.
• Unknown
We don’t know enough about what we’re looking for to know where to find it.
• Re-finding
Looking for content we’ve already seen.
Known Items
A-Z index
navigation
Search
Quick links
Exploratory
Navigation
Search
Related
information
Unknown
Simple Customer
language communication
Re-finding
Items you’ve
viewed
Start by Organizing Content Into Pages
“This is a great idea!

But how do we apply it
to our site?”
First, We Need to Identify Our Content
Support Organic Peer Reviews
My Reviewed
FAQ Inorganic
Reports
Bio Submit for

Contact
Review
Homepage Polymer Social Feed
Articles Dashboard Direct Messaging

We Can Group Pages Into Relatable Piles
Contact Homepage Bio r R e v i ew s

Pee Social Feed
FAQ Organic w e d
Submit for e v i e
My R
a n ic Review R e p o r ts
Support Artic In o rg
les d
o a r
Da shb
Polymer Direct Messaging
Run this test with five to eight users, and then look
for correlating patterns.
Then, We Can Organize and Label the Piles
Support Pages Homepage Article Pages Dashboard Pages
Support Homepage Articles Dashboard
FAQ Organic Social Feed Peer Reviews
My Reviewed
Contact Inorganic Direct Messaging
Reports
Submit for
Bio
Review
Polymer
These Are the Top-level Pages
Contact My Reviewed
Inorganic Direct Messaging
Reports
Bio Submit for

Review
Polymer
We Can Start Our Sitemap Here
Homepage
Support Articles Dashboard

This Will Be Our Persistent Navigation
Persistent
Page header navigation
Link to the
homepage
Organizing Sub-content
Sub-content Below Here

My Reviewed
Reports
Submit for
Bio
Review
Polymer
Creating Our Sitemap
Homepage
FAQ Organic Peer Reviews Social Feed
My Reviewed
Reports
Bio Submit for

Review
Polymer
Organizing It on a Page “So, how do we add the
secondary pages to
Homepage the site?”
My Reviewed
Reports
Bio Submit for

Review
Polymer
Localized Navigation
Articles Dashboard Support
All Stories
Organic
Inorganic Polymer
Sidebar
Bio
navigation Polymer
Polymer Is Great!
Polymer is great, and here’s an article on why.
Read More
Synthetic Macromolecules
Macromolecules are really cool! Find out why.
Read More
Polymer in Biochemistry
Polymers in biochemistry — say whaaaaa.
Read More
Help Users Understand Where They Are
All Stories Polymer Is Great!

Organic
Polymer is great, and here’s an article on why. Persistent
Read More
Inorganic navigation
Bio Synthetic Macromolecules
active state
Polymer Read More
Sidebar Polymer in Biochemistry

navigation Read More
active state
You Can Follow This Down the Sitemap
Homepage
Support Articles Dashboard All Stories Polymer Is Great!

Polymer is great, and here’s an article on why.
Organic Read More
Inorganic
Bio Synthetic Macromolecules
My Reviewed Macromolecules are really cool! Find out why.
Contact Inorganic Direct Message
Reports Polymer Read More
Submit for
Bio
Review Polymer in Biochemistry
Polymer Read More

Content Associated With Articles
Content
All Stories
that will be
Organic
on all pages Polymer
Inorganic
Bio
Polymer Is Great!
Polymer Polymer is great, and here’s an article on why.
Read More
Content Synthetic Macromolecules Content

specific to Macromolecules are really cool! Find out why.
Read More specific to
all article polymer
pages Polymers in biochemistry — say whaaaaa. pages
Read More
Using Page Titles on Websites
All Stories
Organic
Polymer
Inorganic
Bio Page title
Polymer Is Great!
Read More
Read More
Read More
Content Associated With Polymer
All Stories
Organic
Polymer
Inorganic
Bio
Polymer Is Great!
Read More
Read More
Read More
Our Website’s Visual Hierarchy
Persistent
All Stories
navigation
Organic
Inorganic
Polymer
Bio
Sidebar Polymer Polymer Is Great! Page title
navigation Polymer is great, and here’s an article on why.
Read More
“I feel like Synthetic Macromolecules

I see this Read More
pattern all
the time.” Polymer in Biochemistry Article feed
Read More
A Real-world Hierarchy Example
Persistent
navigation
Sidebar Page title

navigation
Page
content
The Benefits of Information Architecture
• Helps us organize our pages and create our navigation
• Helps users understand where they are and where to go
Level 2
Section Two: Navigation
Common Conventions in Navigation
“How can we
improve the
navigation?”
Site ID
Site ID
Top nav
Utility
nav
Site ID
Top nav
Utility
Search
nav
Site ID
Top nav
Descriptor Navigation
Descriptor navigation
enables users to quickly
start interacting with the
content that interests them.
Descriptor
navigation
Smashing Magazine separates
their content into topics of
interest, like coding, design,
Descriptor
mobile, and graphics. navigation
“Oh, or how Spotify has

categories, like rock,
rap, or country.”
Descriptor
navigation
Task-based Verb Navigation
Verb-based
navigation
This is a good choice for the

dashboard because there are
a lot of actionable links here.
Task-based Verb Navigation
Verb-based
navigation
User-based Navigation
This helps users find
content based on
their needs.
User-based
navigation
User-based Navigation Example
User-based
navigation
Search vs. Persistent Navigation
Search vs. Persistent Navigation
Making It Easier to Find Articles
“With all this new

content, how can we
help users find it?”
Google Pageview Percentages
According to Jakob Nielson

Second page
“Viewing frequency drops
42%
off rapidly after the first
page. More than half of all
58%
users [don’t] scroll at all, so
only 42% of users will see
any information on the
second screenful.”
First page
Reordering Content With Sorting
Sorting takes a
set of data and
sorts it by a
Sorting chosen metric.
Reducing Content With Filters
While sorting will give you
the option of choosing
which metric you want to
prioritize, filtering actually
reduces the amount of
content being displayed.
Filters
The Power of Tagging Filtering
Custom
search tags
When users can tag their own

content with relevant keywords,
it makes it easier for them to
search and find content based
on specific keywords.
Meta Tagging in the Wild
Meta tags
Pagination
Pagination is a universal option

that allows users to access a big
list of data.
Pagination
Pagination in the Wild
Pagination
Tab Navigation
Tabs are see-evident, hard to
miss, and help clean up the
interface.
Tab navigation
Navigation Summary
• Top navigation standards help users find what they’re looking for.
• Descriptor navigation helps with page discovery.
• Use verbs in navigation for actionable links.
• Navigation links and search are equally important.
• Sorting and filtering help connect users to content (on the first page).
• Tabs can help clean up the page.
Level 3
Section One: Forms
People Need a Peer Review Form
Adding Labels and Placeholders to Inputs
The first thing we need to do is Home Dashboard Support
decide what to put in the form.
Let’s add all the content we
think we will need to the form.
I Need A Peer Review
First Name First Name Here
Last Name Last Name Here
Study Title Add the title of your study here
Number of People Needed How many people do you need to review this study?
Date Needed By When does the review need to be completed?
Type of Study What kind of study is this?
Your Location Where are you located?
SUBMIT
Our Peer Review Form
The zig-zag pattern of this form makes it
difficult to read.
“Now that we have our

shiny new form on
the site, no one’s
really interacting
with it.”
Our Improved Peer Review Form
When the labels are stacked above the input

fields and everything is left aligned, the user can
easily read down the form like a list.
“Oh, this is
much better!”
Only Ask for Necessary Information
You might want to get as much information
We already have
as possible — but if no one fills it out, the their name from
form becomes ineffective. the signup form!
Try to only ask for necessary information

that’s relevant to the needs of the end user.
Unnecessary
Information
Only Ask for Necessary Information
Now that we’ve simplified the form, it’s
much more attractive to fill out.
Using Optional Fields in Forms
Making fields required generally results in
users skipping optional fields.
Making fields optional is more likely to result

in users filling out the form completely.
Better for user engagement

Error Handling on Required Fields
Error handling should be clear and
helpful, never blaming the user.
Try to understand the error and

give contextual feedback.
Explicit Choice
Confusing information
Explicit Choice
Research has shown that when a
default choice is offered, most
people do not deviate from it.
Explicit choice
What to Consider When Creating Buttons
Large and
Younger and older users generally don’t have the motor skills to target easy to click
the mouse well, so buttons should be large and easy to click.
Large and
easy to click
Not as easy
Creating Clear Button Labels
Clear, actionable text
Try to avoid using confusing or cutesy terms. Links should be clear, and users should
understand what will happen after they click the link.
’
What to Consider When Creating Links
Clearly a
Always make sure you use the hand cursor when the user hovers over a link.
link
If you have this issue, you can use this CSS property.
.class { cursor: pointer; }

Confirmation Messaging
You should never use a confirmation message when
you can easily give the user the option to undo.
It’s best to use a confirmation message when the

user is doing something irreversible.
Skype’s “Mute Conversation” Feature
Skype users must confirm they
want to mute a conversation,
which helps prevent user error.
Apple’s “Delete Older Messages” Feature
This is to ensure users
don’t accidentally delete
important information.
Confirmation of Payment for Peer Reviews
“This can prevent user

confusion and dealing
with accidental
checkouts and refunds.”
Celebrating User Engagement With Mini Wins
Mini wins like this can
help user engagement.
Accessibility on Our Web Forms
Keep these rules in mind when creating accessible forms.
• Never put text in an image. Screen-readers should be able to tell the user everything.
• Avoid low-contrast text on input fields.
• Make sure all fields are laid out in a logical order.
Accessibility on Our Web Forms
WAVE
wave.webaim.org/
Color Contrast Analyzer Tool
The Color Contrast Analyzer is a
Chrome extension that can be
downloaded for free from the
Chrome web store.
Good contrast
Level 3
Section Two: Homepage Design
What the Homepage Should Answer
A visitor must be able to quickly

answer these questions:
• What is this?
• What do they have here?
• What can I do here?
• Why should I be here?
• Where do I start?
Search Should Always Be Prominently Featured
Custom search
Creating Our Two Search Options
Standard search
Search by category
Taglines Explain the Service or Product
This is the tagline for Sketch 3
The purpose of a tagline is
to explain the service or
product that’s being offered.
Mottos Explain a Company’s Ethics
Mottos are typically associated with This is a motto
bigger brands and are more a
statement of company ethics than an
explanation of products and services.
Welcome Statements
Welcome statements are a complete, concise
explanation of the product or service that
Welcome statement Tagline
ensure the user is in the right place and
should continue exploring.
Creating Our Tagline and Welcome Statement
Tagline
Welcome statement
Prominently Displaying Signup and Sign-in
Clear sign up and sign-in

Users Should Have Multiple Ways to Sign Up
Sign up or Why you

sign in should sign up
Sign up with Simple email

social links signup
Time-sensitive Content Is Important to Users
Time-sensitive content
is important to users
Relevant content
to confirm the site is
active and content is
updated frequently.
Up-to-date content
A “Top Stories” Section to Show Content Is Trending
Relevant content
Up-to-date content
We Need a Way For Users to Discover New Content
Newsletter signups
Adding a Newsletter Signup to Our Page
Newsletter signups
with a clear explanation of what you get when signing up!
Our Final Homepage
“The big bang theory of

web design is the idea
that the first few
seconds you spend on
the website are critical.”
Steve Krug
Level 3
Section Three: Pricing Pages
Improving Our Pricing Page
Pricing Pages Should Influence User Decisions
Once people are interested
and engaged, we need to
present a clear, convincing
argument that nudges them
to take action.
Provide Clear, Straightforward Content
Offer content that answers
a person’s questions and
helps them make an
informed choice.
Here’s the cost
Here’s what you get

Offer Recommendations
People will be more compelled to do
something when provided clear next steps
or options. Users value suggestions.
Recommended option
Next step
Describe the Benefits
People want to know what’s in it for them.
This might include extrinsic rewards like
money, rebates, or lifestyle benefits.
We will help you get published.

Appealing to Intrinsic Motivations
Intrinsic motivations
Reframe the Message
Anchor people toward a
specific choice,
persuade them through
scarcity, or use social
motivators, such as
social comparison or
social proof.
Testimonials are
great for this!
How Indiegogo Influences Decisions
Donation recommendations
are reinforced with
behavioral science
techniques, like social proof
(how many people have
pledged) and scarcity
(limited time).
Social proof
Scarcity
Pricing Pages Should Facilitate Action
After a person has made the
decision to act, the next step is
to help them follow through,
making the action as easy and
barrier-free as possible.
Our next step is to start

the signup process.
Guiding the Experience
Shape the experience in a way that
facilitates action. Common
techniques include walkthroughs,
callouts, or pre-determined
defaults.
Breaking up the setup

process into small chunks
makes it more approachable
and more likely that users
will complete the process.
Trigger Action at the Right Moment
Timing is critical — make sure you
trigger a person to take action
during the times they are most
motivated and able to take action.
When the user is inclined to

write an article on the site…
…a modal pops up
encouraging them to create
an account.
Important Things to Keep in Mind
The Paradox of Choice
Progressive Disclosure
“This will ensure people

aren’t overwhelmed with
options and we present
the right info at the
right time.”
The Paradox of Choice
The more options you offer
someone, the harder it is to choose.
This is called the Paradox of Choice.
“Users have time to

read at most 28% of
the words during an
average visit; 20% is
more likely.”
Jakob Nielsen
You’re giving the user

too many choices.
Progressive Disclosure
Progressive disclosure means you
reduce page details to a minimum and
only allow access to basic information
that enables the client to quickly and
easily achieve their objective.
Pricing details
Is this info necessary?

What You See Is All There Is
Most people will only consider the
choices they are offered.
All choices should take the user closer

to their goal and ours.
Clean, clear, and simple

Level 4
Section One: Mobile Best Practices
Improving the Mobile Experience
Walter Whalen June Leigh

Goals Goals
• Share his knowledge Read articles from phone
•
Users need a great
• Can I read on my iPad? • Write articles from phone
mobile experience.
• Be alerted on new articles
Web Pages Should Be Responsive
A responsive web page can reshape to any device.
Journey Into Mobile
Suggested Course
Learn the basics of

responsive web design.
Keep Your Designs Consistent Across Platforms
It’s important to ensure the mobile app

experience is similar to the web app.
Continuous Content From Any Device
When we read an article on

the mobile app, it appears as
read on the web app.
It’s Important to Understand the User’s Goals
Think about context — make sure you design

for the user’s context, not the device.
Who + What + When + Where = Context

Utilizing Hardware to Create a Better Experience
One thing we can do to improve the mobile experience is
give users access to the device’s hardware.
Three Globally Recognized Logos
Home Icon Search Icon Print Icon

Benefits of Good Icons
44px
44px
Easy for users to touch Fast to recognize at a glance

What to Keep in Mind When Creating Icons
Avoid too much detail Keep it clear and simple

Blinkist’s Use of Minimalist Icons
Blinkist uses clean, simple icons with

labels to help users quickly learn and
understand the app.
External Triggers Should Engage Users
One example of an external
trigger is using social buttons
on articles so users can tweet
about what they’re reading.
These cues exist in the

user’s environment and
provide information on what
to do next.
Using Internal Triggers to Engage Users’ Emotions
For instance, if your friend

tweets about reading an
awesome article on inks
being used to create circuits.
Successful Products Trigger Emotions
Runkeeper Twitter Google

Good Notifications Inspire Action
Good triggers prompt action, while vague
or irrelevant messages annoy users.
When a user we follow posts a new

article, we get a push notification
from our mobile app that we can tap
to go read the article.
Good Notifications Create Intrigue
Intrigue can be created by notifying users of

the most commented article of the week.
This will most likely tempt users to

engage because they will want to know
what everyone is talking about. It plays
into our innate sense of curiosity.
Make Signup as Simple and Easy as Possible
ChemCraft Login Screen Emailed Login Link Logged in to App
Help Users Onboard With a Short Tutorial
Launch a self-paced tutorial of the primary
actions a user needs to understand in order
to become familiar with the app.
Make sure you are only

showing the most important
actions they will need to
perform right away.
Use Bold Buttons to Guide Users
Each view should have one clear

primary action the user needs to take.
Use a big, bold button to guide

people through the app.
Guide Users Every Step of the Way
Once the user is in the app, we show
a list of the top thought leaders for
the user to start following.
This will help personalize the

content to users’ interests.
Always Follow a User-centered Design Approach
User-centered design is a process in

which the needs, wants, and limitations
of a user are given extensive attention
at each stage of the design process.
June Leigh
Intern at DuPont
a le n
h no kidschn lo gy
l t er W
Single, o
t Te
Wa e r a t Wya t
t . Manag s
Dep k i d
d w i th 2
Ma rrie

CodeSchool The Elements of Web Design All Levels

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CodeSchool The Elements of Web Design All Levels

Încărcat de

Drepturi de autor:

Formate disponibile

Course Overview

What we will learn

• Persona Creation • Form Design

• User Testing • Homepage Best Practices

• Site Organization • Pricing Page Design

• Sketching and Wireframing • Mobile Design Best Practices

Learn the basics of:

User Experience User Interface Design

• Users can easily ﬁnd and read articles

Our Users • How much work experience do they have?

We need a way to organize

Pull Quote Fictitious Name

Goals Concerns Concerns

These personas will

• They help you empathize with the user.

• They focus decision-making and personalize the users.

• They create a shared understanding of the users.

User-centered design is a process in

“It looks like

And June wants to read

Keywords associated with my search

Wireframes are good

OmniGraﬄe Sketch Balsamiq

What? Now I know

Three Simple Questions

• “I prefer the two-column layout — it’s easy to read.”

• “I like the categories in the right column but would

rather have sorting up top and search in the right.”

• “I don’t like the tiles — they’re confusing.”

• “I’d rather the avatar be below the article. I’m more

interested in the content, not who wrote it.”

Initial designs Live code

Hekkejima Centre-Kita Azamino

Color-coded train lines

Primary Iconography Secondary

“This is a great idea!

Support Organic Peer Reviews

Bio Submit for

Homepage Polymer Social Feed

Articles Dashboard Direct Messaging

Contact Homepage Bio r R e v i ew s

Support Homepage Articles Dashboard

FAQ Organic Social Feed Peer Reviews

Support Homepage Articles Dashboard

FAQ Organic Social Feed Peer Reviews

Bio Submit for

Support Articles Dashboard

Sub-content Below Here

Support Articles Dashboard

FAQ Organic Peer Reviews Social Feed

Bio Submit for

Support Articles Dashboard

FAQ Organic Peer Reviews Social Feed

Bio Submit for

All Stories Polymer Is Great!

Sidebar Polymer in Biochemistry

navigation Read More

Support Articles Dashboard All Stories Polymer Is Great!

Polymer Read More

Content Synthetic Macromolecules Content

“I feel like Synthetic Macromolecules

Sidebar Page title

“Oh, or how Spotify has

• “I like the categories in the right column but would 

• “I’d rather the avatar be below the article. I’m more 