[웹디자인] 웹 디자인 방식 - 원페이지, 패럴랙스, 풀스크린, 타이포그래피

1. 원페이지

- 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다.

 

- 어디에 쓸까? 단기적인 캠페인을 홍보하거나 마이크로사이트

---

https://www.andrewleguay.com/

Andrew Leguay

 

해외 포트 폴리오 사이트

https://www.cj.net/

CJ그룹

메뉴로도 연결되고 각 메뉴의 전체적인 요약 버전을 메인에서 원페이지로 설명한다..

 

 

2. 패럴랙스 스크롤

- 스크롤을 이용하여 화면과 요소가 시간차별로 애니메이션 된다.

- 어디에 쓸까? 원페이지 또는 내용이 얼마없고 이미지에 효과를 주며 스토리텔링이 필요한 페이지 

---

https://www.apple.com/ipad-pro/

iPad Pro

 

 

 

3. 풀스크린 

- 스크린 가득 한 이미지만 쓰거나 별다른 레이아웃 없이 영상으로 대신한다.

 

-이미지를 쓸 경우

> 고품질 이미지 필수! backstretch.js 또는 vegas.js 플러그 인으로 가변적인 화면에 대응한다.

 

-동영상을 쓸 경우

> 로딩시간이 길어진다! mp4, webm, ogg 브라우저에 맞는 형식으로 만들면 된다.(* 대부분 mp4 가능)  

> 오디오는 제거한다.

 

---

https://notation.vc/

Home - Notation Capital

이미지 풀스크린

https://www.lowcarbon.co.kr/

lowcarbon

동영상 풀스크린

 

4. 타이포그래피 

-글자를 활용한 모든 디자인

-빅 타이포그래피 > 의미전달 + 디자인 요소 역할

(단순하고 조화롭고 가독성이 꼭 필요하다.)

 

http://105orless.com/

1.5℃

 

 

https://www.vwxgolf.com/

VWX