Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli

“Web Page” versus “Web Site” Page -- single.htm file all information related to a single theme usually small (in physical file size) requires planning for layout Site -- consist of multiple pages May integrate several different components can be immense requires more careful planning for design

Principles of Image Integration Keep the file size for any image small on the main page (use thumbnails and links, with file size information.) Use colors from the “standard color palette” to reduce file sizes and increase flexibility Keep backgrounds simple and not “busy” Keep background contextually appropriate Keep the viewable size of the page in mind so you can avoid scrolling as much as possible due to image integration

Site Navigation Principles Use a simple, consistent navigation interface Navigation buttons are out. Use text or context-images as hyperlinks It’s the World Wide Web, not the World Wide Bowl of Spaghetti – keep architecture hierarchical or sequential for ease-of-navigation by the viewer Carefully plan the site organization first. Site design should be based on function and content “Three Clicks to Information”

Text Organization Principles Do not rely on spacing, tabs, or line breaks. Use the Increase Indent and Decrease Indent tool for format and layout enhancement Use tables in moderation to space the information on the page Use horizontal lines to separate content only, not for visual organization Maintain a good, consistent visual hierarchy with navigation links available to second tier web pages at both top and bottom of each web page Don’t overdue lists – they are good for organization but get redundant fast without supporting text information for each list item

Principles of Linking Never install raw url. Provide the user with information about the link (title of site, purpose, etc.) Don’t change the link colors, the followed link colors, or the basic text colors Use a simple, consistent navigation throughout the site Check for broken and “dead” links often

Principles of Information Include author information and contact information to the web author Focus the content of each page Vertical stratification of information is important to maintain consistency Be concise and factual

Editing and Maintaining By all means, spell check! Frequently check active vs. dead links. Show, on the page, the date of the last modifications to the site/page beneath the web authoring information If you have to “take the site down” temporarily, provide an “under construction page” for the user with an estimated date of return Plan a naming convention for folders and files first so that updating and maintaining is less of a hassle.

Site Design Templates A1 B1C1D1 A2B2C2D2 A3B3C3D3 Basic Grid Format Hierarchical Format Home Page

More Templates Web Layout Sequential

Summary of Templates Complex Educated Audiences Simple Basic content, Training sites Linear narrative Predictable structure Nonlinear, hyperlinked Flexible, may be confusing