최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다.





1. UI 패턴의 증식

반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. 


Cypress North


그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다.

즉, 체크아웃은 체크아웃이고 그 자체의 역할을 합니다. 로그인 모델도 마찬가지입니다. 휠 UI를 재발견할 다른 이유는 없습니다. UI 패턴은 매끄러운 경험을 통해 사용자를 안내합니다. 


몇 가지 친숙한 패턴에 대해 살펴보겠습니다. 


햄버거 메뉴 

약간의 비판이 있긴 하지만, 햄버거 메뉴를 광범위하게 사용하면 사용자들이 기능을 쉽게 인식할 수 있다는 것이 분명합니다.


Silenza


계정 등록

사이트에 가입할 때 볼 수 있는 패턴입니다. 정보를 입력하는 부분이나 소셜 계정의 로그인을 이용하는 버튼이 있을 것입니다. 여러 단계로 나눠진 폼 마법사는 필수 항목을 확인하고 다음 단계로 넘어가기 때문에, 사용자가 가입 프로세스를 잘 통과할 수 있도록 만듭니다. 


Typeform


긴 스크롤

대부분의 사람들은 모바일 기기 덕분에 긴 스크롤에 익숙합니다. 이 기술은 스토리텔링을 통해 사용자들을 이끄는 사이트에 특히 잘 어울립니다. 또한 특정 섹션으로의 스크롤로 멀티 페이지 사이트를 흉내 낼 수 있습니다.


Vimeo


카드 레이아웃

핀터레스트가 사용한 카드 패턴은, 정보를 훑어보기에 적절한 크기로 보여주기 때문에 많이 사용됩니다. 각 카드는 하나의 통합된 개념을 나타냅니다. 직사각형 형태의 카드는 '콘텐츠 컨테이너'로서, 너비가 각기 다른 디바이스에 맞춰 쉽게 재배치할 수 있습니다.


TheNextWeb


대표 이미지

시각은 가장 강력한 인간의 감각이기 때문에, 고화질의 대표 이미지는 사용자의 시선을 사로잡는 가장 빠른 방법 중 하나입니다. 대역폭과 데이터 압축 기술의 발전 덕분에 사용자들은 긴 로딩 시간에 고생하지 않아도 됩니다. 스크롤 상단에 대표 이미지가 있고, 그 아래 지그재그 섹션이나 카드를 나열하는 것이 일반적인 레이아웃입니다.


Maaemo



(광고)



2. 풍부한 애니메이션

애니메이션은 사이트의 스토리텔링, 더 많은 상호작용이나 즐거운 경험을 주기 위해 점점 더 많이 사용되고 있습니다. 

하지만 아무 곳에나 애니메이션을 넣을 수는 없습니다. 사이트의 이야기 요소와 특성에 애니메이션을 추가할지의 여부를 신중하게 고려해야 합니다. 애니메이션에 대해 다음의 두 가지 관점으로 생각해볼 수 있습니다.


- 대규모 애니메이션 : 페럴렉스 스크롤링이나 팝업 알림과 같은 효과를 포함하며, 사용자에게 좀 더 영향을 미칠 기본적인 인터렉션 도구로써 사용됩니다. 

- 작은 규모의 애니메이션 : 스피너, hover 도구 및 로딩 바를 포함하며, 사용자 입력이 필요하지 않습니다.


가장 인기 있는 애니메이션에 대해 알아보겠습니다.


로딩 애니메이션

로딩 애니메이션을 보면서 사용자는 즐겁거나 기쁨을 느낄 수도 있고 반대로 지루함을 느낄 수도 있습니다. 로딩 애니메이션은 주로 플랫한 디자인, 미니멀리즘, 포트폴리오나 싱글 페이지 사이트에 사용됩니다.


Slack via Lauren Tan


로딩 애니메이션은 되도록 단순하게 만들고 사운드를 넣지 마세요. 사이트의 특성이나 주요 컬러와도 잘 어울려야 합니다.


네비게이션과 메뉴

숨겨진 네비게이션 메뉴는 화면 공간을 절약할 수 있어서 더욱 더 인기가 많아지고 있습니다. 특정 버튼을 클릭하여 메뉴를 드러낼 때, 어색한 전환을 막기 위해 애니메이션을 사용합니다.


갤러리와 슬라이드쇼

갤러리 및 슬라이드 쇼는 사용자의 과부하 없이 여러 이미지를 보여줄 수 있는 효과적인 방법입니다. 사진 사이트, 제품 쇼케이스, 포트폴리오 사이트에 중요합니다.


Born Fighter


모션 애니메이션 

움직임은 사용자의 주의를 집중시키는 훌륭한 도구입니다. 움직임은 시각적 계층을 만드는데도 효과적이며, 입력 폼과 메뉴, 사용자의 행동을 유도하는 요소에 적용하면 사용자의 눈길을 끌 수 있습니다.


Bugaboo


스크롤

부드러운 스크롤에는 애니메이션이 필요합니다. 사용자의 스크롤 조작으로 애니메이션이 펼쳐지는 속도가 달라질 수 있습니다.


Squarespace


배경 애니메이션/비디오

단순한 애니메이션 배경은 사이트에 가시성을 더할 수 있지만, 산만할 수 있기 때문에 적당히 사용되어야 합니다. 개별 섹션이나 전체 이미지의 부드러운 움직임을 만드는 데에 사용하는 것이 중요합니다.


Dunckelfeld



3. 마이크로 인터렉션(Microinteractions)

휴대전화의 알림을 끄는 것에서부터 페이스북의 고양이 사진에 좋아요를 누르는 것까지, 마이크로 인터렉션은 우리 주변 곳곳에 있습니다. 


Slack


마이크로 인터렉션은 상태나 피드백을 전달하거나 행동의 결과를 보여주고 사용자가 무언가를 조작하는 데에 도움을 줍니다. 마이크로 인터렉션은 모든 어플리케이션에서 중요한 부분입니다.



4. 머터리얼 디자인(Material Design)

구글은 머터리얼 디자인이라는 새로운 스타일의 언어를 출시했습니다. 이는 더 현실적인 디자인을 위해 깊이와 움직임의 개념, 그림자 효과를 사용합니다.


Google Now


머터리얼 디자인의 목표는 UX 중심의 깔끔하고 현대적인 디자인을 만드는 것입니다. 미니멀한 모습에서 다른 트렌드인 플랫 디자인과 공통점이 많아보이지만, 머터리얼 디자인은 순수한 플랫 디자인보다 더 많은 깊이와 그림자를 사용합니다. 

지난 6월 구글은 웹사이트에 적합한 Material Design Lite를 발표했습니다. Lite는 vanilla CSS, HTML, JavaScript 를 사용하며, 웹 사이트에 머터리얼 디자인의 모습과 느낌을 간단하게 추가할 수 있습니다.



5. 반응형 디자인

최근 몇 년 동안 모바일 인터넷 사용의 증가로 반응형 웹 디자인은 여전히 인기를 끌고 있습니다.


UXPin


모든 기능을 갖춘 모바일 친화적인 사이트를 구축하는 것이 비교적 간단하고 저렴할 수 있습니다. 그러나 적절히 수행하지 못할 경우, 퍼포먼스와 관련하여 몇 가지 문제가 있을 수 있습니다. 최상의 반응형 퍼포먼스를 위해 Guy's Pod의 가이드를 참고해보세요.

반응형 디자인은 유용하지만, 좋은 UX를 제공하기 위해 속도를 개선하는 등의 노력과 고민이 필요합니다.



6. 플랫 디자인 (Flat Design)

플랫 디자인은 미니멀리즘, 반응형 웹 디자인, 머터리얼 디자인과 같은 다른 트렌드와 인기를 함께하고 있습니다.


Beoplay


앞으로 플랫 디자인에서는 다음과 같은 트렌드를 볼 수 있습니다.


- 긴 그림자 : 평면 디자인에 깊이를 더해 줄 것입니다.

- 생기가 넘치는 컬러 : 인기있는 UI 프레임워크와 템플릿은 더 생동감 있는 컬러를 사용하고 있습니다. 

- 간결한 타이포그라피 : 플랫 디자인에서 간결한 타입페이스는 텍스트의 가독성을 높여줄 것입니다.

- 고스트 버튼 : UX 측면에서 산만하지 않고, 사용자가 가리켰을 때 클릭할 수 있는 링크를 보여주어 기능을 수행할 수 있도록 합니다.  

- 미니멀리즘 : 신선하고 깔끔한 UI를 위해 요소의 수를 줄이는 시도가 보입니다.



지금까지 2016년의 웹 디자인 동향 6가지를 살펴보았습니다. 2015년과 크게 다른 흐름은 아니지만 그 안의 작은 요소들이 조금씩 변하고 있는 것 같습니다. ‘힙한’ 트렌드라고 무작정 따라하지 마세요. 사용자에게 최선이 무엇인지 먼저 생각해보는 것이 중요합니다.



출처 : AWWWARDSDESIGN.CCIT WORLD


by 비숑 발자국



(광고)


Posted by slowalk

슬로데이 2016 달력 후원하기

https://tumblbug.com/sloday2016



"오늘 기분 어때요?"


간단하지만 대답하기 어려운 질문입니다. 누가 물어봤느냐에 따라서도 다릅니다. 친한 친구나 가족이 물어봤을 때는 편하게 대답할 수 있겠지만, 대하기 어려운 직장 상사가 물어봤다면? 대답을 얼버무릴 가능성이 큽니다. 바쁘고 지친 직장인 여러분을 위해 Mr. Slo가 대신 감정 표현을 해 드립니다.




먼저 뒷면을 볼까요?

직장 생활에서 꼭 필요한 순간에 활용할 수 있도록 만들었습니다.




동료들의 도움을 갈구하는 모습도 보입니다.


소개팅이 필요한 직장 동료의 요청을 그냥 넘어갈 수 없겠죠?


썸타는 중인 직장 동료의 모습, 당신의 조언이 필요할지도 모릅니다.



그럼 앞면을 다시 살펴볼까요?




달력과 함께 드리는 스티커 중, 오늘 기분에 맞는 스티커를 찾아서 붙이면 됩니다.



한 달이 지나면 지난 한 달을 돌아보세요. 행복한 순간이 많았나요, 그렇지 않은 순간이 많았나요?

슬로데이 달력을 사용하면 알 수 있습니다.



나의 기분을 동료들과 공유하세요. 

서로의 감정에 신경을 쓴다면 불필요한 갈등을 방지할 수 있지 않을까요?




<청년유니온>과 함께 합니다.

슬로데이 달력 판매 수익금 전액(제작비, 배송비, 수수료를 제외한 금액)은 일하고 꿈꾸고 저항하는 청년들의 노동조합인 <청년유니온>에 기부됩니다. 기부금은 청년들의 노동과 일자리 문제를 해결하는 데 사용됩니다.




청년유니온은 청년노동, 일자리 문제를 청년들의 힘으로 해결하기 위해 다양하게 활동하는 세대별 노동조합입니다. 15세에서 39세까지의 청년이라면 누구나 함께 하실 수 있습니다.


홈페이지: http://youthunion.kr/

페이스북: https://www.facebook.com/y.union1030/

노동상담: 02-735-0262



전체 구성품



탁상달력, 기본 감정표현 스티커(394개), 투명 스티커, 그리고 포스터를 함께 드립니다. 


슬로데이 Mr.Slo는 오늘도 매일매일 새로운 감정을 전하고 있습니다. 2016년에는 내가 느끼는 감정을 슬로데이 달력으로 맘껏 표현해보세요!




슬로데이 2016 달력 후원하기

https://tumblbug.com/sloday2016


Posted by slowalk




10월이 훌쩍 지나가고, 2015년도 어느덧 두 달이 남았습니다. 서점이나 문구점에는 벌써 새로운 2016년 달력들이 나오고 있는데요, 해마다 이맘때쯤이면 내년에는 또 어떤 달력을 사용해야 할지 고민하게 됩니다. 


저는 중요한 일정에 스티커를 붙여두기 때문에 스티커를 붙일 공간이 충분한 달력을 선호하는 편인데, 여러분은 어떠신가요? 어떤 사람은 달력의 칸마다 엑스표를 그리며 스트레스를 해소하기도 하고, 어떤 사람은 매일의 기분을 낙서로 표현하기도 합니다. 이렇게 달력은 스케줄을 확인하기 위한 도구인 동시에 일상을 기록하는 여러가지 행동의 대상이 됩니다. 


오늘은 일상을 기록하는 재미있는 행동을 유발하는 이색 달력들을 소개합니다.



Good Day Sunshine, The Annual Sun Planner

'Good Day Sunshine'은 2016년 한 해의 일조량을 한눈에 확인할 수 있는 달력입니다. 일반적인 달력에서 볼 수 있는 숫자와 칸들을 생략하고, 최소한의 요소들로만 이루어진 미니멀한 디자인이 인상적이네요. 금색으로 인쇄된 366개의 크고 작은 원은 일조량을 의미하며 달은 고리 모양으로 표시되어 있습니다. 이 달력은 일조량을 예측하여 한 해를 계획할 수 있게 해 주며 조형적으로도 아름다워 실내 장식용으로 안성맞춤입니다.



출처: gooddaysunshine



Life Calendar series_1, How was your day?

'How was your day?'는 Life Calendar 시리즈중 하나로 이모티콘을 활용하여 그날의 기분을 기록하는 달력입니다. 365개의 원 안에 다섯 가지 감정 이모티콘(아주 좋은, 좋은, 평범한, 나쁜, 아주 나쁜) 중 그날의 기분에 적합한 이모티콘을 그려 넣을 수 있습니다. 이 달력은 일상속의 작은 경험을 쉽고 재미있게 기록할 수 있는 작은 다이어리이기도 한데요, 웃는 얼굴, 찡그린 얼굴, 화내는 얼굴을 하나씩 채워가며 한 해를 완성하는 재미가 쏠쏠하겠네요. 






Life Calendar series_2, Healthy Lifestyle
'Healthy Lifestyle' 역시 Life Calendar 시리즈 중 하나입니다. 이 달력은 일상 속에서 건강을 위해 필요한 4가지 활동(수분 섭취, 다이어트, 수면, 운동)을 의미하는 4등분된 사과 조각을 색칠하며 완성할 수 있습니다. 매일 스스로의 건강 상태를 체크하면 보다 규칙적이고 건강한 한 해를 보낼 수 있겠군요. 





Whiteboard calendar
'Whiteboard calendar'는 투명한 용지로 제작되었습니다. 흰색으로 인쇄된 날짜가 수직으로 배치되었으며, 좌우로 움직일 수 있는 검은색 띠를 통해 한 달을 확인할 수 있습니다. 검은색 띠 위로 보이는 달 이외의 공간에는 보드마카로 스케줄이나 회의록 따위를 자유롭게 메모했다 지울 수 있어서 종이의 낭비가 없고 친환경적입니다.



출처: Whiteboard-calendar




wall planner
'wall planner'는 포스트잇에서 아이디어를 얻은 달력입니다. 이 달력 역시 한장의 포스터와 상단에 구멍이 뚫린 작은 포스트잇으로 구성되어 있는데, 포스트잇의 구멍과 달력 면의 날짜를 맞물리게 접착하여 중요한 스케줄이나 이벤트를 표시할 수 있습니다. 군더더기 없는 깔끔한 디자인과 포스트잇을 붙인다는 행위가 더해져 인상적이며, FSC 인증 재활용 용지로 제작하였기 때문에 친환경적입니다.


출처: 
wall planner




행동을 유발하는 이색적인 달력들을 어떻게 보셨나요? 생각지도 못 했던 재미있는 아이디어로 가득하네요. 2016년에 여러분은 어떤 달력을 사용하고 싶으신가요? 날짜와 공휴일만 표시 되어 있는 평범한 달력보다는 재미있는 행동을 유발하는 달력을 사용하면 평범하게 지나칠 수 있는 하루가 조금 더 풍성해질 것입니다. 




by. 고슴도치 발자국


Posted by slowalk