Project 1

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

Project 1A | Project 1B | Project 1C | Project 1D | Project 1E

Requirements

Evaluation Criteria

  • Project 1 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 Flexbox Grid).

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 1A

Proposal (5%)

Due week 2: September 12

  • The proposal is a minimum 3 page document including a written component and site maps
  • 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 two site maps (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, time, or some other oganization?)

Combine everything for Project 1A 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 and site maps (B&W print or laptop) to class and be ready for group discussions.

Project 1B

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

Due week 3: September 19

  • Low-fidelity wireframes should be done with paper and pencils/pens
    • Create at least 3 distinct variations for each page of your site
  • Mid-fidelity wireframes should be done digitally using a vector creation tool such as Adobe XD or Sketch and should be in black and white
    • Using the Flexbox Grid 12-column responsive grid (e.g. desktop grid: 1200px total width, 32px site margins, 96px columns, 16px gutters) to produce your wireframes for all of your pages at 3 sizes
    • Keep in mind the Flexbox Grid respoonsive breakpoints when considering your layouts (e.g. large breakpoint: 1200px, medium breakpoint: 1024px, small breakpoint: 768px)
    • 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 1B 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 1C

High-Fidelity Mockups (10%)

Due week 4: September 26

  • 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 1C 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 1D

Prototype (5%)

Due week 5: October 3

  • Using your high-fidelity mockups as the basis, create an HTML/CSS prototype using Flexbox Grid and custom HTML/CSS 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 (select the correct image format, set the correct file resolution, reduce the file size, etc.).
  • Do not forget to validate your HTML and validate your CSS.

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

Project 1E

Fully Responsive Website (10%)

Due week 6: October 10

  • Using your high-fidelity mockups and prototype as a basis and using Flexbox Grid 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 pages must link together. No dead links.
  • Do not forget to validate your HTML and validate your CSS.

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