Final
Project Description
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.
Grading Overview
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.
- Project Process Page (5 points)
- Research & Content Audit (5 points)
- Website Content (5 points)
- Site Map (10 points)
- Wireframes (15 points)
- Style Tiles (10 points)
- Mockups (20 points)
- Website Design (30 points)
Final Design Sections
Project Process Page (5 points)
Your final.html page should contain a complete record or each step in the process of the final project. All links should be working and clearly labeled.
Research & Content Audit (5 points)
Research
For your research, 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.
Content Audit
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.
Website Content (5 points)
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)
Site Map (10 points)
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
Wireframes (15 points)
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.
Style Tiles (10 points)
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.
Style Tiles are similar to mood boards but are generally arranged in a more formal document. The style tiles should be designed to evoke a conversation about different elements and ideas for the site design. Read more about style tiles at styletil.es.
Mockups (20 points)
Your 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. If you are using Photoshop, make liberal use of layers and layer sets.
Be sure to work in pixel measurements since we're designing for the screen. Additionally you should make sure that you are designing at an appropriate size. If you website is going to be fixed at 960 pixels wide, then your mockup should be that wide or slightly wider to incorporate window background. Remember, we're designing for the screen, not a piece of paper.
Each mockup revision is worth 10 points. Your second revision should show changes that were discussed during the in-class critique as well as a more cohesive vision of your final project.
Website Design (30 points)
Overall website design (based on the wireframe, mockup, and final site). I will be looking at the following things:
- Navigation design
- Clear information architecture
- Consistent site appearance
- Visual appeal of the site
Deadlines
Week 9
11/5
Topic Selection Due
Prepare a one paragraph description of your topic. All topics must be approved by me.
Week 10
11/12
Content Audit & Site Maps Due
In-class Critiques
Week 11
11/19
Wireframes & Mood Board Due
In-class Critiques
Week 11½
11/26
Revised Wireframes Due
(post on website)
Week 12
12/3
Mockups Revision 1 Due
In-class Critiques
Week 13
12/10
Mockups Revision 2 Due
In-class Critiques
Final Due
Tuesday,
12/17, 6pm
Final Project Due
All final project mockup / prototypes complete and uploaded to your Simmons web space