https://github.com/mehassanhmood/storyboarding
Story Boarding
https://github.com/mehassanhmood/storyboarding
data-storytelling narrative storytelling
Last synced: 7 months ago
JSON representation
Story Boarding
- Host: GitHub
- URL: https://github.com/mehassanhmood/storyboarding
- Owner: mehassanhmood
- Created: 2024-09-30T15:53:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-02T08:16:40.000Z (11 months ago)
- Last Synced: 2025-02-01T10:11:41.438Z (9 months ago)
- Topics: data-storytelling, narrative, storytelling
- Language: JavaScript
- Homepage: https://mehassanhmood.github.io/StoryBoarding/
- Size: 4.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project: Storyboarding to Tell the Inflation Story & Income Inequality
This project is my first attempt at **storyboarding**, where I humanized the narrative by making it **persona-oriented**. The focus of the story is on illustrating the effects of inflation and income inequality in a compelling, engaging, and relatable manner.
## Overview
The purpose of this project was to visually communicate the complex economic concepts of **inflation** and **income inequality** through the use of personas. By crafting relatable characters with distinct backgrounds, I aimed to create a narrative that humanizes these concepts, making them easier to understand and connect with on a personal level. This project was an attempt to blend **data storytelling** with **human-centered design**, creating an immersive experience for users to visualize the real-world implications of economic shifts.
## Key Features
- **Storyboarding**: Created a storyline to explain inflation and income inequality through fictional personas.
- **Persona-Oriented Approach**: Used distinct personas to make the story relatable and human-centric.
- **Data Visualization**: Incorporated visual elements to bring clarity to economic issues.
- **Responsive Design**: Ensured the project is accessible and optimized for various devices.
## Tech Stack
- **Figma**: Used for prototyping and designing the user interface. It helped in planning the layout and structuring the storyboard.
- **React JSX**: Developed the interactive elements and managed the user interface in a dynamic, component-based manner.
- **Vite**: A fast and lightweight tool to bundle the project and optimize build times for React.
- **GitHub Pages**: Deployed the project online for easy sharing and accessibility.
## How It Works
The story is structured around different personas, each representing a segment of the population affected by inflation and income inequality. The project takes users through a journey where they interact with these personas, each facing unique challenges based on the economic conditions at play. As users navigate through the story, they are exposed to various visual elements that demonstrate the impact of inflation and income inequality on real lives.
## Future Improvements
- **Data-Driven**: Integrating real economic data to make the personas' experiences even more realistic.
- **Interactivity**: Adding more interactive elements to engage the user and allow them to explore different scenarios.
- **Advanced Visualizations**: Enhance the story with more complex data visualizations and animations.
## Deployment
You can view the project live on GitHub Pages:
[Storyboarding Inflation & Income Inequality](https://mehassanhmood.github.io/reactTest/)
---