[다림;茶林] Web Design
[다림] 브랜딩 & 웹사이트 디자인
- #다기 브랜딩
- #반응형 웹디자인
- 작업기간 2021.04
- 기여도 개인작업 100%
Overview
- 자연을 담은 다기세트를 모델링하고 브랜딩하여 이를 소개하는 반응형 웹사이트를 디자인했습니다.
- 자연을 담은 다기세트를 모델링하고 브랜딩하여
이를 소개하는 반응형 웹사이트를 디자인했습니다.
Typography
- Identity 국문 서체 _ 오가닉하고 고급스러운 느낌
Nanum Myeongjo - 다림
- 국문 서체 _ 깔끔하고 높은 가독성
Noto Sans KR - 다림
- 영문 서체 _ 산세리프에서 identity 서체 느낌
Arsenal - Darim
Grid system
- '%'를 단위로, 화면 비율에 반응하여 보여지도록 레이아웃을 구성했습니다.
- '%'를 단위로, 화면 비율에 반응하여 보여지도록
레이아웃을 구성했습니다.
WEB _ Main page
-
각 메뉴의 분위기와 어울리는 목업 이미지를 full page로 배치하고,
관련된 identity 문장을 넣어서 바로가기 버튼으로 페이지를 볼 수 있도록 구성했습니다.
또한, 시그니처 모양과 3D모델에 애니메이션을 넣어 아이덴티티를 강조했습니다. -
각 메뉴의 분위기와 어울리는 목업 이미지를
full page로 배치하고, 관련된 identity 문장을
넣어서 바로가기 버튼으로 페이지를 볼 수 있도록
구성했습니다. 또한, 시그니처 모양과 3D모델에
애니메이션을 넣어 아이덴티티를 강조했습니다.
Menu bar
메뉴를 클릭하면 바로가기 컨텐츠가 나타납니다.
WEB _ Sub page
-
목업 이미지와 브랜드 소개 내용에 스크롤 애니메이션을 주었고
자연의 느낌이 나도록이미지 뒤에 그림자처럼 흑백이미지를 배치했습니다. -
목업 이미지와 브랜드 소개 내용에
스크롤 애니메이션을 주었고 자연의 느낌이 나도록
이미지 뒤에 그림자처럼 흑백이미지를 배치했습니다.
Top button
스크롤에 따라 시그니처 모양이 회전하는 애미메이션을 넣어
top button을 디자인했습니다.
스크롤에 따라 시그니처 모양이 회전하는
애미메이션을 넣어 top button을 디자인했습니다.
Footer
푸터 영역에는 자연 이미지를 넣었고
하단에도 메뉴를 클릭할 수 있도록 배치했습니다.
Responsive _ ipad
- ipad로 보는 ‘다림’ 반응형 웹사이트입니다.
Responsive _ Mobile phone
- iphone X로 보는 ‘다림’ 반응형 웹사이트 입니다.
Mobile phone
불필요한 요소는 제거하고 일렬로 레이아웃을 구성하여 디자인했습니다.
불필요한 요소는 제거하고 일렬로 레이아웃을
구성하여 디자인했습니다.
