Forgot your password?

10 Web Design Tips for Beginners

By Edited Nov 13, 2013 2 3

As a new web designer, practise and research is essential to improving your skills. Knowing what's "hot" and what's not will serve you well, so keeping up to date with design trends through CSS galleries and design blogs can work wonders. In the meantime if you're not sure where to start, here are a few tips to consider.

1. Practise creating quality graphics

Without the ability to actually create professional looking graphics, even the best design in your head will not translate onto your screen.

The web is full of substandard 90s-style graphics that were just created yesterday...these "designers" have either never updated their technical skills or learned from the wrong sources, and this is a serious problem in the industry. Avoid it at all costs.

Choose your design software (Fireworks is my favourite) and make sure you know it inside and out.

Once you have a few tricks up your sleeve it's time to...

2. Start designing

My very first site was put together in the browser, and it soon turned out I wasn't anywhere near experienced enough to pull it off. Take the time to design your site, not just the layout but everything down to the very smallest detail.

Design things you'll never build, if you want, but never design anything unrealistic. A big part of web design is knowing what is achievable, realistic and usable. It's tempting to stop designing at a certain point and move onto coding but following through with all the details will give you a new appreciation of all the elements that make up a page.

3. Be inspired, don't steal

Look through a few CSS galleries and find elements you like from different sites. A menu here, a call to action button there, a particular font. Now recreate these elements in your design software, until you're able to get the exact same effect you just admired in someone else's work.

You'll end up with a library of effects and styles that you can call on in your own combinations. Don't be tempted to just recreate someone else's site, use this as inspiration for your own unique design.

4. Design for appropriate resolutions

Only you know what the target demographic may be for your design, but as a rule the most common widths at the moment are 960-1000px. Fixed width sites are generally easier to design, since there are less variables to consider, so I'd recommend starting off with these.

If you're lucky enough to be redesigning a site that has Google Analytics installed (or if you can convince the site admin to install it especially for you) you can get an accurate idea of which resolutions are most popular with the site's visitors. There will always be people using outdated, tiny screens but don't let them put you off, cater to the majority and you'll be fine.

5. Get your layout sorted out first

Snazzy colors and effects are all well and good but the main thing that decides whether your design succeeds or fails is whether it communicates information clearly to the visitor. The first stage of any serious design should be wireframing, giving content the appropriate importance and making sure the whole thing is easily navigable.

For more detail you can take a look at Tips for Wireframing in Web Design.

6. Choose appropriate colors

It shouldn't need to be said, but don't choose colors that look hideous together. If in doubt, there are many color scheme sites and applications out there, when stuck for inspiration my tool of choice is usually Kuler.

You should also know about the pros and cons of light vs dark designs. Light text on dark backgrounds are as a rule more difficult to read and can cause eye strain, so are not a great idea to use for magazine or content-heavy sites.

7. Pay attention to fonts

Typography is a complex subject in itself, but for a beginner it is enough to know that font choices and sizes are important.

While the majority of your design's text will probably 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.

Methods of actually using special fonts on your site vary, from using images to various "font replacement techniques", so if you're a coder too be sure to research your options.

8. Whitespace is good

Whitespace is the space between elements on the page, and is often the difference between a decent design and a great one.

You can use whitespace to indicate the importance of an element, for example a prominent call to action button will often have lots of whitespace around it to make sure no neighbouring elements detract from its importance.

Whitespace also helps break the page down into sections, to make it obvious which elements are related to each other and should be looked at as a group. It's all about guiding the visitor's eye where you want it to go.

9. Be subtle

I know you want to go crazy with gradients and drop shadows, but try to resist. Realism in a design is almost always more effective than a solid black shadow or a gradient with a million and one different clashing colors in it.

Pay attention to light sources in real life, and in which direction shadows are thrown. Replicate this as closely as possible in your design, and keep gradients subtle.

10. Be prepared to design things that suck

Your first designs will probably be somewhat lacking. Designing something completely original is a great goal but until your skills are a bit more polished it's much better to concentrate on doing a good job, even if that job isn't exactly unique.

Be patient, and a year from now you'll look back on your first designs and be disgusted, shocked and just a little bit proud at how far you've come.



Apr 12, 2011 7:28pm
I am working on a couple of new sites and design is not something I am great at. I am glad there are so many good tools out there to help me figure out which colors look good together.

I use WordPress and am thankful for themes that I can at least start with a basically good design in which to spruce up and make personal.
Apr 30, 2011 7:47pm
Awesome article. I plan on building a few of my own sites later this year, thanks for the advice!
May 3, 2011 7:31am
No bother! I just taught myself most of the things on this list, it's amazing how quickly you can go from "this looks like it was designed in 1995" to something that looks pretty professional just by doing things like using subtle gradients and leaving plenty of whitespace.
Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology