10 Terrific Tips for Web Design Beginners.

by: Justin Daniel

When embarking on the daunting journey to web design enlightenment it can be hard to know where to start. This short article is intended as a roadmap, outlining the significant tips all aspiring web designers should be made aware of. If you follow each of the following tips you will be well on your way to web design nirvana. However, you may possibly be an intermediate, or, hold your breath, advanced web designer – well if that is the case, be humble my good friend, peruse the following tips and you may surprise yourself and pick up a thing or two. So saddle up to your computer chair, make yourself a coffee, drink some chai tea if it tickles your fancy (it’ s certainly not my cup of tea), assume the full lotus position and prepare to be digitally enlightened.

-- TECHNICAL TIPS --

1. LEARN XHTML - Extensible HyperText Markup Language.

If you don’t already know, XHTML is the ‘markup language’ that every individual web page is made out of. Right click on your screen, and click on view source. Feel like Neo already? Yes, that’s right folks; every web page you view is simply a plain text file full of code stored on some dudes computer (sometimes otherwise known as a web hosting server).

Don’t be scared, XHTML is quite possibly the easiest programming language you can learn, so easy in fact XHTML isn’t technically classed as a programming language. Don’t take the ‘red pill’ and learn Dreamweaver – it may seem the easier option at first, but being completely honest once you learn XHTML you can create web pages in half the amount of time than it takes to in Dreamweaver, and you have more control over the final layout. Additionally, Dreamweaver adds quite a lot of unnecessary code and as a result increase the file size of the page, slowing down the loading time for all those poor sods still on dial up Internet. You can write XHTML code in a plain text editor, such as notepad, or notepad++ ( my favourite), however word processors such as Microsoft Word are entirely unsuitable.

If you’re rich, unlike me, pick up a cheap ( recent) XHTML book, otherwise browse Google for XHTML tutorials, or head over to http://www.w3. org/MarkUp/Guide/ for a brief introduction to writing XHTML by Dave Raggett.

2. LEARN CSS – Cascading Style Sheets.

Stop torturing you with all these programming languages you say? Don’t fret my friend, CSS is only a little more advanced than XHTML and most books on XHTML also cover CSS. CSS is the language that controls things such as the colour, background images, font attributes, and so on. The beauty of using CSS is you can control the aesthetic features of multiple web pages with a single CSS file.

If you would like another wonderful online tutorial, head over to http://www.w3.org/MarkUp/ Guide/Style for a brief introduction to CSS, by Dave Raggett also.

3. LEARN PHOTOSHOP.

All web designers know how to use Photoshop. I was actually born with a Photoshop watermark on my upper left thigh. If you are aspiring for a web design career you are going to need to learn Photoshop, hell – even my Nan knows how to use Photoshop. So Google away for Photoshop tutorials, or browse your local library to spice up your Photoshop skills.

The best piece of advice I can give you is to make up all of your web page designs in Photoshop first. Once you are entirely happy with the design start slicing and dicing your photoshop file for the images you will need, and coding the web page in XHTML and CSS. This saves stuffing around with markup code unnecessarily; it’s much easier to make changes to layout and colours, etcetera, in Photoshop first.

4. USE CSS INSTEAD OF TABLES FOR YOUR DESIGNS.

If you already know a thing or two about web design you are probably sick to death of hearing about using CSS instead of tables for your layout. Well I’m going to give it a brief mention anyways for all those web design n00bies out there. Use CSS to control your layout, don’t use HTML tables for your design. Tables add tons of unnecessary code, are time consuming and expensive to make changes to once the site is completed, and only affect the layout of the single page you are working on – as opposed to using a single CSS file that affects the layout of any page you want. Don’t bust your knuckles by typing the same code over and over again.

5. USE VALID XHTML AND CSS.

Valid XHTML and valid CSS is code that validates with the World Wide Web Consortiums coding rules. There is plenty of information on how to ensure your code is valid over at http://www.w3.org. It is important to keep this in mind, as most web design employers will not touch web designers with a ten-foot clown pole unless their code adheres with the standards of the W3C.

-- THEORETICAL TIPS --

6. LEARN ABOUT GRID THEORY.

Grid theory is basically the design theory that suggests that works of art are more aesthetically pleasing if they adhere to some sort of grid that controls its layout. Additionally, the rule of thirds, which is a theory that is related to grid theory, (it’s sort of like the relative that no one wants to speak to at family functions because of a foul and unpleasant body odour), suggests that designs are even more aesthetically pleasing if their visual form can be divided into thirds. When designing web pages in photoshop, I always start with a grid first to ensure my layouts align to the grid.

7. LEARN ABOUT TYPOGRAPHY.

Typography can be defined as the study of fonts. Learning about typography will teach you when and where to use fonts. Learning about letter spacing (kerning as they like to call it), line height, the serif and sans serif font categories, and more, you’ll have a truly lethal understanding of fonts in your web design arsenal.

It is important to keep in mind that there is only a small range of fonts that will display in people’s web browsers, so don’t rely on primarily using custom fonts in your designs, unless you plan on saving them all as images which can drastically increase the file size of your web site. Site visitors aren’t going to download custom fonts just to view your website the way you want them to, even if you are super polite. If you stick to using the following fonts for the actual text in your web page, you will be safe: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana. If you want to be an extra lame nerd like me, you should print out all the variations of these fonts (in bold, italic, different sizes, etc) and stick it on your wall.

8. LEARN ABOUT COLOUR THEORY

Before I continue any further I must offer one small piece of advise. Please please please do not email me and tell me that I have spelled ‘ colour’ wrong. If you do so, I will slap you with a salami. Every time I write one of these articles I seem to get at least one email from a silly sausage that doesn’t realise words such as ‘ color’ and ‘optimize’ are spelled differently in different parts of the world. Well, on with the show.

Colour Theory, is, well, the theory of colours. There are many theories on how to choose a nice colour palette, and these will help ensure your web site won’t have the appearance it was designed by a colour blind… blind-man. Without getting into too much detail, one nice colour scheme to use is a monochromatic colour scheme. A monochromatic colour scheme is a selection of colours that features a colour (lets say cerulean blue), tints of that colour (cerulean blue with more white), shades of that colour (cerulean blue with more black), black and white colours (yes black and white are classified as colours my learn-ed friends).

A nice little tool to help you choose your colour scheme can be located at http://wellstyled.com/tools/colorscheme2/index-en.html. Mmmm, free tool.

9. GET INSPIRED

Browse the net for good web designers, don’t steal their designs, but analyse their designs and try to figure out what fonts, colour scheme, grids, and photoshop techniques they are using. A simple way to use this is search for web design in Google, and browse the portfolios of the top web design companies that come up in the search results. Digital art and poster websites also serve as good inspiration.

However you don’t need to restrict your sources of inspiration to the Internet. On the rare occasion when I venture out of my web design cave to eat something other than baked beans on toast, I like to analyse what grid, colour scheme, and font types that restaurants like to use in their menus. But hey, put me in a sack and throw me down a river if you think I’m just crazy.

10. PRACTISE PRACTISE PRACTISE

I shouldn’t have to say this but practise whenever you can. The more you practise, the sooner writing XHTML and CSS code will become a second nature to you, and you should also practise utilising the information from the various theories I have just mentioned too.

A good tip would be to make one web page template a week and submit it to http://www.oswd.org and other online free web page template directories. It’s a great way to improve your skills, and develop a nice little portfolio too.

Well that’s just about it for today, my avid readers. I hope the useful tips in this article have helped you well on your way towards web design enlightenment. If you need more information on any of the topics I have mentioned please don’t forget that Google and Wikipedia are your friends. And finally, please, never let yourself forget ‘There is a difference between knowing the path, and walking the path’.