ART 87 | USER INTERFACE DESIGN
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES
ART 87 | USER INTERFACE DESIGN
BRONX COMMUNITY COLLEGE | PROF. CLAUDIA JACQUES

Project 2 | My Footprint

foot·print
ˈfo͝otˌprint/
noun
  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.

 

 

Objective:

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

 

Parameters:

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.

 

Considerations:

  • 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 – bccart87.claudiajacques.com/students/yourname
  • 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: Choose your topic and define the goals for your site.

  1. Research what are the implications of this topic on your design.
  2. Focusing on the computer site create the flowchart and sketch ALL your pages on the grid template – each page should be on its own sheet. Present the work for critique.
  3. Develop the prototype and present for critique.
  4. Develop the functional site for computer interface and present for critique.
  5. Develop the second device site and present for critique.
  6. Uploaded all your files to your server space – bccart87.claudiajacques.com/students/yourname for final presentation
  7. Your research, sketches, flowchart, prototypes, implementation and testing documentation should be available on your E-portfolio site.

Grading criteria

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

  • Delivery (6): all parts delivered on time: Research, Proposal, Site Map, Sketches, Links to Live Mock-Ups* (hotspot site) and Final HTML+CSS Responsive site* should be in your E-Portfolio.
  • Content(6): content is well researched, cohesive and enhanced by the interface.
  • Design(6): consistent with proposal, 2D Design and UI principles.
  • Interactivity(6): The navigation is 100% functional, cohesive and intuitive but clever and creative.
  • Craftsmanship+Skills(6): Assets are technically well developed, images are properly edited, all files are properly labelled, managed and hierarchically uploaded to the class FTP site. The site encounters no code glitches, with proper html+css tags.
  • 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.

Resources

 

Resources

Inspiration

You may also like

Class 5

F 02/28 Theory: Semiotics + Taxonomy Design: Type + Emphasis & Focal Point Technical: Digital Imaging + Adobe XD for Class 5 […]

Class 3

Class 3 we will continue to explore the steps and ideas behind designing, or in the case of Project 1, redesigning a […]

Class 8

F 03/27 Recalibration Day: Project 2 | My Footprint Theory: Visual Identity Technical: Wireframing for Web + Devices Practice: Research For Class Project 2: […]

Class 11

F 04/24 Theory: Prototyping Design: Responsive Layout Technical: Digital Imaging + HTML + CSS Practice: Mock-up + Implementation For Class Project 2: My […]