When I built my first ever website, I didn’t design it. I knew what I wanted the main colours to be, and through trial and error with CSS eventually came up with something I quite liked. It was hideous, of course, but I wasn’t to know.
A lot of your design ability will come through practise and research, knowing what is “in” and knowing what will always look good. However, if you’re just starting out and don’t quite have a hold on the nuances, here are a few things to consider.
1. Practise creating suitable graphics
Before you ever try to design something yourself, you need to know how to make what’s in your head appear on your screen. If you’re not familiar with the current trends you can get a feel for the prevailing wind in web design by simply visiting a few CSS galleries. Choose a site you particularly like, or certain elements from a few, and try to recreate them. You’re not learning design here, you’re learning techniques to create the graphics you need. Once you have a few tricks up your sleeve…
2. Actually Design
“I know how it should look in my head, that’s enough”
It may sound ridiculous, but I’m sure I’m not the only one to have done it backwards and just jumped into a site build feet first. This approach is unlikely to yield favourable results. If you can’t afford Photoshop consider GIMP, it’s free Open Source and doesn’t have all the features you’d ideally have at your disposal, but it’s a good starting point.
3. Don’t be afraid to copy
Obviously I’m not suggesting you steal someone’s entire site design, but if you see a navigation style or a texture that you like, use it as a starting point for a design of your own. There are always certain “looks” that are more prevalent than others, and there is absolutely no shame in using something tried and tested.
4. Design for appropriate resolutions
There’s no hard and fast rule where website width is concerned. Depending on the site in question your users could be a completely different demographic. Generally speaking however 1024 resolutions are still considered appropriate to design for. 960 is a common width for modern sites, take a look at the 960 grid system. Using a grid will help you achieve a nicely proportioned design, making it much more pleasing to the eye.
5. Get your layout sorted first
Leave any colour decisions for now, and just mock up the main elements of the design in shades of grey. Make sure content is given an appropriate position and size relative to it’s importance. If it works well without colour, you’re onto a winner. Once the layout is finalized you can start to make the more “exciting” decisions.
6. Choose your colours carefully
It shouldn’t need to be said, but don’t choose colours that look hideous together. If in doubt, there are many colour scheme sites and applications out there, when stuck for inspiration my tool of choice is usually Kuler.
7. Pay attention to fonts
Typography is a complex subject in itself, but for a beginner it is enough to know that it exists, and that font choices are important. While the majority of your website’s content will need to be an easily-readable websafe font, a lot of the time you can go a bit wild with headings to give your design some extra oomph. Investigate Font Squirrel or dafont for something appropriate. For the love of God, do not use Comic Sans.
Typography is more than just choosing a suitable font, of course. You can read about some of the basic philosophies at I Love Typography.
8. Whitespace. It is good.
Whitespace is, as the name suggests, the space between elements in your design. A cramped page can look overcrowded and messy, while the same page with slighly more space between elements will look completely different.
You can also use whitespace to indicate the importance of an element. A common use for this concept is call to action buttons (a button encouraging users to take an action such as sign up or buy something), surrounding a button with plenty of space ensures nothing detracts from it.
9. Be subtle
I know you want to go crazy with gradients and drop shadows. They’re just so cool.
For the most part a subtler, more natural approach will look infinitely better than a bright blue to pink gradient or a solid black drop shadow. Colours aren’t the only way to misuse these effects either, make sure your gradients are long enough to change steadily, rather than jumping suddenly from one colour to the other, and make sure your shadows blend into the background rather than ending abruptly.
10. Prepare yourself
Your first designs aren’t likely to be dazzling. As with any skill, over time you will improve. Keep practising new techniques and looking through the CSS galleries for inspiration. With a few carefully chosen design elements from various other sites you can create something beautiful, and the confidence to design something bold and original will simply come with time.
Leave a comment
RSS feed for comments on this post. TrackBack URL