Website Planning: Purpose, Audience, Content & Layout

Planning a Website

• Steps involve defining the purpose, identifying the audience, planning content, structuring the layout, planning web pages, and planning the navigation

Defining the Purpose

• List the goals of the website
• Decide on a topic
• Determine what the objectives are

Identifying the Audience

• Define the audience's needs

Planning Content

• Content is a critical factor to a website's success
• Content should be relevant, informative, and timely
• Avoid copying content from other media onto web pages

Planning Structure/Layout

• Outline the website using a diagrammatic representation.
• The homepage is the first page visitors see
• The homepage should indicate to visitors what they have accessed
• The homepage might include image maps, a search function, and a directory
• Underlying pages should connect and combine the website
• The underlying pages should show a visual connection with the homepage
• The underlying pages should clearly display the website name and provide a link to the homepage
• A splash page provides elements of interest that draws visitors to the website
• Splash pages might contain multimedia such as graphics, sounds, and movements.
• Some visitors consider splash pages a nuisance

Design Principles

• Three things to consider: Balance and Proximity, Contrast and Focus, and Unity

Balance and Proximity

• Arranging web elements symmetrically (centered and balanced) suggests a conservative, safe, and peaceful atmosphere
• Arranging web elements asymmetrically (off balance) creates a fun and energetic mood.
• Proximity (closeness) is closely associated with balance, where related elements should be placed close to each other.
• White space helps define proximity and organize web page elements.
• Too much white space can create an empty feeling

Contrast and Focus

• Contrast mixes elements to stimulate attention and utilizes different text styles, colors, and sizes.
• Focus is the center of interest or activity.
• A webpage needs a focal point, where the visitors attention should be
• Create webpages with contrast to elicit awareness and establish a focal point

Unity

• Web pages and websites should demonstrate a sense of oneness.
• Create unity using consistency and repetition across web pages.
• Alignment is the arrangement of objects in fixed or predetermined positions.
• Choose one method of alignment and use it regularly.

Writing for the Web

• The web audience seeks information that is accurate and easily readable

Accuracy

• Confirm accuracy with a reliable source when collecting website content
• Indicate the last update date
• Avoid spelling and grammar errors

Easily Readable

• Make information easy to scan
• Headings, subheads, lists, and highlighted sections can make information easy to scan
• Start each paragraph with a topic sentence

Understand-ability

• Use a 12-point font, avoid typing in all uppercase, use a sans serif font, and use plain or subtle backgrounds

Comprehensive and Concise

• Web publications should have half the copy of a printed publication
• Use chunked format instead of paragraph format
• Consider using hyperlinks for additional information, like historical backgrounds

Navigation Elements

• Linking takes visitors to a different section of the page, a different page on the site, or another Website

Relative URL

• A relative URL points to another location relative to the current location.
• Always use for pages within your site
• Example: <a href="investmentform.html"> Investment Form </a>

Absolute URL

• An absolute URL points to another location by specifying the protocol, server, path name, and file name
• Always use for pages located on another server, for example: http://www.aarp.com/moneyguide/moneybooks

Navigation Placement

• Primary navigation elements should be consistently placed on all pages.
• Include a link back to the homepage and the logo or site identifier on underlying pages

Navigation Options

• Offer several navigation options in a relatively small amount of space.
• These include Pull-down, Pop-up and Scrolling

Page Size and Information Placement

• The initial, visible screen area is extremely valuable space.
• Place the most critical information above the scroll line and avoid a cluttered appearance

Visual Connection

• Create a consistent look and feel.
• Inconsistent appearances confuse visitors.
• Be careful not to over apply consistency.
• Overly applied consistency makes pages boring and uninteresting

Color Scheme

• Color schemes create unity
• Limit the number of colors to three
• Apply the color scheme to the background, text, and graphic elements.
• Background color should increase text legibility.
• Choose graphics that match the color scheme.

Color and the Web

• Color is a powerful design tool
• Improper use of color can detract from a webpage's appearance through excessive or inappropriate use, and lack of understanding

Impact of Color

• Color enhances your website's purpose and personality
• Observe how others effectively use color
• Warm colors are associated with activity and power
• Cool colors suggest tranquility and detachment

Text

• Text the primary component of a website
• Guidelines to consider: Abbreviate text, chunk information, add hyperlinks to explanatory details, use active voice, remove transitional words, and do not use Web clichés

Photographs

• Photographs are a commonly included content element on websites.
• Photographs personalize the unknown
• Photographs can help deliver a message or prompt an action
• Select high-quality and relative pictures

Multimedia

• Multimedia adds action, excitement, and interactivity to websites
• Viewers are intrigued and entertained by multimedia presentations.
• Multimedia presentations can be interactive, where users can participate via plug-ins, and helper applications

Animation

• Animation is widely used to attract attention and liven web pages
• Animation adds interest and appeal to web pages
• Overuse of animations can become distracting and annoying
• Animated GIFs give the appearance of moving pictures

Audio

• Audio is a low-bandwidth alternative to video.
• Incorporate audio into a website to personalize a message, enhance recall, set a mood, or sell a product or service.

Video

• Video clips incorporate movement and sound
• Avoid extremely large video files
• Downloadable versus streaming is also a factor

Graphics File Formats

• Web pages mostly display three formats

Graphics Interchange Format (GIF)

• GIF was the original graphics format used on the web
• GIF displays up to 256 colors
• GIF limit physical image size
• GIF creates images with solid colors

Joint Photographic Experts Group (JPEG)

• JPEG is best suited for photographs on the web
• JPEG is not suggested for solid color images
• JPEG can be displayed with millions of colors
• Progressive JPEGs display on the screen in a sequence of passes
• JPEG has a wide level of browser support

Portable Network Graphics (PNG) Format

• PNG is expected to eventually replace GIFs
• PNG has superior transparency capabilities
• PNG has better-quality interlacing capabilities
• PNG demonstrates a greater range of color depths
• PNG has capability of embedding text in images

Preparing and Optimizing Graphics

• Crop images to remove unwanted subject matter
• Adjust colors and adjust image size

Legal and Ethical Considerations

• There are legal and ethical considerations when working with web design

Copyright

• It's easy to acquire images from the web, but it's important to assure the material is free of copyright restrictions regarding ownership
• It is important to obtain written permission from the owner to use any copyrighted material
• One should protect their work by copyrighting their material

Privacy and Security

• Visitors are often concerned with the use of their information
• You should include a privacy statement on your website

Accessibility

• Always consider access by visitors with special needs via the Web Accessibility Initiative (WAI)
• Resources and tools can make web pages more accessible to people.