6 Web Design Tips for Beginners

I’m a newbie in a number of things, and web design is one of them. I created my first real web page just a few days ago, though I’ve been tinkering with my own website for quite a while. (No, I’m showing it to you, yet). But I’m a fast learner as well. So before I move on from newbie to intermediate, here are some things that I’ve learnt, which might be useful to beginners.

1. Use simple tools

Many people, both beginners and experts, think that the bigger and more complex your tools are, the better you will be at something. Wrong! The problem with complex tools are that they take time to learn. As a beginner, your priority is to learn web designing, i.e. the proper use of HTML, CSS and graphics to get what you want. You’ll only be wasting your time if you try learning a tool without learning the basics first. Remember that the various IDEs and other tools are written for people who already know what they are doing and just want to make their work cycle more efficient. I would personally say that you only need three things: a text editor, a browser, a HTML validator (more on that later). A corollary to this is that you should learn to write HTML and CSS and not rely on a WYSIWYG editor.

2. Validate your code

Always write web pages that conform to the W3C standard. And once you finish making a page, make sure you validate it and correct any errors. Avoid the use of deprecated tags, they have been deprecated for a reason and their replacements are mostly better solutions.

3. Learn some graphics editing.

The modern internet is very much graphical in nature and it’s going to stay that way. HTML and CSS can take you a long way, but they certainly have their limitations. If you want to make professional-looking web pages, you’re going to have to learn to do some graphics. You don’t have to become a digital Picasso, just learning how to make good buttons, headers and backgrounds and how to use gradients and color combinations will take you a long way. That doesn’t mean that you have to go shell out $600 for PhotoShop, just use the GIMP, it’s free and can do pretty much whatever PhotoShop can. There’s a good starting point here.

4. Learn Liquid Design

Computer resolutions range from 800×600 to 1600×1200. Making sure that your web page looks the same in all of them may seem daunting, but it can be done without much hassle if you make your designs liquid. Liquid design mostly involves expressing sizes in terms of a percentage of the screen size, rather than something fixed like the number of pixels. Of course it gets harder when you throw graphics into the mix, but it is possible to get a good mix of hard and liquid elements. This might sound like an advanced technique, but in truth it is just a good habit and like all good habits, the faster you start the better. And it will save you from worrying about compatibility across resolutions. This site should give you some ideas.

5. Plan Ahead

Don’t start making a site on whim. Do some research and make a good design before you start. Know what content the site will have, what visitors might be looking for and decide if it’s going to be heavy on graphics or focus on textual information. Also fix the color schemes and navigation layout you’ll use before starting. Planning everything together will let you use your time more efficiently and will make sure that you’re not constantly tinkering and changing things without actually finishing your project.

6. Use the Internet

There are a lot of well-designed websites out there and even more badly designed ones. Take a look at both types, learn from there mistakes and successes and apply that knowledge to your own context. There are also a large number of tutorials and guides on all aspects of web design, find them, read them and use them. Above all, show your works-in-progress to other people, get their feedback and try to incorporate that into your design.

One thought on “6 Web Design Tips for Beginners

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s