The following categories and topics are a very brief overview of some of the basic design principles which can be used across any medium. We will talk specifically to web design, as that is the focus of this class. I’ve borrowed links and examples of some of the design principles from various articles/books which I will reference at the bottom.
Leading The Eye
A good designer knows how to lead his audience across his web page to find important information, lead them to fill out a form, or find the navigation quickly. Many tools are used to help “lead” the viewer through the web page. The idea is that the eye will naturally flow from one point to another. When you view this website, where do you look first? How about Second? Etc. One of the quickest ways to catch attention is by using color.
Color
There are 3 basic Color Schemes in which we will overview lightly. Like most things design, a single color scheme, a combination of two, or two separate color schemes can work. Use whatever you like or is visually appealing to you. There are no “set” rules, just guidelines right?
Analogous Color
Take a look at the Color Wheel below.
Color Wheel
The first thing we notice is that color are made up of Red, Green, and Blue. If we draw a Triangle between them, which our picture so nicely has, we can then create our Analogous Color Set. It is simply colors that are adjacent to each other on the Color Wheel in between two points of the Triangle. For example, the Red to Yellow Secondary and Tertiary colors are Analogous.
A Great example of a website using this type of color scheme is Gorilla Glue! Notice how they use Analgous colors to blend their entire website together which an occasional accent color to add Pizazz.
Complementary Color
A color scheme that utilizes complementary colors use colors that are opposite each other on the Color Wheel. What is opposite Red on the Wheel? Ring a bell? Ring a Christmas Bell? These work well together because they complement each other. Check out these website which utilize Complementary Color Schemes: UFL.edu and Panera Bread (Two different complementary sets)
Monochromatic Color
When you take one single color say (RED) and iether add black or white, you get a Monochromatic Color Scheme. Adding white to a color produces what are called “Tints” of that color. Adding Black to that same color produces what are known as “Shades.” Target’s website is a great example of a monochromatic scheme. Red is their color and they use it pretty much exclusively with tints and shades of Red.
The two awesome resources to help you in creating your color schemes are Adobe KULER and a free Color Scheme Generator. Go play with them, as you can do searches by keyword to find schemes around say a “summer” theme. They also support downloading of the schemes for quick and easy import into Adobe Photoshop.
Contrast
If your like me, then when you think of Contrast you think of color. But contrast can really be anything that is opposite to that of which it is being compared. It could be color, say black and white. It could be size say:
BIG
or
small
It could be typography, orientation, really anything that is opposite. Say a photograph of a baby sitting in a cemetery. That would be highly “contrastful” — +1 for the made up word. A baby represents birth and life, while a cemetery death. They are in contrast. How many different examples of contrast are seen in this website? Another Example Here
Size
In general things that are bigger demand more attention than things that are smaller as we saw in our contrast example. Web Design From Scratch has some new trends and tip for using Size in the “Web 2.0″ design realm.
Proximity
What do you notice about the following picture?
The first two lines seem to “go together” because they are in close proximity, or are near each other in relation to the space around them. The second set of lines also seem to be a group. This is the principle of proximity. Items that are close in nature imply some sort of relationship. For a nice overview of this and other principles of design see this link.
Repetition
The idea of repetition is to repeat objects. The idea of repetition is to repeat objects. Got it? Repetition can be used through color, images, logos, sounds or “jingles” that are repeated throughout your design. Ensure you repeat elements in you brochure, business cards, letterheads, website etc. Repetition is a powerful tool for creating a brand image or brand name that can be recognized everywhere. Think Apple Computers, how do they use repetition in their corporate image?
Alignment & Spacing
Two big takeaways when dealing with alignment and spacing to make sure you elements contain Padding and White Space.
Padding is the invisible “cushion” around an element or picture. It forces other elements to no bump up against it. Keeping the same padding on your elements will make for easy alignment of objects. You don’t want one photograph with a 5px padding, and another later on with a 10px padding.
White space isn’t necessarily white. It is simply the “empty space” that is used in a web design layout. Marius Roosendaal uses white space pretty effectively in his design.
Remember that when choosing left, center, right, or justify aligning of paragraphs keep in mind how wide the paragraph space will be. If it is to wide your letters will stretch and have to much white space in between them to even be readable should you choose to justify your text!
Navigation
Two big questions are asked by web users when they are on your site in regards to navigation
- Where can I go?
- Where am I now?
Be sure and give a good solid navigation at the top. Moki Systems (whom I used to work for) uses a nice top navigation along with a side-navigation which also sub-divides into further sections. A nice arrow and highlighted state indicates which page you are currently on.
On larger corporate websites, or in Shopping Cart websites you may want to employ what is known as a “Breadcrumb.” It is simply a navigation bar which shows where in the hierarchy of pages in a website you currently are in. The Yahoo Directory utilizes these very extensively.
A few additional points
Keep in mind that Web Browsers can resize. You’ll need to decide if you want your website to have a fixed width, or stretch with the browser as it stretches (known as fluid).
Remember that you only have a couple of fonts to choose from for you typography. If you choose a font for your website, and the person viewing your website doesn’t have that font on their computer, they will see a default font. You can only use fancy fonts in images or graphics.
If you have a link on your website, make sure it is underlined! Don’t underline any text that is not a link. I Love Typography has plenty of information about text and typography.
When all else fails, consult the Web Standards GURUS at W3.org.
CRAP
The easiest to remember abbreviation for web design is CRAP. Make sure your website is CRAP! 
- Contrast
- Repition
- Alignment
- Proximity
