Project 1

One-page Responsive Layout

For the first project, students will learn and apply the fundamental components of responsive website design.


Students should be aware of the evaluation grid for this project


This exploratory project will culminate in the design of a functional one-page responsive website (e.g. smartphone, tablet and desktop computer).

Working with the topic of their choice, students will first design a series of visual composition for three different web formats (smartphone, tablet and desktop computer).

After the review and approval of their visual compositions, students will develop a one-page responsive website (using HTML5/CSS3) that showcases the different layouts developed for each browser window width.

This 3 weeks long project should focus on visual originality and high contrast between screen sizes. Position, size and visual qualities of all elements should change between layouts for different screen sizes – don't just resize your assets, adapt the design to each device!


Requirements

  • Choose a theme of your liking based on your personal interest such as a design movement, your favorite font, artist, music band, movie, hobby etc;

  • You are encouraged to generate your own content (both visual and textual);

  • Alternatively, you can use assets from other resources and build upon them. If you decide to take the latter approach, it is suggested that you manipulate these assets (e.g. collage the images or edit the textual content) to make them yours. In all cases, you should give credit to the owner and/or specify the location of sourced assets (you can include this data in the footer for example);

  • Your layouts should include at least a main title, a subtitle, one or two paragraphs of text, and one image.

  • Your layouts should be based on a grid system. For this project, you get to 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.

  • The width of each three stage is 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: 980px for desktop, 730px for tablet and 480px for mobile.

  • 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 or Sketch.

  • The final deliverable is a one-page responsive website with proper folder structure and image resolution.

  • 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.


Deliverables

Week 1

  • In-Class Exercise 1 Part A (5%) Host your work-in-progress on the digital locker (under your user folder).

Week 2

  • In-Class Exercise 1 Part B (Follow Up) - Host your completed code on the digital locker.
  • Grid-based visual compositions (10%) - print a colour copy of your layouts and be prepared for group critique/discussion at the beginning of the class;
  • Host a PDF version of your visual comps – both original and also revised if applicable – and provide a link under your project 1 page on digital locker;

Week 3

  • Fully functional responsive website (10%). Make sure your code is validated.


Make sure to validate all your digital locker links and submit all materials for Project 1 (In Class tutorial 1 - 2 - 3, grid-based visual composition pdf, and fully functional responsive website) to each instructor by direct message via Slack.