2015 Web Design Trend
2015 웹디자인 트렌드
빠르게 변하는 디자인 시장에서 디자인을 하는데에 있어 중요한 점 중 하나는 바로 트렌드 반영이 아닐까 생각됩니다. 따라서 2015 웹 디자인 트렌드에 대하여 알아보겠습니다.
1.배경이미지 삽입 & 영상 삽입
메인 화면에 큰 이미지를 사용하거나, 영상을 재생하는 스타일입니다. 이를 통해 우리는 하나의 좋은 사진을 보거나, 영화를 보는 듯한 느낌을 받습니다. 사용자들은 해당 사이트가 어떤것과 관련되어 있는지 직관적으로 쉽게 알 수 있게 되었습니다. 또한 화면에 집중할 수 있도록 라인을 활용하거나, 사이드메뉴를 감춰놓았습니다.
http://www.palzileri.com/ 메인화면에서 수트 브랜드임을 느낄 수 있도록 수트입은 모델 영상을 재생해 주고 있다.
http://cienneny.com/ 배경 이미지와 타이포를 활용한 쇼핑몰 웹사이트.2.타이포그래피 강조
큰 이미지나, 영상을 배경화면으로 활용하면서 그 위에 타이포를 크게 강조하고 있어, 집중도를 높혀주고 있습니다. 구글웹폰트를 비롯한 다양한 무료 웹 폰트들이 나오면서 웹디자인에서 타이포를 더욱 다양하게 활용할 수 있게 되었습니다.
http://eric-huguenin.com/
http://www.dreamyourself.it/3.고스트버튼
큰 이미지나, 영상을 배경화면으로 활용하면서 고스트 버튼을 많이 활용하고 있습니다. 고스트 버튼이란 가는 선과 투명한 내부로 이루어져 버튼 뒤 배경 이미지와 조화롭게 사용될 수 있도록 디자인 된 버튼을 말합니다.
평면의 형태인 고스트 버튼은 심플하지만 기존의 버튼보다 크게 사용되어지고 있기 때문에 배경을 방해 하지않으면서도 눈에 잘 보이게 디자인 되었습니다. 대부분 블랙과 화이트로 사용되어 지고 있는데, 이러한 고스트 버튼의 단점은 배경사진이 복잡할 경우 잘 떨어져 보이지 않는다는 것에 있습니다.
http://kurokawawonderland.jp/
http://www.yourbrainonpoker.com/
http://urbaninfluence.com/4.UI애니메이션
css와 자바스크립트를 활용하면서 다양한 UI애니메이션들이 등장하게 되었습니다. 사용자의 반응에 따라 다양한 애니메이션들을 찾아볼 수 있습니다. 마우스오버, 스크롤 애니메이션과 같은 다양한 애니메이션을 통해 사용자들의 시선을 더 머물게 하거나, 참여를 유도하고 있습니다.
http://www.kingsmanmovie.com/becomeakingsman/ 버튼의 효과나 인터렉션을 통해 영화를 보는 느낌을 제공해줍니다.
http://www.newstech.jp/ 움직이거나, 마우스오버, 클릭을 통해 다양한 애니메이션을 볼 수 있습니다.
http://www.akademiezubrowka.com/ 다양한 애니메이션을 통해 영화의 느낌을 잘 느낄 수 있습니다.
http://galeriekostek.cz/en5.패럴럭스 스크롤
UI애니메이션 외에 스크롤을 적극적으로 활용한 애니메이션 역시 유행하고 있습니다. 또다른 트렌드라고 말할 수 있는 스토리텔링 효과를 패럴럭스 스크롤을 사용하면 효과적으로 전달할 수 있다고 생각합니다. 일방적으로 정보를 전달하는 것이 아니라 사용자의 체험,경험을 통해서 정보를 전달하고 있습니다.
http://www.canaltp.fr/
http://powerofpossible.com/6.단일페이지
많은 정보를 여러페이지를 통해 보여주기 본다는 정보를 한눈에 쉽게 알아 볼 수 있도록 제공하는 단일페이지가 유행하고 있습니다. 버튼을 눌러 굳이 다른화면으로 넘어가는 것이 아니라 스크롤을 통해서 사이트의 모든 정보를 알 수 있습니다.
http://swag.oceanplazatheme.com/
7.카드 UI
카드UI형태중 가장 유명한 웹사이트를 고르자면 아마 핀터레스트가 아닐까라고 생각합니다. 많은 정보를 동일한 카드모양을 통해 통일감과 레이아웃을 맞추어 통일감을 주었습니다. 카드UI를 통해 많은정보 혹은 적은 정보일지라 하더라도 깔끔하고 정돈된 레이아웃으로 볼 수 있다는 점이 장점입니다. 최근 구글의 매터리얼 디자인에도 적용되어 웹 뿐만 아니라 앱까지 다양하게 활용되고 있는 스타일입니다.
https://www.pinterest.com/
http://www.cssauthor.com/inspiration/8.반응형 웹사이트
다양한 디바이스가 나오면서 웹사이트는 어느 기기에서나 최적화 되어 보일 수 있도록 반응형 웹사이트가 인기입니다. 웹에서 보던 화면을 그대로 모바일로 가져오게 되면 버튼의 크기나, 글씨가 작아서 불편할 수 있는 점을 디바이스별로 레이아웃이나 버튼크기 등을 달리 해서 어떤 기기로 보더라도 최적화된 화면을 제공받을 수 있습니다.
https://www.behance.net/gallery/25625381/Tickr-20
https://www.behance.net/gallery/23674631/-REZENENS-Branding-Art-Direction-Web-DesignHtml과 CSS,자바스크립트 활용의 폭이 넓어지면서 사용자의 눈을 사로잡는 다양한 스타일의 웹사이트들이 등장하고 있습니다. 특히 웹에서만 할 수 있는 스크롤링이나. 마우스 오버와 같은 기능에 UI애니메이션을 추가하여 페이지에 더욱더 오래 머무를 수 있도록 도와주는 역할을 하고 있습니다. 이외에도 플랫디자인의 지속적인 유행 역시 포함되어 있었습니다. 단순하게만 표현되던 플랫디자인이 점차 발전해 예전 ios의 스큐어모피즘을 플랫하게 표현한 아이콘역시 등장하고 있습니다. 또한 예전에는 웹디자인 하나의 분야였다면 다양한 디바이스의 등장으로 웹과 앱의 경계가 허물어 졌기 때문에 자연스럽고 편리하게 변화할 수 있는 레이아웃이 유행하고 있는 것이라 생각합니다. 많은 디자인 트렌드들이 웹디자인에 반영되었고, 앞으로 어떠한 트렌드가 등장해 반영될지 기대됩니다.
*참고 http://99designs.com/designer-blog/2015/01/16/top-web-design-trends-2015/
