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 17

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 Adobe Illustrator, 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 24

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 Illustrator, Photoshop, InDesign 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 31

  1. Choose the strongest concept from your low-fidelity wireframes and digitize your layout for all pages of your site in digital vector tool such as Adobe Illustrator, Sketch or Adobe XD, using the grid you defined in Project 1B.
  2. Clearly indicate column widths, gutter size, name and dimensions (both width and height in pixels) of individual elements.
  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 (high-fidelity view).

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 7

There are two reasons you should use high-fidelity mockups to convey your website design ideas:

  • It helps you to express your ideas clearly and concisely. While a written or verbal description of what you are imagining/planning to do helps (aka project proposal), nothing speaks more clearly than visuals.
  • By taking the time to draw out what you are looking for, you will stimulate more ideas. As you start to map out what you imagined, new ideas will come to your mind. This will help you to further expand your ideas and come up with an even greater plan for your website.

Building upon the structure and layout of your approved wireframes, use Adobe Photoshop, Illustrator, 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 1:1 ratio (100% scale) of the intended size for the final website
  • Use actual text and image content (no more dummy text or placeholders)
  • Have descriptions to aid users in understanding what is occurring

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 (10%)

Due week 6: February 14

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

Deliverables

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.