Defining Good Design

There are two main standpoints from which most people determine whether a web site design is “good” or “bad.” There’s a strict usability standpoint, which focuses on functionality, the effective presentation of information, and efficiency. Then there’s the purely aesthetic perspective, which is all about presentation, hot animations and sexy graphics. Some designers get caught up in the aesthetics and graphics and forget about the user, and 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 thing to keep in mind is that design is about communication. If you create a web site that works and presents information well, but looks ugly or doesn’t fit with the client’s brand, no one will want to use it. Similarly, if you make a beautiful web site that isn’t usable and accessible, people may not be able to use it. Indeed, the elements and functionality of a finished web site design should work as a single cohesive unit, so that:

  1. Users are pleased by the design but drawn to the content
  2. Users can move about easily via intuitive navigation
  3. Users recognize each page as belonging to the site

In this post, I will look at how we can achieve all these via a practical case study. We created a website based on some of the principles I discuss below.

Redfourth Chorus is arguably one of the hottest choirs we have in Kenya today. Being raised in an Adventist home, I have a soft spot for choirs, chorales and arranged music- you name it. Heck, I’m even in a choir myself. What a better way to honor this talented group of music connoisseurs than to display their work in the best way that I can – digitally of course. Filah, if you’re reading this, big up! Good going man, hope to hear more good music from you.

Ps: Please come get this website from us. You can view it here

The Basic Anatomy of a Webpage

Anatomy of a standard site

Anatomy of a standard site

1.      Containing Block

Every web page has a container. This could be in the form of the page’s body tag, an all-containing div tag. Without some sort of container, we would have no place to put the contents of our page. The elements would drift beyond the bounds of our browser window and off into empty space. The width of the container can be liquid, meaning it expands to fill the width of the browser window; or fixed, so that the content is the same width no matter what size the window is.

2.      Logo

When designers refer to an identity, they’re referring to the logo and colors that exist across a company’s various forms of marketing, such as business cards, letterhead, brochures, and so on.

The identity block that appears on the web site should contain the company’s logo or name, and sit at the top of each page of the web site. The identity block increases brand recognition and lets users know that the pages they’re viewing are part of a single site.

3.      Navigation

It’s essential that the site’s navigation system is easy to find and use. Users expect to see navigation right at the top of the page. Whether you plan to use vertical menus down the side of the page, or a horizontal menu along the page’s top, the navigation should be as close to the top of the layout as possible. At the very least, all main navigation items should appear “above the fold.”

4.      Content

Content is king. A typical web site visitor will enter and leave a web site in a matter of seconds. If visitors can’t find what they’re looking for, they will undoubtedly close the browser or move on to another site. It’s important to keep the main content block as the focal point of a design so that precious seconds aren’t wasted as visitors scan the page for the information they need.

5.      Footer

Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site.

By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.

 

Having baked our cake, we need to add some icing to it. Make it desirable to the eye and the tongue mildly moist. There are a few design principles we have to apply when styling a site to really make it pop and stand out.

 

Mockups used to build redfourth website -Full width gallery image

Mockups used to build redfourth website -Full width gallery image

Mockups used to build redfourth website -Footer, Centered Text, Video Pages

Mockups used to build redfourth website -Footer, Centered Text, Video Pages

Whitespace

The graphic design term whitespace (or negative space) literally refers to any area of a page that’s not covered by type or illustrations. While many novice web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, having empty space on a page is every bit as important as having content. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to “breathe” by guiding the user’s eye around a page, but also helps to create balance and unity.

Unity

Design theory describes unity as referring to the way in which the different elements of a composition interact with one another. A unified layout is one that works as a whole rather than being identified as separate pieces.

Although it’s not such an issue these days, unity is one of the many reasons why web designers have always despised HTML frames. It’s important that unity exists not only within each element of a web page, but across the entire web page–the page itself must work as a unit. We can use a couple of approaches to achieve unity in a layout (aside from avoiding frames): proximity and repetition.

Proximity

Proximity is an obvious, but often overlooked way to make a group of objects feel like a single unit. Placing objects close together within a layout creates a focal point toward which the eye will gravitate.

Repetition

In nature, repetition occurs all around us. A school of fish, a pride of lions, an embarrassment of panda – I bet you didn’t know that. Any time you bring a set of like items together, they form a group. In the same way, repetition of colors, shapes, textures, or similar objects helps to tie a web page design together so that it feels like a cohesive unit.

Continuance

The idea behind continuance is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Continuance is also one of the most common methods that web designers use to unify a layout. By default, the left edge of headings, copy, and images placed on a web page form a vertical line down the left side of a page before any styling is applied. A simple way to expand on this concept is to use the rule of thirds to line up other page elements along the lines of your grid.

Isolation

In the same way that proximity helps us create unity in a design, isolation promotes emphasis. An item that stands out from its surroundings will tend to demand attention

Right-column Navigation

In our culture, our eyes scan from left to right, this allows the page’s main content to be the first thing viewers see. This is a much newer concept as most sites have navigation either at the top or on the left-hand side.

 

Having applied all these principles to our design… drum rolls… We have our finished product. You can check it out here.

I would want to know whether our design works for you or not. I’m look forward to your critiques and comments.

Cheers 🙂

Cliff