Project 2 | My Footprint

  1. the impression left by a foot or shoe on the ground or a surface.
    synonyms: footmark, footstep, mark, impression; More

  2.  the area covered by something, in particular.

What is the mark that you would like to leave in this existence?

In this project you will develop an interface to establish your footprint. This footprint can be of a social, environmental, political, or personal nature.


  • Create awareness of our individual impact on society, culture, life and/or Earth.
  • Understand the role of content in UI Design.
  • Utilize information architecture deliverables to convey content.
  • Explore device ready design | Form + Function
  • Exercise HTML5 + CSS3 skills.
  • Understand how Responsive design works.
  • Explore the conversion of XD mock-up to HTML + CSS.


The goal of this Project is to create a visually interesting presentation site that introduces the information in a creative, clear and accessible manner. This interface should reflect the characteristics of your theme not only through your work but also through the site construction, interaction and design.

The site should have six to eight pages, be interactive and live on the net, and be responsive on at least two devices, one being a computer.

An interactive mock-up converted to HTML5, CSS3, JS should be used to produce the site.


  • The interface must have 6 to 8 linked webpages.
  • The design needs to be responsive and functional in at least two different types of devices – example: computer and phone.
  • Delivery must be online. All files need to be uploaded to your server space –
  • You will be required to present your development by sharing your research, sketches, flowchart, prototypes, implementation and testing  documentation on your E-portfolio site.
  • You can use HTML5 & CSS alone or WordPress with HTML5 + CSS.
  • The interface should have a visually interesting navigation structure to access content. You can either use a classical menu or explore innovative non-menu structures for navigation. Either works — as long as your audience can access your work.
  • Your goal is to use HTML5 & CSS to explore some of the basic text, linking, layout and image skills introduced in this class along with user interface design principles.
  • The project should be both technically and visually engaging. Experiment with the following elements: standard navigation concepts vs. experimental navigation, site architecture, manipulated imagery, fragmentation of text and images, linear vs. non-linear structures. Consider how your imagery and content relate to one another.
  • Research the web and look at some of the examples below for inspiration both for composition and concept.

Steps & Grading Criteria:

The project final grade is a total of up to 30 points:

Choose your topic and define the goals for your site.

  1. Class 8:  Project 2: My Footprint Research, Draft Proposal, Site Map, Sketches = 4 points
  2. Class 9: Home page XD Mock-up using UI Kits Web = 2 points
    Design structure (flat or 3D), color scheme, typography, visual elements (icons, images, rules/lines).
  3. Class 10: Home page XD Mock-up using UI Kits Mobile = 2 points
  4. Class 11: Five pages on XD Web = 3 points
  5. Class 12: Five pages on XD Mobile = 3 points
  6. Class 13: All pages  Web and Mobile Prototyped = 6 points
  7. Class 14: All pages converted to HTML = 6 points
  8. Final Assessment: Web and Mobile in HTML presentation = 4 points
  • You need to give Prof. Jacques all your files so she can host the life site in her server. You will find the links to your Live Mock-Ups (hotspot site) and Final CSS+HTML sites here in the course site under Students/Your_Name.