Build your own website
Build your own website
R E L A T E D   C O N T E N T
ADVERTISEMENT

Build your own website: Design and structure

Creating your very own corner of cyberspace needn't be hard work. In this feature we cover the design aspect of building a website

Webactive staff, Webactive 05 Jul 2004
ADVERTISEMENT

Like so many things in life, websites are often - and perhaps unfairly - judged by the way they look. If your site isn't eye-catching, or appears clumsy, cluttered or garish then you could lose visitors straight away.

It might seem harsh, but it really doesn't matter how interesting or useful the content of your website is if it doesn't have an attractive and user-friendly front end. The design and planning aspects of creating a site are absolutely crucial - not just window dressing.

So what is the best approach to designing a website? Well, a healthy dose of common sense usually helps. Take your time. Be prepared to make changes. Learn from the designs used by other sites. Listen to other people's opinions and viewpoints. Test everything and always look for improvements.

Who, where and why?
Some of the most basic marketing and media principles can be applied to the design of a website to help establish its content and appearance. For starters, ask yourself who will be visiting your website.

Commercial websites are faced with the job of trying to meet their customers' expectations. If your site is promoting you yourself (such as an online CV), make sure it looks impressive and appealing to potential employers or clients. Even a hobby or club website needs to meet the standards required by other members, and encourage new members' interests.

The question of 'where' is important in a number of cases concerning the location of visitors to your website. Commercial websites may be concerned with time differences overseas when answering customer queries. Such a site may need to alter its online ordering to accommodate foreign currency and posting of goods. You may also want to tailor the way your site looks depending on whether it has a local, national or international appeal.

But the most important question is 'why'? Why will visitors want to access your website, and why do you want to create one in the first place? Commercial sites are easier to define, but a personal website also has to have a clear purpose to avoid the content becoming meaningless. Many personal websites subsequently turn into either a CV for prospective business or a shared interest site, such as one about cars, photography, artwork and the like.

In either case, you'll need to make sure that the design reflects the type of person you want to attract to your site: professional-looking for a CV or commercial site, and warmer or friendlier for a personal site.

Learn from others
Once you have determined the whos, wheres and whys, it's time to look for some inspiration and guidance. Other websites are a great source of research, providing a wealth of ideas on what can be done and what should be avoided.

Looking at websites with a similar content will help with your own design ideas, but inspecting sites that cover a different subject from a similar angle may also help you to glean new ideas. For example, if you're running a bed and breakfast establishment and want to produce a site, don't only look at other B&B sites, but also visit hospitality and corporate entertainment sites to see how they deal with the public and potential customers.

Try to be very critical when viewing other websites, noting the good and bad points. Inspect the content, layout and ease of navigation through the site. Can you find what you're looking for? Is it clear what the website covers? Is the content accurate? Do pages download quickly or are they crammed with images that slow it down?

Structure it
When it comes to designing the layout of web pages, there are several approaches. A site map is one of the best starting points, particularly if you plan to have several pages. A site map looks like a hierarchical organisational chart, with a homepage at the top and then the other pages branching off, with sub-branches if required.

For example, a CV website may have a homepage as an introduction, with pages branching off for employment, qualifications, contact details and hobbies. Within employment, there may be separate pages branching off to cover each job that's outlined, including references. Thus the site map would have three levels of pages with the homepage at the top, the employment, qualifications, contact details and hobbies pages on the second level, and the job detail pages on the third level.

You can start off by scribbling your site map on a piece of paper, although programs such as Microsoft Word and PowerPoint have an organisational chart that can help create a site map. Using Word, click on the Insert menu and choose Object. From the dialogue box that appears, select the Create New tab and scroll down to Microsoft Organisation Chart. Select it and click on OK.

When inserting a new slide in PowerPoint, look for one with an organisation chart. In the cases of both Word and PowerPoint, when you're creating an organisation chart, click in the available boxes to add or edit text and use the toolbar buttons to add extra boxes.

Remember that as your website develops, its content will probably continue to grow. Try to make sure that the structure you eventually plump for has some built-in capacity for easy expansion that won't have an adverse impact on how the site looks or works.

Later on, when you are actually putting your site together, check to see how a visitor will navigate around. Are there any potential situations where they cannot return to the homepage, or will get lost in pages within pages? Will a link to another website make it difficult to return to your site? If so, setting external links so that they open in a separate window may help.

Style trial
With the structure of your website planned, it's time to decide upon a theme. Maintaining the same theme (colours, borders, fonts) throughout a website looks more professional, maintains continuity and helps visitors get to grips with the layout of the website.

Your research of other sites should have helped you to learn which colours should be avoided and which are easier to read. Too many websites attempt to impress by assailing their visitors with a wide variety of fonts and colours. The results are usually disastrous and amateurish.

If you want to experiment with colours, borders, backgrounds and fonts, you could try using a word processor program to create the different web pages for your site. This will allow you to quickly test the presentation of the site.

Next, move onto content. Text, images, animation, video, sound and other elements of content need to be carefully considered and planned. Mistakes to avoid include cramming individual pages with too much information, and using too many large filesize items, which slow the opening of a page. An impressively animated introduction page may show off your technical ability, but think about how many times you visit other such sites and instantly look for the skip button.

Technical enhancements
There are many design elements that can help to enhance your site's functionality. Email reply forms, guest books, discussion forums and links to other sites help visitors to communicate with you and other visitors.

Including such items can transform a site into a meeting place for people with similar interests. Depending on the purpose of your site, you could consider including such features. Sometimes, however, the simplest sites are the best. They require little maintenance, are quick to download, and focus more on the content than the gimmicks.

The best approach is to consider the content you intend to include in your website and pick out any items that may cause problems. Check the file sizes of images and animations, ensuring they are not too large, resulting in delays in download time. If the quality of an image is important but the file size is large, look at using thumbnails with an option to open the image fully in a separate window.

If you want music to play when your site opens, make sure to include a prominent option to switch it off - not everyone will appreciate the addition of an audio aspect, and your good intention might be interpreted as an intrusion by some visitors.

Finer points
Other common mistakes to avoid include spelling and grammar errors. You might be surprised just how many sites there are online that are guilty of this basic presentation error. Some web design programs include spelling and grammar checkers, but a quick copy and paste of your text into a word processor would also do the job.

Other important design aspects include navigation menus, borders and items that may appear on every page of the site. Some web design programs can add a navigation bar for you. If you're familiar with creating frames in a website, you may want to include one or two for menu options and contact details so they appear on every page. Alternatively, you may want to look at allocating the same amount of space on each page for these items.

Of course, there are limits to what you can achieve, and your results will be governed by your budget, technical ability and the tools at your disposal. Naturally, such aspects will dictate how complex your site becomes and how stylish it looks. After all, things like drop-down menus, Flash animation and Java script elements need a certain amount of know-how as well as expensive software to reproduce effectively.

Ongoing design
Testing your site's design is absolutely vital before officially 'going live' with it. Check it out using a variety of computers, monitors, operating systems, browsers and internet connections. All of these elements can have an impact on even the most careful of designs, and you should be prepared to make some changes in order to resolve potential issues. You could launch a test version of your site and ask friends and relatives to test it out for you and give you feedback.

But even when you're finally confident that your website is ready for all and sundry to view, the hard work doesn't stop. As visitors interact with you, your site will carry on growing and developing in terms of both its design and its content. Listen to ideas from friends and visitors concerning improvements, suggestions and general enquiries. You'll probably end up with a long list of alterations to improve the website to make it easier to read and more informative.

The design aspect of a website shouldn't be underestimated, and will almost certainly be something you need to consider as an ongoing concern. After a website has been created and published, the design should be frequently revisited and kept fresh. Keep looking at other websites for new ideas and easier methods.

And, most importantly, take into consideration the opinions of your visitors, especially if you're running a commercial site and they're your customers.

See also:

Create your own blogIf you want to offer advice or share your thoughts with the masses, set yourself up with a blog. We show you how to get involved in this growing phenomenon  30 Sep 2004
Start your own websiteWhether you want to promote your business, share your hobby with like-minded folk, or show off your photography skills, we tell you how to get started ...  03 Jul 2004
Creating your very own corner of cyberspace needn't be hard work. Here we look at all the different ways that you can include and manage email on your website.  09 Jun 2004
Creating your very own corner of cyberspace needn't be hard work. Here we show you how to create animations and include them in your website.  08 Jun 2004
Creating your very own corner of cyberspace needn't be hard work. In this feature we take a look at domain names - what they are and how to get hold of one.  19 Mar 2004
It's easy and cheap to create your own web page but many people don't realise what they can do with one. Our guide shows you some clever and unusual reasons why you should have a place in cyberspace.  26 Nov 2003

All Online

Like this story? Spread the news by clicking below:

Post this to Delicious del.icio.us    Post this to Digg Digg this    Post this to reddit reddit!

Permalink for this story
M A R K E T P L A C E
Configuration based security is a pro-active way to defend against attacks. Click for whitepapers.
Discover how remote support can fuel your IT business in ways you've never thought of before.
Access your remote PCs from any web browser or mobile device. 30-day free trial! (CC Required).
Apply ITIL best practices at your service desk while eliminating integration cost. Learn more here.
Make presentations, review documents & share your entire desktop. 30-day free trial! (cc required).
Have your product or service listed here >   
Sponsored links
F E A T U R E D   J O B S
| Aston Carter
C# Web Developer, Finance, London Financial Services Required: C#, ASP.NET, AJAX Fantastic opportunity not to be missed!! This is a great opportunity to work on a unique objectives that no other company is doing working ... more >
| JAM Recruitment
Senior Hardware Engineer Scotland/Edinburgh Communication Systems Permanent Position 40-45K+Benefits A leading organisation involved with the design and development of data acquisition systems and synthesis boards for a range of radar, signal intelligence and software radio ... more >
| JAM Recruitment
FPGA Engineer Defence/Safety Critical Buckinghamshire Permanent Position 45K+Benefits A leading UK defence organisation requires an experienced digital design engineer to strengthen its existing development team due to a number of long-term projects that have recently ... more >
| JAM Recruitment
DSP Engineer 3 Months Contract Hertfordshire £Excellent Rates£ This position requires you to have experience of measurement algorithms development for the generation and analysis of digital wireless communication standards including GSM, EDGE, UMTS, WLAN and ... more >
More job opportunities