An introduction to the InternetDesigning a web site [Archives:2003/647/Education]

Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center
We have seen some ways in which a web site can be used to support a business, but we have not considered how we design the web pages to underpin these different business models. There are two problems we
face in meeting this design objective:
– How to produce a conceptual design that will work well.
– How we can implement that design using the various programming languages and techniques available to us.
The first objective is difficult to achieve. It involves an understanding of both graphical design and the characteristics of the web as a medium. So before you start mixing your colors and getting new pens to draw, you have to think of the conceptual design of your web site first.

Conceptual Design
Before you start designing your web site, you have to sit down and try to answer the following questions.
– What is the web site for?
– Who are the customers?
– What other web sites are available?
– What graphics are needed and why?

Web site objectives
Let's discuss some of the possible answers for these questions. The web site objective might be to sell something. As far as this aspect is concerned, the previous lesson might help you to get a clear idea about what you should do if the objective is to make money. You might as well design your web site to tell the people who you are and how to contact you. In this case the objective might be to make yourself widely known.

Web site readers
So you have some ideas about the type of the site and its objective. Let's now consider who the potential readers or users are and what they require. As a web designer you need to know what kind of information the web customers require and what their expectations are. You have also to think of what kind of connectivity the customers may have. If they are home based users with simple low speed modems the web site design must respect this constraint.

Other web sites
Before you design your web site, it will be a good idea if you check the Internet for available web sites serving in the same category of the web site you are intending to have. This will help you focus more in providing similar services, if not better.

Using graphics
Since it is possible to add graphics to your web pages, you have to think of the type of the graphics and multimedia you will want to include in your site. Moreover, you have to look after the resources and copy rights of the graphics that you are going to include in your web site.

Detail Design
Once the conceptual design is understood, the detail design can be undertaken. It is usual to split a web site into number of separate pages, each page will become a separate HTML (discussed later) file. This needs organizing in the detail design. Contrasted with the system of providing information by using papers or video streams, web sites are built depending on the navigation between the HTML files. The web site visitors should be provided a way to navigate between the resources of the web site and the art of designing which is intended to make the navigation easy to use and understandable by regular visitors. Each HTML page should include information covering part of the message of the web site or links to other web pages in the same site or in another Internet location. To make the navigation and structure of your web site easy to use, you have to decide on the contents of the HTML pages and the links from one page to another. So to make designing easier and more organized you have to draw your web site map.

Web site map
In a web site map the web site designer clarifies the web pages available in the site, the title of each page, the HTML file name of each page, and the links between the web pages. Fig 1 shows a sample of a web site map.

As we can see, the web site includes eight web pages. The main page title is Home Page and the HTML file for this page is called index.htm. It is very important to notice that the first web page HTML file name in any web site should be called “index” , “default” or “home”. It is kind of standards web designer should follow. This “index” file is the first web page to show up when the web site is browsed. Most of the time this page title is “Home Page”. Each web page must have a title to label it when it is browsed. The title is also important to reflect the subject of the page because this will make it easier for Internet search engines to recognize. For example the Home Page title of yementimes.com is “Yemen Times Online”. You can find it in the top left corner of your browser when you visit Yemen Times web site.
The navigation structure of the web site also appears in the site map. The line between two pages means that there is a link between them. The arrows at the end of the lines indicates the direction of the link. For example, you can go from page “Product 2” to page “Product 1” and vice versa. Another example, in page “Product 3” there is a link that takes you to page “Follow-up”, but there is no link to take you back to page “Product 3”. It depends on the perspective of the web designer on how the web navigation should be.

Graphics
After the site map, you have to decide on the graphics and audio or video you will include. Overusing the graphics in a web site might make the loading or the web site very slow depending on the Internet access of the users. For that, you have to be careful and accurate in selecting the type and the location of the graphics that you are intending to include in your web pages. Don't over use graphics in your Home Page because that will make it hard for any Internet search engine to recognize the category of your web site.

Coding
Now we have got our web site map ready and all of the resources that we need formatted and ready to be placed. Next step, we have to choose the tool for designing the web site. There are different tools that we can use to design the web site. Some of these tools are just simple text editors like “NOTEPAD” that comes with Windows operating systems and others are powerful and integrated tools such as Microsoft FrontPage and Multimedia Dreamwaver. In future lessons, we will use some of these tools to design our www.yemenkids.com.

Next week's lesson: HTML
——
[archive-e:647-v:13-y:2003-d:2003-07-03-p:education]