Design & UX
By Jason Beaird

Defining Good Design

By Jason Beaird

There are two main standpoints from which most people determine whether a website design is “good” or “bad.” There’s a strict usability angle, which focuses on functionality, the effective presentation of information, and efficiency. Then there’s the purely aesthetic perspective, which is all about the artistic value and visual appeal of the design. Some people become caught up in the aesthetics and graphics, and forget about the user, while some usability gurus get lost in their user testing and forget about visual appeal. In order to reach people and retain their interest, it’s essential to maximize both.

The most important point to keep in mind is that design is about communication. If you create a website that works and presents information well, but looks ugly or fails to fit with the client’s brand, no one will want to use it. Similarly, if you make a beautiful website that is hard to use or inaccessible, people will leave. Indeed, the elements and functionality of a finished website design should work as a single cohesive unit, so that users are pleased by the design but drawn to the content.

One of the biggest concerns among usability professionals is the time it takes users to scan the page for the information they want, be it a piece of content, a link to another page, or a form field. The design should not be a hindrance; it should act as a conduit between the user and the information.

Nick La’s Web Designer Wall (see below) is a great example of a design that’s both beautiful and usable. Nick’s rich, colorful illustrations flow around the structure of the page, which is embellished with navigation and site elements that look as if they were cut from a sketchbook. The abundance of handcrafted, organic elements creates contrast and helps to draw your eyes to the content of the blog posts without interfering with the pages’ readability or how it’s organized.

Users can move about easily via intuitive navigation: we’ll talk more about the placement of navigation later, but the main navigation block itself should be clearly visible on the page, and each link should have a descriptive title. A navigation structure that not only changes appearance when hovered over with the cursor, but also indicates the active page or section (as in the example below, from a navigation menu from, helps users to recognize where they are, and how to get where they want to go.

Secondary navigation, search fields, and outgoing links should not be dominant features of the page. If we make these items easy to find, and separate them visually from the content, we allow users to focus on the information — yet they’ll know where to look when they’re ready to move on to other content.

Users recognize each page as belonging to the site: even if there’s a dramatic difference between the layout of the home page and the rest of the site, a cohesive theme or style should exist across all site pages to help hold the design together.

Take a look at the three screenshots from the Moore School of Business website. Although the content blocks on these pages are divided differently, there are several visual indicators that let users know that these are pages from the same site. Much of this unity is due to the repetition of the identity and navigation blocks. The consistent use of a very limited color palette (black, gray, yellow, and red) also helps to unify the pages.


The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the second part of the first chapter, which we’ll continue next by looking at the anatomy of web pages.

If instead color is more your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

  • An Alien

    Great article and great timing. There is a HUUUGEEE discussion in my thread about this going on right now in the sitepoint forums. Check it out, my user name is An Alien. I don’t know if I can post links here. Hopefully they will calm down and read this article, lol.

  • desbest

    Design doesn’t have rules, yet it has guidelines, but not rules. It’s all very well giving good examples of good design, as people know it when they see it; but as always, many designs will come out which are original, break or don’t follow the rules, and which don’t look Web 2.0.

  • I thought you were joking when you said the WebDesignerWall was a good example of good web design.  The web-page as shown in your article is deplorable!  I would no sooner use that site for design ideas than I would hire a NASA Engineer who used a picture of the Shuttle Challenger exploding as the background for his resume.

    I would argue that anything not conveying information in a GUI is noise.  

  • graphicus

    I totally agree that design is about communication, and when properly understodd there is no conflict between functionality and aesthetics. But too often aesthetics is confused with decoration, and functionality is reduced to mere functionalism. 

    Proper attention to composition (eg. rule of thirds), the psychology of color, and the total impact of the design (emotional resonance is part of communication and usability) will lead to good functionality and navigability; and vice versa – proper attention to all the human factors involved in user interaction with a web page ought to produce an elegant and aesthetically balanced design.

    Within that framework there is alot of room for creativity – buit it should never be just random. Like good peotry, there shoudl be reason for everything that is on the page. Unfortunately the examples you show fall into the random decoration distracting from both good communication and good aesthetics.

  • Great design stands out a mile off, anyone (pretty much) can design (HTML/CSS) but understanding key factors from usability, functionality, graphical design elements, positioning, use of CSS / clean coding, colours that work, relating to the target audience etc etc are all critical in what makes a designer an awesome designer.

  • Pingback: Resources for Day 3 (May 24) | Forest Friend()

Get the latest in Design, once a week, for free.