Project 1

Students will ideate and design a multi-page website.

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

Requirements

Evaluation Criteria

  • Choose a theme based on your interests and likings - e.g. travel, hobby, public event you attended, product or service you use, etc. (Note: portfolio projects will not be accepted).
  • The visual and textual content should be self-generated as much as possible. Content that is not self-generated must be referenced within the site.
  • Minimum of 4 pages, maximum of 10 pages (should include a home page, as well as at least three additional unique pages e.g. about, services, gallery, etc.).
  • At least one page must include a minimum 500 word essay with headings and subheadings.
  • Minimum 5 images.

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: January 16

Students will choose a theme of their interest and begin the process of planning their approach to this project by addressing/considering the following questions/areas:

  • Written Component: A one page written document outlining:
    • Goals: What is the goal of your project (project description)?
    • Target Audience/Users: Who are the defined users for this project? What makes these users a defined group (try to identify their demographics, profession, interests, etc.). How would your project help/benefit them?
  • Content Organization: Provide an organized list of different types/categories of content in your project. There might be more than one way to organize your content. Think about the most obvious (title or category) to the least obvious (interest or theme). A project might have multiple organization themes.
  • Site Structure (Site Map): Referring to your theme, content list and their organization scheme, clearly illustrate the structure of your site through a sitemap diagram – use either Sketch, Adobe XD, OmniGraffle or Draw.io to show the hierarchy of pages, their relationship and depth level. Include your sitemap diagram in your document.
  • Copy: You will need to develop written descriptions and/or anecdotes as part of content requirements for this project (About Business, Mission Statement, Project Descriptions, etc.). Include minimum of three samples of your written copy in your document. Tip: The more content you have now, the easier the rest of the project will be.
  • Images: You are encouraged to produce/use your own images and photos for this project. But if your subject matter is not accessible and/or you have not developed strong photography skills yet, you can take advantage of online stock photography sites. If you decide to use Royalty Free stock photography, make sure your selected photos follow the same photography style – lighting, macro/micro perspective, framing, colour palettes and staging. You should also document the source (URL) of your chosen stock photography site/images to give credit to the photographer(s) and protect their intellectual property and rights. Include minimum of five samples of your chosen photos and images in your document.

Deliverables

  • Written component (goals, audience)
  • Site stricture/site map
  • Copy and image samples

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 should be less than 5MB in size.

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

Project 1B

Low-Fidelity Wireframes, Mood Boards (5%)

Due week 3: January 23

Wireframes (low-fidelity)

  1. Use your approved site structure to write-down, in bullet-point form, all the required elements for 3 key pages of your site.
  2. Establish a 12 column grid system (minimum 960px, maximum 1200px). Remember that this grid system is used to enable you in establishing creative and dynamic layouts. Clearly indicate column widths, gutter size and total width.
  3. Sketch out a series of layouts using your grid system for each page. Clearly illustrate the placement and relative size of each element (low-fidelity view). Use a ruler and pencil for maximum clarity and productivity. Consider hierarchy, balance, focal point, eye movement, etc.

  4. Label the individual elements, including:

    • Headlines
    • Navigation
    • Branding

    • Images, etc.

      For text boxes use dummy text. For images and videos, use a box with a cross in the middle.

Mood Boards

  1. Start with thorough visual brainstorming by visiting design blogs and resources such as Adobe Behance and Dribbble.

  2. Take screenshots of all the visual elements that interest you and aligns with your target audience. Your selection should include (but is not limited to):

    • Branding
    • Typography (both display and copy)
    • Photography (with a focus on style, lighting, framing, colour treatment and perspective)
    • Navigation elements such as menu items, buttons, links and their hover states
    • Patterns (optional)
    • Colour palettes with hexadecimal values

  3. Use Adobe XD, Sketch or another design layout tool to create a collage of your screenshots.

  4. Write a short rationale (100-150 words) describing the mood/theme you are trying to exemplify, supported by a series of adjectives that capture the aesthetic.

Tips: Look for combinations of imagery and typography that create smaller building blocks of a website – the DNA. Analyze how these elements are constructed and/or reused to create the larger picture and overall layout of the site. Notice how successful websites take advantage of a flexible grid system, consistent typography, colour system and unique visual elements to unite all the pages that hold different types of content.

Deliverables

  • Minimum 3 wireframe variations per page
  • Minimum 2 mood boards

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 should be less than 5MB in size.

Bring a copy of your wireframes and mood boards (color print or laptop) to class and be ready for group discussions.

Project 1C

Mid-Fidelity Wireframes (10%)

Due week 4: January 30

  1. Choose the strongest concept from your low-fidelity wireframes and digitize your layout for all pages of your site in Adobe XD or Sketch, using the grid you defined in Project 1B.
  2. Clearly indicate column widths, gutter size, name and dimensions of individual elements both width and height in pixels.
  3. Label headlines, navigation, branding, images, etc. For text boxes use real copy (if you have it) or dummy text if not (e.g. lorem ipsum) with intended font size, leading and alignment. For images and videos, use a box with a cross in the middle.

Deliverables

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 should be less than 5MB in size.

Bring a copy of your wireframes for all pages (print or laptop) to class and be ready for group discussions.

Project 1D

High-Fidelity Mockups (5%)

Due week 5: February 6

Building upon the structure and layout of your approved wireframes, use Adobe XD or Sketch to create high-fidelity mockups for 3 key pages of your site, using your visual research as the basis. Your high-fidelity mockups should:

  • Be 100% scale of the intended size for the final website
  • Be based on the grid you defined in Proejct 1C
  • Use actual text and image content (no dummy text or placeholders)
  • Have descriptions in the margins to aid viewers of your mockups in understanding functionality

Deliverables

  • Minimum 3 pages

Combine everything for Project 1D 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 should be less than 5MB in size.

Bring a copy of your high-fidelity mockups (print or laptop) to class and be ready for group discussions.

Project 1E

Final Site Design (10%)

Due week 6: February 13

Continue using Adobe XD or Sketch to create high-fidelity mockups for all pages of your site, incorporating feedback from your instructor and other students.

Deliverables

  • Designs for all pages of your site

Combine everything for Project 1E 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 should be less than 5MB in size.

Bring a copy of your high-fidelity mockups for all pages (print or laptop) to class and be ready for group discussions.