Workfile for this lesson(PSD) - Your Assignment is to download this CS3 PSD file, open it, and follow the steps to make the neccessary changes to cleanup this webpage to give it unity in it's design. Time allowed- 4 class periods


To do this you will follow the steps:

Amateur Design - The Lecture Part!

One of the best ways to learn about good design is to take a bad design and rework it.  Let’s take a look at our starting point.

The goal of this project is to create a design using only the four design principles of contrast, repetition, alignment, and proximity. C.R.A.P as they are sometimes ironically known.

You can see the design elements have been placed somewhat randomly. There is a header, footer, and two columns, but the elements within aren’t placed with a purpose. Text is centered. Elements fall where they will. Overall the design is very amateur.











PART 1: Alignment


Improved Alignment

Let’s improve things by aligning the different design elements.

While it’s hardly a great design, look how much better it looks simply through alignment. It’s already looking like there’s some purpose to things. There’s now a plan where before there was randomness.











Here’s another look at the above image with some vertical and horizontal lines added to highlight the alignment.












Not only is the main copy aligned with itself, but notice how its left edge aligns with the right edge of the logo and the left edge of the footer navigation.

The left column is aligned not with the logo itself, but with a visual element within the logo graphic.

The top of each column is now aligned horizontally as are the different elements in the header, though I’ve now switched the contact info from being left aligned to a center alignment.

You certainly could have chosen a different alignment for any or all of the design elements. There is no absolute right or wrong here. The idea is to place things with a purpose. Connect your design elements to each other, though understand it’s ok to have something that breaks the alignment.














Logo Alignment

Let’s take a look at the logo itself and see how we’ve aligned things within this single design element.







The original logo placed the text without much thought. The second aligns the company name and the tagline and attempts to create some kind of alignment with the lines in the graphic. The longer line of the text does help reinforce the horizontal lines in the graphic, though that’s an example of repetition, which we’ll get to next time.


PART 2: Repetition


 The difference between our starting and end points won’t be as dramatic as they were last time, but you should still see an improvement to the design by adding some repetitive elements. Next time when we talk about contrast the dramatic should reappear.













Alignment: Where we’ve been
Let’s start by taking a look at where we left off last time.   Our design elements are aligned, but overall our design is still pretty bland. Elements are only connected to each other by lining them up. Let’s add some other visual cues to connect a few of the elements to each other.


Setting up the logo for repetition




First we’ll revisit alignment a bit as I’ve reworked the header area slightly. The logo above is where we left off in the last post. Below is a slightly reworked logo.





We’ve added a horizontal line between the company name and tagline and also changed the font of the tagline to Apple Chancery from the Verdana we’ve been using everywhere else.

 Also note the contact info and search box have now been realigned so the center of each should run through the center of the new horizontal line.

The main reason for altering the logo was to provide a few things we can now repeat throughout the page.


Repeating color and font

Here’s our first attempt at adding some repeating elements. You can see that I’ve repeated the color throughout the h2 level headings. The color is the same blue used in the logo.

 I’ve also used the new font from the tagline for each of these headings. Each of the headings is now clearly the same, though they are also clearly different from the h1 heading at the top of the page.

Now look to the sidebar on the left. I’ve also used the same blue for the links in the navigation and used the same font for the Navigation heading, though this time without the color change. Ideally this would still flag Navigation as a heading while showing it’s different than the h2 headings in the main copy.















Repeating an aesthetic theme

Let’s take the repetition a little further. This last example adds thick horizontal lines below each of the h2 headings. Again we’re using something taken from the logo to reinforce the repetition. Notice too how the lines end just past the text as in the logo, for another repeating touch. Ideally your eye will first fall on the logo and then noticing the repeating elements be drawn right into the page content.

In the sidebar we’ve also added some thinner lines to separate the links. Once again we’re repeating the horizontal line theme and giving another visual clue that each of the links in the sidebar are related.

In our case the strong horizontal lines might be communicating a steady and consistent company. Think of the steady horizon. The choice of blue is further communicating feelings of trust and consistency.















Compare the first and last images on the previous page to see how repetition adds to the design. Perhaps not as dramatic as when we first aligned things, but still you can see a more finished look begin to appear.

When it comes to repeating elements look at your page and think about which design elements should look the same. Page headings are a natural here, but look for other elements that share some commonality and then give your visitors visual clues that they’re connected.

Be careful about overdoing things. You don’t need to repeat everything. A little repetition will show various parts of your page as being similar and begin to add some overall themes to your design.

Next time we’ll consider Contrast, which will be a more dramatic change and have our design looking much more finished


Design Basics: Contrast To Stand Apart And Call Attention

Last week our discussion revolved around repetition as a basic design principle. We saw how adding repetitive elements highlights similarity and how repetition begins to create themes within your design. Today we talk about contrast.
Contrast adds variety. It adds interest and draws the eye. Contrast helps to clearly distinguish one design element from another. Where repetition reinforces similarities, contrast accentuates differences.

Where we’ve been

Once again let’s start with a look at where we left off. Let’s look at this design for a website page to follow how we direct the viewer’s eye to give clarity, dominance, and unity all at once and make these concepts all reinforce the design

Our design elements are aligned and we’ve added some repetition through fonts, colors, and horizontal lines. By default there’s contrast. As soon as we added black text on a white page we created some. Our logo also clearly contrasts with everything else on the page.

Looking further our headings contrast with the main text. The color, font and line we used in the headings are different from the copy. Our navigational links are in blue and have lined borders to set them apart. Now let’s add some more contrast.










Contrast Through Color

Color is one of the most obvious ways to add contrast to any design. At the moment we’re using black, white, and blue. Let’s add more.

You can see I’ve changed the color of the navigation links from blue to pink. Being the only pink elements on the page the links should stand out more.

I’ve also changed the main page heading to be green, made it larger, and added italics and small caps to the font. Your main page heading is ideal for contrast. On most pages it’s the primary element (after your logo) that you want people to notice so make it different from everything else.














Adding contrast to the background

Another way you can use contrast is to make it clear that different sections of the page are different sections.

In the image above look at the links at the bottom of the page. Are they a continuation of the copy or something else?












Adding contrast to the background

Another way you can use contrast is to make it clear that different sections of the page are different sections.  In the image above look at the links at the bottom of the page. Are they a continuation of the copy or something else?

Now look at our new image at right. It’s clear the links at the bottom of the page are different than the main copy. I’ve further contrasted things by changing to white text and I’ve added italics in part for contrast and in part to repeat the italics of the main page heading.

Our header now also has a contrasting background. You probably weren’t going to confuse it with the main content before, but now there’s no way you would think the two areas are the same. I’ve also added a thin border at the bottom of the header to further contrast it from the white background below.

Contrasting Navigation










Let’s continue by adding a different background to our sidebar.
As with the header and footer the contrasting background on the sidebar makes it obvious that it’s a different section of the layout. It’s clear there are now four distinct sections to the layout.
I’ve used different shades of gray for each, but even were the header, footer, and sidebar all to use the same background, you’d still be able to tell they were different from each other because of the contrasting whitespace between them.
Within the sidebar I’ve further contrasted the background behind the navigational links. You’d probably change the background when you hover over a link, and maybe even change the link color to further enhance the contrast.

Contrast in calls to action














 Every web page should have a goal. There should be some action you want the visitor to take. Contrast should be used to guide them to take that action.
Contrast in calls to action

Every web page should have a goal. There should be some action you want the visitor to take. Contrast should be used to guide them to take that action.

Here I’m pretending this page is meant to get you to buy something. Granted I’m tossing this in at the end, but I wanted to show how contrast can increase conversions.

Notice the buy now button. It stands apart from the rest of the page in it’s shape and size. I’ve also added some effects like a drop shadow and a gradient. The button also has a thin border around it and the text color contrasts with the button color

I could have used a different color, but instead decided to use the pink from our navigational links as a repetitive element to reinforce the idea that both are to be clicked.

If you apply the squint test while looking at the image above, our call-to-action button will still stand out. You’d be hard pressed to look at this page and not notice it.


Contrast is all about highlighting differences. We’ve used contrast here to make it clear that different page elements are in fact different from each other.

We’ve also used contrast as a design element to call attention to our primary goal for the page.
Mostly color has been used here, but there are many ways to contrast two elements
•Color •Shape •Size •Font •Texture
just to name a few. While traveling the web try to notice some of the ways various design elements contrast with each other. Also understand that the bigger you go with your contrast the better.

Two shades of blue contrast less than one blue and one red. Text set at 12px will only contrast so much with text set at 14px. The more you go with your contrast the more two elements will stand apart. 



Design Basics: Proximity To Know What Belongs With What

So far in this series we’ve taken an amateur design and improved it in several ways. We aligned design elements to provide a sense of order, we used repetition to create visual themes, and last week we used contrast to differentiate elements and call attention to them. Today we’ll talk about the last of the four basic design principles, proximity.

Proximity is about grouping related items. It lets you know at a glance that one sentence describes an image, while another sentence has nothing to do with that image. Proximity uses space to show similarity between













 As we have throughout this series let’s begin by looking back at where we left off.
We’ve come a long way already. If you look at the image above it’s not a half bad design, especially when you consider we haven’t added anything that could be called visual eye candy. We’ve used a few simple principles of design to come up with a web page that clearly has a purpose.

You can tell the difference between major design elements. We know where the header ends and the content begins. We’re even being called to take a specific action on the page, which is clear at a glance.

We’re almost there. Now let’s use the principle of proximity to further refine our design. The changes won’t be as dramatic as last time, but they will make for a more usable design.


Proximity in the Sidebar

I mentioned proximity is the concept of grouping related things together. We already have a fair amount of that going on. If you look at the image above it’s pretty clear that the content is grouped together and the navigation is grouped together and that each group is distinct from the other. We know where the header and footer begin and end and even have clues about what belongs together within each section of the design.

Still there are areas of the design where you might question if certain elements belong together. Look at the navigation in the sidebar. You might have noticed our navigation shows a series of links followed by a space and then by another series of links.

Do all those links go together? Is that second series of links really a set of links? They look the same, but why the gap?

Let’s fix things so the navigation is clearer. I’m going to say the links do belong to different groups and introduce another heading.












 Proximity in the Sidebar




To emphasize things a little more I’ve also added a little more space between the product links and the text below. You likely weren’t going to confuse the text for links, but imagine it were a list instead of a paragraph. The extra space helps distinguish the that the text and links are not the same.
















Proximity in the Main Content
Our sidebar is looking good, but what about our main content. Can we improve things there through the principle of proximity? I’m sure you know the question is rhetorical.

One thing we can do is something we just did in the sidebar. I mentioned how the Products heading is closer to the links it describes than it is to the links grouped under services. The headings and paragraphs in the content are currently evenly spaced.

Sure you’d guess that the heading describes the text below, but it doesn’t have to. What if were meant as a pull quote or if the heading was really the caption for an image. In those cases the spacing would play a large role in showing what goes with what.


I’ve done a few things in the image at right. First I’ve changed the spacing between the headings and the paragraphs. Headings now sit closer to the paragraph below than above. Again you would likely have understood which paragraph the heading referred to, but it’s much more obvious now.

I’ve added one more change to the last two content sections. Compare how the two bulleted lists look here as they did at the start. Earlier they sat one under another in the same heading/text relationship as the paragraphs above.

Were the lists describing something similar? Was it simply coincidence that they fell one after the other? Consider how they look now and what the grouping tells us. Each list has it’s own heading so they are somewhat different. Yet both fall under the same major heading indicating that they are somehow related too.

Perhaps each list describes the benefits of your business. Maybe the list on the left is talking about your services and the one on the right is talking about your products. The major heading then might be Benefits and the lesser headings might be Services and Products. A lot of information is communicated just by the way we’ve changed how the lists are grouped together.

While not as dramatic as contrast or alignment, proximity still adds visual cues to what’s happening in your design. Of all the four basic principles, I think proximity is the one that gets missed the most often. It’s more subtle in many cases, but no less important.

Think about where we started when this series began and what we’ve accomplished. Our initial design was amateur. It was barely a design and yet sadly you’ve probably come across many web pages and websites that has a similar design.

Without having to add much in the way of visual eye candy, we arrived at a professional design by applying a few simple principles. The only images we’ve used are for the call to action button and in the logo and each could be replaced by a non image design element easily enough. Is this design great? Well, no, but it has crossed from amateur into professional which is what we set out to do. I hope you enjoyed this series and see how powerful a few basic principles can be.

Now that you know what these 4 basic design principles are you should be able to see them in practice as you travel around the web. Take note of them when you do. Notice how one site uses alignment and how another uses repetition. Watch how contrast calls out different design elements and look for how proximity is used to make a design more understandable and usable.