Web Design For Beginners



Posted: Wednesday, January 13, 2010

by
Efdesign Web Design Wakefield

Define your audience and their needs

Defining the purpose and objectives of your website should be your first step. Focus on what you want your website to achieve. Create a profile of your intended audience and try to understand their needs and tastes, and design the site with them at the forefront of your mind at all times.

Take a look at competitor websites to gain an idea of what works and what doesn't.

Easy navigation 

In order to make your content easy for your intended audience to navigate, make sure the links to the main sections of your website are easily visible from each web page. You want to invite people to view as many pages of your site as possible, so make it easy for them to find each page.

A good way to help you visualise the structure of the site is to create a flow chart of the whole website on paper. Think about think about how your users might structure the information within the site to help them find the information they need easily.

Try to keep the information on your first page a general overview so you don't bog people down with too much information. They can then click on the (clear and easy to use) links to view more information about the topics that they are interested in.

Layout

Most web pages have a common structure consisting of a header and footer, a horizontal navigation bar along the top and / or a vertical navigation bar down the left of the page and a central section for the main content.
 
This structure is based on simple, easy-to-understand layout principles.
If there's a lot of content, split it up into several different pages so your viewer doesn't have to digest too much information on one page.

Keep text simple and to the point, and make sure grammar is correct – check and check again to avoid looking unprofessional. Text is more difficult to read on screen than in printed media, so it's crucial get your message across in a succinct and easy to understand way.

You should always keep your text blocks relatively small. Huge paragraphs are more difficult to read and may make your audience lose interest quickly.

Stick to 2 or 3 different fonts at the most – and make sure they are ones generally found on most computers. San serifs are easier to read on computer monitors so stick to these for the main text, and make sure your text is large enough for everyone to read.

Bullet points, lists and relevant photos can help to break up the text.

Learn the basics of html

Learning the basics of html – even if you are using WYSIWYG software Front Page or Dreamweaver -  will help you gain an understanding of how a web page in built, and deal with problems you encounter using the software.
Try and stay away from tables, and create the pages using layers (divs) and cascading style sheets (CSS).
Tables mix ‘presentational' data in with your content, which makes the file size of your pages unnecessarily large, as users must download this presentational data for each page they visit.



But by using structural markup to create web pages, you can keep the actual content of your page separate from the way it is presented.

Table-based pages are also much less accessible to users with disabilities and viewers using mobiles and PDAs to access the Web.



And to change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.

For more info about the advantages of using divs and CSS over tables, take a look at http://www.hotdesign.com/seybold/index.html



Using colour

Creating a balanced colour palette from which to choose your website colour scheme will help you to create a professional looking website. Bright clashing colours scream amateur.

If you are creating a website for a company with a logo, start here. Upload the logo to your host server and go to a colour palette website such as colorhunter.com to create a palette, from which you can choose colours for the main banner, buttons and text rollovers etc.

And keep things simple and uncluttered - empty space makes colours stand out and text easier to read.

Optimising photos and images

Don't use a graphic just for the sake of it – make sure there's a reason for it's presence, i.e. it improves the user's understanding and experience. A site full of unnecessary graphics looks amateurish, and it can be an obstacle for accessibility tools such as screen readers.



Make sure the photos and images you do use are clear and well optimised to reduce file size and increase page loading times. One sure sign of an amateurish website is a page with a huge image that takes forever to load. And your viewer will probably click away from the site before they even get a chance to see it.

Creating clear, professional looking graphics

GIFs are really grids made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent.

A GIF may contain more than one frame, so it can be animated.

It is a good format for saving images with fewer colors, like charts and small graphics, images containing text, and drawings.

JPEGs are a good file format for images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.

Design tips:

a.) Use design to highlight functionality. For example; using gradients on button also helps make them seem more ‘button like', different coloured mouse over text draws attention to links. 

b.) Be wary of animation and sounds unless they serve a specific function. It is difficult to concentrate on reading what's on your site when there are things flashing on and off and flying around the page. And visitors with slow connections may resent that you wasted their time by forcing them to load animations and sound files against their will.

Some recent research does indicate that visitors assaulted by blinking ads are more likely to leave the site immediately, and are far less likely to bookmark the site, return to it, link to it, and recommend it.

c.) Don't use images as a web page background. Image backgrounds scream "amateur", because it's mostly amateurish sites that use them. They take longer to load and the text over the background image is usually difficult to read. 

d.) Design the webpage including all elements within it for your audience. For example, create a chilled out mood for a massage / therapy website using colours like lavender and blue. Use darker, more restrained, stronger colours for a more traditional finance website.

e.) If your business doesn't already have one, make a logo for your site, display it at the top of every page, and add a link from it back to your homepage. It will make your site look more professional and create a sense of branding to help people remember your site and recognise it as yours.
 
Going 'live'
Hosting

When it comes to hosting, cheapest is not always best. For a small-ish ‘beginner' website you shouldn't need much bandwidth (unless you've not been following the ‘image optimisation' guidelines!) But I wouldn't recommend hosting your website with the cheapest offer available until you have checked that they can give all the support you may need as a newbie. 

I would always recommend looking for a local contact telephone number on the website of the hosting company you are considering using, and ringing it to make sure there is an actual person at the end of it.  

Ask if you can get technical help from this number – they may only communicate via email for technical support. If they give you another number, ask how much it costs per minute, and ring it to make sure there is someone at the end willing to help you as a beginner should you have any problems connecting to their server, uploading your files, or sorting out your email accounts.

You should also make sure email accounts are included in the cost, and, if you have any dynamic elements such as a search facility or enquiry form on the website, check that the server will support the PHP or ASP etc needed to allow this facility to work, and if that is included in the hosting price quoted. 

Ftp 

You can download free ftp software to upload your new website to your new hosting space from Filezilla or Smart ftp, or you could try a free trial with Cute ftp.

Search engine optimisation
Although professional web designers have the optimisation of the website in mind from the start of design and development, as a newbie, you have to take it one step at a time!


This Article has been viewed 26 times. (Not updated in real-time.)
Top-level comments on this article: (4 total)
» left by Dianne Lehmann
 2 years ago.
131 fans.
Hi Emma.
 
Wow! You covered it all. I'm happy to say that I've already followed some of your suggestions on my own. For the rest, I'm adding this to my favorites so I can come back to it easily.
 
Welcome to SearchWarp!
 
Dianne
» left by Rhotini Henderson
 1 year 364 days ago.
This article was really comprehensive! Good job! I usually don't expect to get such a quantity of good info on article websites.
» left by Tony Summers
 1 year 364 days ago.
4 fans.
Hi nthere, I am currently building my own website and I am a complete novice. The info on including pictures was particularly useful, as I am including over 300. I will be referring to this article again in the future.
» left by Phillip Meilbeck
 1 year 360 days ago.
3 fans.
Hello:
 
I am rebuilding my website at present, and this was particularly helpful. You covered so many aspects of the topic. Pointing out 'amaturish' mistakes was a plus, so that I can avoid them.
 
Thanks!
We want your comments! If you can read this, you don't have javascript enabled, so you can't use this comment system. Please enable javascript.