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