The History Of…
|Level:||Introductory, Junior, Senior|
|Category:||Graphic Design, Interaction Design, User Interface, Web Design|
|Filed Under:||Digital, Four-year Program, Grids, Human-Computer Interaction, Information Architecture|
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.
+ 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.
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.
"HTML & CSS" by Jon Duckett
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.