Project 3

Olympic Equipment

You must choose a sport featured in this year's Winter Olympics (winter olympic sports). After selecting your sport you will be building a website based on the main equipment that sport uses. It is up to you on what direction you want to take the site. Is it an ecommerce site or maybe a sales/marketing site? The site needs to be a minium of 6 pages and will be responsive.

Project Deliverables

Your project will have a total of 3 deliverables for this project

In addition, you will be graded on your presentation to the class, as well as your participation during the in-class critique

Planning Document

As with all design projects, we start with a planning document. During the initial phases of the project, the Planning document does not need to be designed, though it should be readable and easy to understand. Your planning document should consist of the following:

Title page: Include project name, company name, your name, course name, instructor name, and semester and year.

Website Choice: What website have you chosen to rework? Why this one? (Bring the original HTML files with you to class) Add screen shots of the original site you coded

Company overview: For anyone who may not be familiar with the company, give us a brief overview; who they are, what they do, their history, their target markets, etc.

Research & Inspiration: We always need to be inspired, especially when trying to keep up with current design trends. But more than that, we need to understand the overall design of things like the style of imagery we use, the typefaces that work well or don't, how a variety of sites handle responsiveness, etc. Don't limit your research to just a homepage. Look at the overall design and ALL aspects of the sites you visit and how they relate to your project. Element Collage: An element collage (also called a style tile) is like a digital mood board; it shows colors, fonts, imagery styles and more all working together. It is NOT a comp, but an indication to the client how the overall site look and fell might work. You need to do a minimum of two element collages.

Research & Planning

  • Inspiration
  • Wireframes Wireframes must include three sizes for mobile, tablet and desktop. Suggested sizes mobile: 320x1024, tablet: 768x1024 and Desktop: 1440x1024
  • Site Map

  • Comprehensive Designs

    Once these initial steps have been completed, you are ready to mock up your site design. You may use Photoshop (or your design program of choice) to create your comprehensive designs. Your designs comps should closely resemble your plans for your final functional design. It should be work you'd be proud to show a client. Only one device size will be submitted for each design, desktop artboard (1440x1024). When designing your desktop comps, you MUST increase your canvas size to 1440 x 1024px so we can visualize your intentions for the background of the web page AND so we can see how you intent to use additional content. In other words, we DON'T just want to see a paragraph on each page. Be sure to keep in mind the top fold of your page. You must ftp your design comps by the project design comp due date. Keep in mind the following web design factors when designing your project:

    Technical Requirements

    You must demonstrate your proficiency with XHTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:

    Process Book

    For your process book, you will use your planning document as your starting point. Add any design that you might not have had at the beginning. You will be graded on design as well as content. In addition to the items required in the planning document, you must also add:

    Remember, process books are NOT just busy work. Potential employers love looks at a designers process and understanding how they solve design challenges. Design and content count.

    Planning Document (10%)    
    Design (35%)    

    Color scheme
    Style & Use of imagery/graphics
    Top fold / Hero section
    Content Organization
    Target audience
    Concept - the "idea" behind your design.

    File Organization & Proper naming conventions (5%)    
    File organization (separate directories for assets, images, css, fonts) & File Optimization      
    Technical Considerations (35%)    

    Use of @font-face
    Proper use of CSS syntax
    Proper use of CSS Positioning
    CSS formatting. Name all CSS rules.
    Include a favicon

    Process Book (10%)    
    Presentation (5%)    

    FTP site (Do NOT FTP source files (photoshop, illustrator, flash)
    Presented project in a professional manner
    Effectively communicated concepts
    Participated in class critique & assessment of projects

    Total: (100%)