Web Site Building · Planning · Design Concept 2

What this is about:

The idea of building a web site is not new. The idea of wanting one is far from rare. To start with a good site on the first try, planning is essential. Unless you have plenty of time to design a site over and over, identify what needs to be done to make it right and save as much time (and lost hair) as possible.

The Design and Templates

by Maggi Norris

Creating Your Design You now have an idea what you want on your site, where you want it to be, and how you want it to work. It is time to create the actual design using all this information. A friend taught me an important shortcut for getting the design right the first time. The first thing I do is draw a crude outline on paper. Then I use an imaging program to render that drawing on the computer. I use the image to make the first of two templates that will help put the final touches on a design. In your imaging program construct a new file the size of an open browser window. I use this new file to represent the area that will be my page in a browser and it becomes my Image Template.

Make the background color of the template the same color you want on your site. Place your images on the template the same way you would want them on the page. Place your text and any other objects you would want on the model. The result will be your main Image Template. It should look like a screenshot of a web page. You can use the template to build the actual images that will go on your page. Simply crop them from the template. Using your Image Template will help you see how to set the spacing on tables and other HTML basics as you make your next template.

After I finish the Image Template it's time to create the HTML Template that will help me layout each page of the site. The first thing I do is to put the colors, fonts, head tags, logo and tables in place. Then I build the navigation system into the code. I name this page Template.html and use it to create all the other pages.

After this, you can copy and paste the content from a text or document file into the HTML Template and once you name it, you have a new page. Placement of images and objects may require adjustments to the basic template, but most of the work will already be done.

I hope this helps you create your own pages and makes the job as easy as possible. No matter how you build your pages, remember to have fun. It is important to like what you do; others will too.



Maggi Norris is the webmistress of seven award winning sites, including her own Ask Nem5 — Nemesis World Index, where you can find original literature displayed with original graphics and photography, web awards and more. Free resources for the new and advanced webmaster include: email accounts, web and desktop graphics for personal sites, several short tutorials, email greeting cards and an HTML help forum with a web design software review.

Return to part 1 of Maggi Norris' Design Concept Planning tutorial.

go to the next page