Scribd
Upload
333 views57 pages

Web UI Design

This document provides an overview of key concepts in user interface (UI) and user experience (UX) design. It defines UI as the design of the interface between the user and a product, while UX refers to the overall experience of using the product. The document discusses usability principles like learnability, efficiency, and error tolerance. It then provides a quick introduction to graphic and web design concepts like layouts using grids and whitespace, using a limited color palette including flat and material design colors, choosing appropriate fonts, and current design trends like flat and material design, parallax scrolling, and micro-animations.

Uploaded by

Umor Shofi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
333 views57 pages

Web UI Design

This document provides an overview of key concepts in user interface (UI) and user experience (UX) design. It defines UI as the design of the interface between the user and a product, while UX refers to the overall experience of using the product. The document discusses usability principles like learnability, efficiency, and error tolerance. It then provides a quick introduction to graphic and web design concepts like layouts using grids and whitespace, using a limited color palette including flat and material design colors, choosing appropriate fonts, and current design trends like flat and material design, parallax scrolling, and micro-animations.

Uploaded by

Umor Shofi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 57

6.

148
Web Design & UI/UX

Yolanda Zhou
go.6148.io/uiux
UI & UX
User Interface: the design of the interface between the
user and the product

User Experience: the user's overall experience of using the


product
UI UX
UI & UX
User Experience (UX) User Interface (UI)

research layout
usability testing visual design
sketches branding
wireframes HTML/CSS
UI UX
Usability
it’s really important
If your users see...

THEY LEAVE
Ok… so what
should I do then?
elements of good usability
Learnability
Ability of an interface to allow users to
accomplish tasks on the first try
What do I do?
Did I do it right?
Is this what I think it should be?
Efficiency
The speed at which tasks can be
completed once learned
The faster the better
Employment
Jobs
Opportunities

The less words the better


Is that the
Hmm. Pretty
navigation? Or
busy. Where
is that it over
should I start?
there?

Hmm. Why did Why did they


they call it put that there?
that?

Those two links


Can I click on seem like they’re
that? the same thing.
Are they really?

The less thinking the better


The less thinking the better
Error Tolerance
How well the product prevents errors and
can help the user recover from mistakes
Make sure users know about bad things
Prevent errors before they happen
Make recovery easy
Good design conveys

emotion
Let’s Actually
Design
a quick intro to graphic/web design
Layouts
Follow standard layouts
Layouts
Follow standard layouts

Use grids
Layouts
Follow standard layouts

Use grids

More whitespace
Layouts
Follow standard layouts

Use grids

More whitespace

Design responsively
Colors
Colors
Colors represent emotions
Colors
Colors represent emotions

Use web friendly colors


Colors
Colors represent emotions

Use web friendly colors

Flat UI Colors
Colors
Colors represent emotions

Use web friendly colors

Material UI Colors
Colors
Colors represent emotions

Use web friendly colors

Generally don’t use more than 3 colors (besides black and


white)
Colors
Colors represent emotions

Use web friendly colors

Generally don’t use more than 3 colors (besides black and


white)

Tools:
Adobe Color CC
Paletton
Coolors
Colors
Colors represent emotions

Use web friendly colors

Generally don’t use more than 3 colors

Don’t use red and green for contrast


Fonts
Fonts also represent emotions
Fonts
Fonts also represent emotions

Serif: good for long text or traditional look


Times New Roman, Garamond, Georgia

San-serif: good for a more modern look


Arial, Helvetica, Trebuchet MS, Verdana, Calibri

Script/Decorative: use sparingly and only for titles


Dancing Script, Lobster, Amatic SC, Permanent Marker
Fonts
Fonts also represent emotions

Don’t use more than 2 or 3 fonts in total


Fonts
Fonts also represent emotions

Don’t use more than 2 or 3 fonts in total

Before changing font, consider changing:

● Font weight
● Font size
● Color
● Capitalization (all caps, small caps)
● Letter spacing
Actually Doing Things
Try things

Copy elements on websites you like

Ask Friends
Current Trends
Current Trends
Flat UI & Material Design
Current Trends
Flat UI & Material Design

Parallax Scrolling
Current Trends
Flat UI & Material Design

Parallax Scrolling
Current Trends
Flat UI & Material Design

Parallax Scrolling

Micro-animations
Up Next...
Complete Environment Setup

You might also like