2017년 웹디자인 트렌드 10

 

얼마나 같고, 얼마나 다를까?

미래를 예측하는 가장 좋은 방법은, 스스로 미래를 만드는 것이라지만 그 과정에 좋은 지침이 될만한 내용들을 살펴보는 것만큼 즐거운 일도 없는 것 같습니다.  2016년을 보내고, 2017년을 맞이한지 어느덧 한 달이라는 시간이 다 되어 가는데요!

앞서 2016년은 물론 2017년을 위한 디자인 트렌드에 대한 내용을 한 번씩 정리했었는데, 최근 또 하나의 좋은 내용을 만나게 되어 다시 한 번 웹디자인 트렌드에 대한 정리를 해볼까 합니다. 2016년에서 이어지는 내용은 무엇이며, 2017년 새롭게 등장한 내용은 무엇인지 함께 비교하며 살펴보면 더욱 좋을 것 같네요!

 

1.마이크로인터렉션과 애니메이션

우리는 매일, 좋아하는 모바일 앱이나 웹사이트를 통해 좋아요 버튼을 누르기도 하고 이메일을 보내기도, 해야할 일들을 체크하며 마이크로인터랙션을 접하게 됩니다. 여기에서의 ‘마이크로인터랙션’이란 단순하고 작은 애니메이션을 뜻하는데요! UI디자인 또는 시스템상에서 유저가 특정 행동을 했을 때 이를 인지할 수 있도록 도와주는 역할을 하게 됩니다. 이를 통해 사용자가가 서비스 내에서 하나의 ‘습관’을 형성하는 데 도움을 주게 되죠.

사소하지만 놓치기 쉬운 부분까지도 색다른 사용자 경험으로 만들어줄 수 있으며, 이는 서비스의 매력을 높이는데 긍정적인 역할을 할 수 있습니다. 마이크로 인터랙션을 잘 활용하는 곳은 구글과 애플이 있으며, 특유의 로딩 아이콘이나 방향을 알려주는 아이콘, 터치 효과 등이 대표적이라고 할 수 있습니다. 디바이스가 점점 더 다양해지고 그에 따라 사용자들이 서비스를 접할 수 있는 방법 또한 늘어나며 마이크로 인터랙션은 더욱더 중요해지지 않을까 싶네요! 

 

2.카드, 카드, 그리고 또 카드

모바일과 웹에서 유연하게 대응이 가능하며, 콘텐츠 단위로의 노출이 가능한 카드UI는 몇 년전부터 큰 흐름으로 이어져왔습니다. 카드 레이아웃은 많은 정보를 깔끔하게 보여줄 수 있으며, 독창적인 디자인을 적용하는 것 역시 가능하기에 올해 역시 많은 곳에서 사용될 것 같네요! (함께 보면 좋은 내용 : 카드 UI 사례 16)

 

3.그리드의 파괴 및 비대칭

아직 B2C서비스에서는 많이 볼 수 없는 디자인 형태이긴 하지만, 개인 및 에이전시의 포트폴리오 페이지에서 최근 자주 볼 수 있는 것이 바로 그리드를 깨고 비대칭을 활용한 레이아웃입니다. (함께 보면 좋은 내용 : 이런 포트폴리오는 어때요? 최고의 포트폴리오 페이지 5) 독창적이고 매력적인 모습을 사용자 또는 방문자들에게 보여줄 수 있다는 점에서는 좋지만, 잘못 활용할 경우 어떤 곳에도 집중하지 못하거나 혼란스러워 보일 수 있으니 이 점은 꼭 염두해야 될 것 같네요!

 

4.선명하고 다양한 컬러

‘컬러’의 경우 카드UI 보다 오랫동안 모바일과 웹 디자인에서 중요한 요소이자 흐름으로 이어져왔는데요! 구글의 경우”Material Design”을 위한 색상표를 따로 만들어 가이드를 제공하고 있을 정도로 색상의 중요성은 점점 커지고 있습니다. 2017년에도 이러한 흐름이 그대로 반영될 것 같네요! (함께 보면 좋은 내용 : 색 조합에 도움을 주는 서비스 7)

 

5.데이터 중심의 디자인

단순히 시각적인 아름다움만을 추구하는 디자인은 이제 조금씩 사라지고 있는데요! 최근에는 사용자 데이터 및 서비스 지표와 관련된 내용들을 분석하여 디자인에 활용하는 사례들이 많아지고 있습니다. 특히, 랜딩페이지를 구축하는데 있어 데이터 중심의 디자인은 신규 방문자들을 사로잡을 수 있는 중요한 역할을 할 수 있을 것 같네요!

 

6.색다른 요소들의 활용

컨셉에 맞춰 구성을 한다면, 이미지 보다 더 좋은 효과를 낼 수 있는 일러스트, 우리 서비스에서만 만나볼 수 있는 독특한 아이콘 등 사용자 및 방문자를 사로잡을 수 있는 색다른 요소들은 앞으로 더 다양해질 것 같습니다. 드롭박스가 랜딩페이지에서 일러스트를 효과적으로 활용한 것처럼 말이죠!

 

7.타이포그래피의 활용

다양한 웹폰트의 지원과 레티나 디스플레이의 등장으로 인해 타이포는 디자인의 중요한 요소 중 하나로 떠올랐는데요! 시스템 글꼴만을 활용하는 것에 비해 훨씬 개성있는 모습을 보여줄 수 있다는 점에서 앞으로 더욱 요긴하게 쓰이지 않을까 싶습니다. 위의 이미지와 같이 말이죠!

 

8.롱스크롤과 스토리텔링의 활용

제품 및 서비스를 소개하는데 있어 하나의 페이지로 구성된, 롱스크롤을 활용하는 사례 역시 꾸준히 증가하고 있는 추세입니다. 다만, 롱스크롤을 활용하게 되는 경우 사용자 및 방문자들이 이탈하지 않도록 연속적인 흐름과 내용에 맞춰 확인을 할 수 있는 장치들이 필요할 것 같네요! (함께 보면 좋은 내용 : 롱스크롤, 어떻게 활용하면 좋을까?)

 

9.UI(User Interface) 요소로서의 애니메이션 활용

과도한 애니메이션의 경우 이탈을 불러 일으킬 수 있는데요! 적재적소에서 영리하게 사용되는 UI 애니메이션은 참여도를 높일 수 있을 뿐만아니라 사용자 경험을 향상시키는 데 도움이 될 수 있습니다. 애니메이션은 우선순위를 정해 필요한 순간에만 사용하는 것이 좋으며 제품이나 서비스에 대한 이야기를 하는데 많은 도움이 되기도 합니다!

 

10. 웹과 모바일의 경계

최근의 웹 디자인은 모바일앱과의 경계가 많이 허물어지는 모습입니다. 조금더 정확히 말하자면, 모바일앱으로의 접근을 많이 시도하고 있죠. 카드 디자인, 세부적인 마이크로인터랙션, 햄버거 메뉴, 좌측 사이드 메뉴 등이 바로 그 사례들입니다. 올해에는 웹과 모바일의 경계가 더 많이 허물어지지 않을까 싶네요. 오늘 소개 드리는 마지막 트렌드이기도 하고요 🙂

이번 내용은 ‘10 HOTTEST WEB DESIGN TRENDS FOR 2017‘를 참고하였습니다! 모두 설 연휴 즐겁게 보내세요!

 

Comments (2)

    • zagmaster

      응답

      좋은 정보로 받아주셔서 감사합니다 🙂 오늘도 좋은 하루 보내세요!

댓글 남기기