Web Design Rules to Follow
July 6th, 2009 by Web Design Rules to Follow
Web design is the combination of graphic design, layout, content, color, and effects which culminate to give a great user experience. As I have previously stated, I think good design involves the use of excellent graphics, fonts, color, layout, web accessibility, and design, which together give a feel of uniqueness, style, personality, and individuality. As I have articulated many times before, an exceptionally eye-catching and aesthetically pleasing page is essential in world of web development, but so is functionality. One method to make your website more visually appealing and useful is to improve the quality of the website through graphic design, layout, content, color, and effects. Here are some simple tips I have prepared to help make your website better. I hope you find them useful! Feel free to comment and leave your own tips to share!
General Web Design Tips:
1) Align your Design: If your design is not going to take the entire width of the screen, you should consider doing a screen centered design. Using left aligned designs can leave a huge space to the right side of the screen with high screen resolutions, which makes for disorganized and displeasing designs. Additionally, you can design your webpage using the Liquid design that adapts itself to the screen, making your design always appear symmetrical no matter what the resolution is.
2) Contrasts Between Text and Background: Always use contrast between the text and the background, in order to make your design professional and, of course, easy to read. I always like to advocate the use of a white background with dark text, but there are times when this is not feasible with the style of the design. Therefore in this case, just make sure there is a contrast between the text and the background; for example, if the background is navy blue, you should use white colored text in order to make it more legible.
3) Background Patterns: When employing decorated backgrounds, the background patterns should never be larger than 56×56. I recommend this because extra large patterns can take away from the integrity of your design and they are generally unnecessary. Moreover, not only do large background patterns attract the users’ eyes from the content in the page, it also adds additional loading time to our page.
4) Design For Higher Resolution: When preparing your page, try to design for 1024×768 screens and forget the 800×600 resolution, because 1024×768 screens or higher are the most used these days. When designing, you should generally try to think of the majority target audience, not the minority. And let’s face it, the majority of people are using the 1024×678 screens or higher.
5) Graphic vs Web Design: Though the words, graphic and web design, are often used interchangeable, they are not the same thing. I consider web design to be a specific sub-set of graphic design, which has its own rules and ideas. So since web design is not the same as graphic design, it is better to avoid flashy colors, because the eyes get tired faster when they are looking at very flashy colors on a computer screen. Keep it simple when designing for the web, and your viewers will appreciate it.
Layout Tips:
6) Logo Position: Logos should generally go to the left side of the page, and sometimes to the center, but never should they go to the right side of the page or at the bottom. Even though there are successful and beautiful designed pages with this issue, it does not mean that it is right. When I design, I think of the viewer first, and remember that user’s eye scan from the top-left corner of the screen.
7) Menu Position: The menu should go horizontally on the top of the content and below the header or it should go vertically to the left side of the page. I have seen some interesting menus are placed over the header, but generally I do not recommend it.
8) Do Not Get Too Creative: Be creative with your designs; however, try to adjust it to a known CSS layout in order to have some uniformity. Creativity and originality are amazing assets, but I always suggest to not to stray too far from a typical CSS layout because it can cause difficulties in navigation and functionality. Remember that even though the creativity of your design is essential, the most important part of a website is it usability. If it is be beautiful, but not functional, it is worthless.
9) Do Not Overuse Images: When you are planning your layout, I recommend to not replace text with images. Some people think images are the heart of a design, and though they are important, they are not the most essential element in a page; the content is. By using text rather than unnecessary images, it will help you with accessibility, and it will allow your page to load faster. If you need a specific typographic in your design, then use sIFS.
Content Tips:
10) Keep Content Short: Be concise with content, and say more and write less. Unless your page is a blog, people do not like reading tremendous amounts of text, so try to get to the point when writing. Also, if you need to write more than 250 words, then support it with one or two images. This is a time when the use of images are ok, in order to break up the eye from seeing a myriad of text.
11) Keep Content Understandable: With your diction, try to be clear and understandable, and never use strange or uncommon words. At the same time however, be original and sticky, so that your content will be embedded in the reader’s mind. Keep the content short and sweet, and it is more likely to stay with the viewer.
12) Divide Content: You do not need to show all content of the page at once, because that can be overwhelming to the viewer, and they will be more unlikely to read what you have written. It is much better to divide and conquer, when it comes to content. Divide the content in sections using the right white space between them, so the eye can rest between reading.
13) Emphasis the Importance: Use the right font style, size and location try to emphasis the most important content of the page. For example, the slogan or catch phrase for a business needs look more important; in order to catch the viewers’ eye, so make it bigger and more eye-catching to emphasis its importance.
Color Tips:
Please see my two posts,“The Meaning of Colors for Designs” and “Seven Tips to Use Colors in your Site,” for a complete detailed tutorial for using color in your website.
JavaScript Effects Tips:
14) Graceful Degradation: With the increased use of JavaScript, you need to remember that not all people use a browser that allows the use of JavaScript; so you need to consider this in order to allow those users to use your site. There is a way to allow these users to view the page, and it is called using JavaScript with graceful degradation. That means that even if your script does not work or the user disable it on purpose, your website is usable and available.
15) Keep User Concentrated: Do not annoy the user with more than one effect running at the same time. Remember that those effects are used to catch the eye of the viewer, not to distract them. The viewer cannot concentrate on more than one effect at a time, so you are wasting your time if you use more than one, as well as overwhelming your viewers.
16) Use Effects Where Necessary: Only use JavaScript effects where there are really necessary. For example, an issue that AJAX has is that when it refreshes part of the page, sometimes the user does not notice where the page was modified. A good idea is to change the element color for one second and then put it back to its original color.
For futher reading visit:
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.
Subscribe to our RSS
Please help us to promote this article.
Sponsors
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now!
Ay there!
I agree with yout list, but when you go for listing tips you should probably also use some yourself.
I am talking titles here …
Even in lists, content should always be in a “title”-format.
Means: People do not read, first they want to find out what is of their interest. To find that out they scan – so you definitively need some titles in your list!
May sum the content you wrote after each number in bold …
Just my opinion …
Thank you for your advice. Normally I always do my posts in title format, but it slipped my mind this time! That is why I love when people comment! Thanks again for you opinion!
Great post, but I couldn’t help myself… “Contracts Between Text and Background”. Is there a certain thing I should look for when trying to work a contract out between my text and background?
Seriously though… great post.
Nice post with some helpful information. I would suggest fixing “contracts” to say “contrast”.
Thanks! My editor was not around when I posted it…Opps! It has been corrected! Another tip…always edit before you post!
Thanks! for important detail in webdesign. I liked your site web design tips. I follow rules.
Straight, simple, useful, comprehensive : I bookmark that immediately !
Hi there. Thanks for the post.
Quick question: What’s better for a website that needs increase in traffic?
a) Change the title meta tag, or
b) Leave the title meta-tag as is, and change body text?
Any thoughts?
Good Question! In my opinion, both are important. In the 90s, meta-tags and web page titles were used more frequently for increasing the rank in search engines, and that in turn gave you more traffic. However, the search engines have changed, and now they look more at content, plus they check how old the webiste is and how often the content is updated and changed. But, the most important thing is you posting your website in other websites, like CSS Galleries, in order to get more sites linking in.
I am actually going to write a post about this in the next few weeks. Stay tuned, and I will have more detailed info on this topic. Thanks for reading!
Very useful information here.
Delicious it. ;D
Graceful degradation is somewhat outdated now. Most designers prefer to talk about progressive enhancement. It’s a subtle distinction but in essence progressive enhancement works in the opposite way, you start with a fully functional and accessible base and then build on that with JavaScript/Ajax etc.
Well, if we can correct your site, then I’ll say that you definitely should have proofread this more than twice.
“If you need an specific typographic in your design, then use sIFS.”
“Emphasis The Importance”
It’s not too distracting, though. In any case, thanks for the tips and rules! I will definitely keep them in mind, especially in considering which ones to break.
Thanks. In my defense, English is not my first language.
Thanks for the help! I appreciate it! Hope you found the tips useful!
Thanks for the giving details about the web design rules to follow. Tips given are really great. We will definitely follow it.
To me, It is a way to have the nature on your desk