비디오 배경이있는 16 개의 멋진 웹 사이트

작가: Peter Berry

창조 날짜: 17 칠월 2021

업데이트 날짜: 16 6 월 2024

동영상: 웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째

콘텐츠

01. mediaBOOM
02. 마이 프로방스 페스티벌
03. 스포티 파이
04. 파이의 생활
05. 텔리
06. 페르난도 맥렌
07. 윈드 워드
08. 문제
09. 이글 클린
10. 드 로모 랜드 성
11. Y.CO 요트
12. Flipboard
13. 나이키 조던 M6
14. 아케이드 파이어
15. 카세트
16. 나무

웹 사이트를 디자인한다고해서 정적 인 환경을 만들어야하는 것은 아닙니다. 인쇄 된 것이 아닙니다. HTML5의 등장으로 애니메이션과 같은 항목을 추가하여보다 풍부한 사용자 환경을 만드는 것이 더 쉬워졌습니다. 이러한 시각적 번영은 적절하게 수행하면 더 흥미롭고 몰입감 있고 놀라운 경험을 만드는 데 종종 작동 할 수 있습니다. 동영상에서도 마찬가지입니다. HTML5를 사용하면 액세스 가능한 방식으로 훨씬 쉽게 구현할 수 있습니다.

일부 사이트는 새롭고 창의적인 방식으로 시각적 경험을 변경할 수 있도록 웹 페이지의 배경으로 사용하여 브라우저 크기의 큰 비디오를 최대한 활용하고 있습니다. 일부 사이트는 큰 배경 동영상을 사용하여 분위기와 분위기를 미묘하게 바꾸는 반면, 다른 사이트에서는 제품을 실제로 시연하거나 일반 정적 페이지만큼 쉽지 않거나 재미 있지 않은 스토리를 전달하는 데 사용합니다.

영감을주는 데 도움이되도록 동영상 배경을 최대한 활용하는 더 창의적이고 기발하며 흥미로운 사이트의 예를 수집했습니다. 다음 웹 디자인 프로젝트에 유용한 쇼케이스를 찾으시기 바랍니다.

01. mediaBOOM

mediaBOOM은 브랜드를 만드는 데 고유 한 접근 방식을 취한 대화 형 광고 대행사입니다. 레트로 아메리카나 스타일로 촬영 된 배경 비디오는 1950 년대 맨해튼을 닮은 가상의 세계를 배경으로 한 소속사 이야기를 들려줍니다.

02. 마이 프로방스 페스티벌

MyProvence 페스티벌 사이트는 배경 비디오를 사용하여 해당 지역을 탐험하는 아티스트의 하이라이트를 보여줍니다. 비디오의 음악과 장면이 완벽하게 조화를 이루어 사이트의 기분을 고양시킵니다.

03. 스포티 파이

음악 스트리밍 앱 Spotify는 배경 비디오를 사용하여 방문 페이지에 감정을 더합니다. 사이트의 핵심 메시지는 Spotify가 매 순간 음악을 제공 할 수 있다는 것입니다. 다양한 방식으로 감성적 애착을 보여주는 일련의 클립 인 배경 비디오는 동반 음악과 잘 어우러져 브랜드 주변에 감성적 인 분위기를 조성합니다.

04. 파이의 생활

이안 감독의 오스카상 수상작 <라이프 오브 파이>의 홍보 웹 사이트는 아름다운 장면 발췌 부분을 보여줌으로써 전체 브라우저 크기의 배경을 최대한 활용합니다. 음악과 함께 각 장면은 미니멀 한 디자인을 더 흥미롭고 영감을주는 것으로 바꾸는 데 도움이됩니다.

05. 텔리

Telly는 가장 인기있는 바이럴 동영상을 찾아 공유하는 스타트 업입니다. '정보'페이지는 희미하고 반복되는 배경 동영상을 사용하여 분위기를 아름답게 설정하는 데 도움이됩니다.

06. 페르난도 맥렌

Fernando Maclen은 흐릿한 비디오 배경을 사용하여 자신의 작업 방식을 보여주는 재능있는 디자이너입니다. 그 결과는 간단하고 깔끔한 디자인을 유지하면서 흥미롭고 기억에 남을 것입니다.

07. 윈드 워드

Windward는 조수, 풍속 및 기온에 대한 데이터를 표시하여 선원 용으로 설계된 iPhone 앱입니다. 상당히 고르지 않은 바다를 보여주는 배경 비디오는 너무 산만하지 않고 분위기를 잘 설정합니다.

08. 문제

Matter는 무작위로 선택된 일련의 비디오를 사용하는 전략적 디자인 컨설팅 회사입니다. 각각 다른 사람을 사이트의 배경으로 보여줍니다. 이것은 사이트를 돋보이게하는 데 정말로 도움이됩니다. 예상치 못한 일이기 때문에 그 경험은 놀랍고 기억에 남게됩니다.

09. 이글 클린

런던 청소 회사 Eagleclean은 유머를 더하기 위해 사이트에 아주 짧은 비디오를 통합합니다. 랜딩 페이지는 처음에는 아주 작은 얼룩으로 나타나며 장갑을 낀 손으로 빠르게 제거됩니다.

10. 드 로모 랜드 성

Dromoland Castle은 아일랜드의 유명한 호텔이자 시골 저택입니다. 홈페이지는 대규모 배경 비디오를 사용하여 멋진 부지, 골프 및 인근 야생 동물을 보여줍니다.

11. Y.CO 요트

호화 요트 시장에서 드문 몇 안되는 사람이 아니더라도 Y.CO 요트 웹 사이트가 흥미로울 것입니다. 대형 비디오를 사용하여 요트 중 하나에서 휴가를 즐기는 가족의 장면을 backgrounfd로 보여줍니다. 이 영화는 너무 거짓이나 '세일'없이 열망을 불러 일으킨다.

12. Flipboard

Flipboard는 RSS 피드, Twitter 및 Facebook 계정을 하나의 디지털 매거진으로 통합하는 iPhone 및 iPad 앱으로 흥미로운 기사 사이를 쉽게 넘길 수 있습니다. 사용자 인터페이스가 매우 중요하기 때문에 웹 사이트의 홈페이지 배경이 사용중인 앱의 동영상에 제공됩니다. 이 경우 앱이 어떻게 작동하는지 알려주기보다 보여주는 것은 천재적입니다.

13. 나이키 조던 M6

Nike Jordan M6 웹 사이트는 배경 비디오를 사용하여 새로운 운동화 디자인이 어떻게 만들어 졌는지 이야기합니다. 명백한 판매 기반 메시지를 전달하는 대신 Nike는 각 디자인 선택의 이유에 대해 간단히 이야기합니다. Jordan M6 구매를 생각하는 사람에게는 제품이 어떻게 만들어 졌는지에 대한 매혹적인 통찰력이됩니다.