Website Design – Planning Your Website

The very first thing you want to do when starting to making your own website is to ask yourself “what’s the purpose of this website?”. Generally speaking, there are two types of websites: a personal website, and a business/commercial website. Personal websites usually don’t make any money, and you can get a free host (www.geocities.com or www.angelfire.com) if you’re making a personal website. On the other hand, if you’re planning to promote your business or create your own business by making a website, I highly recommend that you register your own .com name. Your site will look a lot more professional.

When you have a good idea on what kind of content your website will have, you might want to draw a very rough layout of your site on a piece of paper. This technique will make it easier to design your real site layout later on. Write down all possible topics your website might have and think of some “keywords” that will separate your site on different general topics, this will make it easier to make your site’s navigation.

Designing the site – Making your graphics

I first design my whole website in Photoshop, this way you can make a very unique design of your website. However, when designing your site you must keep in mind different resolution sizes and consider limiting your graphic widths. So make a file of about 760 wide (actual screen size at 800X600 resolution) so that you don’t get out of boundaries. I’m not going to show a step by step tutorial on how to actually design a website in Photoshop, it’s beyond the topic, but here are some important things you should consider paying a lot of attention to site logo, navigation bar, backgrounds, and borders.

Also try to stay with at max 4 colors, so that your design looks consistent and professional. If you’re considering making rollover buttons for your navigation bars, make both versions of the buttons right away (the on and off conditions) on different layers. Also, make sure you have all your graphics on different layers so that you can easily modify them later.

Optimizing your Images

After you’re done designing the whole site in Photoshop, go ahead and optimize and save all the graphics separately and put them in one folder called Images. Actually, Photoshop optimizes graphics for you, so your job is to make the size as small as possible while maintaining the best quality. Simply adjust the quality slider.In some cases saving your files as .gif rather than .jpg will yield higher quality yet smaller size, especially for the smaller files with fewer colors. I suggest you try both formats .jpg and .gif.

There is a great technique used by many website designers (including me 😉 is what I call “stretching similar patterns/backgrounds”. For example, see that gradient stretched at the top and the bottom of this screen? Try right-clicking on it and saving it somewhere on your computer. After you save it, go ahead and open it. So what do you see? A very small image which is only 1pixel wide! This technique saves a lot of loading time for your website, simply save your similar patterns with 1pixel wide, you will be able to stretch it out using background stretching in DreamWeaver.

Making your site live

The final step of the site design is to put all your website graphics in DreamWeaver/HTML format. I first start by going to the Layout View, in DreamWeaver, and draw one big table of 760px wide and then center it. (Read “Making a simple website using DreamWeaver”) (Note: I think this is the best and the easiest way to design a nice looking website for all resolutions). Another technique is to make your middle table auto stretchable so that your website can fill up the whole screen. However, I do not recommend using this technique because your website becomes less flexible. By designing your site in 760px wide table you will be sure that you won’t get out of boundaries of any resolution above or equal to 800X600 and you can place your graphics and content where ever you want at the same time.