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