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.

Web Designing Rules
Image Credit – louisedesign

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.

30 thoughts on “5 Rules For A Good Web Design

  1. nice article. this is the best technique to follow while coding .

    you said to use different css files. cant we use hacking for making it compatible in other browsers??

  2. Yes hemant,

    you can very much use the CSS hacks. But I would prefer a separate CSS file because it becomes more neat and tidy.

    It also gives more flexibility.

  3. Nice article, I agree with all points…

    But is it a mistake or you forgot to stretch the point in which you design your layout in Photoshop format?
    When do you design graphics for your site?

    I usually do this between point 2 and 3, and only then I start creating boxes in html, as a complicated design need sometimes some more boxes to include backgrounds or particular effects…

  4. @Carl – Thanks for the link.

    @Lauryn –
    The Photoshop part would actually come after these 5 as the 6th rule. This is because designing in Photoshop is far different than designing in HTML. Sometime it works and sometimes it doesnt.

    What I am trying to prove is once your “blocks” are ready you can just make a snapshot of the layout with the “blocks” , transfer it to Photoshop and then put over the graphical layers.

    It would be more easier this way because once your structure is ready the graphics will become more easier. I already tried the reverse way and it became more complicated for me.

    Testing your layout with content is more difficult in Photoshop than with HTML. If you can suggest a workaround for the content part then probably I may change the above order.

  5. Learn proper CSS and there is absolutely no reason to use more than one, maybe two style sheets.

    “If you try too much then you would be compromising more on the design.”

    If you know proper CSS there is no need to compromise at all.

  6. mmm
    I think design has to adapt to html&css limits, like you just say, but in my opinion is not necessary to design boxes to full with graphics.

    instead you can fantasize with graphic and design with no limits but the realization in terms of html and css.
    obviously if some kind of effect is not realizable you can modify original idea.

    I think that invert position of photoshop design and html realization is deleterious for fantasy: you risk to make sites all equals and strict.

    When I design with Photoshop I already have in mind all main browser limits, so you can go on with html and then test finally one time at all.

    In your method you initially test html+css, then you create graphic, and when you put it on html you have to test it again, don’t you think it’s the longer way?

  7. @Vic – Probably you are right in saying that but I guess you are taking in the hacks into consideration. As I mentioned in the earlier comment that yes, you can use browser hacks but instead of making them lie in a big single CSS file they can be split into different files for each browser.

    This is because the CSS file size also should be taken into consideration.

  8. @Lauryn

    Yes, I would agree with you for the fact if your a designing a site which is graphic intensive. In such sites the graphics will have to be planned before the web site so that it looks aesthetic.

    The rules which are mentioned in the article are for site which are more content oriented. Take an example of this blog. I am designing a theme for this blog, so for me the graphics are just a part of the design and not the heart.

    For graphic intensive sites like entertainment ones, I would have to agree with you that graphics will play a major role so they would have to be pre planned.

  9. well u said to use different style sheets.its fine for ie and Firefox.
    but what about other browsers like Netscape,opera,safari,aol.
    because i am involved in such type of role for making html compatible in all browsers. writing different style sheets is not a good idea…i think….

  10. I know about this problem and its becoming a bit problematic for me too. I solved IE and Firefox issues by having separate stylesheets. I have yet not covered on Opera which is giving me problems. What according to you are the best ways to solve the rest of the browser issues?

  11. yes 😀

    I read now your profile and I see you are a developer, instead I’m a webdesigner: that’s the difference between you and I and that’s why our priority are inverted 😀

    I agree with you!

  12. “I guess you are taking in the hacks into consideration.”

    Not at all. There should be no need to use a hack when you have a solid understanding of CSS. Almost anything that will cause a major glitch between browsers is caused by deprecated code or simple misuse of a given attribute.

    I would recommend reading “Designing With Web Standards” by Jeffrey Zeldman as an excellent primer on building sites in this way.

    Don’t get me wrong, I very much enjoyed the article and your other suggestions, but it is an all too common misconception that the problems associated with cross browser compatibility can or should be solved by simply buring our proverbial head in the sand. At this point almost anything that would cause a major issue between browsers is more than likely doing something so far off the standard that another more suitable solution should not only be available, but also preferable.

  13. @Vic

    Thanks mate, for the recommendation. I hope would be an enlightening read. I would pick up a copy soon. I am also frustrated at this cross browser compatibility aspect and if that book has the solution to my problems then I will definitely be adhering more to the web standards in the future.

  14. Like I said, it is a great book to help get both developers and designers thinking in a different way about our craft. For too long we have been beholden to the various browsers and their quirks. By simply approaching things in a slightly different way, the sky is literally the limit.

    Good Luck

  15. Your site looks great! I found your blog via Google while searching for web design career and your post regarding looks very interesting to me. I have seen many other so-called sites and they have been far from good quality.Your site has all the key ingredients to pulling in visitors.

  16. Good show, Vic, I wholeheartedly agree. I haven’t had to use one “hack” since I began to understand the browser nuances with margins, padding, positioning, etc. It’s very liberating to sit and code pages knowing that your intended output is going to work in every browser without having to double check yourself.

  17. Nice post. It is always a good idea to go over CSS rules and hacks that other designers are using. I am an Atlanta Web Designer and I am often frustrated with different browser rendering of webpages. One solution I have seen is to use server side scripting to determine the browser the user is using and deliver a browser specific external css file. I end up with three different CSS files though, one for IE6, one for IE7 and one for everything else. It gets old having to edit three style sheets though. I do like using the server side scripting for the CSS file though because I have been able to GZIP it which has improved my load times dramatically.

  18. Always a good idea to create a basic sitemap on paper before you start the wireframe.. this gives you an idea of the hierarchy of the site plus allows you to wireframe your design to meet the needs of the future pages that will be added on once the site hits development.

  19. Great step by step attempt for a good web design . Actually I design web ,but don’t have any order n all . At last I bind up everything together .

Leave a Reply

Your email address will not be published. Required fields are marked *