Project 2

For the second project, students will ideate, design and develop a fully functional multi-page responsive website using a web design framework.

Project 2A | Project 2B | Project 2C | Project 2D | Project 2E

Requirements

Evaluation Criteria

  • Project 2 will focus on the theme of an event. Students will select an existing event that features:
    • Multiple locations (i.e. stages, lecture halls/rooms, theatres, sporting venues, etc.)
    • Multiple presenters (i.e. artists, speakers, exhibitors, athletes, etc.)
    • Multiple time blocks (i.e. multiple concurrent sessions throughout a day, multiple days, etc.)
    • Some examples of suitable events include: TIFF, Nuit Blanche, Coachella, Pan American Games, DesignThinkers, Consumer Electronics Show (CES)
    • Some examples of events that are not suitable include: Taylor Swift concert, a comedy show, a wedding, a single speaker engagement
    • The event must be approved by your instructor
  • Both the visual and the textual content of your site may come from existing sources, but must be attributed within the website. Design elements (i.e. visual language, icons, typography, etc.) must be developed by the student.
  • Your site should include a home page, as well as at least three additional unique pages (e.g. schedule, speakers/exhibitors/performers, location, etc.)
  • The end product will be a fully functional website developed using a web framework (such as Bootstrap or Foundation).

Please be careful not to prioritize quantity over quality; building more pages than the requirement doesn’t necessarily mean a better project/grade. Students are expected to produce quality layouts, be original, creative and consistent with their visual language.

Project 2A

Proposal (5%)

Due week 4: September 27

  • The proposal is a minimum 3 page document including a written component, site maps and personas
  • The proposal should include a written project outline (around 300 words) detailing the following:
    • The chosen event of your project
    • The goals of your project
    • The target audience of your project
  • Develop at least one site map (students are encouraged to explore multiple information architectures) with a home page and at least three sub sections
    • Your sitemap should also include a detailed explanation of how you will organize the events key information (e.g. are sessions organized by location or time?)
  • Develop at least one persona that includes the 4 quadrants:
    • Name and Portrait
    • Demographic Information
    • Pain Points and Needs
    • Potential Solutions

Combine everything for Project 2A into a single PDF document and submit according to the class work submission process. Make sure to optimize your PDF file size. The final PDF must be less than 5MB in size.

Bring a copy of your proposal, site maps and personas (B&W print or laptop) to class and be ready for group discussions.

Project 2B

Low- and Mid-Fidelity Wireframes, Moodboards (5%)

Due week 5: October 4

  • Low-fidelity wireframes should be done with paper and pencils/pens
    • Create at least 2 variations for each page of your site
  • Mid-fidelity wireframes should be done digitally using a vectorial creation tool such as Adobe Illustrator, Sketch, or Adobe XD and should be in black and white
    • Using the Bootstrap 12-column responsive grid (e.g. desktop grid: 1110px total width, 65px columns, 30px gutters) to produce your wireframes for all of your pages at 3 sizes
    • Keep in mind the Bootstrap respoonsive breakpoints when considering your layouts
    • User real representations of content sizes and lengths (i.e. how long will headlines and paragraphs be? How large will images be?)
    • Remember to design at 100% scale. Consider type sizes and line-lengths, especially on mobile devices.
  • Create at least two mood board concepts with significant contrast between the two

Combine everything for Project 2B into a single PDF document and submit according to the class work submission process. Make sure to optimize your PDF file size. The final PDF must be less than 5MB in size.

Project 2C

High-Fidelity Mockups (10%)

Due week 7: October 18

  • Using your mid-fidelity wireframes and underlying grid, create high-fidelity mockups for all of your responsive pages at 3 sizes (mobile, tablet and desktop)
  • All content must be real content and final. No lorem ipsum.
  • Remember to design at 100% scale. Consider type sizes and line-lengths, especially on mobile devices.

Combine everything for Project 2C into a single PDF document and submit according to the class work submission process. Make sure to optimize your PDF file size. The final PDF must be less than 5MB in size.

Project 2D

Bootstrap Prototype (5%)

Due week 8: October 25

  • Using your high-fidelity mockups as the basis, create an HTML/CSS prototype using Bootstrap for at least two pages of your site (homepage plus one inside page).
  • Use real content and images. No lorem ipsum. Make sure your images are optimized for web.
  • Do not forget to validate your HTML and validate your CSS.

Combine everything for Project 2D into a single project folder and submit according to the class work submission process.

Project 2E

Fully Responsive Website (10%)

Due week 9: November 1

  • Using your high-fidelity mockups and Bootstrap Prototype as a basis and using Bootstrap and custom HTML/CSS, create all the pages of your website.
  • All content must be real (text and images). No lorem ipsum. Make sure your images are optimized for web.
  • All must must link together.
  • Do not forget to validate your HTML and validate your CSS.

Combine everything for Project 2E into a single project folder and submit a single link to your site home page according to the class work submission process.