The History Of…

Project Brief

Although different in their execution and deliverables, many similarities of how content is arranged and presented to the reader/user can be made between book and online publications. For example, the "hero" section of a webpage can be compared to that of a book's cover. Both are visually heavy, include minimal text, and have the sole purpose of enticing its audience of wanting to learn more of a given topic. It's similarities like this that help students better understand the parallels between the two mediums.

STUDENT'S PROMPT
For this assignment, students are tasked in creating a five-section webpage that depicts the history, process, and/or story of a selected topic. The page should entice its audience with a captivating hero section, then navigate the reader through highlighted sections until the narrative comes to an end in the final section. Students will create their webpage in Figma, then program the project using HTML, CSS, and JavaScript based on methods discussed in class. 

Learning Objectives

Throughout the length of the project, students identify similarities between book and online publication, edit and refine content, create original graphics, understand grid systems and hierarchy for the web, and programming languages such as HTML, CSS and JavaScript. 

+ Write in HTML, CSS, and JavaScript programming languages
+ Explore and create content intended for digital audiences
+ Navigate users through a webpage using grid systems and hierarchy
+ Export and upload website to a hosting server. 

Deliverables

WEBSITE: Final deliverables include a compressed main-folder containing HTML files and sub-folders for the webpage's Fonts, Images, Scripts, and CSS. 

PORTFOLIO: Project uploaded to Behance that includes the final layout in its entirety, call-outs of selected sections, a style-guide, and video of the author scrolling through the webpage highlighting any micro-interactions.  

Readings/Resources

"HTML & CSS" by Jon Duckett

"Java & JavaScript" by Jon Duckett

Reflections

This project was first assigned during my third-year of teaching web design. It was assigned in response to previous classes feeling overwhelmed and unclear how design, grid systems, and the design principles can be transferred from print to digital media. Previous classes went blank when first designing for the web, as if they were once again freshmen and sophomores in the program and had to relearn hierarchy and movement. Having examples and former projects from Typography and Graphic Design courses to reference back to, however, allowed students to have more confidence and could understand the parallels more easily.

This project is most effective when assigned after several programming exercises and Figma (or related UI software) demonstrations. It's a great introductory web-project for Juniors and Seniors. The project has also been assigned in my "Web Design for Non-Majors" course and was successful for students outside of the program.