Project 2

Responsive Website

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


Students should be aware of the evaluation grid for this project.


Your site should include a home page, as well as at least three additional unique pages (e.g. about, services, gallery, etc.).

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.


Requirements

  • Choose a theme based on your interests and likings - e.g. travel, hobby, public event you attended, product or service you use, etc;

  • Attention, portfolio projects should be approved first by the instructors;

  • Both the visual and the textual dimensions of your work should be self-generated as much as possible;

  • The end product will be a fully functional website.


Proposal

The proposal is a 3 pages documents including a written component, site map and a persona.

Written Component (Page 1)

The proposal should include a written project outline (around 300 words) detailing the following:

  • What is the chosen theme of your project, and why did you choose it?;
  • What are the goals of your project;
  • Who is your target audience.


Site Map (Page 2)

Site map are a quick way to brainstorm around structure of your website. It's also a excellent reference point for wireframes, functional specifications and content maps.For more information, Site Maps - The beginners guide.

  • Develop your own site map with a home page + at least three sub sections.


Personas (Page 3)

Personas are useful for building empathy, understanding the potential users of your website, and ultimately developing a site that better fit your users needs. For more information, Introduction to Personas.

  • Develop a one pager persona who include the 4 quadrants research (Sketch Name, Demographic Information, Pain Points and Needs, Potential Solutions)



Wireframes

Wireframes or prototypes are a crucial and important component for your project. It’s an easy and fast way for crafting your design experience. In the context of this class, we will cover 2 types of wireframes; low fidelity and mid-fidelity. For more information, Introduction to Wireframes.


Low-Fidelity Wireframes

All low-fidelity wireframe should be done by paper with pens and post it.

  • By using letter format (portrait or landscape), students will need to have at least two variations of each page.


Mid-Fidelity Wireframes

Mid-fidelity wireframes should be done digitally using a vectorial creation tool such as Adobe Illustrator or Sketch and should be in black and white.

  • Using the responsive grid layout developed In Class Exercise 3, students will produce the wireframes for all of their responsive pages (mobile, tablet and desktop).



Mood Boards

Mood boards serve as an inspiration to leverage the visual design of your project. For example color palette, typography photography approach, icon, visual structure, user interface elements and navigation system could potentially be developed using mood boards. For more information, Introduction to Mood Boards.

  • Using tabloid format (landscape) or a digital solution, students will need to produce two strong differents mood boards concepts.




High Fidelity Mockups

A mockup is a static high-profile visual draft of a design or device, used to represent the structure of information, visualize the content and demonstrate the basic functionalities in a static way. Unlike wireframes, mockups provide visual details, such as colours and type treatment. - Emily Grace For more information, Introduction to High Fidelity Mockups.

  • Using the mid-fidelity wireframes, students will produce the high fidelity mockups for all of their responsive pages (mobile, tablet and desktop).



Deliverables


Week 9 Nov 2

  • Fully interactive integrated website with Responsive Framework. Make sure your code is validated.

  • Make sure all materials are on digital lockers or on Slack.


Week 8 October 26

  • Reading Week. No Class


Week 7 October 18

  • Interactive Bootstrap prototype (Homepage + One Inside Page);
  • High-Fidelity Mockups / Wireframes revisions - all pages (mobile, tablet and desktop);
  • Lynda.com Bootstrap 3 Chapter 8 & 9;


Week 6 October 12

  • High-Fidelity Mockups - all pages (mobile, tablet and desktop);


Week 5 October 5

  • Mid-Fidelity Wireframes - all pages (mobile, tablet and desktop);
  • 2 Mood Boards;
  • Lynda.com Bootstrap 3 Chapter 3,4 and 6;


Week 4 September 28