Interactive Infographic
Description
An interactive infographic is more than just a visual. It is a crafted narrative that unfolds through motion, structure, and user engagement. This project approaches design as both storytelling and system building, where every animation, layout choice, and interaction is intentional. While a strong technical foundation in GSAP and jQuery supports the experience, the real design challenge lies in shaping information by researching, distilling, and organizing data into a clear and compelling visual journey. The result is not just something to look at, but something to explore, where design and data work seamlessly together to guide the viewer through a dynamic story.
Languages & Libraries:
GSAP, jQuery, HTML, CSS, Illustration, Photoshop.
#GSAP #jQuery #HTML #CSS #Responsive #Stroytelling
In Depth
Story Development:
In my production process, I integrate comprehensive information research as a foundational step. Guided by my creative direction and design intent, I aim to select a topic with enough depth and scope to support a seven-page interactive infographic. At the same time, I ensure the content can be effectively translated into an interactive format that enhances user engagement and narrative flow.
Based on these criteria, I chose the process of home-brewed beer production as my central theme. I developed this concept into a brewery tour experience, using interactive animation, voiceover, and background audio to create an immersive and guided journey. I also established the typography and colour scheme to align with the theme and maintain visual consistency across the project.
Interface Colour Scheme Development
For the interface colour system, I extended design elements from existing restaurant brand identities. I applied the primary brand colours to key structural components such as headers and footers to reinforce visual hierarchy and brand recognition. Secondary colours are used within footer menus and internal page elements to support contrast, readability, and overall balance.
I structured the interface around core pages, including a home page that presents descriptions, reviews, and location details, a menu page, and an online reservation page. Throughout these pages, I maintained consistency in layout, navigation, and visual language while addressing their distinct functional purposes.
Gallery
