An Introduction to Website Design Essay Example

and whether the role of the Website is to drive demand or close the sale, "best possible Website" must be viewed in terms of the customers' wants and needs.

So to take this one step further, we must identify everything that the customer wants and needs to make the purchase or convince themselves of the value of our product, while on our Website. The next step is to determine exactly what is driving the cost of the Website. Whether a Website is built or modified in house by full-time employees, contracted to outside resources at an hourly rate or some combination there of, the cost of a Website is directly proportional to the time required to design, develop, test and implement it.

By far the single largest source of preventable expenditures result from changes in pacifications after development has begun. To more clearly illustrate this point to those who have not written software themselves, think of a carpenter building a house. Now picture our imaginary carpenter having Just completed an outside wall to wall he Just built being there, you now want that wall to be here. In order to fulfill this request, the carpenter must now disassemble the previously constructed wall, and build another wall in the new location.

Now lets examine the cost of this new wall; first we have the cost of creating the first wall, the costs of disassembling this wall ND then the cost of constructing the new wall. So in effect, we have one wall for the price of three! So by analogy, if someone would completely change the specification of a Website after it had already been created

to a previous specification, the cost of Website would now be at least twice what it should have been if the correct specifications were used the first time.

Rarely would a completely different design specification be provided after a Website had already been created. In fact, specifications most often change a little bit at a time, but by changing the design a little bit at a time you are in effect persuading that carpenter to use pieces of the old wall to build the new wall. Consequently, we are back to the situation of the carpenter (or the programmer) disassembling the old wall while building the new wall (or new Website).

Consequently, design changes can double or even triple the cost of creating your Website. Therefore our bottom line is, if we want to build our Website at the lowest possible cost, strive to minimize, if not eliminate, design changes once development has begun. Consequently, the goal of any small business wishing to create a Website o sell or market their products should be to evolve the functionality of the Website to the point where all of the user functionality has been identified and designed, before programming begins. Website Design - Functional Specifications So what is required to know that you have "fully identified and designed" the user functionality? The answer to this will vary somewhat depending on who is answering the question, but most so called "experts" will say that all of the user processes need to be defined in detail and the layout of content for each of the web pages needs to e specified, and hierarchical organization of the web pages needs

to be determined.

This collection of elements, most often referred to as "Functional Specifications," will enable a developer to create an operational version of the desired Website in an expeditious fashion, as the inevitable design changes have been minimized or eliminated. So to summarize, there are three core elements of Functional Specifications for Website Design: ; Site Map detailing all of the Website pages and their hierarchical organization ; Warfare Diagrams to illustrate the layout of individual web pages ; Documentation f Transactional Scenarios or "User Functionality' (e. . Buying, selling, creating a listing, etc. ). Each of these documents should be provided to the Website developer before they I suggest "Web Design" on Wisped. This would be a good resource to bookmark with your browser, due to the availability of numerous hot links to Website and Internet related terminology within this article, not to mention the See Also topics and References listed at the end. 4 (1) Website Site Map The most important step in planning your Website is to organize your information.

Thinking carefully about what you want to say and how you want to say it requires hat you become intimately acquainted with your site content. Once you have done this, let the nature of the content suggest how it should be subdivided and organized. Because Websites are usually organized around a single home page, hierarchical schemes are particularly suited to Website organization. A hierarchical organization also imposes a useful discipline on the content, because hierarchies are practical only with well-organized material.

Site diagrams are excellent for planning both the broad scope of the site and the details of where each piece

of content, navigation, or interactive functionality will appear. The Site Map identifies and lists all of the pages in the Website, and shows the organizational hierarchy of these pages. In addition to identifying every page that must be created, it helps specify user navigation throughout the Website illustrating how the desired user functionality is supported by the hierarchical structure.

For a plethora of background, references and related information on Website Site Maps please see the "Site Map" and "Estimates" articles on Wisped. NOTE: The hierarchical structure of the Site Map provides a logical organizing framework for Website content, but this should not be interpreted as requiring the seer to navigate in a linear fashion back through the homepage to reach a third or fourth level page on a different main branch of the framework. For example, in the diagram above it could make sense to refer users to the Public Relations Department for more information on the Company Mission.

In this case it would be perfectly acceptable for the Website designer to include a link to the Public Relations page from the Company Mission page on the Website. 5 (2) Weapon Warfare Diagrams A Warfare Diagram illustrates the layout of content on a web page, without any aesthetic elements such as color and branding. Its purpose is to identify and document the layout, navigation and functionality of each key web page. This will eliminating the distraction of color and design.

Wireless are a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. They provide a visual reference upon which to structure each page, and also allow for

the development of variations of a layout to maintain design consistency throughout the site. Wireless serve as a stable base on which to consider changes, diverse user paths, and new requirements. They help define the positioning navigation elements and provide an area for utilities such as helpful information or search functionality.

Wireless establish the language, content and structure of interactions users will have with a given web page. When used in conjunction with a Site Map, they further establish the nature of user interactions throughout the entire Website. For a brief but useful definition of Website Warfare diagrams, please see the "Website Warfare" article on Wisped. In this article, there is an External Link "Homepage & Seepage Warfare Examples" that provides examples of a Homepage and a Seepage Warfare diagram.

Documentation of Transactional Scenarios

The functional processes of a Website, such as buying, selling, or creating a listing, specify how the strategic objectives of the Website (I. E. "What is the Website supposed to do? ") are fulfilled through user functionality. These functional processes are documented via transactional scenarios which at a minimum describe the procedures for the scenario and ideally include a process flow diagram(s) that lays out the sequence of steps in addition to identifying decision points and criteria.

The Microsoft Office Online Powering 2003 course "Flowcharting with Flair" provides n introduction on what you need to know to create Flow Charts (also called Process Flow Diagrams) with Powering. The Wisped article "Flowchart" provides an overview and historical background on Flowcharts. It also explains the typical symbols used in flowcharts and provides a couple of example Flowcharts. 7 Search Engines: What you really

need to know before you build the Website!

A significant exploration of how Search Engines influence the design of Websites is outside the scope of this document and frankly beyond the comprehension level of many individuals that do not have an Information Technology (IT) background, and hat is currently interested in launching a website will at some point (most likely sooner rather than later) want to invest in search engine advertising, this is probably an excellent time to begin learning the details of how search engines work and how to use them to benefit your Website and online business.

How Search Engines Work (The Basics) Most Search Engines break down the activity of providing search results to users into three processes: Crawling, Indexing and Serving. ; Crawling: Crawling is the process by which search engines discover new and updated pages to be added to their Index of the World Wide Web (WWW). The search engine component involved in crawling Websites is most often called a robot, spider or web crawler (also referred to as an ant, automatic indexer, boot, and worm). Search Engines often give their robots a name (e. . Google, Yahoo! Slurp, Monsoon, etc. ). ; Indexing: Search engines process each of the pages that they crawl in order to compile a massive index of all the words it sees and their location on each page. ; Serving: When a user enters a query, the search engine matches pages in the Index with the query to provide the most relevant results for the user's search. The search engine then uses an algorithm to rank each of the matching pages and returns the search

results that most of us have become familiar with. In the screen shot above, the unpaid or "organic" search results are in the column to the left; whereas the paid advertisements are at the top of the page and in the column to the right where they are labeled "Sponsored Links. " Google's Webmaster Central The Google Website has a significant collection of resources (including tools, articles and blob posts) that are designed to help Webmasters effectively use Google for

Search Engine Advertising, increase traffic to their Website and answer questions regarding crawling & indexing. These resources are not always easy to find, even if you know what you are looking for, so bookmark particularly useful pages the first time you find them. Http://www. Google. Com/webmasters/ When you are motivated to investigate the online Google Resources, register yourself for the Webmaster Tools.

You won't be able to make full use of the tools until your Website is up and running and you are ready to do research for your Search Engine Marketing Campaign (which Google has branded as Towards), but if you have gone o the trouble of reaching the above page you are only a few clicks (starting with the "Sign in to Webmaster Tools" link) and about three minutes away from having an ID and account with Google. Next, visit the Webmaster Help Center (using the "Help Center" link above) and print out a few of their more informative articles. The best Google articles to start with are: "Google 101 How Google crawls, indexes, and serves the web" "(Google) Technology Overview' "How can I create a Google-friendly site? " "Webmaster Guidelines" After you

have read these four references and followed all of the links within these preferences to get more information on any terms that might be unfamiliar to you, you are probably ready for a discussion of Website Design as it relates to Search Engine Marketing. 10 Yahoo! Search Help The IMHO! Search Help" page (shown below) provides several resources useful to designing, launching and running a Website.

Most resources useful to Webmasters on the Yahoo! Website will be found in the sections Using Yahoo! Web Search, Search Advertisers and Web Publisher Resources. Yahoo's own version of Webmaster Guidelines is called IMHO! Search Content Quality Guidelines. The first thing someone will likely notice when looking at the Yahoo guidelines after having read Google's Webmaster Guidelines, is that there is significantly less information in the Yahoo guidelines. Unfortunately, this same generalization (of providing less information) can be used to describe the depth and breadth of the resources available on Yahoo versus Google.

MSLive Search Webmaster Help Center The "Live Search Webmaster Help Center" (shown below) provides information webmasters need to know about Live Search, including how Monsoon works, guidelines for getting Websites indexed successfully by Live Search, and usage information on Man's Webmaster Tools. Man's own version of Webmaster Guidelines is called "Guidelines for Successful Indexing. " Unfortunately, the information available in the Live Search guidelines is also significantly less than what is provided in Google's Webmaster Guidelines, and there are also few resources with less detail information on the Live Search Website.

Although I do not intend to recommend Google's Search Engine over the search engines available at Yahoo! And MS, or the advertising programs for these

three vendors, it is clear that the best resources for learning about search engines and how o create a search engine friendly Website are available on the Google Website. Consequently, I am recommending that people new to search engines and Website Design, begin by studying the materials on Google's Website. After obtaining an understanding of how Google's search engine functions, it should be fairly easy to pick up an understanding of the Yahoo! ND MS search engines. The Design Specific considerations also should not vary significantly from one search engine to another, so the Google materials should be considered first since there are more resources and the available resources have more detailed information. Consequently, from this point on when references are cited in this document, they will most often be Google references. 12 Basic Website Design Considerations for Search Engines There are several design considerations that can and should be influenced by the operation of Search Engine Robots.

While some of these design considerations can be loosely classified as ethical or common sense standards, many are unique to the operation of search engines and capabilities of the search engine robots: ; Links to a page on your Website from other Websites are very important in determining how your page is ranked by Google (and the other search engines) and this affects how close to the top your page will be displayed in the search results. ; Search engine robots are much more effective at crawling and indexing Website text than rich media content (such as Flash).

So when incorporating rich media elements into your Website, you need to be aware of the pitfalls and workarounds

available to Webmasters to ensure that rich media content is successfully evaluated and indexed by the search engines. ; Search engine robots can have difficulty navigating whimsically generated web pages or deciphering page links contained in rich media content. Many of the resulting problems can be avoided by creating a Site Map to logically organize the Websites hierarchy and making use of a robots. Ext file to prevent any problematic pages from being crawled by the search engine robots. Any remaining crawl errors can be discovered, analyzed and fixed with the help of the Webmaster Tools provided by Google. ; Since content affects how search engines rank Website pages and identify relevant pages for a search, knowing how your page content is evaluated by the robots can elf you formulate page content that is more likely to show up in appropriate search results and is displayed as near the top of the results as possible. Since search engine robots use the indexed results from prior Website visits, negatively affect your page rankings. However, there are several actions that can be taken beforehand by Webmasters to minimize these consequences, and Google's Webmaster Tools can be leveraged to minimize any damage that may have been caused after changes have been made. ; By making use of TITLE and DESCRIPTION meta tags, Webmasters can influence the content of the title and summary (snippet) hat are used for their web pages in Google Search Results.

Before reading the following sections of this document that explain the above issues in more detail, go to the Google's Webmaster Help Center and print a current copy of the "Webmaster Guidelines" and also

"How can I create a Google-friendly site? " (if you have not done so already) as these are the two best Google resources for creating what they refer to as "A Google-friendly' Website. In regards to ethical issues, Google and the other search engines maintain active programs to prevent what they interpret as deceptive or manipulative behavior from favorably influencing how their search engines rank pages (or Websites) in the search results.

Although the majority of Website owners do not purposely engage in unethical practices, it is very useful to familiarize yourself with some of the most common practices, so as not to accidental trigger an automated reaction from one or more of the search engines. Conceivably, parts of anyone's Website may have elements that closely resemble certain deceptive practices and therefore could have their Websites ranking adversely affected by a search engine. "An Introduction to Website Design" 2008 Bookish Business Consulting

Google's Quality Guidelines Google addresses the most common forms of deceptive or manipulative behavior in the Quality Guidelines section of their "Webmaster Guidelines. " I will repeat that list here, but refer readers to the Google Website for an explanation of the terms used in these.