Layout and Composition

For many web developers, myself included, the most intimidating part of the design process is getting started. Imagine for a moment that you’re sitting at your desk with nothing other than a cup of coffee and the business card of a potential client who needs a basic corporate website. Usually, a business card speaks volumes about a company’s identity, and can be used as design inspiration.

Unfortunately, that’s not the case with the card for Smith’s Services in Figure 1.1. It’s black and white, all text, no character—blah. Talk about a blank canvas! So, where do you go from here? You need a plan… and you need to contact Mr. Smith. With some critical input from the client about what his company actually does, and by gathering information about the content you have to work with, you’ll be able to come up with a successful design.

Figure 1.1. A bland client business card

Anyone, no matter what level of artistic talent, can come up with a design that works well and looks good—all it takes is a little experience and a working knowledge of some basic layout principles. So let’s start with the basics, and before long you’ll have the foundation necessary to design gallery-quality websites.

The Design Process

Designing a website can be a double-edged sword. The process falls somewhere between art, science, and problem solving. Yes, we want to create an individual site that’s aesthetically pleasing, but our highest priority should be to meet the needs of our client. These needs may be lofty and elaborate, or they might just be about making information available. If we fail to listen carefully, though, the entire project will come falling down, along with our reputation. The technical details of developing, hosting, and maintaining a website or application can be, well, technical. The process of creating a design comp, however, can be boiled down to just three key tasks: discovery, exploration, and implementation.

Discovery

The discovery component of the design process is about meeting the clients and learning what they do. This may feel a little counter-intuitive, but gathering information about who your clients are and how they run their business is vital in coming up with an appropriate and effective design.

Before you schedule your first meeting with a client, spend some time researching their business. If they’ve asked you to design a website, they may currently be without one, but google them anyway. If you’re unable to find any information about their business specifically, try to learn as much as you can about their industry before the first meeting. Whenever possible, the first meeting with a client should be conducted in person. Sometimes, distance will dictate that the meeting has to occur over the phone; but if the client is in town, schedule a time to meet face-to-face.

Keep in mind that this meeting is less about impressing the client, selling yourself, or selling a website than it is about communication and establishing just what it is the client wants. Try to listen more than you speak, and bring a pad of paper on which you can make notes. If you bring a laptop or tablet with you to talk about website examples, limit the time spent using it. Computers have screens, and people tend to stare at them; and so, if the client isn’t staring at the screen the whole time, you’re likely to be as you write your notes. If you must drag some technology into the meeting, use a voice recording app to record the conversation—with the client’s permission, of course. In my experience, though, a pad of paper is less threatening and far less distracting to the often not-so-tech-savvy client.

Here are a few of the questions I like to ask in initial client meetings, even if I’ve already established the answer myself via a search engine:

• What does the company do?

• What is your role in the company? ^[1]

• Does the company have an existing logo or brand? What is your goal in developing a website?

• What information do you wish to provide online?

• Who comprises your target audience? Do its members share any common demographics, like age, sex, or a physical location?

• Who are your competitors and do they have websites?

• Do you have examples of websites you like or dislike?

• What kind of timeline do you have for the project and what is the budget?

If the project is to redesign an existing website, I also like to ask:

• What are your visitors usually looking for when they come to your site?

• What are the problems with your current design?

• What do you hope to achieve with a redesign?

• Are there any elements of the current site that you want to keep?

• How do you think your visitors will react to a new site design?

Sometimes I start off with more questions than those listed here. Use your imagination and try to come up with some creative queries that will really give you more insight into the client’s organization. If you’re a programmer, avoid the tech jargon. If you’re a designer, avoid talking specifically about design. Sure, that may be all you’re thinking about, but semantic markup, responsive layouts, and so on will likely mean very little to the client. Worse still, these types of conversations can bring misguided design opinions your way before you have a chance to start thinking about the design yourself.

Exploration

The next stage of the design process is to take the information you’ve learned from the client back to your laboratory for analysis, dissection, and experimentation. You want to develop a firm grasp on all the information, products, and services they have to offer, and play around with how these could be arranged. Put yourself in the shoes of the website visitors and ask yourself what these people are looking for. If you’re thinking about buying a product, what do you need to know before you buy? If you’re signing up for a service, where would you learn about the different offerings and which level of service you need? What is the clearest title possible for page x, and how many steps does it take to reach page y?

In the world of web design, this is the beginning of a process known as information architecture, or IA for short. For expansive websites and complex web applications, information architecture is a career in itself, but the guiding principles of this field can provide a solid foundation for even the smallest websites. For the exploration stage of our process, we want to focus on organizing the content and flow of the website into a structure we can design around.

Two of the most essential tools for this task are scrap paper (or a whiteboard if you have one) and a big pad of sticky notes. Make a list of all the bits and pieces of the website and start arranging them into groups and subgroups. These are likely to move around quite a bit, and that’s where the sticky notes come in handy. If you make a note for every section, subsection, and page of the site, you can arrange them on a wall in the order they’ll appear in your site’s navigation. You’ll want to avoid overwhelming the visitors with too many options, but you also don’t want to bury information too deeply within the site; that is, too many clicks away from the home page. There are no hard-and-fast rules for this activity; just make the information as obvious and as easy to reach as possible.

Implementation

Now that we’ve thought through how we want to organize the information we’re working with, the implementation step of our design process begins with creating a layout. Regardless of the project, try to avoid being caught up in the technology associated with building websites—at least at first. At this point, it’s unimportant whether the site is going to comprise straight HTML, a template for a content management system, or a Ruby on Rails application; the bottom line is that we have an interface to design and a blank sheet of paper. “Paper?” That’s right, paper. Did you really think I was going to let you go back to your precious computer already? No way. Here’s why: it’s easy to lose focus on the design if you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, and focus on how you want the final product to look. Now you might think that all good designers carry around fancy hard-bound sketch books in which they flourish expensive markers and paintbrushes to design Da Vinci-esque renderings of potential web page layouts. For my part, I use a 79-cent spiral-bound notebook and any writing instrument I can find on my desk that still works.

I start out by sketching a few possible layouts. After I’ve produced a few, I decide on one I like, jump into Photoshop, and use the rectangle tool to block out the areas I’ve marked down on my paper. Once I’ve defined my layout, I experiment with foreground and background colors until I have a solid color scheme. I continue twiddling the Photoshop knobs and pushing around pixels until, finally, magically, I have a comp to show the client.

Simple, right? Okay, perhaps I skipped a few steps in that brief description. Honestly, though, when people ask me how I do what I do, they usually receive a similar explanation. The truth is that there are reams of now-subconscious information from my past experience and those old college design and art classes that have helped me to define my own design process.

Learning how to design is like learning how to program. Some people have a bit of a knack for it, but anyone can learn. Just as there’s good code and ugly code, there is good design and ugly design. Learning some of the principles and conventions associated with design will help you to understand the difference between the good, the bad, and the ugly, moving you towards establishing your own design process.

Defining Good Design

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.

Harmony Republic (pictured in Figure 1.2) is a great example of a design that’s both beautiful and usable. The richly textured, colorful illustrations flow around the structure of the page, which is embellished with hand-drawn navigation and a simple layout. The abundance of handcrafted, organic elements creates contrast and helps to draw your eyes to the featured artists without interfering with the pages’ readability or how it’s organized.

Figure 1.2. Harmony Republic

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 the menu shown in Figure 1.3 does), helps users to recognize where they are, and how to get where they want to go.

Figure 1.3. A navigation menu from nclud.com, a Washington, DC-based web design agency

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 in Figure 1.4. 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.

Figure 1.4. Pages from the Moore School of Business

Web Page Anatomy

Even from a non-designer’s standpoint, defining a design that satisfies all the requirements I outlined above is a simple task. It’s similar to making a phrase on your refrigerator with magnetic poetry words. Although there are millions of ways to arrange the words, only a few arrangements make any sense. The magnetic words are like the components, or blocks, of the web page. Although the number of these necessary blocks depends on the size and subject of the site, most websites have the components seen in Figure 1.5.

Figure 1.5. Anatomy of a website

Let’s look at each of these components in turn:

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’d 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 this container can be fluid, meaning that it expands to fill the width of browser window; or fixed, so that the content is the same width no matter what size the window is.

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. ^[2] The identity block that appears on the website should contain the company’s logo or name, and sit at the top of each page of the website. The identity block increases brand recognition while informing users that the pages they’re viewing are part of a single site.

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 across the page, 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.”

Above the Fold

The fold, as many designers call it, is where the content of a page ends before users scroll down. This metaphor is derived from the fold in a newspaper. If you look at the cover of a folded newspaper, most of the headlines and biggest news appear in the top half, so that the most important news items can be seen at a glance when the newspaper is folded. The location of the fold on a web page depends on the browser dimensions and the user’s screen resolution.

Content

Content is king. Content consists of any text, images, or videos found on a website. A typical website visitor will enter and leave a website in a matter of seconds. If visitors are unable to find what they’re looking for, they’ll 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 visitors can scan the page for the information they need.

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.

Whitespace

The graphic design term whitespace (or negative space) literally refers to any area of a page without 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, 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—two important concepts that we’ll discuss in more detail later in this chapter.

At this point, we’ve had our initial meeting with Mr. Smith, our theoretical client, and it was helpful. He explained very thoroughly what his business does and what he wants the site to achieve. Even though we’ve yet to see actual content, we can use the standard blocks of web page anatomy to start developing a layout. Although other site-specific blocks are worked into the designs of many website layouts, the web page anatomy works to summarize the most common blocks.

Now that we have this information, how can we use it to create a foundational layout for Smith’s Services? It’s time for some grid theory.

Grid Theory

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design have exploded in popularity in the last few years.

Using a grid is more than simply making elements on the page square and lined up: it’s about proportion as well. That’s where the theory comes into grid theory. Many art historians credit Dutch painter Piet Mondrian as the father of graphic design for his sophisticated use of grids. Yet classical grid theory has influenced successful artistic efforts for thousands of years. The concept of dividing the elements of a composition extends back to the mathematical ideas established by Pythagoras and his followers, who defined numbers as ratios rather than single units.

The Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. They referred to this pattern as the golden ratio or divine proportion. The basic idea is illustrated in Figure 1.6.

Figure 1.6. The golden ratio

A line can be bisected using the golden ratio by dividing its length by 1.62. This magical 1.62 number is really 1.6180339 …, an irrational number that’s usually represented as Φ (pronounced “phi”). Explaining the math used to come up with this number is a bit too involved for this discussion, and is likely to be of no real help to you becoming a better designer, so I’ll spare you the details. Besides, my math is a little rusty.

So just what does this ratio have to do with graphic design? In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing. The artists of the Renaissance used divine proportion to design their paintings, sculpture, and architecture, just as designers today often employ this ratio when creating page layouts, posters, and brochures. Rather than relying on artistic notion, divine proportion gives us logical guidelines for producing appealing layouts.

This sunflower is an example of the golden ratio in nature, as Figure 1.7 shows. The diameter of the sunflower’s center is the total diameter of the sunflower, including the petals, divided by Φ.

Figure 1.7. The golden ratio in nature

The Rule of Thirds

A simplified version of the golden ratio is the rule of thirds. A line bisected by the golden ratio is divided into two sections, one of which is approximately twice the size of the other. Dividing a composition into thirds is an easy way to apply divine proportion without your calculator.

For quick layout experimentation, I like to start off by drawing a bunch of simple rule-of-thirds grids with pencil and paper. Just draw a rectangle, divide it into thirds horizontally and vertically, then draw a line between each vertical line to create six columns to work within, as shown in Figure 1.8.

Figure 1.8. A simple grid

With this simple gridwork in place, we can begin to lay out our elements. This is often referred to as a wireframe. Wireframes are simple sketches or layouts where you design blocks of content and their positioning on the page. Wireframes are extremely useful, because you can quickly and easily move elements around. The largest, outermost rectangle represents the container that we talked about in the section called “Web Page Anatomy”. When using this method of layout design, I like to place the biggest block first. Usually, that block represents the content. In my first rule-of-thirds grid, I place the content block within the two-thirds of the layout at the lower-right. Next, I place my navigation block in the middle third of the left-hand column. I place the text part of the identity block over the left side of the content, and the image part of the identity over the menu. Finally, I squash the copyright block below the content, in the right-hand column of the grid. The result is the top-left of the four possible layout arrangements shown in Figure 1.9.

Figure 1.9. Four layouts in grids that follow the rule of thirds

These initial sketches provide a quick look into what general layout approaches might work for your website. No need to stop there, though—the growth in popularity of grid-based design on the Web has inspired many great articles about—and tools for—designing websites on a grid.

960 Grid System

One of my favorite tools for laying out website components is the set of templates and sketch sheets from Nathan Smith’s 960 Grid System. Inspired by articles from web designers Khoi Vinh and Mark Boulton, the 960 Grid System is primarily a CSS framework.

The width of the templates comes from an article by Cameron Moll. In contemplating what width would fit within 1,024px wide displays, Moll landed at 960px, and pointed out that the number was divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16—making it an ideal width for grids. Nathan combined these ideas into a framework and created three layout foundations: one with 12 columns, one with 16 columns, and one with 24. I personally prefer to work from the 12-column templates, as they allow me to easily divide content into quarters by spanning four columns, thirds by spanning three, and halves by spanning six. Using these sketch sheets makes it easy to transition from your sketches and mock-ups to an actual working prototype. Note that this approach translates well to many other popular CSS frameworks as well, such as Foundation and Bootstrap, because they are also based on 12-column grids―we’ll discuss Bootstrap and Foundation in more detail a little later.

As you experiment with different arrangements for your own layouts, use the columns of whatever grid you’ve chosen as alignment guides for the identity, navigation, content, and footer blocks. It’s very tempting to arrange all your elements within the same one or two blocks, but try to avoid this—it’s not very interesting visually. Instead, consider pushing some elements into another column or off the grid entirely. One of the biggest complaints new designers have about working with grids is that everything looks boxed in and griddy. To those opposed to using grids for this reason, I say take a look at websites such as 10K Apart, seen in Figure 1.10. The red columns you see are from the 16-column 960 Grid System template, and do not exist in the actual website. With those columns hidden, you might never realize this design was created on a grid.

To quote Josef Müller-Brockmann, graphic design pioneer (and author of Grid Systems in Graphic Design): “The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” ^[3]

Figure 1.10. 10K Apart website with 16-column grid overlay

The longing we have for structure, grids, and ideal proportion is deeply ingrained in human nature. A layout that “doesn’t look quite right” can often be fixed by moving elements and resizing them on the grid. So if a layout isn’t working, keep experimenting. At some point, all the pieces will click together and the Tetris level-up sound will play in your head. You will have achieved balance.

Balance

In a figurative sense, the concept of visual balance is similar to that of physical balance illustrated by a seesaw. Just as physical objects have weight, so do the elements of a layout. If the elements on either side of a layout are of equal weight, they balance one another. There are two main forms of visual balance: symmetrical and asymmetrical.

Symmetrical Balance

Figure 1.11. Examples of symmetrical balance

Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line, as shown in Figure 1.11. The digital painting Contemplation by David Lanham, shown in Figure 1.12, illustrates this concept well. Notice how the male and female figures are similar in position and proportion. Even the shaded background boxes are mirror images of one another.

Figure 1.12. Symmetrical balance: Contemplation by David Lanham

Although it may not be practical for all designs and clients, this type of symmetry—called horizontal symmetry —can be applied to website layouts by centering content or balancing it between columns. The Albion West Coast page is an example of such symmetry. Notice on the screenshot in Figure 1.13 that the content areas are balanced in perfect symmetry, While some elements, like the hand-drawn sketch in the background, add subtle variation to the site.

Figure 1.13. Albion home page

The two other forms of symmetrical balance are less common in website design, due to the nature of the medium. They are, however, commonly exhibited in logo and print design:

• bilateral symmetry, which exists when a composition is balanced on more than one axis

• radial symmetry, which occurs when elements are equally spaced around a central point

Asymmetrical Balance

Figure 1.14. An example of asymmetrical balance

Asymmetrical balance, or informal balance, is a little more abstract (and more visually interesting in general) than symmetrical balance. An example of asymmetrical balance is shown in Figure 1.14. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page; for instance, if you have a large object on one side of a page, and partner it with several smaller items on the other side, the composition can still feel balanced.

The concert poster by my friend Jeremy Darty presented in Figure 1.15 is a fine example of asymmetrical balance. The visual weight of the large pink flamingo on the left is balanced by the combined weight of the smaller flamingos and text blocks on the right-hand side of the layout. Notice, also, Jeremy’s use of the rule of thirds. The blue cloud behind the Pop Sucks title takes up one-third of the vertical space and spans two-thirds of the horizontal.

Figure 1.15. Asymmetrically balanced design by Jeremy Darty

Take a look at the photo of the three stones in Figure 1.16. It may not be a particularly exciting picture, but as far as balance goes, it rocks! If you were to use a piece of paper to cover any one of the three stones below, the entire photograph would feel unbalanced and unfinished. This is generally the way balance works. It’s as if the entire composition is in a picture frame hanging by a single nail on the wall. It barely takes much weight on one side or the other to shift the entire picture off balance.

Figure 1.16. Asymmetrical rocks that don’t roll

Unlike symmetrical balance, asymmetrical balance is versatile and, as such, is used more often on the Web. If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color—a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout. The About Us page of the Steinway & Sons website, shown in Figure 1.17, is an excellent example of asymmetrical balance. In this example, there’s no defined right column, just a large stoic image of the company’s founder. That epic moustache carries a lot of weight, but it’s balanced out by the sizeable italic headline atop the main content.

Figure 1.17. Steinway & Sons—an example of asymmetrical balance

There are many other principles at work in Jesse Bennet Chamberlain’s design of the Steinway & Sons site, and it goes beyond asymmetrical balance. The site has great harmony, ^[4] which comes from the repeated use of curves, textures, and consistent typefaces. Much of that harmony can be explained via the principles of unity.

Unity

Design theory describes unity as 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. Take the monkeys in Figure 1.18, for example. Their similarity of shape (not to mention their identical color) enables them to be recognized as a group, rather than four disparate elements.

Figure 1.18. Unity among the monkeys

Although less of 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 towards which the eye will gravitate. Take a look at the digital painting in Figure 1.19. While composed of a seemingly random assortment of strokes, the five strokes that are the closest to each other appear to form a unified object.

Figure 1.19. Creating a group using proximity

We practice the concept of proximity on the Web when we start setting margins and padding for elements. For instance, when I define the CSS style rules for sites, I usually change the default margin that exists between common HTML elements such as headings (h1, h2, h3 …), paragraphs, blockquotes, and even images. By altering these values, I can cause more or less space to appear between elements, thereby creating groups.

If you look at the two columns of text in Figure 1.20, you’ll notice that they look similar. The only difference is in the placement of the headings. In the column on the left, the word “Unkgnome” is equidistant from the top and bottom paragraphs. The result is that it looks more like a separator than a heading for the next paragraph. In the second column, the “Gnomenclature” heading is placed closer to the paragraph that follows it. In accordance with the rules of proximity, this heading appears to belong to that block of text.

Figure 1.20. Proximity between headers and content

Repetition

A gaggle of geese, a school of fish, a pride of lions. 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. The example in Figure 1.21 illustrates repetition. Even though there exists other similar strokes, the nine red strokes on the left-hand side appear to be a unified group because they repeat a shape, color, and texture. The strokes to the right of this group have no repeated pattern, so they appear isolated even though there are other shapes nearby.

Figure 1.21. Creating a group using repetition

Whether you notice it or not, repetition is often used in website designs to unify elements of the layout. An example of this concept at work among unmodified HTML elements is the bulleted list. The bullet that precedes each list item is a visual indicator that the bullet items are parts of a whole. Repeated patterns and textures can also help to unify a design. Take a look at the screenshot of Dribbble, a hub for designers and developers to showcase and share their work. This layout contains many eye-catching elements, but the repeated thumbnail images with the views, comments & like icons create a sense of unity, while the navigation bar and the open content area give plenty of room to show off all of this awesome, unique design work.

Figure 1.22. Dribbble homepage

Emphasis

Closely related to the idea of unity is the concept of emphasis or dominance. Rather than focusing on the various elements of a design fitting together, emphasis is about making a particular feature draw the viewer’s attention. When you design a web page layout, often you’ll identify an item in the content, or the layout itself, that you want to stand out. Perhaps it’s a button for users to press, or an error message for them to read. One method of achieving such emphasis is by making that element into a focal point. A focal point is any element on a page that draws the viewer’s eye, rather than just being part of the page as a whole or blending in with its surroundings. As with unity, there are a few tried-and-true methods of achieving a focal point.

Placement

Although the constraints of practical web design do not often allow for it, the direct center of a composition is the point at which users look first, and is typically the strongest location for producing emphasis. The further from the center an element is, the less likely it will be noticed first. On the Web, the top-left corner of the page also tends to demand a lot of attention for those of us who read from left to right (remember that many languages, like Hebrew and Arabic, are read from right to left) and scan a page from top to bottom.

Continuance

The idea behind continuance or flow is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Figure 1.23 demonstrates this effect. Even though the bottom splotch is bigger and so tends to catch your eye first, your brain can’t help but go “Hey, looky there, an arrow!” Soon enough, you’ll find yourself staring at the smaller object.

Figure 1.23. Continuance and placement: creating emphasis

Continuance is 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 make additional use of this concept is to align elements to the lines of your grid. This creates multiple lines of continuance for your visitors’ eyes to follow down the page. The example in Figure 1.24 below, the site of graphic designer Arnuad Beelen, is a great example of continuance. The angled images align their edges with the tops or bottoms of others, moving your eye across the page.

Figure 1.24. Continuance on Arnaud Beelen’s site

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. Even though he’s sad to be apart from his buddies, the isolated monkey in Figure 1.25 stands out as a focal point on the page.

Figure 1.25. Isolation: a sad monkey

Contrast

Contrast is defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. The concept is simple: the greater the difference between a graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in color (which I’ll discuss in more detail in Chapter 2), size, and shape. Take a look at the Twitter home page in Figure 1.26.

Figure 1.26. Twitter: using orange for contrast

If there’s a singular link or button you want your visitors to click on in a page, it’s known as a call to action. When you look at the preceding layout, what first grabs your attention? For me, it’s the Sign Up button in the right column. It’s the only place on the page that uses those bright orange and yellow colors, and the text is much bigger than the Search and Sign In buttons. By placing it in a block that crosses over that trending topics bar, it has plenty of continuance, isolation, and contrast. Twitter really wants you to click that button, so it’s creating as much emphasis as possible to ensure its call to action is effective.

Proportion

Another interesting way of creating emphasis in a composition is through the use of proportion. Proportion is a principle of design that has to do with differences in the scale of objects. If we place an object in an environment that’s of smaller scale than the object itself, that object will appear larger than it does in real life, and vice versa. This difference in proportion draws viewers’ attention to the object, as it seems out of place in that context.

In Figure 1.27, I’ve taken our sad, isolated monkey and superimposed him over the skyline of Manhattan to prove my point. Between the sharp contrast in color and the difference in proportion, your brain immediately says, “Hey, this isn’t quite right,” and you’re left staring at the monkey until you force yourself to look away.

Figure 1.27. Proportion: a monkey in Manhattan

This principle works for miniaturization as well. Take a look at the Barley’s Greenville website in Figure 1.28. The first element you probably notice is the massive Barley’s header. From here, though, my eye jumps straight to the logo and into the row mentioning the menu and their beer selection. This is due to both continuance and eye-catching use of proportion. The proportions aren’t true to life, because the beer is larger than the pizza, but the layout still works well and holds your attention.

Figure 1.28. Barley’s: a great example of emphasis

Creating emphasis in your design isn’t just the key to making your call to action stand out. It’s also how we move a viewer’s eyes across the page. By giving elements a descending level of emphasis, you can suggest an order for visitors to follow. If you keep this in mind as you build your sites, you can echo the emphasis you create with semantic HTML markup and CSS. For instance, by matching h1 to h6 headline tags with a respective level of visual emphasis, you can provide a similar view of what’s visually important in the page to search engines and vision-impaired visitors.

Next, we’ll look at some well-tested examples of designs from which you can work.

Bread-and-butter Layouts

Most of what we’ve talked about thus far has been design theory. Theory’s helpful, but it can only take us so far towards understanding why some ideas work—and others don’t—in a website’s design. In my opinion, examples and practice are much more valuable. Most academic graphic design programs include a curriculum that’s rich in art history and fine art. These classes provide a great foundation for an understanding of graphic design from an art perspective, but they do little to prepare you for the specific challenges you encounter when you take your designs to the Web.

Pablo Picasso once said, “I am always doing that which I cannot do, in order that I may learn how to do it.” While I like to take that approach when designing a new website, it’s important first to know what you can do. When you look out across the Internet, you can see that the possibilities for layout are endless. Depending on the goals of the site, though, only a few of those possibilities make good design sense. That’s why we see certain configurations of identity, navigation, and content over and over again.

In this section, we’ll talk about the three most common layouts, and explore some of their advantages and disadvantages.

Left-column Navigation

Regardless of whether we’re talking about liquid or fixed-width layout design, the left-column navigation format is a time-honored standard. The layout of the Arbor Restaurant Site pictured in Figure 1.29, is a classic example of this configuration. Many sites that fit into this mold don’t necessarily use the left column as the main navigation block—sometimes you’ll see the navigation along the top of the page—but they still divide the layout below the header into a narrow (one-third or less) left column and a wide right column. It’s like a security blanket, or that comfortable shirt with holes in the armpits that you wear once a week—even though it drives your spouse crazy. For those reasons, a layout featuring left-column navigation is a safe choice for most projects.

Figure 1.29. Left-column navigation at Arbor

The downside to sites that use left-column navigation is that they can appear to lack creativity. It’s been done so many times, in so many ways, over so many years that these sites tend to look the same. That’s not to say you should avoid using a left-column navigation layout. At a guess, I’d say that 75% of the sites I’ve designed have a secondary left-column navigation, but I do try to mix it up a little when I can.

Speaking of mixing it up, how about picking that left column up and sticking it on the other side of the content? Then you’d have a right-column navigation layout.

Right-column Navigation

If you’re going to restrict your main content to one side of the page, it’s more widespread these days to push it to the left, placing navigation, advertising, and subsidiary content on the right. This is an especially common configuration for news sites, social networks, and websites with expansive navigation schemes that are unable to be contained within a simple top navigation. BlueCross BlueShield of South Carolina is an example of such a site. It features several different layouts and color schemes for each section. The screenshot you see in Figure 1.30 is a fourth-level page—that is, it’s four clicks away from the front page. By keeping the secondary navigation on the right, it stays out of the way of visitors who, if they’re this deep already, are looking for some very specific content.

Figure 1.30. Right-column navigation at BlueCross BlueShield of South Carolina

Ultimately, the decision on whether to put a navigation column on the left or the right is a judgment call that’s really about the amount and type of content you have to organize. If it’s a simple site that doesn’t require any secondary navigation, consider a narrow, column-less layout. Good design is often more about what you leave out than what you put in. If you do need a secondary column, just remember that the content is what your visitors are there for … and more and more, they’re looking for it on the left.

Three-column Navigation

The typical three-column layout has a wide center column flanked by two diminutive navigational columns. The ThinkGeek store shown in Figure 1.31 is an example of this web page layout staple. Although three columns may be necessary on pages that have a ton of navigation, short bits of content, or advertising to display, whitespace is essential if we’re to keep a layout from appearing cluttered.

Figure 1.31. Three-column navigation at ThinkGeek

Finding Inspiration

Just because the left-column, right-column, and three-column layout configurations are the bread and butter of most web page designs, there’s no need to feel confined to these layouts. A plethora—yes, a plethora—of design showcase and design pattern sites have been created to feature new and innovative ideas that might help you think outside the box, including the following (just to name a few):

Unmatched Style at http://unmatchedstyle.com/

There are a ton of great CSS galleries out there. Unmatched Style is more selective than others, and the video podcasts and interviews are usually interesting as well.

CSS Drive at http://cssdrive.com/

Like Unmatched Style, CSS Drive is a CSS gallery. What makes this one special is that they do a good job of categorizing featured sites by color schemes and layout.

Pattern Tap at http://patterntap.com/

Unlike the first three examples, Pattern Tap is a gallery of interface patterns rather than entire websites. Here you’ll find collections of navigation styles, contact forms, pagination, tabs, and more.

Yahoo Design Pattern Library at http://developer.yahoo.com/ypatterns/

Similar to Pattern Tap, but with far fewer examples and variations, the Yahoo Design Pattern Library is a great place to learn about standard user interface elements.

Using a Morgue File

I know what you’re thinking: “Great, I have a bunch of galleries and pattern libraries to look at—now what?” One of the most useful tips my first graphic design professor taught me was to create a morgue file whenever I was collecting inspiration for a large project. The concept is fairly simple: if you’re doing an illustration or marketing project that involves trains, you clip out and print up anything you can find that might give you inspiration and keep it all in a folder. It helps with your current project, and should you ever need to do another project involving trains, you’ll have lots of inspiration to hand.

The morgue file idea slipped my mind until a few years ago. I found myself looking for a site I’d seen in a favorite gallery site, but for which I was unable to remember the name or address. Doubtless it’s great to have access to lots of inspirational resources, but they’re useless if you can’t find the specific example you’re looking for. That was when I started my own digital morgue file. Lately, I’ve been using an application called Ember for Mac that allows me to create a screenshot of part of the screen, or even a whole web page (no more scroll, snap, scroll, snap). Ember also lets you give each snapshot a name and tags to make them easy to find later. Of course, no matter what operating system you prefer, there are plenty of ways to take a snapshot for your morgue file. Having a repository of website designs that I can look at has been a handy resource on countless occasions when I’ve been searching for inspiration.

Trends: Popular Favorites

If you’re feeling so overwhelmed by the resources above that even contemplating starting a morgue file for inspiration is beyond you, take a few minutes to browse through those sites all the same. Look past the colors and textures to the boxes that make up the layout, and try to identify standard ideas and design trends. By doing this, it’s possible to notice a few trends that seem to be emerging in website layouts.

Navigationless Magazine Style

If you’re reading this paragraph, I’m guessing you probably didn’t arrive via the table of contents. On the Web, we tend to be a lot more goal-oriented and consume information in bits and pieces. Site navigation allows us to be quick, efficient… and erratic. What if you don’t want your visitors skipping to another page? What if the information you need to convey is best consumed as a whole, like a book or magazine article? If that’s the case, why include navigation at all? That’s the approach that TheDesignBlog takes with each of its art-directed articles. Other than a tiny Design Informer logo in the header graphic, there are no site navigation links on each article’s page until you reach the comments section in the footer. A trend from one website, you ask? Take a look at the other examples in Figure 1.32, from Swississ and Paste Magazine.

Figure 1.32. Not much navigation going on here, just great uninterrupted content

Expansive Footers

This one is less of a trend and more an ongoing phenomenon. I featured expansive footers in the first edition of this book, and these continue to grow today, both in size and in the types of information people are putting in them. Rather than using the footer for just essential links and a copyright notice, many sites are utilizing this once-neglected piece of page real estate to include contact information, expanded site navigation, and social media content. Although putting a site’s main navigational element at the bottom of the page is a bad idea, including “bonus” navigation and content in that space is an obvious solution. A great example of this trend is YoDiv’s massive footer section.

Figure 1.33. Presenting extra content in the footer at YoDiv

See also:

• Mozilla at http://mozilla.org/

• Creamy CSS at http://creamycss.com/

• SitePoint at http://sitepoint.com/

Bare-bones Minimalism

Similar to the navigationless magazine style and quite contrary to the expansive footer concept, many sites are removing a lot of the standard web content fare. Minimalist design is all about reducing your design to the most essential elements. In Figure 1.34, Analog Coop accomplishes this by reducing its copy to a single, fun-to-read page. For Kha Hoang, being a minimalist is having a home page with simply a list of portfolio links, a quote on design, and some contact info. It’s an easy concept to apply: just go through each element of each page and ask yourself what it’s adding to your website. If you’re without an answer, toss it out.

Figure 1.34. Two flavors of minimalism: the Analog Coop and the portfolio of Kha Hoang

Minimalism isn’t a new design trend by any stretch of the imagination—even on the Web. In the art world, the minimalist movement of the 1960s and ’70s was a reaction against the overly self-expressive era of abstract expressionism. Similarly, the recent explosion in minimalism and single-page designs on the Web is a reaction against the overly interactive Web 2.0 era. It’s an attempt at balancing out the hustle and bustle of social media with the equivalent to a peaceful café or quiet art gallery.

See also:

• Brand New at http://www.underconsideration.com/brandnew/

• Sage Media at http://www.sagemediari.com/

Fresh Trends

With every passing year, new techniques pop up that are interesting or simply offer new ways of getting attention. They employ new capabilities or new scripts, and are rapidly adopted across the field of web design. The latest trends do just that—harnessing the power of JavaScript or CSS3 to add new capabilities, effects, and functionality that we’ve never seen before.

Full Screen Backgrounds

Figure 1.35. A full screen background at Swansea University’s site

With the ability to responsively fill browsers with large images, websites are harnessing the power of vivid imagery like never before. Big, bold, beautiful photos fill the browser behind the content of a website, such as in the example shown in Figure 1.35 above, from Swansea University, immediately inducing the wow factor. It’s true what they say: a picture is worth 1000 words.

Flat Design

Figure 1.36. An example of flat design

It seems like the more modern we become, the more we lean towards simplification. Less is more takes on a whole new life, with no frills, and no extras. Flat design seeks to refine web design to its simplest shapes and forms. Previously, web design has been about depth, adding gradients and rounded shadows to give a website a dimensional look. Now, depth is portrayed with sharp shadows, or a darker color. A popular example of this is the long shadow effect, which seeks to fool the eye with a shadow directed on one side of an object.

Video Backgrounds

Figure 1.37. Video backgrounds

Another new development is the ability to play full-screen video backgrounds that respond to the size of your browser, with scripts such as fitvids.js. You can also set a web video to autoplay when the page loads, such as in Doug Aitken’s The Source site, as shown in Figure 1.37. The rest of the website content is overlaid over the video, just as it would be with a full-screen background image.

Masonry Layout

Figure 1.38. An example of masonry layout

Another popular trend is to create what is called a masonry layout. A masonry layout makes content stack vertically to fit in the best way possible. An example website for this type of layout is Pinterest, shown in Figure 1.38 . Images and text fit vertically and horizontally to fill the browser. There is no focus on vertical alignment, because the point is for everything to fit as closely together as possible.

Parallax

Figure 1.39. An example of parallax

Parallax scrolling has exploded in popularity. The concept is that a stationary image is placed in the background, but that the rest of the site scrolls over the top of it, creating a dimensional effect. TEDxGUC, shown in Figure 1.39, is a example of parallax scrolling at its best. As you scroll, some objects scroll, while others stay stationary. This effect is popular because it gives a feeling of being immersed in the site.

Resizing: Fixed, Fluid, or Responsive Layouts

Back when we were drawing our first layout blocks with pencil and paper, I explained that the outer rectangle we were designing within was the containing block. In print design, the containing block is a physical object like a business card or a billboard. On the Web, our container is the browser window. Should the design fill the browser window, or should it have a set width? This decision is one that has plagued web designers since the very beginning—all the way back to the days when we used tables and spacer.gif files to lay out web page content.

Fixed Width Layouts

I mentioned the 960 Grid system earlier, which is used to create a fixed width layout. A layout is termed “fixed width” when the overall width of the website is a set number of pixels. The example 960 grid layout is 960 pixels wide, and centered in the browser. If the user resizes their browser window to be wider than 960 pixels, the space from the edge of the browser on the right and left sides of the website will grow equally. This is fine for larger displays, but when the user has a browser window smaller than 960 pixels wide (such as could be the case on mobile or tablet displays), the site is clipped, and scrollbars will appear. It is generally considered to be acceptable for users to scroll vertically to view more content, but having them scroll in all four directions is undesirable. Fixed width layouts used to be commonplace, because the fixed dimensions meant that layouts originally designed in Photoshop could easily be rendered in the browser, but have been overtaken by fluid and, increasingly, responsive layouts.

Fluid Layouts

A fluid or liquid layout is designed with percentage-based widths, so that the container stretches when you resize the browser window. These layouts take more thought to plan, as you have to foresee problems that might occur at every possible width. Sometimes pixel-width columns are mixed with percentage-based columns in a fluid layout, but the idea is to show the user as much horizontal content as will fit on their screen. Typically, fluid layouts take advantage of the min-width and max-width properties of CSS, ensuring the container doesn’t become ridiculously narrow or wide.

One reason some designers reject fluid layouts is because they think it impedes them when using a grid to create their designs. There are several resources available for designing fluid layouts on a grid, including a fluid adaptation of the 960 Grid System. Ultimately, though, the decision to use one type of layout over the other should really be determined by the target audience, and the accessibility goals of each individual website. The pros and cons of each layout type are fairly well-defined, as Table 1.1 shows.

Table 1.1. Fixed versus liquid layouts: the pros and cons

With these pros and cons in mind, I’ve designed more fixed-width layouts than liquid. I like having control over how the content will display, and working with the background space. On the flip side, I sometimes enjoy the challenges that liquid layouts bring to the table. But, regardless of personal preference, it’s important to put the needs of your client first. If you’re deciding on the width of a fixed-width layout, you need to think about the audience for which you’re designing, and create a layout that meets their needs.

Responsive Design

The established best practice for all websites now, responsive design has become the solution to a problem that was once considered the web designer’s nightmare. With the explosion of mobile technology, gone are the days of designing websites for desktop monitors alone; now we have to deal with smartphones and tablet devices. Businesses don’t want to miss out on those valuable visitors, and so we’re tasked to design web experiences for them, too. Before responsive design, accommodating the growing number of mobile devices meant that web designers were designing multiple versions of the same site for different screen sizes: obviously not an ideal solution. Responsive design is an attempt to create a single site design that can adapt its content to look great on all devices. Below in Figure 1.40 is an example of a responsive website. The site responds to different screen sizes, but the content is still viewable, and the design still looks consistent and beautiful on all three.

Figure 1.40. A layout that adapts to mobile, desktop, and JumboTron

How it Works

Responsive design uses CSS to control how the content will look, depending on the screen size of the device displaying it. One way of doing this is with media queries. The site is instructed to determine a device’s screen resolution. In the stylesheet, you create breakpoints, which are used to specify the size and structure of elements depending on the screen width of the device. These breakpoints are ranges of pixel widths for the different screen sizes you wish to target. For example, you may set breakpoints for mobile devices from 0px to 568px. The CSS to set this particular breakpoint would look something like this:

Then, you may set the next breakpoint to a range that fits most tablet devices, and then desktop. The advantage of using breakpoints and media queries is that you can set as many breakpoints as you want.

While we can’t discuss the technical aspects of responsive design fully in this book, there are tons of great resources available to learn more about it. Be sure to check out these great books:

• Responsive Web Design By Ethan Marcotte

• Responsive Web Design with HTML5 and CSS3 by Ben Frain

• Mobile First by Luke Wroblewski

• Jump Start Responsive Web Design by Craig Sharkie and Andrew Fisher

Screen Resolution

Responsive design developed from the need to be able to create a consistent design for different devices and screen sizes. In the past few years, screen resolutions have increased tremendously. Looking at Figure 1.41 below, containing screen resolution statistics from W3Schools, in 2007 and 2008, 6% of users had a screen resolution of lower than 800x600. Now, in 2014 the percentage of devices lower than 800x600 is 0.5%. Another 0.5% of devices are at the 800x600 resolution. This means that 99% of devices are set to a screen resolution of 1024x768 pixels or larger. When you look at the chart, a total of 78% of devices actually have a resolution of 1366x768 pixels or higher.

That said, it’s assumed that modern desktop browsers display at least 1024x768. Even the majority of netbook computers now have a 1024x600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, many users with larger monitors actually keep their browser window set less than 1024px wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable.

Figure 1.41. W3Schools’ screen resolution statistics

There are different methods to achieve responsive design. Some use a CSS grid with calculated columns and gutter widths. Many designers create their own custom grids, making calculations for columns widths, etc. As the popularity of responsive design grew, web development teams collaborated to create highly optimized grid systems. These included the most common features required by developers and designers, such as a responsive, flexible layout, image slider, and responsive navigation menu. These systems are known as responsive frameworks.

Figure 1.42. Blip.tv on iOS (as seen on http://cssiphone.com)

Frameworks

After working with responsive web design for a while, we’ve begun to understand the process better and streamline it. We’ve started creating our own responsive frameworks and can target common elements that are found on most websites, setting up common structures that work well in most circumstances. This is great, because we no longer have to reinvent the wheel each time we design a new site. These frameworks are a workable base that we can use to create a consistent design across all devices, but that can equally be used to customize designs however we like to create beautiful, responsive websites.

Many web development frameworks exist to help create beautiful, consistent, responsive websites, but there are two, in particular, that stand shoulder-to-shoulder in popularity and usefulness.

Foundation, shown in Figure 1.43, is a mobile framework by Zurb that’s packed with tons of web development features. Foundation seeks to simplify web development. It does this via a modular system featuring CSS classes that enable different features. With very little effort, Foundation enables you to create well-structured layouts. It also makes it relatively simple to implement a host of features including responsive navigation menus, image sliders, accordion menus, validated forms, buttons, model popups, panels, tooltips, progress bars, and responsive tables.

Figure 1.43. The Foundation framework

Bootstrap, shown in Figure 1.44, is the other framework battling for the number one spot as the responsive framework of choice. Much like Foundation, Bootstrap has a number of its own built-in components that allow you to quickly create well-structured, mobile-first websites. Bootstrap has plenty of integrated features that are comparable to Foundation. With Bootstrap, you can create jumbotrons, panels, wells, navigation bars, progress bars, dropdowns, badges, alerts, tooltips, popups, tabs, carousels, and much more. Bootstrap also integrates the use of glyphicons, which is an embedded font for use with the framework.

Figure 1.44. The Bootstrap framework

The primary reason people love Foundation and Bootstrap is that they’re highly customizable. You don’t have to download or even include the JavaScript files for components you aren’t using. Simply click the checkboxes corresponding to the components you need, and leave the ones you don’t. And once you’ve made your selections, Foundation and Bootstrap can compile them into custom downloads. They essentially take all the hard work out of compiling the components of your web development project.

With developers keen to create the leanest websites possible, with the least amount of JavaScript, and the smallest file sizes, it’s easy to see why this approach is so popular.

One issue that’s arisen with responsive web design is that traditional navigation menus don’t always work the same way they do on a mobile device as they do on a desktop screen; when there isn’t enough screen real estate things can become jumbled. The solution that’s been universally adopted is the mobile menu. It’s an icon of three lines stacked vertically, as shown in the top-right of the figure below, that represents an expandable menu, only available when the icon is tapped. The menu contents then appear as an overlay on top of the site’s content.

Figure 1.45. A Foundation menu on a desktop screen

The menu shown in Figure 1.45 is how the menu in Foundation looks on the desktop. On a mobile device, such as a phone or a tablet, the menu collapses, until you interact with it like in the examples shown in Figure 1.46.

Figure 1.46. A Foundation menu on a mobile display

Application: Knoxville Reflexology Group

Often, much of what we do as designers is subconscious. We can usually tell you on a choice-by-choice basis why we made specific decisions, but it doesn’t come naturally to verbalize the procedures we follow. Sometimes the best way to explain how to apply graphic design principles is by walking through the design process of an actual client website.

Enter: Knoxville Reflexology, an actual web-design project I was involved in for a real client. Knoxville Reflexology Group (KRG) is a group of reflexologists and massage therapists that brings their disciplines and specialities together to create a unified, full-service health, body-cleansing, and massage-therapy operation. The owner, Carrie Wagner, had no design knowledge or technical skills, but needed a site that her coworkers could manage, so she hired someone local who was somewhat familiar with WordPress. A theme was chosen, and pages were made. As the site grew, more and more plugins were added to add more functionality, and the site was crammed full of information. The site, shown in Figure 1.47 became disorganized and outdated. Carrie wanted to be able to relay information to her new and prospective clients, and to cater to higher-end clients. To this end she needed an updated and better organized site with a more streamlined look.

Figure 1.47. The old Knoxville Reflexology Site

Carrie recognised that the site needed a complete overhaul, and even had a vision for its redesign: this included adding videos and social media interaction. G Squared Studios was glad to take on the project, and the process was soon underway.

Getting Started

Usually, clients have specific ideas about what their site should look like and how it should work. Depending on the client, these preconceptions can either help or hinder the design process—more often, the latter. However, on this project, G Squared Studios was given free rein to completely redesign and rebrand the site. It was important to not only understand how the website worked, but who the Knoxville Reflexology visitors were and why they were there. Before design could start, G Squared Studios also went through a discovery phase to find out what Carrie’s short-term and long-term goals were. After all, the redesigned site not only had to accommodate her current goals and needs, but would also have to contain flexibility to enable content to be added in the future. It was also important to understand how visitors navigated the site—a process called user testing.

The questions asked during this session concerned Carrie’s business benefits from her site, and what she was trying to do with incoming visitors. During this session, we discovered that her goal was to build a mailing list of visitors to her site—visitors who were mainly local and regional, and who needed to find out more information about KRG’s services. We also learned that sells products in her shop, and is an affiliate with several natural health product companies.

One of the most important things a web designer does is to organize and group like information. This is an essential part of usability because, if a visitor can’t find something in a logical place, it makes the site unpleasant to visit. We web designers don’t simply keep all of this information in our heads; we have tools available to help us organize content. There isn’t a single best method for organizing the information found on a website.

Many designers and developers have their own way or organizing information. Some use sticky notes, while others use methods such as artboards, storyboards, etc. I tend to make lists and group content together. I also use mind-mapping software, which helps to create a central idea and move out from there. Here I organize pages and group everything together. This helps me get a sense of how the site will flow, with the main content and page structure all laid out. Then, I can decide which areas may need extra attention to ensure a varied, but unified layout.

Figure 1.48. Sticky-note information architecture

Once I have organized all of the data I’ve received and analyzed, I create a mock-up of the general layout of the home page. Some designers and developers use Adobe Illustrator or Photoshop, and others use mock-up tools like Balsamiq to create their basic mock-ups. From the information I gathered, I created a mock-up, as shown in the figure below.

Figure 1.49. Proposed home page wireframe for KRG

Notice that there are no colors, no real images, and no actual HTML elements in this example. The goal of a wireframe is simply to establish the layout structure and the positioning of elements. In a good design, users “recognize each page as belonging to the site. That doesn’t necessarily mean that the layout of each page has to be exactly the same. In fact, it’s good to work in some contrast between the home page and other pages in the site. As I created the wireframes for the rest of the site, I “spiced up” the process by planning alternate layouts for some sections, such as the Blog section shown in Figure 1.50.

Figure 1.50. Wireframe for the Blog Page of KRG

The Blog page has a similar appearance, but the layout is completely different. Keeping elements such as the header and the sidebar is fine, but the layout of the blog post area has to be different. Dividing the post content into multiple columns, like those found on the home page, would make the post text difficult to read. Unifying these two columns into one gives the text plenty of room to breathe. A call-to-action for an email sign-up is located at the bottom of the post.

Okay, maybe “spiced things up” is a bit of an overstatement when talking about colorless wireframes, but the design ball has certainly started rolling here. Now that the rough KRG layout is mapped out, it’s time to move on to the next subject: color!

^[1] This question is especially important if this person is going to be your main point of contact.

^[2] Many people use the words “identity” and “branding” interchangeably. Branding is a broad term that describes the process of developing an awareness of a company, product, or service. The branding process involves advertising, market research, customer feedback, and much more. Identity is actually a subset of branding in that it deals only with the visual aspects of branding.

^[3] Josef Müller-Brockmann, The Graphic Artist and His Design Problems, Arthur Niggli Ltd, Switzerland, 1961, p 92

^[4] No pun intended.