Introduction to Web Site Design

• The internet isn’t located in any single place, isn’t based on any central computer, and isn’t overseen by any network manager.
• Developed in the 1960s as an experiment by the U.S. Department of Defense as a way to communicate - using TCP/IP. To ensure the internet could not be interrupted by enemy attack, TCP/IP was designed to create a decentralized system.

• Ways to communicate on the net:
• E-mail
• FTP (file transport protocol)
• Newsgroup
• Telnet (programs)
• WAIS (searches)
• World Wide Web (multimedia pages, hyperlinks and based on html)

• World Wide Web invented in 1990 by CERN, group of European scientists
• 1993 - Mosaic - first graphical browser
• 1994 Netscape Navigator 1.0 (Internet Explorer is now at version 7.0)
• Development is explosive!

Constant Change: Imagine a publishing medium where nothing is ever final, where designs can be changed at will and new information can be published within minutes of hearing it, where ideas can be tested and discarded-or built upon-as soon as you test your audience’s reaction to them, and to which readers can return time and time again and find new information at each visit. That’s the world of the web. Understanding its fast pace is an important key to success in the medium.

Definitions:
• Http: hypertext transfer protocol allows hyperlinks to another page anywhere in the world.
• HTML: hypertext mark up language - standardized language or format used by browsers

Nonlinear Design:
• The web is nonlinear: It’s about letting the visitor choose his or her own path through the information
• In this context, you’ve got to make each and every page well designed, attractive, easy to read and have relevant content

Each page important:
• Every page should entice the visitor to explore your site further and make it easy to do so
• It must introduce an idiosyncratic identity among the dozens of sites the visitors may view in the space of a few minutes.

Page layout is uncontrollable:
• Page layout and design isn’t entirely controllable by designer
• Defaults are different for each user – text size, font, screen resolution, screen brightness/contrast
• Different browsers make page appear differently – Internet Explorer, Firefox, Opera, Safari
• Different versions of browsers handle code differently
• Platforms affect appearance - PC or Apple Macintosh
• Fonts used on web page may not be installed on viewer’s computer so may not show as intended
• Good web design includes the art of creating pages that can be viewed successfully under a number of different conditions.
• Avoid using frames
• Keep it simple

Capabilities always growing:
• World Wide Web Consortium (W3C): A group, composed of volunteers from Internet software companies, academics and other interested parties, that oversees the development of Web technologies. Formed in the fall of 1995.
• HTML’s capabilities are changing all the time - HTML 2.0 - HTML 4.01.
• Designers must constantly educate themselves and designs must be updated regularly.

Download Time Sets the Standard:
• The Web is capable of all the multimedia associated with CD-ROM: immersive 3D graphics, animation, digital video.
• As band-width improves and sites become media-rich, producing a web site could demand all the skills of producing a film, requiring professional video and sound production - even actors

• One of the web designer’s greatest challenges is to execute ideas using the smallest possible file sizes.
• If users have to wait more than 5-10 seconds, they’re gone.
• Good web design means good content, well organized, and speed over everything else.

Process of Web Design
• Quick changes in technology may quickly put some tasks handled by production engineers into the hands of web designers

Managing the Project:
• Producer: the job of pulling together the ideas and expertise of individual team members into a coherent plan
• Account Manager: represents the client’s wishes to the team and communicates the team’s ideas and progress back to the client

Information Architecture:
• Planning of content
• Functions: online product sales or community meeting areas
• Product information, etc
• Information Architect: builds a structure for the site that holds the information and offers functionality described in creative brief.
• Site architecture requires very right-brain/left-brain integration. Organize information and realize how it will work onscreen.
• Content involves the services of a copywriter and editor.
• Information Architecture should be driven by human behaviour. You’ve got to make the system fit the user, not the other way around. Focus groups, user testing, and past experience with how users have reacted to earlier designs should be your guide.
• How is content organized and what is the hyperlink structure?
• Even more complex when animation and interactivity is involved: depends on the collaboration of a whole team of talents, including production engineers
• The process of information architecture should result in a document that defines the structure: a storyboard or a branching diagram

Page Architecture and Interface Design:
• Designers decide how the elements of each page will relate to one another and how they interact as a whole
• Create a navigation system
• Graphic Design: defines the “look and feel” for the information, directing the work of illustrators and HTML coders to create a logical, attractive and appropriate interface design.

Programming and Scripting:
• Beyond simple tools for interactivity (hyperlinks, e-mail) a programmer is required to develop things such as collecting data from forms or returning automated responses to a user’s input or actions
• Some designers know basic HTML, but specialized programmers are required for interactive interfaces, hooking in back-end databases, and creating custom behaviour using programming languages such as Java
• The link between programming and design has become even tighter (Flash animated sites)

Production:
• WYSIWYG HTML Editors (Dreamweaver)
• Production engineer’s responsibilities include: Setting up and saving the files in an appropriate directory structure in the server HTML coding, or verifying and fine-tuning HTML files supplied by designers
• Preparing graphics and other media for low-bandwidth transmission
• Writing any necessary scripts
• Creating and testing the hyperlinks
• Making sure the code works in target browsers

Publishing:
• The engineer copies the final files into the appropriate directories on an HTTP server (using an FTP program).
• Most web teams use a staging server on which final files are posted and links, scripts and other functions are tested before the site goes “live.”

Three Main Categories of Web Sites:
• Information publishing: onlnine newsmagazines or information sites such as www.nationalgeographic.com or www.uleth.ca. There is much up and down scrolling on these sites, and content is put into 'bite-sized' chunks with images to break the monotony of text
• Brochureware (brochure + software): Web site appears all on one screen - no scrolling is required. Often used for design companies.
• E-commerce (a combination of information publishing and brochureware + method of purchasing online): www.amazon.com for example
• Digital Storytelling (an experimental and artistic approach to web site design): see Memory's Voices