The Story of Cannery Row was my CSUMB capstone project and it was made in two and a half months during 2021. This website tells the history of Cannery Row and it was designed for mobile first. I made the artwork with Adobe Illustrator and scripted the website with HTML, CSS, and Javascript.
The Story of Cannery Row website
Overview
This storybook-inspired mobile website tells the history of Cannery Row through illustrations made in Adobe Illustrator.
Tapping on objects that are highlighted by animated rings will provide historical photos and additional information. The website features a “map” of Cannery Row which acts as the navigation menu.
The Problem
Cannery Row is a popular tourist destination that is rich with history and fascinating trivia. The Monterey Bay Aquarium makes the location a great location for children and families.
The Solution
The Story of Cannery Row is a mobile website that plans to offer families an appealing, fun, and interactive learning experience so children and their parents won’t miss out on all the history.
Tools
- Replit – HTML, CSS, JS
- Adobe Illustrator
- Autobook Sketchbook Pro
- Adobe XD
- Netlify
Methodology
- Planning
- Concept and brainstorming
- Research and mood board
- Experimentation
- Scheduling – Gantt chart
- Storyboarding / Prototyping
- Development
- Web scripting
- Illustrating
- User testing and fine-tuning
- Developing playful metaphors for the UI
- Testing for horizontal scrolling experience
Calvin Norwood 