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

1/

모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

3차원 버튼 -> 스큐어모피즘 버튼 -> 플랫디자인 버튼(2012~)

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

플랫디자인 - 구글의 매터리얼 디자인 가이드라인

/ 유저의 액션유도를 위해 ‘색상’사용이 중요한 역할을 한다./ 플랫한 요소들이 겹쳐있는 depth 개념 -> 플로팅 액션 버튼(FAB) / 최소한의 그림자

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

고스트 버튼 (2014~)

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

‘최소한의 디자인’은 유저로 하여금‘컨텐츠’에 집중할 수 있게 해준다

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

단순하고 직관적인 ‘도형’사용

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

모바일의 작은 환경을 효율적으로 활용->연결성을 갖는 모션

연속성과 일관성이 향상되어사용성/시각적 피드백/행동유도(어포던스) 향상

https://youtu.be/xqWlKw9dlpg

https://youtu.be/pTcu6EaH3ww

1/ 모바일 퍼스트

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

모바일의 작은 환경을 효율적으로 활용

최소한의 디자인마이크로 인터랙션무한 스크롤과 패럴랙스 테크닉카드형 레이아웃

1/ 모바일 퍼스트

2/

감성적 접근

풀 이미지 & 비디오챗봇 (대화형 인터페이스)핸드드로잉이모지 활용

풀 이미지 & 비디오챗봇 (대화형 인터페이스)핸드드로잉이모지 활용

2/ 감성적 접근

이미지&비디오, 시네마그래프(움짤) 등비주얼 이미지로 하여금 브랜드 무드를 조성

감정적이고 몰입에 도움이 되기 때문에스토리텔링에 효과적

https://www.airbnb.co.kr/experiences/58?source=p1

http://cinemagraphs.com/lifestyle/

풀 이미지 & 비디오챗봇 (대화형 인터페이스)핸드드로잉이모지 활용

2/ 감성적 접근

https://dribbble.com/shots/3017428-mcDonalds-facebook-messenger-bot-prototype-in-FramerJS

챗봇(채팅로봇)의 활성화-보다 자연스럽고 흐름이 끊기지 않는 UX/UI챗봇을 통한 검색/결제/예약 등의 활용

풀 이미지 & 비디오챗봇 (대화형 인터페이스)핸드드로잉이모지 활용

2/ 감성적 접근

https://dribbble.com/shots/3060990-Halloween-Reactions

감성적 접근으로 호소력을 높일 수 있으며/스토리 텔링에 효과적

풀 이미지 & 비디오챗봇 (대화형 인터페이스)핸드드로잉이모지 활용

2/ 감성적 접근

더 많은 감정의 표현

유저들은 이제 모바일 환경과 디지털 인터페이스에 완전히 적응했다.액션을 유도하는 버튼을 굳이 심하게 강조하지 않아도약간의 단서만 주면 알아서 잘 사용한다.

그러니 집중해야 할 컨텐츠 외의 것들은 단순하게 표현해도 된다.

이제 그 컨텐츠와, 유저의 감성을 건드릴 수 있는 부수장치를고민해야 할 때이다.

그 부수 장치들 중 현재 가장 주목받고 있는 것은 동영상이다.

유저들은 다들 딱딱한 모바일/웹 화면만 들여다 보고 있으면서그 속에서 아날로그의 감성을 찾고 있다.