5 Rules For A Good Web Design

Designing a theme or a website can be a nightmare if done in a haste. I am currently trying to develop a good theme for Techtracer and found out that designing is typing in some HTML and CSS to bring out what you are visualizing. Web Design should follow some rules and it requires proper planning to do so. I have taken down some rules that I realized they should have been followed while I began designing the new theme. I would like to share those with you.

Rule #1 : Lay out the Blueprint First

This is a must. Do not start your web design just on the assumption of a that you have a design in mind and you would want to see it in reality. Believe me, it never happens this way and if it doesn’t then you would just get frustrated at the failure and give up on the design in the mid way. What you must do is plan the design on paper. Some tips to follow,

1. Take a ruler, pen and paper and draw the design line by line properly with specific measurements.
2. Make it a point to consider even the length of the divisions in the layout. The length can then be easily mapped to the pixel length in your CSS
3. Describe your divisions so that you don’t forget any thing. This will be helpful because last minute additions to the design might be disastrous.

Rule #2 : Finalize your Color Scheme

This is the second and will form the heart for your design. Your web design will turn out good only if the color scheme is good else it will look boring. To decide on your color schemes first chose what the main color will be. The main color means the color which you will be using maximum in your design. Choose 2 secondary colors which suit with the main color. Do not choose more than 3 in total or your design will look messy. If you want more colors go for the lighter and darker shades to compliment your main color. To finalize upon your color scheme,

1. Surf the internet for 10 designs which have the same color scheme.
2. Show those designs to a few people and take their feedback. This is because ultimately you do not your first impression to be negative in your case.
3. From the feedback and websites you will be in a good position to finally prepare filling the colors in your blueprint. You will be more confident this time.

Rule #3 : Start With The Basic Building Blocks

Once your color scheme and layout is finalized its time to implement it. Start building the basic layout structure. By basic layout structure, I mean to say is no text should be put in to the layout. Remember, having any text in the layout will not give you a proper idea because text itself might change the structure which might be misleading. Think about a situation if you don’t have the text but have only images. Your design will behave differently in such a case. Basic blocks can be made further easier by,

1. Putting a border around each of your divisions so as to visualize it perfectly to the point.
2. Initially having a different color for each block and on completion replacing it with the desired color scheme

Rule #4 : Know your CSS and Handle it with Care

Never hard code your styling elements in your HTML files because at a later point of time you won’t have to keep searching which HTML file to correct in case you have to make any change. So it is always beneficial to have all the styling elements in a separate CSS file.

Also, before styling study your CSS so that you don’t get too messy by repeating the same thing over and over again. CSS supports inheritance. This means that the style given to a parent block will also be applicable to the child block. Use this feature to its full effect. Plan your CSS class names so they are understandable.

For example use the name “main_content” instead of something lile “div_1” because your CSS file will outgrow in its length quickly and you would be lost in trying out to recall which element points out to which block in the layout.

Rule #5 : Make Multiple CSS files

The nightmare which I had mentioned in the beginning starts here. It is very much easier to check the output of your design right at the moment in the browser. Do not use any tools for viewing the output because they cant be trusted always. Even if you use a browser for viewing the output it is possible that the design crashes in another browser. Do not panic. It is a normal thing because every browser renders the HTML and CSS differently.

It is for this case you should have one CSS file per browser so as to be sure that your design looks proper in all browsers. Of course this is not easy. But you MUST NOT try to make all the browsers happy with a single CSS file. This wont happen. If you try too much then you would be compromising more on the design. Having one CSS file will give you the flexibility to change a style for one browser without thinking of what effect it might have in another browser.

These 5 basic rules are the ground rules which will lead to a well executed design. If you want your design to be fool proof and reduce your headaches, then these rules will definitely convert your effort to success. Web designing can be a painful job if you do it in haste, so put these simple rules into practice and ease out your work.

Refer to: http://techtracer.com/2007/12/10/5-rules-for-a-good-web-design/