Web Design Miami Weblog

July 9, 2008

10 Terrific Tips for Web Design Beginners.

Filed under: Web Design — Will Jay @ 5:02 pm

custom website design
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 road map, 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.
Web Site Design

– TECHNICAL TIPS –
web design tutorial

1. LEARN XHTML - Extensible hypertexts Markup Language.
open source web design

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).
how to design a website

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 favorite), however word processors such as Microsoft Word are entirely unsuitable.
real estate website design

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.
website design companies

2. LEARN CSS – Cascading Style Sheets.
website redesign

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 co lour, 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.
ecommerce web design

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.
web designing

3. LEARN PHOTOSHOP.
Web Design Software

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.
web design programs

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 colors, etcetera, in Photoshop first.
Web Design Services

4. USE CSS INSTEAD OF TABLES FOR YOUR DESIGNS.
Miami Web Design

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 anyway’s 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.
how to design a web page

5. USE VALID XHTML AND CSS.
custom web sites

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.
css web design

– THEORETICAL TIPS –
design web sites

6. LEARN ABOUT GRID THEORY.
web design firms

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 od our), 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.
Web Design Company

7. LEARN ABOUT TYPOGRAPHY.
Web Design Companies

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.
custom website design

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.
Web Design Services

8. LEARN ABOUT COLOUR THEORY
affordable web design

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 ‘ co lour’ 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 realize words such as ‘ color’ and ‘optimize’ are spelled differently in different parts of the world. Well, on with the show.
design a web site

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

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

9. GET INSPIRED
web designing

Browse the net for good web designers, don’t steal their designs, but analyses their designs and try to figure out what fonts, co lour 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.
graphic designer

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 analyses what grid, co lour 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.
website hosting

10. PRACTISE PRACTISE PRACTISE
freelance web designer

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

A good tip would be to make one web page template a week and submit it to http://www.o s w d .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.
web designing

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’.
logo design

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.

Powered by WordPress