사람도 디자인도 첫 인상이 중요! 인상적인 오버레이기법을 활용한 홈페이지 21선

 

impressed overlay style

인상적인 오버레이 기법

 

사람도 디자인도 첫 인상이 중요! 

인상적인 오버레이기법을 잘 활용한 홈페이지 21선

 

 

어떤 홈페이지에 있어서도 배색은 간과 할 수 없는 중요한 요소입니다. 
어떤 색을 주로 사용했는지, 혹은 어떤 홈페이지가 모양을하고 있는지가 그 홈페이지의 첫인상을 좌우하죠.

그래서 2016 년에 주목을 모은 것이 ‘오버레이’입니다. 반투명 상자에 이미지 나 영상을 표시하는 방법인 오버레이 기법은 자연과 사진과 영상에 시선이 모아 상상력을 불러일으킵니다. 올해 디자인에 그라데이션이나 단색 오버레이를 잘 도입 한 홈페이지가 많이 등장했는데요, 오늘은 첫 이미지가 인상적인 ‘오버레이’를 잘 활용한 해외의 홈페이지를 소개합니다.

 

 

인상적인 이미지의 오버레이를 잘 활용 한 홈페이지 21 선

 

1.Deep Mind


Deep mind

 

 

https://deepmind.com/

세계적으로 유명한 인공 지능 (AI) 인 Deep Mind의 공식 홈페이지. “지능”을 연상시키는 기하학적도 인상적이지만, 조금 스크롤하면 썸네일에도 단색의 오버레이가 걸려 있습니다. 주로 파란색과 보라색을 사용하는 등 지적인 색으로 되어 있습니다.

 

 

2.NYC Pride

Nyc pride

 

https://www.nycpride.org/

1969 년에 시작된 뉴욕 LGBT 단체 “Pride”홈페이지에서는 그라데이션이 걸린 생생한 오버레이를 사용하고 있습니다. 
선명한 오버레이를 거듭 때에는 원본 사진을 검정 기준에하고 흰색베이스로 할 수 있지만,이 페이지는 원본 사진에 검정색을 기준으로 하여 거듭된 오버레이를 보여줍니다.

 

 

 

 

 

3.Method

Method

 

http://method.digital/

뉴질랜드에 본사를 둔 홈페이지 제작 회사 「Method」는 2가지 색상의 듀오톤을 선택한 오버레이를 활용하고 있습니다.

4.Kaz Arahama

Kaz arahama

 

 

http://www.kazarahama.jp/

 

 

사진 작가의 KAZ ARAHAMA 씨의 포트폴리오 사이트입니다. KAZ 씨는 일본에서 태어났지만 오랫동안 해외에서 활약했던 작가로 희미한 회색 오버레이에 빛이 빛나는 효과를 사용하여 사진의 아름다움을 돋보이게하는 홈페이지를 사용했습니다.

 

5. Fast Project

Fast project

 

http://www.fast-project.org/ 

우주적인 어두운 파란색과 보라색의 색상이 인상적인 홈페이지. 차세대 에너지를 이용한 우주선 관측 계획인 FAST를 홍보하기 위한 프로젝트 사이트입니다.

6.Australian Design Radio

ADR

 

 

https://ausdesignradio.com/

호주의 라디오 스테이션 ‘Australian Design Radio'(이하 ADR)는 블루와 화이트 톤을 채용 한 홈페이지를 선보였습니다. 
ADR의 특징은 세로 방향으로 3 열 구성되어 있으며, 스크롤하면 중간 열만 움직이는 재미있는 디자인으로되다는 것입니다.

7.Outlines

 

 

 

Outlines

 

http://outlines.pt/

갈색 오버레이가 인상적인이 “outlines”의 홈페이지입니다. outlines는 여행자들의 비영리 여행 에이전시입니다. 
페이지 중앙에 세계 각지의 사진이 선명하게 배치되어 있으며, 상단의 오버레이 사진과 대조 관계도 즐길 수 있습니다.

8.Gear8

 

Gear8

 

https://gggggggg.jp/

삿포로 · 후쿠오카 · 방콕 치앙마이에 본사를 둔 Web 디렉션 팀 집단 「주식회사 Gear8」의 페이지 에서는 블랙 앤 화이트의 시네마토 그래프*에 주목이 모여 있습니다. (*최초의 촬영기겸 영사기, 프랑스의 뤼미르에르 형제가 발명했다,) 
제작 사례 · 실적을 모은 「Works」의 페이지는 흑백의 썸네일에 마우스 커서를 올려 놓으면 색상 반투명 블랙 오버레이가 걸립니다.

9.Loop

 

 

Loop

 

https://loop.ableton.com/2016/

2016 년 11 월 베를린에서 열린 음악 관계자를위한 이벤트 “Loop”의 홈페이지입니다. 
핑크와 블루의 그라데이션이 걸린 비비드한 배경은 활발한 인상을 줍니다. 이벤트목록을 볼 수 있는 Participant페이지 는 방금 전의 배경처럼 텍스트에 오버레이가 걸려있어 매우 화려하고 세련된 디자인으로되어 있습니다.

10.Burciaga & Co.

 

 

 

 

Burciaga

 

http://burciaga.co/

호주에서 활약하는 사진 작가 · 디자이너 Ishmael의 포트폴리오 페이지에는 작가 자신의 사진이 밝게 오버레이 되어있어 Call me Ish (Ish라고 불러주세요) 라는 문자와 함께 사람들의 방문을 유도합니다. 굵은 고딕과 소형 문구를 구사하는 것도 세련된 이미지를 줍니다.

11.Abednego Coffee Roasters

 

ACR

http://abednegocoffee.com/

워싱턴의 커피 로스팅 공장 “ABEDNEGO COFFEE ROASTERS”는 오버레이 걸린 영웅 동영상이 배경에서 재생되고 독특한 로고 디자인을 중간에 배치하고 있습니다.  홈페이지에는 스크롤하면 배경 동영상과 로고가 움직이는 패럴 랙스가 적용되어 보는 사람을 즐겁게 해줍니다.

12.Nuts and Woods


N&W

 

 

http://nutsandwoods.de/en/

베를린에있는 가구 디자인 스튜디오 ‘NUTS AND WOODS’의 홈페이지를 방문하는 사람은 누구든 선홍빛의 그라데이션이 걸린 테이블의 사진에 시선을 빼앗길겁니다. 선명한 제품 이미지에 마우스를 가져 가면 아래에서 연어 살빛 오버레이가 걸리는 독특한 효과를 볼 수 있습니다.

13.Holm Marcher & Co.

 

Holm marcher & co

 

http://holmmarcher.dk/en/

뉴욕의 디지털 마케팅 회사 “Holm Marcker & Co. ‘의 홈페이지는 톤 다운된 연어살 빛과 차분한 네이비 듀오 톤이 인상적인 이미지를 사용하고 있습니다.  굵은 고딕을 사용한 로고은 묵직하며 신뢰할 수 있는 디자인으로 되어있습니다.

14.Sourdreille

 

 

SOURDREILLE

 

 

http://sourdoreille.net/

프랑스 크리에이터 그룹 “SOURDREILLE” 홈페이지에서는 연한 핑크와 톤 다운된 하늘색을 바탕로 한 사이트가 있으며, 곳곳에 오버레이가 새겨진 사진이 곳곳에 있습니다.

 

15. 주식회사 도쿄 에지 캐피탈

 

TEK

 

https://www.ut-ec.co.jp/

차분한 터키쉬 블루를 바탕로 한 동영상을 전면에 깔고있는것이 벤처 캐피탈 “도쿄대 가장자리 캐피탈 ‘의 홈페이지입니다. 
탑 페이지 하단에 3 명의 기업가의 스토리의 썸네일이 배치되어 있으며 마우스 오버 오버레이가 걸리게되어 있습니다.

 

16.Nation

 

 

 

Nation

 

https://www.wearenation.co.uk/

런던의 디자인 스튜디오 ‘Nation’의 홈페이지는 장난기가 가득합니다. 블루 오버레이에 “Nation”라고 적힌 깃발이 애니메이션으로 움직입니다. 
다른 페이지도 파란색을 기반으로하여 오버레이 걸린 영웅 동영상을 사용하거나하여 움직임이있는 디자인으로되어 있습니다.

17. 일진목공주식회사 (日進木工株式會社)

Iljin

 

https://www.nissin-mokkou.co.jp/

기후현 히다 목공 인테리어 회사 ‘일진 목공 주식회사’의 홈페이지 입니다. 
이 사이트에서는 희미한 오버레이를 두른 사진을 앞세워 어떻게 제품을 만들 수 있는지, 스토리 텔링 기법을 능숙하게 도입하여 방문객을 매료시킵니다.

18.DeNA Games Tokyo

 

 

 

DeNa games tokyo

 

http://denagames-tokyo.jp/

게임 운영 회사 ‘DeNA Games’의 사이트에서는 희미한 검은 색을 반투명 오버레이를 걸친 동영상이 자동으로 재생되게끔 설정해놓았습니다.

19.Pioneer DJ

Pioneer DJ

https://www.pioneerdj.com/ja-jp/

일본을 대표하는 음악 기기 메이커 Pioneer DJ가 제품의 기능 사이트에서는 믹서를 이미지 한 이미지를 상단에 배치하고 있습니다. 턴테이블을 연상시키는 회전 테이블, 에메랄드 그린을 부분적으로 도입하고있는 것도 현대적인 느낌을줍니다.

20.Centurion Magazine

 

Centurion Mag

 

https://centurion-magazine.com/

「여행」과 「선물」을 테마로 한 런던의 큐레이션 매거진 “CENTURION MAGAZINE ‘의 홈페이지입니다. 
차분한 색으로 단색면과 사진을 반으로 나누어 메인페이지에 배치한 것은 방문객들로 하여금 궁금증을 유발하고 트래픽을 모으는 등의 효과를 가져옵니다.

21.SAS

 

SAS

http://sas-diving.co.jp/

주식회사 FLAG가 전개하는 다이빙 상품의 브랜드 “SAS”브랜드 사이트에 접속하면 반투명 검정 오버레이가 걸린 동영상이 재생됩니다. 또한 브랜드의 세계관은 곳곳에 드러난 굵은 고딕체 폰트를 통해 확인할 수 있습니다.

 

 

정리하며

선명하고 뚜렷한 이미지보다 다운된 톤의 단색 혹은 그라데이션 오버레이를 사용하여 주목을 끌고있는 독특한 홈페이지를 살펴보았는데요, 오버레이를 적용하는 것만으로 방문자들로 하여금 향수를 불러일으키게 하며 새로운 세계에 온 것 같은 신선한 느낌을 줄 수 있습니다. 

또한 이번 21 종류의 홈페이지를 봐도 알 수 있듯이 오버레이라고해도 다양한 부분에서 오버레이를 사용하고 있습니다.  앞으로 오버레이를 도입하는 것이라면, 한가지에 국한되지 않고 다양한 색상으로 연출을 하는 것도 좋을 듯 합니다!

 
 

 

 

 

Please follow and like us:

Add a Comment

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

Social media & sharing icons powered by UltimatelySocial
RSS
Facebook
Facebook
Google+
Google+
http://www.aun-korea.com/first-impression/">
SHARE
YouTube
YouTube
NaverPost
NaverBlog