2017 웹/모바일 디자인 트렌드 작성 및 발표_민솔아 UX 디자이너 내부 스터디용

1. 2017 모바일/웹 디자인 트렌드

2. 1/
모바일 퍼스트
최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃

3. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
3차원 버튼 -> 스큐어모피즘 버튼 -> 플랫디자인 버튼(2012~)
1/ 모바일 퍼스트

4. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
플랫디자인 - 구글의 매터리얼 디자인 가이드라인
/ 유저의 액션유도를 위해 ‘색상’사용이 중요한 역할을 한다.
/ 플랫한 요소들이 겹쳐있는 depth 개념 -> 플로팅 액션 버튼(FAB) / 최소한의 그림자
1/ 모바일 퍼스트

5. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
고스트 버튼 (2014~)
1/ 모바일 퍼스트

6. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
‘최소한의 디자인’은 유저로 하여금
‘컨텐츠’에 집중할 수 있게 해준다
1/ 모바일 퍼스트

7. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
단순하고 직관적인 ‘도형’사용
1/ 모바일 퍼스트

8. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
모바일의 작은 환경을 효율적으로 활용
->연결성을 갖는 모션
연속성과 일관성이 향상되어
사용성/시각적 피드백/행동유도(어포던스) 향상
https://youtu.be/xqWlKw9dlpg
https://youtu.be/pTcu6EaH3ww
1/ 모바일 퍼스트

9. 최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
모바일의 작은 환경을 효율적으로 활용
최소한의 디자인
마이크로 인터랙션
무한 스크롤과 패럴랙스 테크닉
카드형 레이아웃
1/ 모바일 퍼스트

10. 2/
감성적 접근
풀 이미지 & 비디오
챗봇 (대화형 인터페이스)
핸드드로잉
이모지 활용

11. 풀 이미지 & 비디오
챗봇 (대화형 인터페이스)
핸드드로잉
이모지 활용
2/ 감성적 접근
이미지&비디오, 시네마그래프(움짤) 등
비주얼 이미지로 하여금 브랜드 무드를 조성
감정적이고 몰입에 도움이 되기 때문에
스토리텔링에 효과적
https://www.airbnb.co.kr/experiences/58?source=p1
http://cinemagraphs.com/lifestyle/

12. 풀 이미지 & 비디오
챗봇 (대화형 인터페이스)
핸드드로잉
이모지 활용
2/ 감성적 접근
https://dribbble.com/shots/3017428-mcDonalds-
facebook-messenger-bot-prototype-in-FramerJS
챗봇(채팅로봇)의 활성화
-보다 자연스럽고 흐름이 끊기지 않는 UX/UI
챗봇을 통한 검색/결제/예약 등의 활용

13. 풀 이미지 & 비디오
챗봇 (대화형 인터페이스)
핸드드로잉
이모지 활용
2/ 감성적 접근
https://dribbble.com/shots/3060990-Halloween-Reactions
감성적 접근으로 호소력을 높일 수 있으며/
스토리 텔링에 효과적

14. 풀 이미지 & 비디오
챗봇 (대화형 인터페이스)
핸드드로잉
이모지 활용
2/ 감성적 접근
더 많은 감정의 표현

15. 유저들은 이제 모바일 환경과 디지털 인터페이스에 완전히 적응했다.
액션을 유도하는 버튼을 굳이 심하게 강조하지 않아도
약간의 단서만 주면 알아서 잘 사용한다.
그러니 집중해야 할 컨텐츠 외의 것들은 단순하게 표현해도 된다.
이제 그 컨텐츠와, 유저의 감성을 건드릴 수 있는 부수장치를
고민해야 할 때이다.
그 부수 장치들 중 현재 가장 주목받고 있는 것은 동영상이다.
유저들은 다들 딱딱한 모바일/웹 화면만 들여다 보고 있으면서
그 속에서 아날로그의 감성을 찾고 있다.