Guide to Website Design in CSS3
Mastering CSS3 – Part 16
Forward: In this part of the series, I give you a guide to designing a website in CSS3.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
Guide to Web Page Design
- Choose a major layout first for the page and code the major layout.
- Choose the body element background color or background image bearing in mind the color of most of the text for the page. Code the background.
- Choose the color of all the texts. You should not have many colors. Many colors will make your web page too busy (see below). At this stage, you should choose the color of the heading elements (h1, h2, etc.) text, color of paragraph text, color of hyperlinks text and color of any other important text.
- Code the rest of the page, adding all text and necessary images and video clips and audio. So far as minor layout is concerned, if you follow all the CSS rules that you have learned in the two CSS3 series of this blog and the principles of the two HTML5 series, you would have at least reasonable minor layouts for each major layout partition.
- You can optionally add special effects like borders, shadows, rounded corners, element backgrounds and any other special effects. These special effects should not be many. Many special effects will make your web page too busy (see below).
- You can finally optionally add animations (see later) at this stage. The number of animations should not be many. Many animations will make the user loose focus on the intention of the web page.
Beauty does not necessarily mean variety (a lot of it). Look in your own life and you would realize that many of the things you consider as beautiful do not necessarily have variety of colors and/or variety of special effects. If you deliberately put variety (many) of colors and/or variety of special effects on a web page, the web page would become too busy, in the sense that the web page would not convey any particular message. In other words, the web page would look meaningless. Have you ever noticed beauty in anything that is meaningless? No.
Some of you may argue here that you have seen beautiful dresses that have many colors. What you should do is to look at such a dress again. You would realize that the colors of the dress form a pattern and the effectiveness of the beauty is in the pattern of colors. Hardly, would beauty ever mean so many colors and/or so many special effects. If you are still not convinced, then I will challenge you here: Does a beautiful woman have many colors? So your web page should not be too busy.
Guide to Website Design
Above is a guide to CSS web page design. Here is a guide to CSS website design. It is simple. All web pages of a website should have the same major layout with the exception of the home page whose major layout may be slightly different. That is, the home page can have more or less the same major layout like the rest of the pages in the site or simply just have the same major layout. In this way, while the user is at any of the pages in turn, he would know that he is at the pages of the same website. That is all the guide there is to CSS website design.
Remember, above everything, each web page should be functional, so you must make good use of your HTML knowledge, behind the scene.
We have come to the end of this series. There are still some good features offered by CSS3, but browsers, even the new ones (versions) do not support them. As soon as they support them, some of the tutorials of this and the previous series would be modified and a few other tutorials would be added.
Well I hope you appreciated the series. What you have to study next is ECMAScript in the website design major (course). You can study that in this blog.
Good Luck in your undertakings.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course