Planning your Web site design (for website owners and designers)
When you begin thinking about creating a Web site, you should follow a series of planning steps to make sure your site is successful. Even if you are just creating a personal home page that only friends and family will see, it can still be to your advantage to plan the site carefully in order to make sure everyone will be able to use it easily.

- Creating goals for your site
- Organizing the site structure
- Creating your design look
- Designing the navigation scheme
- Planning and gathering your assets

Creating goals for your site - (Planning a Website Design)
Deciding what your site goals are should be the first step you take when creating a Web site. Ask yourself, or your client, about what you hope to accomplish by having a Web site. Write down your goals so that you remember them as you go through the design process. Goals help you focus and target your Web site to your particular needs.

A Web site that provides news about a specific subject should have a different look and navigation than a Web site that sells products. The complexity of your goals will affect the navigation, the media that you use (Macromedia Flash, Macromedia Director, and so on), and even the look and feel of your site

top

Organizing the site structure - (Planning a Website Design)
Organizing your site carefully from the start can save you frustration and time later on. If you begin creating documents without thinking about where in your folder hierarchy they should go, you may end up with a huge, unwieldy folder full of files, or with related files scattered through a half-dozen similarly named folders.

The usual way to set up a site is to create a folder on your local hard disk that contains all the files for your site (referred to as the local site), and to create and edit documents within that folder. You then copy those files to a Web server when you are ready to publish your site and allow the public to view it. This approach is better than creating and editing files on the live public Web site itself, because it allows you to test changes in the local site before making them publicly viewable. When you're finished, you can upload the local site files and update the entire public site at once.

Break down your site into categories and put related pages in the same folder. For example, your company press releases, contact information, and job postings might all go in one folder, but your online catalog pages might go in a different folder. Use subfolders where necessary. This type of organization will make your site easier to maintain and navigate.

Decide where to put items such as images and sound files. For example, it's convenient to place all your images in one location, so that when you want to insert an image into a page, you know where to find it. Designers sometimes place all of the non-HTML items to be used on a site in a folder called Assets. This folder may contain other folders—for example, an Images folder, a Macromedia Shockwave folder, and a Sound folder. Or you might have a separate Assets folder for each group of related pages on your site, if there aren't many assets shared among such groups.

top

Creating your design look - (Planning a Website Design)
You can save a lot of time later if you plan your design and layout before you begin working in Dreamweaver. You can simply create a mock-up drawing on paper of how you want the site layout to look and then follow it as you build your site; or you can create a composite drawing of your site using software such as Macromedia FreeHand or Macromedia Fireworks.

Maintaining consistency in your page layout and design helps to ensure a good user experience. The user should be able to click through the pages in your site without getting confused. If all the pages have a different look, or the navigation is in a different place on each page, it might frustrate the user. Make sure your site provides a consistent look for your user.

top

Designing the navigation scheme - (Planning a Website Design)
As you design your site, think about the experience you want your visitors to have. Think about how a visitor to your site will be able to move from one area to another. Navigation should be consistent throughout your site. If you place a navigation bar across the top of your home page, try to keep it there for all the linked pages. Consider the following points:

Visitors should know where they are in your site and how to return to your top-level page.
Search features and indexes make it easier for visitors to find information they are looking for.
Feedback features provide a way for visitors to contact the Webmaster (if appropriate) if something is wrong with the site, and to contact other relevant people associated with the company or the site.

top

If you are using images and graphics from a clip-art site or someone else is creating them, make sure you collect them and put them in a folder on your site. If you are creating the assets yourself, make sure you create them all before you start development, including any images you need if you are using roll-overs. Then organize your assets so you can access them easily while creating your site.

Use templates if many of your pages will use the same layout. Plan and design a template for that layout, and then you can create new pages based on that template. If you decide to change the layout for all the pages, you can simply change the template.

Note: There are certain restrictions on what changes you can make to documents that are based on templates. Templates are best used in collaborative environments, to ensure that everyone is using the same page layout. Library items may provide more flexibility for use outside of collaborative environments.

Use library items if you know that a certain image or other content will appear on many pages throughout your site; design that content ahead of time and make it a library item. Then if you change that item later, the updated version appears on all pages that use it.

top

Author - Emily Ricketts, is a technical writer in the Dreamweaver documentation team.

Get a Custom Quote