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 & Grading Criteria:

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

Choose your topic and define the goals for your site.

Class 8: Project 2: My Footprint Research, Draft Proposal, Site Map, Sketches = 4 points
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).
Class 10: Home page XD Mock-up using UI Kits Mobile = 2 points
Class 11: Five pages on XD Web = 3 points
Class 12: Five pages on XD Mobile = 3 points
Class 13: All pages – Web and Mobile Prototyped = 6 points
Class 14: All pages converted to HTML = 6 points
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.

Resources

Photoshop: Image Optimization
Mock-Up Site Tutorial
File Management: https://youtu.be/7YB6FxYvQr4
Sketch Mock-up & Grid
Photoshop Basics
Visual Communication in UI Design
UI Design Videos
Information Architecture
Design Principles: Unite, Emphasis & Focal Point

Resources

Inspiration

Netartnet.net/
Waterbodies.org
Kurt Ralske
Andy Deck Andyland & artcontext
Mike Barron
Camille Utterback
Andre the Giant (design site that uses flash in Nav only)
Jody Zellen (uses frames)
Adrianne Wortzel
Emigre (Type/Design resource)
Misprinted Type (Type/Design resource – uses javascript)
Hilman Curtis (designer with simple site – uses javascript)
Neville Brody Research Studio Site (good for experimental typography)
Pentagram — Design Studio (A super minimalist approach is taken with this website)