2015년 웹디자인 트렌드10

1. 반응형 웹(Responsive Web)

웹 접속 환경이 다양해지면서 점점 주목받는 형태로, 현재 워드프레스 테마를 중심으로 빠르게 퍼져나가는 중이다. 호환성에 대한 문제가 여전히 존재하지만 점차 커버되는 추세. 몇 년 후에는 반응형이 아닌 웹사이트는 점점 위축되지 않을까.

2. 고스트 버튼(Ghost Button)

심플하고 플랫한 디자인이 주목받다 보니 덩달아 고스트 버튼 역시 늘어나는 듯하다. 배경이 투명하고 테두리만 쳐져 있는 버튼 형식을 통틀어 이르는 말. 4번의 ‘큰 배경 이미지’ 사용과 더불어 더욱 주목 받는 중이다.

3. 타이포그래피 중심 디자인(Bigger Emphasis on Typography)

이전에는 인쇄물 같은 오프라인 디자인에서 주로 활용되던 타이포그래피가 드디어 웹디자인에서도 자리 잡아 가고 있다. 웹폰트가 널리 쓰이면서 가능해진 현상인 듯하다. 일반 서체를 웹폰트로 변형해 주는 툴도 많이 생겼고, 구글 서체나 네이버의 나눔 서체는 웹폰트를 무료로 배포하기도 한다. 상업용으로 무료 사용 가능한 웹폰트가 점점 늘어날 전망.

4. 큰 배경(Large, Beautiful Background Image & Videos)

인터넷 속도가 빨라지면서 가능해진 트렌드 중 하나로, 배경 전체에 이미지나 영상을 배치하는 웹사이트가 늘어나고 있다. 하나의 요소만으로 전체적인 톤앤매너를 끌고 갈 수 있다는 장점이 있다.

5. 클릭을 통한 이동에서, 스크롤을 통한 이동으로(Scrolling Over Clicking)

모바일 웹의 비중이 커지면서 웹 트렌드가 많이 바뀌고 있다. 1번의 반응형 웹 역시 그 중 하나인데, 이와 함께 페이지 간 이동을 ‘클릭’이 아닌 ‘스크롤’로 가능케 하는 페이지가 많아지고 있다. 페이지를 이동하지 않고, 하나의 페이지 안에서 스크롤만으로 정보를 탐색할 수 있도록 하는 방법.

6. 카드형 디자인(Card Design Will Continue(Get Better))

CMS 방식에서 없어서는 안 될 코딩 중 하나. 그리드 시스템과 관련이 있는데, 핀터레스트(Pinterest)를 연상하면 이해하기 쉽다. 한눈에 많은 정보를 볼 수 있어 유용하고 경제적이다.

7. 플랫 디자인(Flat Design is Growing Up)

다른 트렌드가 코딩 기법을 포함한 트렌드라면, 이건 정말 순전히 디자인 트렌드이다. 호불호가 갈리는 듯하다. 나는 개인적으로 극호.

8. 마이크로리액션(Microinteractions)

우리나라에선 아직 통용되지 않는 개념인데, 말하자면 웹사이트 내에서 이용자의 아주 작은 반응을 이끌어내는 동적 이벤트를 총칭한다고 볼 수 있다. 그림에서 보이듯 간단하게 나타나는 가입 팝업창을 떠올려 보면 이해하기 쉽다. 사용자에게 아주 간단한 반응만을 요구하는 이런 이벤트가 마이크로리액션이다. 이런 작은 이벤트를 어떻게 배치하고 움직이게 하느냐에 따라 웹사이트에 동적인 개성을 줄 수 있고, 사용자에게 액션의 부담을 주지 않기 때문에 결과적으로 더 많은 참여를 이끌어낼 수 있다.

9. 인터렉티브 스토리텔링(Interactive Storytelling)

스토리텔링과 내러티브의 문제는 비단 웹디자인에서만 중요하게 여겨지는 건 아닐 것이다. 이제는 내러티브의 시대이니까.

10. 맞춤형 UX(Personalized UX)

사용자의 쿠키를 분석해 각 사용자에게 맞는 정보를 제공하는 것을 말한다. 가령 구두 쇼핑몰을 방문한 적이 있는 사용자라면 구두에 관한 정보를 출력해 주는 방식. 지금은 주로 광고 배너에서 쓰이고 있지만 앞으로는 실제 필요한 콘텐츠를 보여주는 방식에도 널리 이용될 것이다. 가령 Youtube는 이미 이용자가 최근 시청했던 동영상과 관련 있는 동영상 리스트를 하단에 출력해 주지 않는가.

2015년 웹디자인 트렌드를 반영한 대표 웹사이트 3

1. Apple

http://www.apple.com/

2. Tesla Motors

http://www.teslamotors.com/

---

원문 출처

http://www.elegantthemes.com/