Thursday, August 20, 2009

3 Web Design Tips to Help You Go From Beginner to Expert by Matt Shaw

Hosting review and coupon



Recently I've been putting a lot of thought into what I should blog about, I'd like it to be a regular thing, so I thought it would be good to start with talking about the basic skills I have developed whilst working as a web designer. Below are 3 main points that I feel have been instrumental in improving my own web design, and I thought some beginners might appreciate these tips. Feel free to add your own thoughts in the comments section below.

1. Ditch the design view and learn to code.

Learning to code HTML is probably the most important aspect of becoming a web designer. Whilst some people may not find this easy at first, there are a wealth of resources to help you get started. Myself, I learned to understand HTML from a 'getting started' book. This was years ago, I was about 14, and I dipped out of it for a long time. When I came back to it I still had that basic understanding of what should go where, but so much had changed with regards to what we could do, obviously I had a lot to pick up on.

You'll also find that learning the code will add an extra dimension to your site, you'll be able to add the extra details and customizations that you've always wanted to. Once you learn to understand the code, you'll also realize how much code bloat WYSIWYG editors tend to add to your site. This extra code can slow load times, and get in the way of editing the markup.

2. Get familiar with W3C

It may be daunting, but the more validation you do, the easier it will become to come to know the little do's and don'ts of HTML. There is also a CSS validater, whilst not as important it's also good practice to get familiar with this. You'll find that once all your code is valid, then cross browser problems (IE) you may have previously experienced will be a lot easier to solve. That is not to say you won't have to worry about cross browser compatibility, but it will go some way to easing the pain.

You'll also find that your websites rank higher in search engines if they are built to the latest web standards. W3C standards can be easy to dismiss as 'not important' or 'too difficult'. I should know, I dismissed it for these reasons for far too long before deciding to ensure my sites validated.

3. Use Photoshop to Design

There are lots of reasons for using Photoshop for the initial design of a website. Firstly, it helps you to decide on a grid structure, proportions and the best places to put call to action buttons. To an extent, wire framing should get a lot of this out the way, but I find pulling it together 'for real' really helps finalise things.

Secondly, it makes it much easier to add smaller details such as gradients, highlights etc.. when it's all in one document, before everything is split up into separate smaller images. I think it's important to decide on the finer details before starting on the code, as you get much more of a vision of what you are building. Finalizing the design first enables you to plan how you will achieve each part of the design in HTML/CSS, before you actually start piecing it together. It also helps the client visualize what you have in mind. If they can physically see what you are doing for them, it helps them to relax and to trust you as a designer.

You may also find that it's much easier to change the layout around in Photoshop than it would be if the markup as already been created. If the client wishes to see the sidebar on the left rather than the right for example, its a simple job to switch it all about and send across a jpg.

So those are my 3 main tips, I'd be interested to hear from others out there and if there are any other points worth adding to this.