- the impression left by a foot or shoe on the ground or a surface.
synonyms: footmark, footstep, mark, impression; More - 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 & 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
- Presentation Project 2
- Grid template
- Proposal Template DOCX
- Responsive Design + Typography
- All You Wanted to Know About Web Type (WPDFD)
- Typography (Web Style Guide)
- HTML Text Formatting (W3 Schools)
- Resumes & Interviews (JobWeb)
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)