Design and Layout

Design
Even if you are creating only a simple Website, you should begin by sketching out the layout of your site. Decide where you want titles, images, navigation buttons, and text to appear on the screen.

Most web sites have the same design characteristics on every page. For example, Website titles are usually in the top left or top center, while navigation buttons usually appear vertically on the left or horizontally below the title. In addition to sketching out a layout for each page, you should determine how many pages you will need for the Website. Thorough planning is essential to good web design.

In order to get your text, navigation buttons, and images to appear where you want them on the Web page; you need to use tables to format content of each page. Everything on each page of your Website should fit within one large table.

Using your layout sketches, you can determine what your table needs to look like. Figure 5 shows a simple layout sketch. Figure 6 shows the same layout, with table borders drawn in. Figure 7 shows how the table can be implemented in Dreamweaver.

Now, simply create a table in Dreamweaver that has the same characteristics as the borders drawn on the page. The next chapter will teach you how to insert your table.

Website Design Principles
Many webmasters wish they could design great looking sites, but simply can’t. They’ve given it a few attempts, but either due to lack of application knowledge (with apps like photoshop), or lack of “artistic talent”, they give up. And that’s fine, because it keeps the market for design healthy! ;) But no, it really doesn’t have to be like that. If you’re an aspiring designer, there are a few key principles that I want to outline first. They are what helped me through my path to becoming a good designer, and they should help you too if you follow them.

• It’s not the 90’s anymore

When the early pioneers of the internet age began designing websites in the 90’s, they became fixated on the filters offered by programs like Photoshop. Lens flares, bevels, drop shadows, glows, were used to their fullest extent. You need to avoid abusing these filters, or I should say, you need to avoid misusing these filters. There are instances in which these filters can be a great benefit, but you have to know how to use them properly and not just slap them on anything and everything.

• Usability, Not clutter

Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.

• Text Do's and Dont's

One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. I was one of those idiots because I thought it “looked” cool. But for all practical purposes, I always scorn people for using size 10px or less for fonts. Never go below 11px font - and even 11px should only be used sparingly. Size 14px (which is what this is) seems most ideal for paragraph’s of text. You can get away with 12px of course, but as screen resolutions are increasing, 12px suddenly becomes smaller.

Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.

• Colors and Contrast

The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple.

The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and fluorescent green/yellow for a site about health - it simply doesn’t make sense and I think that’s a given. :)

Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white - err! That’s very annoying and hard to read.

• Design around the purpose of the site

A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are. Whether the site is based around selling memberships, or just general ad-based content - the design should cater most effectively to the purpose. And that’s what I will be demonstrating in the tutorial proceeding this page.

• Learn by example

A common mistake for the aspiring designer is thinking they should be able to open up photoshop, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

Layout
Dreamweaver gives you several different ways to create and control your web page layout. One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use, however, since they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the traditional pitfalls of using tables. For example, you can easily draw layout cells on your page, then move the cells where you want them. Your layout can have a fixed width, or it can automatically stretch to the full width of the browser window. When you switch back to Standard view, your page will contain table cells and columns that correspond to the layout cells you placed on the page.

The following picture illustrates a completed version of a layout for a project index page in Layout view:

The layout cells and tables will eventually hold a banner graphic, a navigation bar, a Macromedia Flash movie, and other assets.

When you draw a layout cell that isn't inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table. You can lay out your page using several layout cells within one layout table—which is the most common approach to web-page layout—or you can use multiple layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren't affected by changes in other sections. In this tutorial, you will use multiple layout tables to design the index page for the project.