Web Design Principles#
Intro#
Goals#
Give you a foundation for understanding design
Principles to help you design your projects and portfolios!
Agenda#
Background on UX (user experience) and usability
Interaction design principles
Visual design principles
UX (User Experience)#
What is UX?#
UX or UX design is creating intuitive, user-friendly interfaces.
The idea: by understanding users’ behaviors, motivations, and pain points through research and analysis, we can create products that are usable.
What is usability?#
Software is usable when
It’s designed with the user’s needs and preferences at the center
Users can do what they want, the way they expect to be able to do it
They can achieve goals with minimal effort and frustration
In large part, what makes something usable is the absence of frustration in using it.
Key components of UX#
UX is a multidisciplinary field that includes:
|
|
Interaction Design#
What is interaction design?#
How users interact with buttons, menus, and other interactive elements.
You have a lot of control over this as a web developer!
Principles of interaction design#
- Consistency
Maintain consistency in design elements, interactions, terminology.
- Visibility
Important functions are clearly visible and easily discoverable.
- Affordance
Users should know how something works just by looking at it.
- Predictable
Minimize the likelihood of errors and prevent users from taking unintended actions or making mistakes.
- Feedback
Provide immediate and informative feedback when users perform actions.
Consistency#
Interfaces that are consistent are predictable and easier to learn.
Traffic lights—red always means “stop”, green always means “go”
In web design: items that have similar behavior should have similar appearance.
Visibility#
Important or commonly-used actions should be easy to find.
Users can’t use a feature if they don’t know it exists.
Dan Abramov is the co-author of Redux and works at Meta on the ReactJS team.
Affordance#
Users should know how something works just by looking at it.
We make assumptions about how things work based on our previous experiences.
Predictable#
Set accurate expectations before an interaction:
What to do
What will happen next
How the interface will respond
Which do you prefer?
Feedback#
Communicates to user that something happened
Loading spinners
Changing colors on hover/on click
Toasts/notifications
Visual Design#
What is visual design?#
Using visual elements, branding, and aesthetics to create an appealing interface.
You might have control over this as a web developer
(unless you’re working with designers)
Four principles of visual design#
- Contrast
Making elements stand out from one another
- Repetition
Establishes consistency, helps users understand organization and structure of content. Reinforces branding.
- Alignment
Connect related elements and aids in scanning and understanding content.
- Proximity
Group related elements together and separate unrelated ones to reduce clutter.
Contrast#
If you need something to stand out, use contrast.
Can create more interest—as long as it’s not overbearing!
Can be established using size, color, shape, type, etc.
Repetition#
Repeating elements throughout the entire design
Helps clarify and unify
Having obvious repetition allows us to break it to add visual weight or emphasis
Establishes continuity
Makes things look like they belong together
Writing reusable components makes repetition easy!
Alignment#
Every element in the design should have a visual connection to something else.
Good alignment creates unity and unity is very important in visual design.
Avoid using more than one text alignment on the same design
Ex.: left justified text in one paragraph and centered text for headlines
Proximity#
Proximity is how close or far apart things are from one another.
Items placed close together indicate a group or association and vice versa.
The basic function of proximity is to organize information.
Information organization leads to better understanding and retention.
Tips and Tricks#
Grids#
Grids bring order to the information and content presented
Columns give proportion to the design
Ex.: main content and side navigation
We generally align all elements on the page to the columns
Space#
Designs need negative (empty) space—don’t fill up the whole page
In grids, gutters are the negative space surrounding columns
They should remain constant in size regardless of the width of the columns.
Put space between items to separate them/make them less proximal
Conversely, don’t leave so much space that it feels empty.
Color palettes#
Having a color palette for your app ensures consistency.
For a good overview: Website Color Schemes
Adobe Color helps you find good color combinations
Choose a base color
Find secondary colors using different color theory methods
Coolors is simpler and will make choices for you
Contrast Checker checks to make sure text size and contrast is readable for people with visual impairments and color blindness.
Typography#
Changing fonts is an easy way to make your site feel custom and different.
Google Fonts is a resource of license-free and easy to use fonts.
Type We Like curates good Google Font pairings.
In CSS, give a list of font families:
body {
font-family: 'Source Sans 3', system-ui, sans-serif;
}
Your browser will use the first one it can find (known as a fallback font)
Good practice to use a system font stack for your fallback fonts
Modern Font Stacks is a resource for system font stacks organized by different typefaces