참고자료
Zaddle Agency - Webflow HTML website template
An agency template packed with sleek interactions, animations, parallax scrolling effects, and an interactive custom cursor to impress your clientele.
zaddle.webflow.io
15 Gorgeous Color Schemes - Best Web Design Colors 2021
15 Gorgeous Color Schemes From Award-Winning Websites, TRUSTED KIGALI DEVELOPERS - Web development Company in Rwanda - WordPress Development Company in Rwanda - We develop, design and Deploy all types of Web Applications ,
kigalidevelopers.com
과정
디자인이 너무 마음에 안 들었기 때문에 자료를 수집 했다.
일단 우선 위의 사이트에서 Color Schemes를 하나 선정 했다.
차분, 시원한 색감과 CD를 Simple하게 표현한 것이 인상적이라 선택.
건축학과에 재학중인 친구에게 조언을 받아,
폰트와 이미지를 변경하고, Figma를 이용하여 아래와 같이 Asset을 만들었다.
위의 웹 사이트 중에서 다음 페이지에서 영감을 얻었다.
스크롤을 할 때, 왼쪽으로 페이지가 넘어가면서 애니메이션이 동작하는 웹 이다.
이 부분에 CD를 넣고 동시 설명 페이지를 넣으면 좋을 것 같다.
이 부분이 꽤나 인상 깊어서, 비슷한 자료를 찾아보다가
Youtube에서 내가 딱 바라는 내용을 발견했다!
스크롤할 때, 옆으로 굴러가는 녀석을 구현할 수 있을 것 같다.
https://www.youtube.com/watch?v=neRnM_SiTfA&t=18s
위의 영상을 보고, 어떻게 만들지 스케치를 그려 봤다.
일관된 배경을 유지할려면, 배경도 따라내려와야 하기에
시작 지점과 끝나는 지점을 조건을 잘 걸어야 할 것 같다.
피드백
- 디자인이 좋아졌다는 평이 많았다.
'프로젝트 > Beatn-beat [비튼 - 비트]' 카테고리의 다른 글
5. Scroll-event 구현 (0) | 2024.01.25 |
---|---|
4. Youtube-player 테스트 (0) | 2024.01.24 |
2. Flutter Web GNB(global navigation bar) (0) | 2024.01.22 |
1. 구상의 첫걸음 (0) | 2023.11.26 |
0. 프로젝트 시작 (1) | 2023.11.26 |