Design on the Web

How the key principles of design apply to building websites

Scroll down...




Thinking about design in the abstract only gets you so far -- you're a developer who wants to build good sites and probably only have so much patience for generalities. In the following lessons, we'll be dealing with specific tenets of web design that you can actually use.

For starters, read A Brief History of Web Design for Designers and then move on to Startups, This Is How Design Works to get a sense of how design fits into the startup ecosystem. You may not be interested in building your own startup, but a startup is really just a product with a company wrapped around it and, as we said before, you'll certainly be building products during your career.

Remember from the lessons on UX -- everything we do is in the service of helping our user accomplish her goal(s) effectively, efficiently, and with satisfaction. Visual design gives you the tools to do this on individual pages by directing your user's eye to the right content or the proper areas of the layout. It gives you the ability to choose fonts that stand out in the right places (e.g. headlines) and blend in where necessary (e.g. long patches of text). It gives you the tools to define relationships between different areas of the page based on their characteristics and placement.

All of these things should help the user seamlessly flow towards her goal, whether that's consuming a blog post or purchasing a hypoallergenic cat toy or seeing what her friends are up to.

Visual Design in the Design Process

We've talked about the three phases of the Design Process:

  1. Discovery — figuring out who the users are, what their goals are, and what will make them happy when using the app
  2. Strategy (UX) — figuring out the higher level organization and flow of the site, including what information architecture, navigation, and interactions will best bring the users to their goals... the domain of good UX!
  3. Visual Design — figuring out specific visual characteristics of the pages to properly direct users to their goals and then actually mocking those pages up.

It's worth noting again that these phases tend to occur in order but are interrelated -- there are elements of visual design in good UX (especially around interface design) and good UX in visual design.

Your Design Super Powers

After learning about design, you might even start to feel like you have super powers that allow you to direct your users' eyes and clicks at will.

How do you get these super powers? The first tools in your toolbox are the following key elements of visual design:

  1. Balance
  2. Grid
  3. Color
  4. Graphics
  5. Typography
  6. White Space
  7. Connection

Please read the explanation of each in 7 Key Principles That Make a Web Design Look Good by Juul Coolen at You don't need to memorize the 7 principles -- we'll dig deeper into them during the following lessons.

Just remember that, in the end, your users will always find a way to confound and confuse you to bring you (and your super powers) back down to earth.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Sorry, comments aren't active just yet!

Next Lesson: Layout and Composition