Planning a Website Web Technologies I

The Site Design Process DEFINE Goals & Audience Content/Asset Collection Content/Style Information Delivery Requirements STRUCTURE Flowchart Wireframes DESIGN Design Comps Design Review Redesign Production Storyboard BUILD AND TEST Site Production Technical and Usability Test Revision/Test of Revised Site Final Presentation/Final Revision LAUNCH Promotion Plan Site Goes Online

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 product  Promoting an event  Providing information  Increasing 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 sales  Enhance the NextBest Fest brand identity  Promote bands that play at the fest  Provide press information  Provide 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 questions  Age Range  Gender  Education Level  Geographic Location  Primary Language  Any 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 Example

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/Banner  Navigation  Content  Footer

EXAMPLE OF WIREFRAMES

COMPS/STORYBOARDS  Comps – Comprehensive Drawings  Fully developed, detailed drawings that provide a complete preview of what the final design will look like  Include elements such as:  Filenames  Page Titles  Page Headings  Navigation System  Images  Text  Link Information

EXAMPLE OF WEBSITE COMP