10 Web Design Tips For Absolute Beginners

Posted by molly jones on September 30th, 2019

As a new web designer, a lot of your design ability will come through practice 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. Practice creating suitable graphics

Before you ever try to design something yourself, you need to know how to create suitable graphics and effects. If there's one thing that will ruin a beautiful concept it is substandard graphics.

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. Copy buttons and menus and any snazzy effects you particularly like the look of until you're confident your graphics are top-notch.

Once you have a few tricks up your sleeve..

2. Actually design

"I know how it should look in my head, that's enough"

There are people who prefer to "design in the browser" but until you're more confident this approach is unlikely to yield favorable results. According to an expert from web design dubai, If you can't afford Fireworks or 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 color 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 color, you're onto a winner. Once the layout is finalized you can start to make the more "exciting" decisions.

6. Choose your colors carefully

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 the 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 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 this Engadget blog.

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 slightly 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 a 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. Colors 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 color 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 practicing 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.