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 32 points:

Choose your topic and define the goals for your site.

Project 2: My Footprint Research, Draft Proposal, Site Map uploaded to Blackboard = 3 points
Define the design structure (flat or 3D), color scheme, typography, visual elements (icons, images, rules/lines) (these need to be written) and develop two (2) Wireframe sketches for Web and two (2) for Mobile uploaded to Blackboard = 5 pts
After going through Tutorial 3 | XD Wireframe to Prototype Step 1 and based on the design choices you shared, use grids, guidelines and wireframing to create three (3) mock-up pages in XD for Web. Upload the XD file and pngs to Blackboard = 3 pts
After going through Tutorial 3 | XD Wireframe to Prototype Step 2 and based on the design choices you shared, use grids, guidelines and wireframing to create three (3) mock-up pages in XD for Mobile. Upload the XD file and pngs to Blackboard = 3 pts
After going through Tutorial 3 | XD Wireframe to Prototype Steps 3 and 4 develop three (3) more pages for Web and three (3) more pages for Mobile in XD based on your design choices. Upload the XD file and pngs to Blackboard = 6 pts
After going through Tutorial 3 | XD Wireframe to Prototype Step 5 prototype the Web and Mobile sites = 6 pts
After going through Tutorial 4 | XD to HTML, convert all pages for Web and Mobile to HTML/CSS/JS and share the compressed files to Blackboard = 4 points
Final Assessment: Present Web and Mobile sites in HTML/CSS/JS = 2 points

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)