by Emma Fovargue
Posted on January 14, 2010
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. A good beginner’s guide to html can be found at: http://htmldog.com/guides/htmlbeginner/
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 (http://www.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.
For more information on optimising images for the web, have a look at this tutorial: http://inobscuro.com/tutorials/read/35/
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 (http://filezilla-project.org/) or Smart ftp (http://www.smartftp.com/), or you could try a free trial with Cute ftp (http://www.cuteftp.com/cuteftp/).
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! So now you’ve designed, built and uploaded your website, take a look at some of the ways you can now begin to optimise it for search engine ranking:
http://www.seomoz.org/article/beginners-guide-to-search-engine-optimization
http://www.seo-news.com/archives2009.html
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. A good beginner’s guide to html can be found at: http://htmldog.com/guides/htmlbeginner/
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 (http://www.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.
For more information on optimising images for the web, have a look at this tutorial: http://inobscuro.com/tutorials/read/35/
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 (http://filezilla-project.org/) or Smart ftp (http://www.smartftp.com/), or you could try a free trial with Cute ftp (http://www.cuteftp.com/cuteftp/).
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! So now you’ve designed, built and uploaded your website, take a look at some of the ways you can now begin to optimise it for search engine ranking:
http://www.seomoz.org/article/beginners-guide-to-search-engine-optimization
http://www.seo-news.com/archives2009.html
Emma Fovargue is an author and co-founder of Efdesign Web Design Wakefield. We specialise in expert web design, development and optimisation at very competitive rates. We can also help you get a grantto cover the cost of your web project from your local authority. Take a look at our recent work
Print This Article|
Send To A Friend|
RSS Feeds|Read More Related ArticlesCOMMENT ON THIS ARTICLE...
Post them now in our forums for quick, helpful advice from thousands of members!
Basic Design Tips for the Beginner
Best Colors For Web Designing
Print Design vs. Web Design - Part 1
Best Colors For Web Designing
Print Design vs. Web Design - Part 1
SEO Articles
Internet Marketing Articles
Development Articles
General Articles
And also in our Archives
Internet Marketing Articles
Development Articles
General Articles
And also in our Archives
Drive traffic to your business and get recognized as an industry leader by sharing your knowledge on Site-Reference. Authors are given a wide range of exclusive benefits here at SR; so checkout what we can offer to those that…
We’re always on the lookout for new writing talent so even if haven’t written for the web yet, feel free to contact us anytime
We’re always on the lookout for new writing talent so even if haven’t written for the web yet, feel free to contact us anytime
Wheat writes: Thanks for this nice article You are providing good tips for Web Designing Beginners.
We are Web Designing India providing Best Designing, Development Hosting services,Internet marketing, software development solutions.
6:39:51 Wed Feb 3 2010 CST
Rob writes: The last point suggests the beginning of the SEO process. Should the SEO process not start at the desgn process, otherwise the designer may have to start unpicking the original site design and structure!
3:48:48 Thu Jan 21 2010 CST
Juergen writes: I'm sorry to say so, but in some points this article sounds a little outdated...
* For example the png image format is not mentioned at all, where it seems to be the darling of many professional web designers, and certainly a good replacement for the old gif format (minus the capability to animate / Thank God).
* "Don't use images as a web page background." Again, the current trend seems to go TOWARDS very subtle background images. Most current and trendy pages often use a pattern as page background, sometimes combined with another pattern as content background! I agree: it might be difficult for a novice to get this look right, but to say simply "don't" isn't helping much either... Also: gradient background images are still a valid option until IE becomes compliant with CSS3.
Just my 2 cents...
14:05:37 Thu Jan 14 2010 CST
Pages: 1