Sie sind auf Seite 1von 16

5 Web Design Process and Principles

Objectives After completing this chapter, you should be able to: Understand the Phases of Web site Design and Development Process Understand the fundamental principles of Web design Understand the dos and donts of Web design. Learn how to develop and publish effective Web sites and pages targeted to specific purposes or audiences. Give us the tools, and we will finish the job. Sir Winston Churchill Outline 5.1 Introduction 5.2 The Web Site Design and Development Process 5.3 Basic Principles of Web Page Design 5.4 Dos and Donts in Web page Design Test your Knowledge | Exercises | Hands-on Practical

2 | Web Computing: Introductory Concepts and Techniques

5.1 Introduction
Creating a Web site with Web pages that successfully communicate, educate, entertain, or provide a venue for conducting business transactions also requires applying the elements of good Web design. This chapter discusses the site development process and the basic principles of good Web design and shows you how to develop effective Web sites and pages targeted to specific purposes or audiences. 5.2 The Web Site Design and Development Process There are numerous steps in the Web site design and development process. From gathering initial information, to the creation of your Web site, and finally to maintenance to keep your Web site up to date and current. The exact process will vary slightly from designer to designer, but the basics are generally the same. 1. 2. 3. 4. 5. 6. Information Gathering - Conceptualize and Research Planning - Create and Organize Content Design - Develop the "Look and Feel" Development - Produce a Working Prototype Testing and Delivery - Test It and Launch the Site Maintenance - Maintain the Site

Phase One: Information Gathering The first step in designing a successful Web site is to gather information. It involves conceptualization and research. Many things need to be taken into consideration when the look and feel of your site is created. This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you! what your business goals and dreams are, and how the Web can be utilized to help you achieve those goals. It is important that a Web designer start off by asking a lot of questions to help them understand the business and what the business owner needs in a Web site. Certain things to consider are:

Chapter 1

Introduction to the Internet | 3

Purpose Define the purpose/objectives of the Website. By defining the purpose you can better prepare and get the right tools / people for the job. What is the purpose of the site? Do you want to provide information, promote a service, and/or sell a product? Goals When starting a Web site project, you must first clarify what the goals of the Website are. Knowing your goals will impact the choices you make when putting the Web site together and ultimately contribute to its success or failure. What do you hope to accomplish by building this Web site? Two of the more common goals are either to make money or share information. So if, for example, the goal is to create an e-commerce Web site that sells products, then as a Web site designer you have to consider things like the following: o Do you need credit card processing capabilities? o Are you going to need a shopping cart system to take orders? o How many items will be sold on the Web site? Target Audience Is there a specific group of people that will help you reach your goals? It is helpful to picture the ideal person you want to visit your Web site. Consider their age, sex or interests. What will they get from your site? Learn anything or accomplish a task? This will later help determine the best design style for your site. Content What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering? Phase Two: Planning Using the information gathered from phase one, it is time to put together a plan for your Web site. In planning, we create and organize content. This is the point where a site map is developed.

4 | Web Computing: Introductory Concepts and Techniques

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the Web site aka your customer must be kept in mind when designing your site. These are, after all, the people who will be learning about your service or buying your product. A good user interface creates an easy to navigate Web site, and is the basis for this.

Figure 5-1: Planning a Websites Database structure During the planning phase, your Web designer will also help you decide what technologies should be implemented. Elements such as interactive forms, ecommerce, flash, etc. are discussed when planning your Web site. In planning, you produce the sites layout which is a diagram showing the structure of the Website. A simple diagram helps to visualize the Web site for both you and your client - this assuming someone has hired you to build a Website. Nothing special is really needed, just a series of boxes representing each page in the site with lines connecting them showing the linking strategy. A pyramid scheme is usually used to show the hierarchy of a Web site from the splash/home page down. Sketch the site structure: Once your site's goal is defined, you'll probably be eager to start designing your site using FrontPage, dreamweaver, etc, right? Not so fast. We recommend sketching out the structure of your site beforehand, as shown in figure 5-2.

Chapter 1

Introduction to the Internet | 5

Figure 5-2 Sketching structure

site

Figure 5-3 A visualized sample Web site structure

Sketching out a structure before creating a site can save you lots of work later. Use a pencil and paper (or a diagramming tool, like Microsoft Visio) to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this. This is essentially the process of creating a visual outline. Figure 5-3 is the visualized sample web site structure. And it will save you a lot of time to do this on paper before your site is constructed. Just think: It's easier to erase a few boxes and start over than it is to delete and rebuild pages in an alreadybuilt Web site. Sketch a common layout: After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages. Armed with your Website diagram and your Web site's text (complete text!) you can now choose a basic layout for your pages. You can go crazy with some funky artsy Web site (and sometimes it can work), but most of the time you should use standard layouts that people are used to: 1. Left side navigation. 2. Top navigation 3. Right side navigation.

6 | Web Computing: Introductory Concepts and Techniques

When in doubt, think of how books are laid out.

Figure 5-4 An example of a layout sketch. Some of the things you will want to consider as you are sketching the layout are:

Should your site have a header and footer that's common to each page? Should your site have a consistent method of navigation on each page? Do you have any marketing requirements that must be fulfilled? For example, should you stick to certain fonts and color schemes? Does your site need any legal requirements, like a copyright notice?

Eventually you'll use an HTML (Web page) editor like FrontPage to convert rough sketches into polished, professional-looking Web pages. Phase Three: Design Drawing from the information gathered up to this point, its time to determine the look and feel of your site. Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the Web site.

Chapter 1

Introduction to the Internet | 7

Using your sketches as a model, you'll eventually use the editor to design Web pages in HTML. You might use a table for the skeletal structure, or layout, of the page.

Figure 5-5 Converting sketches into professional-looking Web page. Your next task is to start considering the basic colors and fonts that you're going to use. You want to choose a style that fits the subject of the Web site. For example: pink doesn't do well for a hardware store, maybe some steel blues instead! The point to take away is to establish the style of the Web site before you start creating pages, otherwise you may find yourself doing pages over again. Your Web designer will create one or more prototype designs for your Web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your Web site, while other designers take it a step further by giving you access to a secure area of their Web site meant for customers to view work in progress. Either way, your designer should allow you to view your project throughout the design and development stages. The most important reason for this is that it gives you the opportunity to express your likes and dislikes on the site design. In this phase, communication between both you and your designer is crucial to ensure that the final Web site will match your needs and taste. It is

8 | Web Computing: Introductory Concepts and Techniques

important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your Web site. Phase Four: Development The developmental stage is the point where the Web site itself is created. At this time, your Web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site. With the before-mentioned completed, you're ready to actually start creating your Web pages. So what you need to do is: 1. Take the structure you developed in steps 1 to 5 to create your Web pages. 2. Link the Web pages together. Once the layout is defined, you can fill it with content. For example, you'll want to add text, hyperlinks, pictures, and interactive buttons. Even if you plan on building a large Website, it may be prudent to start out with a one page Website along with a link from another Website. Until you have content, there isn't a need for hosting so you can wait until you have minimal content developed before purchasing hosting. This is typically done by first developing the home page, followed by a shell for the interior pages. The minimum content for a Website is one page! At least a home page with contact information along with a summary of the information you want to present to your Website visitors. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the Web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas. Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well. This entire time, your designer should continue to make your in-progress Web site available to you for viewing, so that you can suggest any additional changes or corrections you would like to have done. On the technical front, a successful Web site requires an understanding of front-end Web development. This involves writing valid XHTML / CSS

Chapter 1

Introduction to the Internet | 9

code that complies to current Web standards, maximizing functionality, as well as accessibility for as large an audience as possible. Phase Five: Testing and Publishing (Delivery) 1. Website Testing A Website is the online identity of an online enterprise. It introduces a business online and gives the first-hand information to customers. Isn't important to check usability and worthiness of a Website before it goes live? After all, Website represents your business and a Web testing ensures that you make the right impression on the minds of targeted customers. Any Website designer worth his or her salt will test any Website before it goes live. A good Web designer is one who is well versed in current standards for Web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your Web site validates. Valid code means that your site meets the current Web development standards this is helpful when checking for issues such as cross-browser compatibility. Why we have to test a Website If we all had identical computers running identical software Website testing would be a breeze. But we dont. Do your Website visitors have a PC or a Mac? What browser are they using? Internet Explorer? Firefox? Safari? Chrome? And what version is that browser? Do they have javascript turned off? Do they allow images? What font size do they use as their default? Do they have a user-defined stylesheet? What is their screen resolution? What about your handicapped and impaired visitors? What will their experience be? A Website, unlike printed media, can be viewed on any number of systems that offer seemingly endless variables to take into account when designing a Website. There are a number of choices available today and users are allowed to pick anything that interests them. Thus, a Web testing ensures that your Website is functional on every browser and platforms. In addition, you can make your Website compatible for handicapped and blind users as well. And this is why Website designers have to test.

10 | Web Computing: Introductory Concepts and Techniques

Things to be tested on a Website: The primary goal of every Website is to maximize the experience of every user who surfs the site, regardless of what system they have. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different Web browsers), ensuring that your Web site is optimized to be viewed properly in the most recent browser versions. In order to enhance the usability of a Website, three main factors need to be thoroughly screened well: i. Browser bugs and compatibility Issues Older browsers (and even some newer ones) dont adhere quite as strictly to established standards as they should. So identical code may look great in one browser and not so great in another. These bugs manifest themselves in different ways: broken page layouts, incorrectly sized fonts, alignment issues and incorrect spacing are all common. After testing for browser bugs, code is revised to fix such issues to ensure compatibility on all popular browsers. ii. Functionality issues A Website may look great but if it doesnt function as it should its doomed. For example, if there is a registration form what happens when a user doesnt complete a required field? Or enters incorrect data in an email field? If there is an ecommerce component is the checkout process easy to understand and bug free? Testing functionality ensures users arent getting tripped up anywhere on the Website. The experience should be smooth throughout. iii. Accessibility concerns Accessibility is a crucial concern for all Websites. Nowadays, it has become a duty of Website designers to give equal access to all users irrespective of their physical strengths and capabilities. Accessibility testing ensures that handicapped and impaired visitors are able to use your Website. Do all images have alt tags? Does navigation have accessibility enhancements such as access key definitions? Accessibility testing also takes into account screen readers and the contrast of colors used (for the color blind). Many of these enhancements are easy to

Chapter 1

Introduction to the Internet | 11

make on a standards based Website and testing these enhancements ensures a good experience. Risks of not testing your Website: A Website that has not been thoroughly tested may look fine in one browser but break apart in another. It may alienate the handicapped and the impaired. And if it functionally doesnt work I can guarantee users will simply go elsewhere. Those are some pretty big risks and all of them can be avoided by simply testing before the Website goes live. 2. Delivery and Publishing This marks the official launch of your site, as it is now viewable to the public. To put your site on a Web server, you publish it. Publishing generally
means copying all of the files to a remote location on a server. In most cases, the remote location is either an HTTP path or an FTP path. The path you use depends on what technologies your server supports. A server running FrontPage Server Extensions or SharePoint Services If your Web server is running one of these technologies, you would publish your site to an HTTP location. For example: http://MyServer/MyWebSite. A server supporting FTP FTP (the File Transfer Protocol) is another popular way to upload files to a remote server. An FTP (File Transfer Protocol) program is used to upload the Web site files to your server. If your server supports FTP, you would publish to an FTP location. For example, ftp://ftp.MyServer.com/myFolder. (Please note that even though you publish to an FTP path, you would still visit the site using an HTTP path in your browser.) A server supporting WebDAV Although not as common as the methods above, your server may support WebDAV (Web-based Distributed Authoring and Versioning). If this is the case, you would publish your site to an HTTP location, for example, http://MyServer/MyWebSite. Once you find a Web server and determine the remote location for your site, there are other important things to know: URL The URL for your site may be determined by your hosting company, but you can also register your own unique URL. For example, if your company name is Adventure Works, your URL could be http://www.adventure-works.com. For more information on registering, search for "domain name registration" using your favorite search engine.

12 | Web Computing: Introductory Concepts and Techniques The correct file name for your home page Home pages can be named either index.htm, index.html, default.htm, or default.html depending on the kind of server your site will reside on. They are named this way so that when people visit the URL for your site, the server knows which file to automatically direct them to. User name and password These are often needed to publish pages to a remote server. Server restrictions The total file size of your site's files may not be able to exceed a certain size. Or there may be other restrictions, like not being able to use certain technologies. Make sure you know these limitations before designing your site.

Most Web designers offer domain name registration and Web hosting services as well. Once these accounts have been setup, and your Web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.

Phase Six: Maintenance The development of your Web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most Web designers will be more than happy to continue working together with you, to update the information on your Web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your Web site. If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your Web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you. A Web site driven by a CMS gives you the ability to edit the content areas of the Web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). Youll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!

Chapter 1

Introduction to the Internet | 13

Other maintenance type items include SEO (Search Engine Optimization) and SES (Search Engine Submission). This is the optimization of your Web site with elements such as title, description and keyword tags which help your Web site achieve higher rankings in the search engines. The previously mentioned code validation is something that plays a vital role in SEO, as well. 5.3 Basic Principles of Web Page Design Well organized and structured Web pages are easier for others to use. Listed below are six main principles for effective Web page design which can help add structure to your site. 1. 2. 3. 4. 5. 6. Include essential elements on each page. Use appropriate navigational aids. Keep page lengths short. Use appropriate text fonts and styles. Use color appropriately. Keep graphics small.

1. Include essential elements on each page. Any Web page may be accessed directly from another Web site, therefore each Web page needs to contain essential information which allows it to act as an independent document. This essential information is usually placed into one of three main parts of the Web page; the header , the body, or the footer.. The header is used to bring continuity to the various pages of the Web site, as well as indicate the main topic of the particular Web page. Therefore, the header usually contains a banner graphic which ties the various Web pages of the site together, the title of the document, and navigational aids which link to other pages within the Web site. The body contains the main textual content of the document, as well as hypertext links to other related Web sites. The footer (included in the body when coding) is used to verify the origin and authorship of the Web page. Therefore, the footer should contain the author or contact person of the site, as well as the institution with which the author is affiliated (if any), navigational links to other pages within the Web site, the date of last revision, and a statement of copyright. Other useful information might also include the author's e-mail and mailing addresses, as well as the URL of the document.

14 | Web Computing: Introductory Concepts and Techniques

2. Use appropriate navigational aids. Good navigational aids are essential to good Web page design. One way to increase the navigability of Web pages is to include "return to home page", "previous page", and "next page" links on each page. Local navigational links should be located both at the beginning and end of the page layout so they are easily accessible to the viewer of the Web page. By including the navigational links at the end of the page, the user is not forced to return to the beginning of the Web page after browsing it in order to access another page. Another method used to increase navigability is to provide a menu or table of contents of the Web site on each Web page. 3. Keep page lengths short. It is usually recommended that Web page lengths not exceed two or three screens worth of information. A major disadvantage of long Web pages is that the user needs to depend on the vertical scroll bar to navigate within the page, a process which can be disorienting to the viewer. In order to keep Web pages short, longer topics can be subdivided into logical chunks of information on separate Web pages. Individual Web pages should include only relevant, yet complete, information on a single topic. 4. Use appropriate text fonts and styles. Different Web page browsers may display special non-standard text fonts in various ways. For this reason, Web page designers should use standard text fonts in designing Web pages. Use major HTML heading styles very sparingly and reducing header sizes in general so that more information can be displayed on the screen at one time without loosing legibility or causing over crowding to the screen layout. 5. Use color appropriately. Color should be used sparingly and only to highlight key elements of the page or to indicate specific functions. Just because you can view a particular color with a particular browser does not mean that others will be able to view it on their monitor with their browser. Therefore it is important to use browser-safe colors, which are also known as Web-save colors. Black is traditionally used on Web pages for the main body of text because of its legibility on a light background. Some colors are traditionally used to convey a particular meaning. Red, for example, is often used to signify danger or warning, and thus should be used sparingly to convey such

Chapter 1

Introduction to the Internet | 15

meaning. Blue is traditionally used to indicate hypertext links to other Web pages, and a shade of purple to indicate links which have already been accessed by the current user. Altering these traditional color schemes will most likely confuse the new viewer to the Web site. 6. Keep graphics small. Graphics can effectively be used to add interest to a Web page, but the amount and size of graphics should be kept to a minimum. Too many graphics, or a single large graphic, can take a long time to download. Usually, using several smaller graphics, as opposed to one large one, can create a better impression for visitors to your site. Some quick tips to remember 1. Keeping Web pages small - under 60k 2. Keeping content headers (H tags) clear and to the point. 3. Keep paragraphs small. 4. Keep contact information (email - phone) easily found in same place on all pages. 5. Keep look and structure of the Web pages consistent across all pages. 6. Provide a 'Home' button to take the user back to the cover (a.k.a.: splash, home) page of the Website. 7. Make sure links are always underlined. (Don't use CSS to remove the underline: big mistake if you do since people assume that underlined texts are links.) 8. The company logo should appear on every page in the same spot and it should always be a link back to the home page. 5.4 Dos and Donts in Web page Design Dos in Web page design Plan the Web site structure and navigation Keep the layout simple and intuitive Use the same general style throughout Add standard navigation tools to each page Include copyright and contact information on each page Use original or free graphics Use images wisely and keep file size small for fast download Respect copyright and intellectual property rights Always state the source of all materials used Spell check and proofread each page

16 | Web Computing: Introductory Concepts and Techniques

Donts in Web page design Dont use blinking or glowing text for emphasis Dont use long paragraphs of text divide them into readable chunks Dont create dead end pages, which have no links to any other local page in the site Dont design for a specific browser Test Your Knowledge 1. How will other people be able to see your Web site on the World Wide 2.
Web? Why is it beneficial to sketch a map of your Web site before you create it?

Exercises: 1. Explain the importance of applying different tests to assure international standards in web design, usability and accessibility standards.
2.

Hands-on Practical

Das könnte Ihnen auch gefallen