5. Web Design

Welcome to Design

Design Principles

Law of Proximity

Law of Enclosure

Law of Similarity

Color

“Color is a powerful form of communication. We are so attracted to color and so repelled by it that even if the coolest design were presented to us, if we didn’t like the color, we wouldn’t like it at all.” - Joanne Chang, from Hack Design’s “Building Color Confidence”

Emotions

Contrast

Combinations

There are many ways we can choose to select colors. Let's explore some color combinations through a color wheel! Go to the Canva Color Wheel to learn about key color pairings.

 

• Complementary Colors: Two colors that sit directly across from each other on the color wheel. They complement each other and often have the most contrast, but that doesn't always mean they make for the nicest pairings

• Split Complementary Colors: Starts with one color and then instead of going straight across the color wheel to the complimentary color, go to either the left or right a couple of colors. This softens the contrast and often gives a nicer, more visually appealing pairing.

• Analogous Colors: Groups of colors that are close to each other on the color wheel. They have enough contrast to be clearly distinguishable from one another, but because they are very similar they form a harmonious group

Designing With Accessibility Top of Mind

“You are not your user”

“A beautiful website that functions poorly for users with disabilities is like a beautiful skyscraper with only staircases connecting its floors.”

Colors

Text Size

Ensure that your text is legible for those that have low vision and struggle to read small text. The standard text size for website design is 16px for body text.

Links

Links should be identifiable by underlining and making it a different color from the rest of the body of text. The standard color for links is typically blue because of its visibility on both white and black backgrounds. They should also take form of meaningful text, not URLs .

Wayfinding and Intuitive Design

Think about the order in which you want users to interact with each element of your website design. Using visual hierarchy, lay out the elements in a way that guides the user's attention naturally, starting with the most important content and progressing to secondary and supporting information.

Inclusive Design

Solving for One Can Extend to Many

• Closed captions were created for the deaf and hard of hearing community, but now plenty of people use them to watch videos in a noisy cafeteria, a quiet library, or when they just forgot their headphones.

• High-contrast screen settings were designed for people with vision impairments, but anyone who's tried to read their phone screen in bright sunlight has been grateful for them too.

• The same goes for remote controls, automatic door openers, audiobooks, and more. They were all designed with a specific need in mind, but benefited a much wider audience!

Mobile-First Design

• What actually matters here?

• What content does a user need to see first?

• What can be simplified?

• A mobile app is something you download from the App Store or Google Play, like Instagram, Spotify, or your school's student portal app.

• A mobile-first website is still a website that lives in a browser, just one that's been intentionally designed to look and work great on a phone.

See It For Yourself: DevTools

Key Design Considerations

Simplified Navigation

On a phone, users are often navigating with one thumb while doing something else entirely. Designers often use familiar patterns like a hamburger menu (those three stacked lines that reveal a nav menu when tapped) or a bottom navigation bar so users don't have to stretch to the top of the screen.

/* Navigation styles for mobile first */
nav {
  font-size: 1rem;
  padding: 8px;
}

/* Adjust for larger screens */
@media (min-width: 768px) {
  nav {
    font-size: 1.25rem;
    padding: 16px;
  }
}

CSS tip: In mobile-first CSS, you write your base styles for the smallest screen first, then use a media query to adjust those styles for larger screens. Think of it like saying “start here by default, but if the screen is bigger than 768px, switch to this instead.” You'll be using media queries a lot as you start building more complex layouts!

Touch-Friendly Elements

On mobile, users are tapping with their fingers, not a mouse! That means buttons and interactive elements need to be large enough to tap comfortably without accidentally hitting something nearby.

CSS tip: Use padding to increase the tappable area of a button without necessarily making the text itself bigger. A good rule of thumb (pun-intended) is that tap targets should be at least 48x48 pixels.

Scalable Typography

Text that looks great on a laptop can become tiny and hard to read on a phone and text that fills a phone screen nicely might look overwhelming on a desktop. Using relative units like rem instead of fixed px values makes your text more flexible and accessible.

CSS tip: rem stands for "root em" and it's a unit of measurement in CSS that's relative to the font size set at the root of the page (typically 16px by default). So instead of setting a fixed size like 16px that never changes, using 1rem means the size will adjust based on the user's browser settings.

Wireframing

 

• Which design principles are you using to make the page clear and easy to navigate?

• What does the mobile version look like first? How does it change on a larger screen?

• What color palette will you use? Write down your hex codes so you don't forget!

• Get feedback from someone who wasn't involved in your design process for their opinion!

For a summary of this lesson, check out the 5. Web Design One-Pager!