2014년 주요 웹디자인 트렌드 18선

2014년엔 어떤 웹디자인 트렌드를 보게 될 거라 생각하시는지? 필자는 다른 것들보다 좀더 심플하고, 깔끔하고, 작은 화면 사이즈에 특화된 게 유행할 거라 본다.

이 컬렉션은 전체적으로 관찰과 경험에 의한 추측, 그리고 지난 몇 달간 필자가 엮어 본 다른 많은 글들에 기반해 작성되었다. 그런 고로 다른 글들보다 좀더 정확할 것임!

놓친 트렌드가 있을 수 있으니, 여러분의 생각과 예상을 아래 댓글로 달아 주시길.

1. 플랫(입체감을 뺀) UI는 계속 성장세

산세리프 폰트의 팬인 나로서는 현재 장식적인 것보다 깔끔한 것이 트렌드란 걸 알릴 수 있어 기쁘다. 윈도우8은 이 점에 있어 매우 영향력이 컸고, 그 다음으로 애플이 iOS7을 런칭하며 스큐어모피즘을 버렸다. 플랫 디자인에는 여전히 많은 잠재력이 있다.

Windows 8

Apple iOS7

Skibuddy 

2. 모바일 퍼스트(모바일부터 생각하기)

요 몇년간 스마트폰과 타블렛 사용의 급증으로 많은 웹사이트들에서 모바일 트래픽이 데스크탑 트래픽을 추월하고 있다. 2014년에도 늘어나는 모바일 점유율은 디자이너들이 더 작은 화면에서의 사용자 경험(UX)을 재고하게끔 할 것이다(물론 더 커진 화면도 고려해야 할 것이다). 모바일에서 이용 가능한 사용자 베이스에 적응할 필요성은 한 회사를 좀더 민첩하게, 조직내 혁신을 추동케끔 할 수 있다.

물론 실제로는 대다수의 회사에서 ’모바일 퍼스트’가 적용이 잘 안 되고 있다. 적어도 아직은 여전히 ‘모바일 세컨드’이지만, 반응형과 적응형웹을 수용한 곳에서는 투자수익률이 크게 오를 수 있다.

3. 여전히 긴 스크롤

2012년에 스크롤링 웹사이트를 탐구했을 적엔 아직 스크롤링 웹사이트가 유행의 초기 단계였지만 그 뒤로는 많이 보인다. 스크롤링이 매우 쉽기 때문이기도 하고, 디자이너들이 모바일과 타블렛 기기들을 고려하고 마음 속으로 스크롤(swipe)을 생각하기 때문이기도 하다.

패럴렉스 스크롤(Parallax Scrolling), 가로 스크롤, 컬럼-기반 스크롤, 무한 스크롤은 모두 2014년과 앞으로 계속 더 보게 될 것들이다. 다만 특히 무한 스크롤 관련해서 경계할 점이 몇 가지 있다.

4. HTML5 장점

HTML5가 주는 기쁨에 대해 내가 떠드는 걸 듣기보다 Codepen을 방문해 예제를 따라해 보며 뭐가 가능한지 보길 권한다. 아니면 HTML5에 CSS3와 jQuery를 잘 섞어 만든 창의력 있는 에이전시 사이트들을 보길 바란다.

5. HTML5 나쁜 점

이미 나는 웹디자인을 조악하게 만드는 것, 자제력 없는 이들이 사용자 경험에 반하는 범죄를 저지르는 것에 대해 상세히 불평한 바 있다. 할 수 있다는 것이 곧 해야 한다는 것을 의미하지는 않는다.

예를 들어 당신의 흥미로운 새 웹사이트에 들어가는 데에 1분이 걸린다면, ‘기다려 주세요’라는 로딩 아이콘이 아무리 번드르르해도 그건 잘못된 것이다. 기다리는 것은 언제나 짜증나는 일이다. 나는 브래드 프로스트의 “퍼포먼스는 디자인이다“에 동의한다.

‘

6. 아주 소소한 UX

디테일에 주목해 웹사이트를 다른 것과 구별되게 만들 수 있다. 과하지 않게 감각을 만족시켜주는 메뉴, 트랜지션(transition) 효과, 마우스오버 효과 등 아주 소소한 UX(micro UX) 효과가 웹사이트에 활기를 불어넣어줄 수 있다. 예를 들어 데일리 비스트지의 사랑스러운 진행 표시기를 보시라.

7. 텍스트를 더 적게

웹에 텍스트를 잔뜩 쓰는 방식이 훨씬 줄어드는 듯 하다. 일부 앱들과 웹사이트들에서는 눈에 보이는 텍스트가 거의 없고 사용자에게 정보를 전달하기 위해 이미지와 아이콘에 의존하기도 한다.

일부 사례에서는 이 방식이 잘 작동했지만, 보통은 텍스트를 완전히 제거하는 것은 별로 도움이 안 되는 것 같다. 예를 들어 스냅챗(Snapchat) 홈페이지는 10개가 안 되는 단어를 사용하고 있는데 방문객들이 이게 뭔지 알 수 있으려면 비디오를 보도록 요구하고 있다.

의료 대쉬보드 컨셉