Comm 244:

Your final project for this class will be to design and build a complete website on a topic of your choosing. The website will be a minimum of 5 complete pages. You may do more if you like, but make sure that you have at least 5 complete and fantastic pages.

As web designers, you must be aware of the entire web design process from start to finish. This project is designed to walk you through that process. The web design process includes the following steps:

• Research
• Content Audits (important when working with a client)
• Information Architecture (site maps, site planning)
• Wireframing
• Mockups and Design Comps
• Website Production

Deadlines for each phase of the project are spaced out throughout the second half of the semester. All submissions for each piece of the final project will count towards your final project grade.

The final project will be scored out of a total of 100 points. Points will be awarded for each section of the project. See the section explanations below for a breakdown of the points.

• Topic Selection (5 points)
• Research & Content Audit (5 points)
• Site Map (5 points)
• Wireframes (10 points)
• Mood Board (5 points)
• Photoshop Mockups (15 points)
• Website Production and Execution (30 points)
• Website Content (10 points)
• Website Design (15 points)

A one paragraph write-up of your topic.

For your content audit, you should first conduct some research on your topic and answer the following questions:

• What is the website about?
• What is it's purpose (can be more than one)?
• Who is the target audience?
• What does the target audience want from the website?
• Competitive research
  • Are there other websites on your topic?
  • What are other sites doing? What are they successful at? What are they unsuccessful at?
  • How can your site be better or different than the competitors?

Prepare a written document that answers these questions.

Your content audit should give a clear and comprehensive explanation of the content that will be on your site. You should have a written document containing a rough draft of the content for each section of your website. You should also have a list of any images or media you will be using for the site. You should also at this point have a clear idea of any content you are missing.

Your site map should map out each page on your website and how they relate to one another. You may use whatever program you feel most comfortable with for the site map. Your site map should answer the following questions:

• Give a map of all pages in website
• Give an idea of how pages are related to one another
• Give an idea of the navigation structure

Your wireframes will give a clear idea of the information architecture of the website.

• The structure of each page should be clearly visible
• All pages should be thought out and planned
• The wireframes should have notations explaining which pages each wireframe applies to

You should have a wireframe for each page in your site that is different. For instance, if two pages are going to look the same, but have different content, you only need to have one wireframe for the two pages. If the design differs for pages, there should be a wireframe for each.

A mood board is simply a document that will help you begin to think about the overall look and feel of your site. This can be a Photoshop, Illustrator or any other type of document that makes sense. The document should combine several different ideas such as:

• Color Swatches
• Textures and Patterns
• Typefaces
• Images
• Screenshots of Sites You Like

When complete, the mood board should give an overall feeling of the design you're going for in your site.

Your photoshop mockups will give a clear picture of the design of your website. Your mockup will be a template for your final website. Pay attention to these details:

• colors
• typography
• images (site structure and design)
• design grid

While your are designing your mockups, make sure to keep in mind the actual coding of your site. Do not let the coding rule what you design, but make sure to keep it in the back of your head.

Your mockup should be clearly organized in layers in Photoshop. Make liberal use of layer sets as well.

This is the part where you actually make your website using HTML and CSS. You will be graded on the following criteria:

• HTML Page Validation (10 points)
• Use of Semantic HTML (10 points)
• Appropriate Use of Images Throughout Site. All images must have appropriate alternate text. (5 points)
• Appropriate Use of CSS (5 points)
  • Use of External Style Sheets
  • Use of a CSS Reset
  • Correct CSS Rules

All content for your website should be clear and accurate. If you use resources, cite them. An appropriate way to cite sources in a website is to link to pages you referenced. If it's a book, name it. All content should be your own.

Content will be graded on the following criteria:

• Good grammar and spelling
• Accuracy of information
• Appropriate web writing (short paragraphs, concise, easy to read)

Overall website design (based on the wireframe, mockup, and final site). I will be looking at the following things:

• Visual appeal of the site
• Navigation design
• Consistent site appearance
• Clear information architecture