[디자인] 웹디자이너 필독, 2015년 웹디자인 트렌드는?

2015년 드라마 같은 나의 프리랜서 생활을 성공적으로 만들어주기 위해 알아야되는 것!

안녕하세요. 프리모아의 will 입니다. 

2014년은 웹디자인 트렌드에 대해서 단발성 이슈가 되었던 패드도 많았던 것 같습니다. 짧은 유행들이 지속적으로 변화를 거듭하며 웹 디자인에 대한 많은 시도들이 있었는데, 2015년에 있어서는 그러한 트렌드가 하나로 정착이 되지 않을까 합니다. 그렇게 정착된 웹디자인 트렌드는 2016년 정도까지 꽤 오랜기간 웹디자인 최신 트렌드로 지속될 것 같습니다. 자 바로 본론으로 들어가 2015년을 이끌 웹디자인 트렌드를 한번 알아볼까요?

1.길어진 사이트 스크롤, 패럴랙스 기법

대부분의 웹 사이트에서 수직방향의 무한 스크롤에 대한 디자인 추세가 보입니다. 모바일 기기로 이동하면서 콘텐츠를 소비하는 모바일 유저들이 많아질 수록 그러한 디자인 추세는 이어질 것으로 보입니다. 홈페이지 내에 다양한 네비게이션을 두는 방법도 좋지만 클릭수를 줄이고, 스크롤 이동만으로 정보를 찾는 방법이 유저편의성 차원에서는 좀 더 낫다고 볼 수 있습니다. 특히 스크롤 경험을 시각적으로 배려하기 위해 매끄러운 애니메이션 효과라던가 다양한 효과로 포인트를 주는 부분들도 주의깊게 볼만 합니다. 

패럴랙스 기법이라고 하여 스크롤의 이동에 따라 배경그림이 함께 움직여 마치 내가 멀리서 전경을 눈으로 바라보는 듯한 느낌이 드는데요. 한 설문조사에 따르면 패럴렉스 적용의 경우 웹사이트 참여율이 70%가량 늘었다고 합니다. 

http://www.apple.com/iphone-6/

2. 스토리텔링과 인터렉티브 

웹디자인의 역할은 사이트 내에 중요한 기업정보와 콘텐츠를 연결시켜주는 역할로 바뀌고 있습니다. 예를 들어 프리모아의 경우는 내부적으로 웹사이트 리뉴얼을 진행하고 있는데요. 이번 리뉴얼 때에는 모션그래픽을 제작하여 디자인과 스토리를 최대한 긴밀하게 상호작용 할 수 있도록 해볼까 합니다. 이처럼 스토리 텔링과 웹 디자인의 연계가 점더 긴밀해지고 있는데요. 기존 애니메이션을 배제하던 추세와는 달리 최근에는 웹 사이트 내에서 애니메이션 효과와의 인터랙티브를 통해 디자인과 홈페이지 내의 스토리텔링으로 더 매력적으로 어필하고 있습니다. 특히 인터랙티브 반응은 유저의 반응에 따라 더 세밀해지고 다양해지는 추세를 보이고 있습니다.

http://www.impossible-bureau.com/

3. 헤더의 커진 배경사진 화면, 고품질의 사용자 정의 사진

홈페이지를 방문하였을 때 마주보게 되는 첫 화면이 와이드해졌습니다. 고퀄리티의 무료 사진에 대한 보급화가 이루어지는 부분도 적잖은 영향을 준 것 같은데요. 또한 기업의 메세지를 크게 텍스트화하여 심플하고 직관적임을 돋보이게 하였습니다. 하지만 몇몇 특정 사이트에 있어서는 이러한 큰 백그라운드 이미지와 텍스트는 추세가 아닌 단순한 패드라고 판단하여 궤를 달리하는 곳도 있습니다.

http://www.impossible-bureau.com/

스톡이미지는 디자인에 있어 매우 중요한 위치를 가집니다. 전문 사진작가의 고퀄리티 사진과 고객의 요구를 반영한 사진을 웹사이트는 제공을 하였습니다. 쉽게 말해 고객과 함께하는 대표의 사진, 팀원들의 사진 등 친화적인 컨셉을 활용하고 있습니다.

http://grainandmortar.com/

4.빼기를 활용한 디자인

프리모아는 웹 디자인에 있어서 중요한 것은 더하기와 빼기를 얼만큼 적절하게 활용하냐라고 생각합니다. 그리고 최근에는 더하기 보다는 빼기의 추세가 강하다고 볼 수 있습니다. 불필요한 디자인 요소를 제외함으로서 디자인은 단순해지고 직관적으로 변할 수 있습니다.배경색상, 화려한 이미지, 복잡한 레이아웃 등을 제외하고 무거운 색상과 이미지로 디자인에 무게감을 주었습니다. 이러한 점에서 3번 웹디자인 추세와는 다른 트렌드 양상입니다.

http://michelemazzucco.it/

5.중앙에 픽스된 사이트 레이아웃, SVG사용

대부분의 웹사이트는 밴딩 또는 1350px의 와이드 화면을 기준으로 디자인 함으로서 시야폭을 넓혔고, 중앙 정렬로 왼쪽과 오른쪽 사이드 섹션의 끝을 모르도록 하였습니다. 쉽게 말하면 핸드폰, 태블릿, 노트북 등 디바이스 종류가 많아지면서 웹사이트의 화면 인치도 틀려지는데요. 1350px의 충분한 화면 너비을 제공하여 어떤 기기로 웹사이트를 보든 양 쪽 끝이 짤려서 보여주지 않기 위한 것이라고 보시면 됩니다.

앞서 말했듯이 반응형 웹은 단순 모바일 화면이 아닌 화면 크기에 따라 이미지를 최적화 해주어야 되는데요. 이에 대한 해결법으로 SVG를 활용하면 화면크기에 따라 변화되는 이미지를 만들 수있습니다. 특히 SVG는 벡터이므로 픽셀단위를 사용하지 않기에 깔끔한 그래픽을 선호하는데 많이 쓰입니다.

http://michelemazzucco.it/

6.숨겨진 기본메뉴, 고스트 버튼

웹 사이트 디자인에 있어 기본메뉴역시 매우 중요한데요. 최근에는 메인화면에서 불필요한 디자인 요소를 제외하기 위해 기본메뉴마저 숨겨버리곤 합니다. 방문자가 처음 사이트에 방문하였을때는 기업의 메세지 또는 이미지 전달에 집중하기 위해서 이며, 방문자가 클릭하면 기본 탐색 및 메뉴를 숨겨둡니다. 

웹 서핑을 하다보면 사각형의 테두리만 있는 투명한 고스트 버튼을 볼 수 있습니다. 주로 랜딩페이지에서 많이 사용되며 앞서 말한 와이드한 화면의 사진배경에 함께 사용되곤 합니다. 

http://brianhoffdesign.com/

7. 타이포그래픽, 플랫 디자인

기존까지 이슈가 많이 되었던것이 목업 디자인이었다면 최근에는 플랫 디자인이 이슈가 되고 있습니다. 또한 기업의 메세지 텍스트를 더 디자인적으로 시각화 시켜주기 위해 타이포그래픽 활용이 많아지고 있습니다. 때문에 창의적인 타이포그래픽을 활용하는 디자이너 센스도 중요해지게 되었습니다.

https://www.tumblr.com/

8. 기업의 아이덴티티를 표현하는 고유 컬러 선택

카카오톡, 네이버, 현대카드, 대부분의 브랜드 사이트들이 하나의 컬러포인트를 활용해 웹사이트 디자인을 하고 있습니다. 기존에는 2-3개 많으면 4-개의 컬러가 들어간거에 비해 네이버처럼 점점 활용 컬러의 가짓수가 줄어들면서 단순화 되고 있다는걸 알 수 있습니다.

http://www.naver.com/

9. 카드 디자인 및 머티리얼 디자인

모바일 기기를 위한 사이트를 만들때는 카드 디자인이 많이 사용되는데요. 카드는 서로 연관된 내용의 칼럼을 쉽게 정리하며, 유저인터페이스 차원에서 매우 중요합니다. 트위터의 경우 사용자들이 다양한 미디어를 올릴 수 있는 카드를 제공했습니다. 구글에서는 머티리얼 디자인이라는 이름의 안드로이드에 들어가는 새로운 시각 언어를 공개하였는데요. 카드 디자인의 활용에 적용이 된다면 활용도가 높아지지 않을까 생각합니다.

어떻게 웹디자이너 분들에게 도움이 조금이라도 되었나요? 이 외에도 2015년 웹 디자인 트렌드에 대한 다양한 내용들이 나오고 있는데요. 그러한 정보들을 최우선적으로 선별해서 블로그에 꾸준히 올리도록 하겠습니다. 아 참, 저희 프리모아 광고 빼먹었네요. 

웹 디자이너 일하고 싶을땐 프리모아 !

뿅~ !!

* 본 내용은 아래 콘텐츠를 참조하여 작성하였습니다. 

http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/12

http://www.designbolts.com/2014/12/30/10-of-the-most-anticipated-web-design-trends-to-look-for-in-2015/