Project 1

Students will choose a theme of their interest and design a single page poster at two screen sizes (desktop and mobile). The final deliverable is a one-page responsive website with valid code (HTML and CSS), proper folder structure, and proper image resolution.

Project 1A | Project 1B

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 2 screen sizes. The widths you choose are flexible and personal for each student. We suggest that students do some research around the best widths for each device to help them make their choice. For example, a width strategy could be: > 600 pixels for desktop and < 600 pixels for mobile.
  • Minimum 3 images (including one background image).
  • Layouts should include at least a main title, a subtitle, one or two paragraphs of text.
  • Layouts should be based on a grid system. For this project, you may decide the number of columns and column/gutter widths. Make sure to do a bit of research on grid based design and to employ best practices in your work.
  • Try to change the hierarchy of information between layouts. For example, in one layout, the focus could be first on the image, then on the title and finally on the copy. Try to change this order for other layouts based on what is most appropriate for their dimensions.
  • Compositions should be designed using Adobe Illustrator, Photoshop, Sketch or Adobe XD.
  • You should employ HTML5 elements such as <header>, <main>, <article>, <aside>, <footer>, etc. for the different sections of your code. Make sure that there are no errors in your code – validate your html as well as your css files.

Students are expected to produce quality layouts, be original, creative and consistent with their visual language.

Project 1A

Grid Based Visual Comps (10%)

Due week 2: September 13

  • Grid-based visual compositions for minimum 2 screen sizes
  • Students are encouraged to follow proper process, starting with low-, and mid-fidelity wireframes before completing the high-fidelity visual compositions. Please submit all process work as part of your Project 1A PDF.

Combine everything for Project 1A into a single PDF document and submit according to the class work submission process (we will be setting up your folders during week 2 of the class). Make sure to optimize your PDF file size. The final PDF must be less than 5MB in size.

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

Project 1B

Fully Responsive Coded Poster (10%)

Due week 3: September 20

Continuing from Project 1A (using your visual mockups as a basis), use your knowledge of responsive HTML/CSS to develop your mockups into a fully responsive website.

The evaluation criteria for this part of Project 1 is based on:

  • How closely the visual styles align with the design of Project 1A
  • How much further you have extended your knowledge of responsive HTML/CSS and explored and employed additional selectors, properties and values (including additional media query breakpoints)
  • Error free syntax/code – always validate your code (HTML and CSS) before submission

Deliverables

  • Single, validated HTML document
  • Single, validated CSS file for your site, linked in the <head> of the HTML file

Submit according to the class work submission process. Since your CSS is properly linked in your <head> tag, you only need to submit a single link to the HTML file for Project 1B.