Final Worksheet

Step 1 - Develop Your Idea

My concept for my final website is to create an immersive digital realm that entices visitors to embark on an enchanting "Illustration Adventure Quest" with interactivity at its core. Through this distinctive approach, the website seeks to transcend the confines of a conventional portfolio, thereby evolving into a captivating narrative journey. One phenomenon I've observed is that people tend to develop a deeper interest in a painting when they know the story behind it, making it more relatable. Inspired by the Chinese scroll, and in coorperation with my studio project, I decided to create a website to present Chinese traditionlal tales. As users navigate through a whimsical, storybook-inspired world, they'll have the opportunity to engage with the art piece in a playful and interactive manner. Each illustration project will unfold as a vivid story with scrolling animations and hidden surprises, complemented by "Behind-the-Scenes" sections that offer an intimate glimpse into the background story.

animate

Step 2 - Discovery and Research

Narrative Design: An extensive study of narrative design and storytelling techniques was undertaken. The research enhenced the understanding that revealing the story behind each illustration enhances relatability served as a pivotal insight.

Interactive Features: The research delved into various forms of interactivity to be incorporated, such as animations, hidden surprises, and engaging user submissions.

animate animate2
Nomadic Tribe: This exhilarating single-page website elevates interactivity to new heights, precisely exemplifying what I seek: a distinctive and inspiring approach to an interactive theme. With its exceptional graphics, seamless integration of audio, engaging narrative, and user interaction, it skillfully guides visitors through a one-of-a-kind storytelling journey.
animate3
Interactive User Experience: Card flipping provides an engaging and interactive user experience. Users can interact with the content by flipping cards to reveal additional information, creating a more dynamic and visually appealing interface. Information Presentation: It's an effective way to present information in a concise and organized manner. Each card can represent a specific piece of information, making it easy for users to digest content in a structured format.

Step 3 - Target Your Audience

An in-depth exploration of the target audience was conducted. The aim was to discern the preferences, expectations, and interests of individuals who are likely to engage with the website. This investigation revealed that modern internet users are not merely passive observers but seek interactive and engaging experiences.

User Experience (UX) Research: A critical aspect of the research phase involved understanding the principles of UX design. I delved into the art of creating an intuitive, user-friendly, and visually pleasing interface, one that keeps visitors engrossed and guides them effortlessly through the narrative journey.

Step 4 - Inspiration

Step 5 - Thumbnails

Step 6 - Wireframes

Wireframes

Step 7 - Responsive Mockup

HTML Click HERE To See My MockUP

Step 8 - Photoshop Comp