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개가 안 되는 단어를 사용하고 있는데 방문객들이 이게 뭔지 알 수 있으려면 비디오를 보도록 요구하고 있다.
의료 대쉬보드 컨셉
ELI – 이런 식의 배치는 포트폴리오 사이트처럼 보이게 한다.
Snapchat
8. 최소한의(미니멀한) 네비게이션(메뉴바)
기본만 남긴 네비게이션의 유행은 계속 퍼지는 듯 하다. 부분적으로는 모바일용으로 압축적인 네비게이션 디자인 수요에 영향 받아, 아이콘, 롤다운(rolldown), 페이지 스크롤을 내리면 줄어드는 네비게이션에 포커스를 둔 사이트를 많이 볼 수 있다.
미디엄Medium
스마트 홈
9. CSS가 이미지 대체
CSS를 쓸 수 있는데 왜 이미지를 쓰는가? 매력적인 CSS 체크박스 세트를 원치 않을 자가 누구란 말이뇨?
10. 비디오 / 움직이는 배경
이건 단연코 훨씬 더 많아질 거라 생각한다. 가디언지의 Firestorm이 그 좋은 예로, 2014년에는 (컨텐츠 사이트보다) 브랜드들이 더 많이 다이나믹한 배경을 활용할 거라 본다.
The House of Eyewear
11. 풍부한 컨텐츠 경험
Firestorm에서 계속 되는 것이다. 일부 언론 출판계는 텍스트, 이미지, 비디오, 인터랙티브한 기능들, 적절한 길이의 스크롤 등을 섞은 온라인 컨텐츠 경험 관련 쪽으로 이동해 가고 있다.
ESPN’s Grantland
12. 한 페이지를 최대한 사용
점점 많은 사이트들이 새로운 페이지를 로딩하는 것을 피하는 대신 현재 페이지에 내용을 추가적으로 보여주는 걸 선호하고 있다. 라이트박스, 오버레이, 확대/위치가 바뀌는 타일은 모두 평균적인 사용자의 탐색에서 클릭 수를 줄여줄 수 있다.
Stories by H&M
13. 다양해진 타이포그라피
웹폰트가 부상 중이고, 디자이너들은 전에 없이 큰 폰트를 좋아하며 여러 폰트를 섞어 매치하는 게 유행하고 있다. 덧붙여 반응형 타이포그라피는 반응형 웹디자인에서 큰 부분을 차지해야 한다.
14. 단색 디자인
2개 색상과 그 색조로 충분할 것에 왜 3 가지 색을 쓰는가? 최근 매력적인 단색조의 팔레트들을 좀 보았다.
Qatar Airways
15. 다양한 색들
다시, 무지개색을 다 쓸 수 있는데 왜 2가지 색을 쓰는가? 여러 색을 쓴다고 해서 꼭 현란하거나 집중을 방해하는 건 아니다. 다색 디자인은 특히 플랫 디자인과 잘 어울리는 듯 하다.
컬러풀한 웹사이트와 앱을 한 번 보시길.
Coloured Lines
16. 카드/타일
나중에 상술할 생각이지만 일단 왜 카드가 ‘웹의 미래’인지에 대한 개관을 보시길. 나는 카드가 과거이며 현재이기도 하다고 생각하게 됐다.
Etch
Pravda
Silktricky
17. 더 크고 더 좋은 이미지화
텍스쳐 패턴에 반대되는 커다란 사진과 배경 이미지가 점점 일반화되는 듯 한데, 확실히 레티나 디스플레이에서 좋아 보인다. Awwwards의 최신 ‘오늘의 사이트’ 갤러리를 보면 무슨 뜻인지 알 것이다.
언론 출판 쪽도 전례 없이 큰 이미지들을 쓰고 있다
Protest
18. 위치가 고정된 내용/네비게이션
스크롤을 내렸을 때 네비게이션(이나 다른 컨텐츠 박스)이 페이지에 고정되어 있는 경우를 말한다. 네비게이션의 높이가 짧아질 때도 있고 확대될 수 있는 작은 아이콘이 될 때도 있다. 새로 디자인되는 웹사이트들에서 흔히 보이데, 예를 들어 Awwwards를 계속 보자.
출처 : http://blog.jinbo.net/taiji0920/2778
최근 답글