Planning a Website

Web Technologies I

The Site Design ProcessDEFINE

Goals & AudienceContent/Asset CollectionContent/Style Information

Delivery Requirements

STRUCTURE

FlowchartWireframes

DESIGN

Design CompsDesign Review

RedesignProduction Storyboard

BUILD AND TEST

Site ProductionTechnical and Usability TestRevision/Test of Revised Site

Final Presentation/Final Revision

LAUNCH

Promotion PlanSite Goes Online Redesign

&Rework

CLIENT

The person or persons for whom you are creating the site

Communication with clients is essential throughout the planning phase of site design

GOALS OF SITE

Should align with the general purpose, including but not limited to:Selling a productPromoting an eventProviding informationIncreasing brand recognition

Should use action words such as achieve, increase, and provide

EXAMPLE OF SITE GOALS

For the NextBest Fest (music festival) site we will be making in the lesson:Boost attendance and ticket salesEnhance the NextBest Fest brand identity

Promote bands that play at the festProvide press informationProvide general information, such as directions, lineup, pricing

Link to participating band sites

TARGET AUDIENCE

The group of people you would most want to visit the site

Create a User Profile – information gathered from a list of questionsAge RangeGenderEducation LevelGeographic LocationPrimary LanguageAny other Unifying Characteristics

MARKET RESEARCH

The careful investigation and study of data about the target audience’s preferences for a product or service

Can conduct yourself, or pay a company to complete

Example of Marketing Research Content for Music Festivals (UK) – must pay to get full results

MAIN NAVIGATION SYSTEM

The interface that visitors use to move through the Web site.

Appears in the same place on every page in the site, and should include a reasonable amount of categories

FLOWCHART

A diagram of geometric shapes connected by lines that shows steps in a sequence

Used to plans the hierarchy structure of a website

WIREFRAMES

Barebones page mockups that are created in a graphics program

Includes only placeholder images such as boxes with text to indicate where the following items will go:Logo/BannerNavigationContentFooter

EXAMPLE OF WIREFRAMES

EXAMPLE OF WIREFRAMES

COMPS/STORYBOARDSComps – Comprehensive DrawingsFully developed, detailed drawings that provide a complete preview of what the final design will look like

Include elements such as:FilenamesPage TitlesPage HeadingsNavigation System ImagesTextLink Information

EXAMPLE OF WEBSITE COMP