Current Goal: Making Websites

Fundamentals of Visual Design

What it is

Knowledge of HTML and CSS in isolation is not enough to make good websites. To make websites that are easy to use and look good, you'll have to learn a little web design.

Where do you begin? In the last lesson, you learned about user experience design, which guides the process of structuring a site by thinking about how the user will flow through it.

With this structure in place, the next step in building a site is to figure out what it'll look like. In other words, to create its visual design.

Why it matters

In the last lesson, I persuaded you that a developer should strive to make great products, not just write good code. The UX design process teaches us to empathize with our user, and visual design is an important piece of this puzzle.

Visual design is about more than aesthetics. Seeing beautiful website can be a pleasant experience, but more importantly, good visual design makes a site usable. Visual design principles teach us how to leverage things like colors, whitespace, and typography to make your site beautiful and intuitive.

What you'll learn

Again, the goal here is not to become a professional web designer. Maybe it takes 10,000 hours to become an expert, but even a modest effort can quickly catapult you past the median and empower you to tackle projects on your own.

In this lesson, we’ll cover:

  • Fundamental design principles
  • Layout and composition
  • Visual Hierarchy
  • Typography
  • Color
  • How to get better at design

How to learn it

For this lesson, we’re going back to Viking Code School’s online bootcamp prep work. Work through the third section of Web Design Basics, the Principles of Visual Design (sections 12 - 20).

Perhaps you are feeling like this material isn’t actionable enough. Sure you know what serifs are, but how do you go about selecting typefaces and setting up the typography on a site? You know the color wheel, but how do you choose a good color palette?

What’s important right now is establishing the vocabulary and starting to develop your eye for design. In a future lesson, we'll go through the whole process of creating a site. I’ll show you some handy tools and shortcuts for quickly establishing a site’s design language.

I want more!

This lesson is a brief primer into the world of design. This is enough for now, but if you want to continue exploring, here’s some follow-up resources:

  • The Design of Everyday Things is a classic book that inspired a lot of modern design and usability terminology.
  • Hack Design is a free online design course that goes into far greater detail than Viking Code School.
  • A List Apart is a famous blogazine all about creating and designing web content.
  • The Web Field Manual is a curated list of interesting articles and resources for web design and development.
  • This giant reddit post is full of tons of educational links.
  • Practical Typography is a short online book that’ll teach you the important typographical rules in 10 minutes.
  • Why You Hate Comic Sans is a fun article that takes a closer look at typography by explaining all reasons why Comic Sans is terrible.

Getting better

As with any creative skill, reading about design all day isn't going to be enough. For lack of a Designer Atlas, the way to improve is by designing a lot. Search for inspiration in sites that you like, and think about what makes them work.

Seek out other designers and see how they've filled their portfolios. With every new project you start, be intentional about improving your skills. Just as with development, finding an experienced mentor is one of the most important steps you can take to allow you to progress efficiently.

Get inspired

A great way to improve your eye is by exposing yourself to lots of good design and thinking about what you like. There's lots of curated sources of inspiration online:

  • Site Inspire: a showcase of of the finest web and interactive design.
  • Little Big Details: sometimes great design is all about the little things.
  • Uplabs: a feed of frontend resources and inspiration.
  • Dribbble is a place to show and tell, promote, discover, and explore design.
  • Beautiful Web Type is a showcase of good uses of typography.

Comprehension

  • What is a z-layout in web design?
  • What is the “rule of thirds” in visual composition?
  • Why is whitespace important for good web design?
  • What is visual hierarchy in web design?
  • How do contrast, repetition, alignment, and proximity (CRAP) each help define visual hierarchy?
  • What's the difference between Serif and Sans Serif fonts?
  • What is “vertical rhythm” in web typography?
  • What is a good font size for large sections of text on the web?
  • How wide should columns of text be for optimal readability?
  • What size should headers be in relation to each other and the body text?
  • What is a good value for your text's line height? move rules to shortcut lesson?
  • Why avoid using black text on a white background?
  • What are grid systems for in web design?
  • What are primary, secondary and tertiary colors?
  • What are analogous color schemes?
  • What are complementary color schemes?
  • What are complementary color schemes?
  • What are triadic color schemes?
  • What are tetradic color schemes?

Tasks

As with the UX section, the Viking Code School curriculum challenges you to perform your own design teardowns. Think them through and then read some of the other students’ write-ups and compare them to your own.

It isn't necessary to do a whole write-up, but soon you'll be creating a portfolio website. You might choose to add a technical blog to it, and if so this could be good fodder for your first content.

What's Next?

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.

Current Goal: Making Websites