greatSumini / hongik-data-visualization

홍익대 시각디자인과 기업디자인스튜디오 수업의 데이터시각화 프로젝트 제출물입니다.

The truth of Japanese military sexual slavery : The Girl, Butterfly, Light

This project is a submittal of the Corporate Design Studio subject in the Department of Visual Design at Hongik University.

Implemented using Next.js.

Live Demo

일본군 성노예제 진실의 역사 : 소녀, 나비, 빛

홍익대학교 디자인학부 시각디자인학과 기업적디자인스튜디오 과목의 제출물입니다.

Next.js를 사용해 구현했습니다.

Getting Started

npm install
npm run dev

Visit http://localhost:3000

Process Schedule

• 12/1 : timeline 완성. Storyboard Scrolling System 구축
• 12/3 : 영상 삽입, Media-Scroll Syncronization 완성
• 12/5 : 나비 그리기, Component별 Styling
• 12/6 : Component별 interaction (hover screen 포함)
• 12/7 : Animation 세부 설정 완료
• 12/8 : 여유 시간

References - Animations

1. intro scrolling : https://pudding.cool/2019/09/millennials/
2. outglowing : https://codepen.io/tobyj/pen/QjvEex , https://codepen.io/cullenw/pen/vRGWdg
3. fade out : https://codepen.io/tobyj/pen/QjvEex
4. highlighting : https://codepen.io/mo3aser/pen/VQZQRP , https://codepen.io/Cerynna/pen/VBjMzN , https://codepen.io/alphardex/pen/XWWWBmQ

References - UI/UX concepts

https://pudding.cool/2017/01/shape-of-slavery/

LICENSE

absolutely free