Web Fundamentals

Taught by Alexandra Ackerman
Code and assignments available at https://github.com/newschool-webfundamentals
Presentations available at newschool-webfundamentals.github.io

Agenda

  • Typography
  • Layout
  • Color
  • Usability
  • Midterm Lab

Web design for non-designers

Design is about giving form to content, not the other way around.

The design's task is to interpret and communicate the content. It must reflect the spirit of that content.

Design: you must answer these questions before you start designing.

  • Audience: Age? Location? Socioeconomic status?
  • Tone: Formal? Casual? Friendly?
  • Purpose: Informational? Selling something?
  • Audience: US citizens, educated, mostly liberal
  • Tone: Formal
  • Purpose: Informational

This article is about the flood in Houston. It makes the map of Houston it's focal point.

Typography, Layout & Color

Typography

Websites are read verbally and visually.

First we scan the overall mood, then read the text.

Two types of fonts

Try one of each

Fonts have moods

You'll notice, serifs are used for formal content. News, legal, academics.

Sans-serif can be less formal. Used in science, archetecture, technology.

NYTimes - Serif

TechCrunch - Sans-serif

Try one of each. Use contrast.

Be consistent

Don't mix and match too much. Build your brand through consistency.

Don't use script font for readability

comic sans is a script font btw

Layout

All about visual hierarchy

We read left to right, top to bottom.

Logos in top left. Navbars on the top or side (rarely side).

Show important things the biggest, toward the top left.

Use grid based layouts.

Important content big and left, secondary on the right

Color

Black (dark grey) + White + One other color

Even articles can have an accent of color.

Usability

The utility, not the visual design.

Don't make me think

Websites must communicate purpose, immediately.

  • Who am I?
  • What do I do?
  • What can I do here?
  • Who am I? Travelocity
  • What do I do? Travel booking
  • What can I do here? Book travel

Now we'll go over midterm requirements and have lab