Design

Intro

Overview

Design Thinking
Basic Design Principles
Core Principles in Visual and Interactive Design
Design Ideas, Photos, and Typography
Prototyping

Design Thinking

Is the site usable for users? Do they have a good experience?
Does the site make users think it’s trustworthy?
Is it attractive?

Basic Design Principles

User Experience

User experience is how a person feels while interacting with a product or interface.

The goal is to help users interact with a product that is useful and easy to use resulting in a positive and meaningful experience.

Usability

In large part, what makes something usable is the absence of frustration in using it.

—Dana Chisnell

Communicate what users should do now
- If there’s a most-popular option, draw attention to it
  - This could be color, size, placement, etc.
Provide feedback to reward success
- “You’ve completed 2 of 3 steps”
- Progress Bars
Hide non-critical options unless needed
- Can hide options behind modals, dropdowns, mouseovers, etc.
Interactivity should be self-evident
- Example: Is it obvious that clicking a header sorts the table?
  - Would help text/small arrows make this more clear?

Trust / Credibility

Quiet, consistent design promotes a sense of trust.

Which of these would you trust?

This art school or art school #2?
This author site or author site #2?
This e-commerce site or e-commerce site #2?

Aesthetic Delight

Beautiful apps inspire exploration and use.

When in doubt, consistency & plenty of whitespace are good goals.

Design Misconceptions

It’s just a step in the process
- Reality: It’s not just one part, it’s woven throughout.
It’s easy
- Reality: Designers make things seem easy because they make things make sense.
It’s the role of one person/department
- Reality: While there might be individual designers or a team of them, they work with other teams to help them implement design into what they’re working on.
It’s a choice
- Reality:
  
  The biggest misconception is that [companies] have a choice to invest in their user’s experience. To survive, they don’t.
  
  —Josh Porter

Core Principles

Principles of Interaction Design

Consistent: Good designs are consistent. We want users to be comfortable using our websites, and consistency helps with that.
Visible: Good designs are visible — users need to be able to see what they can do in an app. They should be able to infer that an opportunity for interaction exists. Don’t make them guess/search for it.
Learnable: Good designs are learnable. Users should be able to quickly pick up and use features.
Predictable: Good designs are predictable. These principles are intertwined with each other. The more consistent a design, the more predictable it is, which then makes it easier to learn.
Feedback: Good designs provide feedback. Have you ever been on a website, clicked on a button, and expected something to happen but nothing did?

Principles of Visual Design

Visual design is all about what our websites look like — what our users are actually seeing on the screen.

Contrast: Contrast creates more interest and can be used to establish hierarchy of info

Can add contrast with color, size, shape, type, etc.
Repetition: Helps to make things look like they belong together

Example: repeating colors or line weights
Alignment: Every element in a design should have a visual connection to something else in the design

Avoid using more than one text alignment in the same design
Proximity: Place related items together, unrelated items far apart

Example: navigation bars

Design Ideas

Grids and Spacing

Grids and spacing bring together parts of both alignment and proximity. Grids bring order to the information and content presented, and provide visual anchors to elements in the design. The columns are generally what are used to align the main parts of a design (like main content and side navigation). They’re what make up the proportions of the website.

In a grid, we call the negative space around columns gutters. The gutters should always remain the same size even if the size of the columns changes. That negative space is also sometimes called whitespace. Whitespace is very important in design because it helps things from becoming too cluttered. It also helps differentiate between sections of the website.

Color Harmony

Color harmony is when the arrangement of colors used are pleasing to the eye. Color harmony delivers a sense of balance and order. If colors are out of harmony, the design can become too bland or too obnoxious.

Color Palette

Having a “color palette” for your site helps.

It guides selection of photos and colors, and ensures consistency.

Photos

A strong photo is a great way to add visual interest to your homepage.

Finding Photos

Unsplash — High quality, huge variety, curated collections
Coverr — HTML5 Videos for full-width landing pages
Pixabay — Wide variety
Splitshire — More concept art, high quality
Pexels — Good quality, more people pictures
Flickr Creative Commons — Huge variety, widely varying quality

Warning: this can be a huge time sink!

Typography

Typography helps with visual hierarchy. It also provides visual interest and helps make a website look more intentional than if you use the defaults.

Sans-serif and serif fonts are best for web design (sometimes monospace) because they are the most accessible. It’s usually a good idea to stay away from overusing cursive or fantasy fonts.

Guideline

Use no more than two font families

One for headlines / large, special text
One for normal text

Go Big

This is a simple rule that tends to override other rules, guides and principles. It is what it sounds like: make something big to draw attention to it. Readers notice and read big things first.

Prototyping

What is it?

“A prototype is a draft version of a product that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development.”

– usability.gov

Something that is interactive with limited functionality to test an idea.
Can be low-fidelity: paper, wireframes
Can be high-fidelity: feels like a real app, but isn’t
- Can click through

Why?

It is much cheaper and cost effective to build a limited functioning product/software and see if it works/has a market before investing a lot of money on resources and development.

Test out usability
Ensure your product is right so you don’t have to make big changes post-launch

Paper Prototyping

Low-cost effective way to discover ideas
Communicate ideas visually
Sketching does not have to be “art”
- Doesn’t have to be visually pleasing, necessarily
- Needs to communicate an idea

Example

Source

Sketches

Needs to happen quickly and on demand
Cheap enough to be disposable
Communicate in a medium/material that gives it a sense that it is rough
Visual vocabulary needs to be understood by all viewers (lines, arrows, boxes)

Low-Fi & High-Fi Prototypes

Low-Fi and High-Fi prototypes are not sketches
They’re created using prototyping software
They look like real app pages

Low-Fi

Some placeholder images or placeholder text
High level design is in place
Gives a general feel of the experience

High-Fi

Looks exactly as the app would look if it were built
Not a functioning app, but it could fool you

Low-Fi vs. High-Fi