Web Design and Multimedia Production Mrs. Brandt-White

A. Plan B. Design C. Build D. Test

1. Define the purpose 2. Identify the audience 3. Plan the content 4. Plan the structure 5. Plan the Web pages 6. Plan the navigation

Determine the goals and objectives of your site Goals are the results you want your Web site to accomplish Determine the objectives Methods to be utilized to accomplish your goal(s). Ie.Using customer testimonials to help sell your product Goals and objectives should be put together in a Purpose Statement

Age? Gender? Educational background? Lifestyle? What kind of computer equipment are they using?

Text Chunk information Add hyperlinks to explanatory or detailed info. Remove transitional words such as as stated on the previous page Graphics Make sure they look professional Photographs Help deliver message without adding more text Animation Moving pictures/ graphics Dont overuse Multimedia Combination of text, graphics, animation, audio, video Video Be careful of Bandwidth (the capability to download large files) Audio Lower bandwidth alternative to video Make sure it is content that is designed for the Web, not just reiterated print content.

Linear/ Tutorial Structure ( ex: online photoshop tutorials) Presents information in a specific order Designer controls user movement Random Structure ( ex: craigslist.com) User chooses where they want to go Hierarchical Structure ( ex: Organizes information into categories and subcategories Works well on large sites

Decide what the user will see when first coming to your site Homepage- Identifies what kind of site they have accessed Draws visitors into your site Gives entry into the major parts of the site through buttons, image maps, hyperlinks, etc. Splash page A purely entertainment page meant to capture users attention. Mixed reviews about splash pages- include skip button

Draw the user further into the site Consistency is key Decide how much freedom you want to provide the user Hyperlinks Buttons Image maps Menus Site index- used in large sites

Consistently place primary navigation in the same location Underlying pages should have a link back to homepage Ensure that links on site are functional Use link terminology that clearly tells the user where they will go Remove link to current page from list of available link options

Lay out the website structure with a flowchart/storyboard (samples on next slide) Sketch screen views on paper with simple shapes for buttons and graphics. Try out different screen designs online. Build sample pages.

Content Content is the information provided on the site. It is not just text, but music, sound, animation, or video -- anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it's been developed for the Web because it's clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more. Structure and Navigation Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site's content. Visual Design Visual design is the appearance of the site. It's more than just a pretty homepage and it doesn't have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.

Functionality Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible. Interactivity Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate. It's input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer- to-peer applications and real-time feedback. It's make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren't reading a magazine or watching TV anymore. Overall Experience Demonstrating that sites are frequently more -- or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, s the site to a friend, or stays for a while, intrigued.

You need to consider what screen resolutions that your users may have and consider that in your design

Fast Loading- <8-10 sec. (<20 for all other pages) Purpose- Define your purpose. Purpose drives content. Content drives design. Careful use of images Pictures, Flash, movies, etc.- must have a reason to be there! Good Flash is transparent- integrated into design not added in K.I.S.S.- Keep it simple st…. Navigation Design 3 Click rule- user finds what they need in 3 clicks or less No more than 7-10 links on homepage (drop downs dont count) Proper use of color No left to right scrolling- 2 ½ -3 screens vertical okay Do not dictate a necessary browser

For large sites, produce storyboards for each page. Build pages. Page templates, library items, and styles enable a consistent look.

Conduct a technical test to validate content, links and graphics. Conduct a user test to make sure the site is easy to use. Revise to fix technical errors and incorporate user feedback.

Always use the six step process to create Web sites, even small ones Always keep in mind your site goals and who will be using your site. Be sure to consider proper design to make sure your Web site is one that people will enjoy using