A good web designer must be familiar with the basic principles and elements of web designing. Don’t think that what looks good is the correct way of designing. If you're going to design a website, you better have some idea of what you're doing when it comes to graphic design.
Balance- It is important for things to be balanced. This means that you can't make one side stronger and not balance that on the other side. For example, if you use a dark color, you should balance it with a larger area of a lighter color. Balancing will prevent your website from looking funny to the visitor.
Line- The directions of your lines will give a mood to your overall design. As a rule, horizontal lines are calmer, vertical lines are moderately active, and jagged or diagonal lines are very active. If you were designing a sober news related site, then, you'd use horizontal lines, while a fun site for youngsters would be full of lines going in all sorts of directions.
Shape- There are two kinds of shapes – positive and negative – and every design has both kinds of shapes. The positive ones are the ones you actively place on the page, while the negative shapes are the spaces created around the positive ones.
Color- Coloring is a bit more difficult part of the web design and you need to be careful about this aspect. As soon as you add more than one color to a page, you make the other colors look different. Some colors are complementary, while some don’t look that great together. On the web, you should usually avoid using too many colors on one page – even if they are complementary, it might make the page look garish. The best way to create a color scheme is to use black, white, and various shades of one color. You have to consider the brightness and intensity of your colors, to make sure you're not overdoing things. One of the mistakes many designers make is that they use the built-in CSS color-these are too intense.
This is just a brief overview of graphic designing and in sense gives you complete knowledge of this vast subject, and one that's changing all the time. If you want to get properly up to speed, it's worth buying a book, or even taking an evening course at your local college – you won't regret it.
Almost everybody knows that CSS makes layouts easier than they were with tables. One of the reasons many people stuck with tables for so long is that it’s a bit difficult to create column-based designs using CSS.
Believe me, CSS columns aren't that difficult to produce once you understand how CSS float rules work. Float allows you to say that some portions of your content should 'float' next to other portions, instead of being displayed one after the next.
A column layout in CSS is quite simple and you’ll see why. Just see how to divide your content from your navigation using the div tag, as mentioned below:
Please note that the divs must be in this order – left, right, centre – because otherwise one column might end up underneath another in a way you don't expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.
Anyway, the next step is to write the CSS for those IDs you just set up. See below-
#left-nav {float: left; width: 30%;}
#right-nav {float: right; width: 30% }
You can adjust the width % depending on how wide you want your left and right columns to be (you can even choose whether to set the width in percentages or in pixels). And now you've set up a successful three-column layout. Amazing! Isn’t it?
If you wish that your left and right columns should have a different background colour to the centre one, this might be a bit trickier. This is because in most of the browsers, your columns are only considered to extend downwards as far as the text in them does meaning that the bottoms of your columns won't line up.
How to solve this issue then? The best way is to make your columns fixed-width (meaning that you specify their width in pixels, eg. 'width: 100px;'). Once you've done that, you can create one-pixel-high image that includes the colours you want for the columns, and make it the background image. But the fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document's body, and then set the left and right margins to 'auto' – this will centre the page on the screen.
You might also like to add text-align: center, so they appear in the middle of the page. There are few more things which you would need to learn about but if you found the above simple I am sure you’ll find playing around with CSS easy.
This website uses cookies that are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy. By accepting this OR scrolling this page OR continuing to browse, you agree to our Privacy Policy