| -- End Ad Box ---> | | | | most web design employers will not touch web |
| When embarking on the daunting journey to web | | | | designers with a ten-foot clown pole unless their |
| design enlightenment it can be hard to know where | | | | code adheres with the standards of the W3C. |
| to start. This short article is intended as a roadmap, | | | | -- THEORETICAL TIPS -- |
| outlining the significant tips all aspiring web designers | | | | 6. LEARN ABOUT GRID THEORY. |
| should be made aware of. If you follow each of the | | | | Grid theory is basically the design theory that |
| following tips you will be well on your way to web | | | | suggests that works of art are more aesthetically |
| design nirvana. However, you may possibly be an | | | | pleasing if they adhere to some sort of grid that |
| intermediate, or, hold your breath, advanced web | | | | controls its layout. Additionally, the rule of thirds, |
| designer — well if that is the case, be humble | | | | which is a theory that is related to grid theory, |
| my good friend, peruse the following tips and you | | | | (it’s sort of like the relative that no one |
| may surprise yourself and pick up a thing or two. So | | | | wants to speak to at family functions because of a |
| saddle up to your computer chair, make yourself a | | | | foul and unpleasant body odour), suggests that |
| coffee, drink some chai tea if it tickles your fancy | | | | designs are even more aesthetically pleasing if their |
| (it’ s certainly not my cup of tea), assume the | | | | visual form can be divided into thirds. When designing |
| full lotus position and prepare to be digitally | | | | web pages in photoshop, I always start with a grid |
| enlightened. | | | | first to ensure my layouts align to the grid. |
| -- TECHNICAL TIPS -- | | | | 7. LEARN ABOUT TYPOGRAPHY. |
| 1. LEARN XHTML - Extensible HyperText Markup | | | | Typography can be defined as the study of fonts. |
| Language. | | | | Learning about typography will teach you when and |
| If you don’t already know, XHTML is the | | | | where to use fonts. Learning about letter spacing |
| markup language’ that every individual web | | | | (kerning as they like to call it), line height, the serif |
| page is made out of. Right click on your screen, and | | | | and sans serif font categories, and more, |
| click on view source. Feel like Neo already? Yes, | | | | you’ll have a truly lethal understanding of |
| that’s right folks; every web page you view is | | | | fonts in your web design arsenal. |
| simply a plain text file full of code stored on some | | | | It is important to keep in mind that there is only a |
| dudes computer (sometimes otherwise known as a | | | | small range of fonts that will display in |
| web hosting server). | | | | people’s web browsers, so don’t rely |
| Don’t be scared, XHTML is quite possibly the | | | | on primarily using custom fonts in your designs, unless |
| easiest programming language you can learn, so easy | | | | you plan on saving them all as images which can |
| in fact XHTML isn’t technically classed as a | | | | drastically increase the file size of your web site. Site |
| programming language. Don’t take the red | | | | visitors aren’t going to download custom |
| pill’ and learn Dreamweaver — it may | | | | fonts just to view your website the way you want |
| seem the easier option at first, but being completely | | | | them to, even if you are super polite. If you stick to |
| honest once you learn XHTML you can create web | | | | using the following fonts for the actual text in your |
| pages in half the amount of time than it takes to in | | | | web page, you will be safe: Arial, Arial Black, Comic |
| Dreamweaver, and you have more control over the | | | | Sans MS, Courier New, Georgia, Impact, Times New |
| final layout. Additionally, Dreamweaver adds quite a | | | | Roman, Trebuchet MS, and Verdana. If you want to |
| lot of unnecessary code and as a result increase the | | | | be an extra lame nerd like me, you should print out all |
| file size of the page, slowing down the loading time | | | | the variations of these fonts (in bold, italic, different |
| for all those poor sods still on dial up Internet. You | | | | sizes, etc) and stick it on your wall. |
| can write XHTML code in a plain text editor, such as | | | | 8. LEARN ABOUT COLOUR THEORY |
| notepad, or notepad++ ( my favourite), however | | | | Before I continue any further I must offer one small |
| word processors such as Microsoft Word are entirely | | | | piece of advise. Please please please do not email me |
| unsuitable. | | | | and tell me that I have spelled colour’ |
| If you’re rich, unlike me, pick up a cheap ( | | | | wrong. If you do so, I will slap you with a salami. |
| recent) XHTML book, otherwise browse Google for | | | | Every time I write one of these articles I seem to |
| XHTML tutorials, or head over to org/MarkUp/Guide/ | | | | get at least one email from a silly sausage that |
| for a brief introduction to writing XHTML by Dave | | | | doesn’t realise words such as |
| Raggett. | | | | color’ and optimize’ are spelled |
| 2. LEARN CSS — Cascading Style Sheets. | | | | differently in different parts of the world. Well, on |
| Stop torturing you with all these programming | | | | with the show. |
| languages you say? Don’t fret my friend, CSS | | | | Colour Theory, is, well, the theory of colours. There |
| is only a little more advanced than XHTML and most | | | | are many theories on how to choose a nice colour |
| books on XHTML also cover CSS. CSS is the | | | | palette, and these will help ensure your web site |
| language that controls things such as the colour, | | | | won’t have the appearance it was designed |
| background images, font attributes, and so on. The | | | | by a colour blind
blind-man. Without getting into |
| beauty of using CSS is you can control the aesthetic | | | | too much detail, one nice colour scheme to use is a |
| features of multiple web pages with a single CSS file. | | | | monochromatic colour scheme. A monochromatic |
| If you would like another wonderful online tutorial, | | | | colour scheme is a selection of colours that features |
| head over to Guide/Style for a brief introduction to | | | | a colour (lets say cerulean blue), tints of that colour |
| CSS, by Dave Raggett also. | | | | (cerulean blue with more white), shades of that |
| 3. LEARN PHOTOSHOP. | | | | colour (cerulean blue with more black), black and |
| All web designers know how to use Photoshop. I | | | | white colours (yes black and white are classified as |
| was actually born with a Photoshop watermark on | | | | colours my learn-ed friends). |
| my upper left thigh. If you are aspiring for a web | | | | A nice little tool to help you choose your colour |
| design career you are going to need to learn | | | | scheme can be located at Mmmm, free tool. |
| Photoshop, hell — even my Nan knows how | | | | 9. GET INSPIRED |
| to use Photoshop. So Google away for Photoshop | | | | Browse the net for good web designers, |
| tutorials, or browse your local library to spice up your | | | | don’t steal their designs, but analyse their |
| Photoshop skills. | | | | designs and try to figure out what fonts, colour |
| The best piece of advice I can give you is to make | | | | scheme, grids, and photoshop techniques they are |
| up all of your web page designs in Photoshop first. | | | | using. A simple way to use this is search for web |
| Once you are entirely happy with the design start | | | | design in Google, and browse the portfolios of the |
| slicing and dicing your photoshop file for the images | | | | top web design companies that come up in the |
| you will need, and coding the web page in XHTML | | | | search results. Digital art and poster websites also |
| and CSS. This saves stuffing around with markup | | | | serve as good inspiration. |
| code unnecessarily; it’s much easier to make | | | | However you don’t need to restrict your |
| changes to layout and colours, etcetera, in Photoshop | | | | sources of inspiration to the Internet. On the rare |
| first. | | | | occasion when I venture out of my web design cave |
| 4. USE CSS INSTEAD OF TABLES FOR YOUR | | | | to eat something other than baked beans on toast, I |
| DESIGNS. | | | | like to analyse what grid, colour scheme, and font |
| If you already know a thing or two about web | | | | types that restaurants like to use in their menus. But |
| design you are probably sick to death of hearing | | | | hey, put me in a sack and throw me down a river if |
| about using CSS instead of tables for your layout. | | | | you think I’m just crazy. |
| Well I’m going to give it a brief mention | | | | 10. PRACTISE PRACTISE PRACTISE |
| anyways for all those web design n00bies out there. | | | | I shouldn’t have to say this but practise |
| Use CSS to control your layout, don’t use | | | | whenever you can. The more you practise, the |
| HTML tables for your design. Tables add tons of | | | | sooner writing XHTML and CSS code will become a |
| unnecessary code, are time consuming and expensive | | | | second nature to you, and you should also practise |
| to make changes to once the site is completed, and | | | | utilising the information from the various theories I |
| only affect the layout of the single page you are | | | | have just mentioned too. |
| working on — as opposed to using a single | | | | A good tip would be to make one web page |
| CSS file that affects the layout of any page you | | | | template a week and submit it to and other online |
| want. Don’t bust your knuckles by typing the | | | | free web page template directories. It’s a |
| same code over and over again. | | | | great way to improve your skills, and develop a nice |
| 5. USE VALID XHTML AND CSS. | | | | little portfolio too. |
| Valid XHTML and valid CSS is code that validates with | | | | Well that’s just about it for today, my avid |
| the World Wide Web Consortiums coding rules. There | | | | readers. I hope the useful tips in this article have |
| is plenty of information on how to ensure your code | | | | helped you well on your way towards web design |
| is valid over at It is important to keep this in mind, as | | | | enlightenment. |