The Goal: After choosing a topic that you are passionate about, design a dynamic, interactive visual narrative that captivates an audience. The presentation should seamlessly blend storytelling and design, guiding viewers through the experience using interactive elements. The final project will be an interactive web page designed on Figma.
Topic: My topic is on the upbringing of Air Jordan, where I chose the title, "Origins Air Jordan" for my interactive story. I was interested in the upbringing of Nike through the creation of Air Jordan, where I personally believe they have designed some of the most revolutionary and iconic shoe lines, ultimately leading to the major success of the Jordan brand, which has now become much more than just a shoe, but a symbol of athletic excellence and expression, significantly transforming the sneaker community.
Target Audience: The target audience for this webpage includes sneaker enthusiasts, basketball fans, and collectors, primarily ranging from 16 to 40 years old, who are interested in the history and cultural impact of Air Jordans. It also appeals to individuals seeking to learn about the brand's origins, including its partnership with Michael Jordan and its rise as a global symbol of performance and style.
Mood Board
Initial Design Concepts
Color & Type
Final Page Designs
After considering the topic of this project, the webpages feature hand drawn sketches and illustrations that are consistent throughout the pages, to emphasize the creative upbringing of Air Jordan, through ideas, design, impact, trial, and error. The webpage maintains simplicity in color, referencing the classic Air Jordan black and red.
Interactive Elements
Main Page: Consists of four buttons that turn colorful on hover and navigate to its designated page on click.
Hover Effects: All interactive elements have a hover effect that either changes their size or color, letting users know that they can interact with them. Other elements will immediately open new tabs without having to click after hovering.
Videos: Video pages also have hover features, making the playing video smaller when hovering over the accompanying text to read, and larger when hovering over the video.
Carousel: The page, "A Basketball Revolution" contains a carousel of popular Air Jordan 1 color ways that can be swiped through when dragging.
Figma Prototype
Sources: