WebHelperMagazine.com

Welcome to WebHelperMagazine.com. Please consider signing up for our RSS feed. Check out our job board, and be sure to leave comments -- we post your name and a link to your site as a way to thank you for joining the WHMag conversation.

by Scott Frangos, Managing Editor for WebHelperMagazine.com

This article presents a discussion of Website Design Concepts, and practical exercises with the goal of developing a site framework representing a well designed website.

Concept 1: General Design Principles/BenchMarking…

Good design is a combination of science and art. This is particularly true when you use web programming to design a website online. Here are some fundamentals.

• Proximity: “If items are related to each other, group them into closer proxiity. Separate items that are not directly related to each other.”
• Alignment: Be conscious about every element you place on the page — keep the page unified, aligning every object with an edge of some other object.
• Repetition: Repetition is a stronger fom of being consistent. Look at the elements you already repeat (bullets, typefaces, lines, colors, etc.), and see if you can make one of these elements stronger and use it as a repetitive element.
• Contrast: Contrast creates interest. You can add contrast many ways including lines, typefaces, colors, spatial relationships, directions, etc.
• Benchmarking: You review the top competitors online for your service or product offering to understand their “graphic identity,” marketing tactics, site mission, and product/service offering. You can also benchmark to review and learn about the general Design Principles discussed here. Review them from a potential customers perspective — not from personal preference, or as a website designer.

Let’s take a look at website design examples, and identify the four Principles discussed here… Alignment, Repetition, Contrast, and Proximity. Click here (Google saved search). Pick one or two sites you like there and print out the first page. Note the design principles, like Contrast, where you see them appear

Now we’ll Benchmark a site for Medical Journals, traveling over to DogPile.com which searches search engines, and picking the main competitors by noting those sites that appear at the top of searches in more than one main search engine. Click here. Benchmarking is simply comparing competitors sites, and here we are imagining we are publishing a medical journal, and using this search to look at competitors sites. Review a few sites that come up on the search list link, and again make note of the design principles you think are effective. Which did you not like, and why?

Exercise Design Concepts: Review Site…

You pick a website topic (ie. Selling Crafts, Sports Team, Hobby, etc.), or perhaps one you already have built, and follow these steps:

1. Open the review matrix which you will use to review and rate your websites
2. Go to Google or Dogpile and search for competitors or websites that cover your same topic
3. FIll out the Review Matrix for each site, and jot or type any other notes you may have
4. Print out at least the Home Page for each site too, and staple it to your Review page
5. Finish this exercise by reviewing all home pages for competitors with your Review Matrixes to compare and contrast them. Make notes about what you would like to implement at your site.

---

Concept 2: Begin with the End in Mind… Your Site BluePrint

You wouldn’t start work on a house without a blueprint. Successful Hollywood Directors do not begin filming a movie until a complete “story board” is completed. In the same way, you will be much more successful in accomplishing your creative and design goals if you take time to plan your site up front.

• Site Mission: Begin by writing a short (1-3 sentences) mission for your website, written to state how your customer/visitors will be served by your website. This can be for a brand new website, or for one you are already building or managing.
• Site Map: A site map is a simple diagram showing site “content” areas in boxes, with lines connecting the boxes to show a bit about your linking structure. It may be used to keep all of the web team “on the same page.”
• Page Structure Sketch: You make a quick sketch showing the location of buttons, table and column structure, and positions for banners, logos and graphics. This is your preliminary idea of a layout template for your website, and relates to the structure of all pages at your site, while the Site Map simply shows content areas to include.

Exercise: Create a Mission, Site Map, with Rough Sketch…

Proceed with the website topic you have been considering, and using a blank sheet of paper, follow these steps (refer to illustration at right as a guide):

1. Write a 1-3 sentence site mission at the top of the page. You can begin by typing this if you wish, then printing it out and finishing the assignment by hand.
2. In the middle part of the page, draw boxes for the main site content areas to make your Site Map beneath your mission statement, and connect them with lines to show linking structure.
3. At bottom of page, or on the back, draw a rectangle representing the size of a page, and draw in buttons, banners, headlines, graphics, and any other repeating layout structure including tables, and columns for text.

Click the example at right to see how this might look. I recommend you do this for every website you design to keep you focused on key goals and creative considerations. This one-page document can also help you keep other team members on track when you work together to begin building a website.

---

Concept 3: Smart Layout…

In order to stay with our basic design principles of Proximity, Alignment, Repetition, and Contrast, one of the strongest methods you can use is the idea of a “grid” to lay out your pages. The term “grid” comes from publication layout techniques where non-reproductive light blue lines were used to line up page elements like photos. In HTML web page design, a common way to accomplish this is using tables.

• Tables are a key to good web page design, though as CSS becomes a mature and accepted (works well in all current browsers) language, designers will migrate toward “table-less” layouts using CSS
• Many pages use tables with no borders (unseen by site visitors) to control the placement of graphic elements on the page
• You can move more quickly through a website building project if you create a general template including tables for page structure, then use it to build each new page

Exercise: Grid Structure using CSS..

This exercise is designed to help you experiment with CSS for page structure using a free demo ersion of popular Coffee Cup software, which you can also download and try free at home for 30 days. Download CoffeeCup HTML Editor - Click Here.

After downloading and installing the trial version of Coffee Cup, open it and use it to open a free template from CSS Tinderbox.com, and examine how css is used to create columns.
Finally, do a Google search on “Tableless layout, CSS” (click here for a saved search), and read about the way web page layout is evolving.

---

Typography…

Typography is one of the most important elements of good design, since it is a primary way your messages are communicated.

• Many inexperienced web designers fail to consider and use all the type options available to them.
• Size: Remember that in addtion to Headlines, and Body Text, you might use other sizes of type to make a lively page.
• Weight: This refers to the thickness of strokes of type — you might deploy thicker type for banners, and special navigation elements.
• Direction: Can you curve the type, or run it vertically — and how does that choice support the rest of your design?
• Color: Which of the colors in your site color scheme (see next topic) are appropriate for the different subheadings, headings, banners and icons?

Exercise 4: Setting Type…

We can use a free program to create some elements that contain type (headings, banners, buttons) for your website. Go to GifWorks.com. If you have an animation program, you can use it.

1. Use can this program to practise making a large banner for the top of your website.
2. Also, ractice designing a logo for your company.
3. Save both of your files to the “images” directory/folder in which your web page(s) are stored.

Even if you are a busy webmaster, taking time out to practice and integrate the design principles we have been discussing will pay off for you.

---

Concept 5: Color Theory/Color Schemes…

A good color scheme — 3-5 compatible colors — are essential in the design of a professional website.

• Select a color scheme to address the theme, and corporate identity of your website
• Use color theory to make color selections
• Come up with a “palette” of 3-5 compatible colors for your site. You can use Complementary -1 & 7, Split-Complementary -1 & 6 & 8, Triad -1 & 5 & 9, or Analogous -12 & 1 & 2 color schemes
• The background and text colors have to contrast so it will be easy to read your site copy

NOTE: When you are under a deadline and have to work quickly, beginning with proven color schemes will help you create a successful website efficiently.

Optional Exercise 5: Color…

Use a color scheme program along with the Background Magic program (free version) to create a site background and buttons that coordinate with the color scheme you have selected. If you already own Photoshop or another graphic editing program, you may use it instead of Background Magic.

Get Background Magic here. Get Color Schemer Program here.

1. We’ll use the Color Schemer program to determine a site color scheme keeping in mind which color will be used for text, and which one will be the background color. Follow the online tutorial for the program here.
2. Use the Background Magic program to make an appropriate background that is in keeping with your color scheme. Save it to your website “images” folder.

NOTE: We always recommend that you save your graphics files inside a folder called “images” which is in the same folder where you save your HTML web pages. This will keep your website files efficiently organized and organized properly to avoid broken links when you upload the folders to a web hosting server.

---

Concept 6: Help the User Navigate…

Good site navigation has to do with Interface Design and is primarily concerned with helping people find their way around your web site.

• Remember the Museum Sign concept when planning navigation — how does a large Museum help people find their way around from room to room, and exhibit to exhibit?
• Use the “two click” rule to make sure no page is more than two clicks from the home page.
• Studies have shown that no more than seven site content areas (buttons on home page) will be retained by the average website visitor
• Form follows function: Your structure will be determined by mission, content, and flow considerations — choose your navigation structure AFTER you consider those points.
• Location & Controls: It is best for the user if your navigation structure is consistent in location and method of control (ie. roll-over button)
• Submenus: You could use JavaScript (take a good class in it) to create a submenu structure for a site with a lot of content areas. A number of sites online offer free JavaScripts you can copy and paste into your HTML. See Javascript.Internet.com (slide-down menu). Compare this free Javascript with a Java Applet program you can purchase here.
• Consider linear flow versus hierarchical flow when selecting a navigation structure. Hierarchical is similar to what is used at Yahoo, while linear is similar to a powerpoint presentation, and may be seen in use at Art Gallery and Photographic sites.

Take a look at this discussion of “Usability Principles” and how they apply to design — test yourself on the quiz there - Click Here.

Exercise 6: Navigation Interface…

Finish creating the navigation structure for your website.

1. Use your graphic program to create the buttons for your website
2. Think about how colors communicate, and also the structure of other graphics (a left border background, for example) contribute to the navigation experience
3. Save the buttons to the “images” folder in the folder you created for your website

---

Concept 7: Site Building Tips…

Thinking about ways to make your production work efficient will help you save time for creativity, and get the job done well.

• Organize your images in a folder named “images”, inside the folder that contains your HTML pages is a common practice
• Keeping all pages and graphics in their own set of folders, then uploading that same directory structure to a web hosting server will ensure that all your links will work fine
• You will save a lot of time if you first create a page template with common items in place, then duplicate it for each new page and simply add specific content for that page
• On a large site, you can group pages by site content categories, and store them in separate directories (folders), though it will change the URL for the page
• Creating and using an external CSS stylesheet with preset styles for headings, text, tables, and other elements will save a lot of valuable editing time when changes are required. You would only make one change in the CSS stylesheet to change a headline from red to blue, for example, rather than going to each separate page and making the change when you haven’t set up an external stylesheet.
• It helps to name your pages based on page content (about.html, contact.html, etc.)

Exercise 7: Using a “template” to create your pages quickly…

This exercise will help you learn a quick and efficient way to develop a website.

1. Create an images folder inside the folder for your website, and move all the graphics files you created earlier into it, if they are not there already.
2. Using the template you created earlier, add the background, buttons, logo, and headline banners, you saved in the images folder, to the HTML page.
3. Once you have this template set-up, duplicate it five times, so that you have six total HTML pages all named differently and saved in your website folder. Give each a simple name that reflects their content, like “about.html,” “services.html”, and “contact.html”.

---

Copyright 2005 2007, by Scott Frangos. All rights reserved.