|
The following is a brief guide to designing a website from scratch. It's not just as simple as creating a pretty picture, there are quite a few technical things you need to know about if you want to do a proper, professional web design job. Taking these things on board before you start will save you lot's of time and hassle when it comes to taking your initial web design concept and turning it into a user-friendly, search engine friendly, cleanly coded, easily navigable website that also looks good.
Software
I have been designing websites professionally for years and i highly recommend using Adobe Photoshop, created as a tool for photographers, Photoshop has evolved into a brilliant tool for web design. If you don't have the time to learn to use Photoshop (or the money to buy it) other good software options are Adobe Fireworks, Coral Draw, Gimp (a great FREE piece of image editing software) and there are many more. Have a browse! You will be suprised by the range of web design software on the market.
Screen Size / Resolution
First things first, your new web design needs to fit nicely onto people's screens and this is not as simple as it sounds. Different people have different screens and therefore screen sizes, some people could be viewing your web design on a 42" plasma screen and others could be looking at it on an iPhone. Don't worry, the best thing for you to do is to head for the middle ground, the most common screen resolution at present which is 1024x768 (pixels). Additionally as i will go into later, you should design for a 'stretchy' web design.
So in your chosen software open up a new canvas sized 1024 wide x 768 high.
Colours
If you are used to designing for print then you will be familiar with CMYK colours etc, but with web design you don't have to worry about ink output. Your website is always going to be displayed on a screen and they always work on RGB colour. So set the colour settings in your software to RGB, this will ensure that colours come out as vivid as possible.
Next thing to consider is your colour palette, the range of colours that you are going to work with in your design. Look around the web, you will notice that most professional looking websites have a simple set of up to 5 main colours, often just 3. So your web design must be for some purpose, perhaps a business? If so then maybe you have a logo to work with and so it would obviously be a good idea to work with the same style of colours as in the logo. Play around, see what works and try to settle on a palette of up to 5 colours for your web design.
 Layout
Now your canvas is ready and you've got the colours to work with, you can start thinking about layout. Remember you don't have to re-invent the wheel, you just want to create a nice web design that looks professional and works. So, if you are a beginner i would recommend going for a fairly standard 'header at the top and 3 columns below' layout. You can really bring some life to the website with a vibrant, classy image in your header and then the content columns can be styled and matched to bring an attractive consitency to the web design. See the example to the left.
The header at the top will cover the full width of the page and the columns below should take up roughly 15%, 70% and 15% respectively. As you can also see in the example to the left. If you're wondering what i meant by the word 'stretchy' earlier then here's where it comes in; all 3 columns and the header should be design to cope with being stretched. In other words, keep the unique graphical elements fairly narrow and aligned to one side or the center, then have the rest either fade out or repeat. This way, the header and all 3 columns can be maximized to the width of any screen without being compromised.
- Navigation
The best place for your navigation is in the first column on the left (recommended) or the last column on the right. This allows lots of room for adding links in future, you never know how much your website is going to grow. Although you want everything to look as pretty as possible, don't make the all too common mistake of using images to display your links/navigation. Using text links for your navigation is good practise because search engines cannot read images and trust me this is a bad thing, look it up if you don't believe me. You can always make your navigation links look nicer with a subtle background image behind the text of each link, or even simpler, one background image behind the whole block of navigation, a fade-out gradient or something but that part is your job as a web designer.
- Content Area
This is the central column in your layout, taking up roughly 75% of the space in the web design to accomodate a full article. The main bones of the web page. Most, if not all articles are going to need a Title, so design yourself a nice standard title style for your content articles. Also design a subtitle, some bullet points and also choose a standard font for these and the main copy. It is important to remember that your software may have thousands of available fonts but the problem is, other people's computers may not have these fonts available, so if you don't choose a standard, web-friendly font then your web design may change on different people's computers. Good fonts to use are Arial, Helvetica, Tahoma, Verdana and Trebuchet. Browse on the web for 'standard fonts' for a full list.
It is also worth thinking about at this point what your links will look like, i mean a standard colour for links within the articles. The default is a bright blue and this may not match with the rest of your web design.
- Highlight Areas
The third column on the right is the most optional, you may or may not need to use it when the website is first launched but it is well worth designing. For that moment when you suddenly need to add a special offer or some sort of new feature, which you need to bring to the attention of visitors. Design some demo 'Feature' blocks in this column.
 Photography
I don't know about you but i've grown very tired of seeing the same old cheesy clip art and photos on websites, the classic business hanshake is a good bad example. Good news!...Professional photgraphy for your web design is not expensive and it is in abundance. There are fantastic free stock photo websites out there if you have a search, my favourite is www.sxc.hu
If you are looking for a slightly better quality result then get yourself a few credits on fotolia.co.uk I'm sure you will be pleasantly surprised with the photographs and the prices (roughly 50p each!!).
Spend time choosing good images, i cannot stress this enough. Good photography can really MAKE a web design work.
So that's it, you're finished!? Web design is a visual art form and a technical skill at the same time and can take quite a bit of practise and persistence to get it right, so don't be surprised if you make a few mistakes along the way. I hope these tips have helped and if you have any problems or questions to ask, just fill in the comments form below and i'll help you out.
 |
