Planning your Web Site Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown

Pages that SuckPages that Suck 

NextBestFest Needs a WebsiteNextBestFest Needs a Website  What are the goals for the web site?  Use Active voice  Rank your goals  Can we summarize in a one sentence a purpose statement?

Possible Web Site Goals and PurposePossible Web Site Goals and Purpose  Goals:  Boost attendance  Enhance brand identity  Increase brand recognition  Promote the bands that will play  Provide information  Link to band sites  Create online playlist  Purpose:  With this web site, we will promote the NextBest Fest, provide information about the festival and the participating bands, promote the sale of passes and increase band recognition as well as attendance.

Who are we talking to?Who are we talking to?  Describe the target audience — create a user profile  Age  Gender  Education  Economic situation  Location  Their skill level  Technology level  Other unifying characteristics Give your target audience what they are looking for, in the surroundings where they are the most comfortable. Give your target audience what they are looking for, in the surroundings where they are the most comfortable.

How will they use the site?How will they use the site? Use Case (aka User Scenario, Task Analysis)  What are they going to do?  How are they going to do it?

Information ArchitectureInformation Architecture  Organizational Structure  hierarchical  narrow and deep  broad and shallow  sequential

Navigation (Usibility)Navigation (Usibility)  Be easy to learn.  Be consistent throughout the website.  Provide feedback.  Use the minimum number of clicks to arrive at the next destination.  Use clear and intuitive labels.  Support user tasks.  Have each link be distinct from other links.  Group navigation into logical units.  Avoid making the user scroll to get to important navigation or submit buttons.  Not disable the browser's back button.

Categories – For NextBest FestCategories – For NextBest Fest  Provide structure  Market Research  Drive the navigation  So, what do we need?  At least 5 distinct facts about music festival audiences.    o.uk o.uk

Web Site Flow ChartWeb Site Flow Chart

Accessibility  What challenges might your audience face?  Cognitive Learning  Auditory  Visual (including blind, low vision, and color blind)  Motor/Physical  Speech  How might we adapt?  Organize the page content logically  Consider Accessibility Issues

Color SchemesColor Schemes  Consider the target audience  Keep it simple  3-6 colors per site  Consider how these colors will appear on different monitors  Consider the mood  Clueless?  Try these sites  Color Scheme Designer esigner.com/ esigner.com/  Color Combos com/ com/  Web Monkey nkey.com/ nkey.com/

Colors CMY – print  Subtractive color system = subtracts light RGB – monitors  Additive color system = adds light

Hexadecimal Color CodesHexadecimal Color Codes  Hexadecimal format -- #rrggbb  Byte 1: red value  Byte 2: green value  Byte 3: blue value  16,777,216 different color combinations

Web Safe Colors?Web Safe Colors?  216 named colors  Very useful when monitors had only 256 colors  Current monitors can display +16 million colors

Fonts  Serif  Times New Roman  San serif  Comic Sans  Monospace  Courier  Proportional

Graphics & ImagesGraphics & Images  Be consistent  Do you have a reason?  Do you really need that huge file?  Think of you target audience  Support your concept and metaphor:  Choose graphics that reinforce the concept and metaphor of the site. Visual symbols are very powerful tools. Consider what each graphic adds to the site, and make sure each graphic reinforces the site metaphor.

Layout Wireframes  Be consistent  Use “white space”  Minimize scrolling