Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

2017 Web/Mobile Design Trend

678 vues

Publié le

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

Publié dans : Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

2017 Web/Mobile Design Trend

  1. 1. 2017 모바일/웹 디자인 트렌드
  2. 2. 1/ 모바일 퍼스트 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃
  3. 3. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 3차원 버튼 -> 스큐어모피즘 버튼 -> 플랫디자인 버튼(2012~) 1/ 모바일 퍼스트
  4. 4. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 플랫디자인 - 구글의 매터리얼 디자인 가이드라인 / 유저의 액션유도를 위해 ‘색상’사용이 중요한 역할을 한다. / 플랫한 요소들이 겹쳐있는 depth 개념 -> 플로팅 액션 버튼(FAB) / 최소한의 그림자 1/ 모바일 퍼스트
  5. 5. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 고스트 버튼 (2014~) 1/ 모바일 퍼스트
  6. 6. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 ‘최소한의 디자인’은 유저로 하여금 ‘컨텐츠’에 집중할 수 있게 해준다 1/ 모바일 퍼스트
  7. 7. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 단순하고 직관적인 ‘도형’사용 1/ 모바일 퍼스트
  8. 8. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 모바일의 작은 환경을 효율적으로 활용 ->연결성을 갖는 모션 연속성과 일관성이 향상되어 사용성/시각적 피드백/행동유도(어포던스) 향상 https://youtu.be/xqWlKw9dlpg https://youtu.be/pTcu6EaH3ww 1/ 모바일 퍼스트
  9. 9. 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 모바일의 작은 환경을 효율적으로 활용 최소한의 디자인 마이크로 인터랙션 무한 스크롤과 패럴랙스 테크닉 카드형 레이아웃 1/ 모바일 퍼스트
  10. 10. 2/ 감성적 접근 풀 이미지 & 비디오 챗봇 (대화형 인터페이스) 핸드드로잉 이모지 활용
  11. 11. 풀 이미지 & 비디오 챗봇 (대화형 인터페이스) 핸드드로잉 이모지 활용 2/ 감성적 접근 이미지&비디오, 시네마그래프(움짤) 등 비주얼 이미지로 하여금 브랜드 무드를 조성 감정적이고 몰입에 도움이 되기 때문에 스토리텔링에 효과적 https://www.airbnb.co.kr/experiences/58?source=p1 http://cinemagraphs.com/lifestyle/
  12. 12. 풀 이미지 & 비디오 챗봇 (대화형 인터페이스) 핸드드로잉 이모지 활용 2/ 감성적 접근 https://dribbble.com/shots/3017428-mcDonalds- facebook-messenger-bot-prototype-in-FramerJS 챗봇(채팅로봇)의 활성화 -보다 자연스럽고 흐름이 끊기지 않는 UX/UI 챗봇을 통한 검색/결제/예약 등의 활용
  13. 13. 풀 이미지 & 비디오 챗봇 (대화형 인터페이스) 핸드드로잉 이모지 활용 2/ 감성적 접근 https://dribbble.com/shots/3060990-Halloween-Reactions 감성적 접근으로 호소력을 높일 수 있으며/ 스토리 텔링에 효과적
  14. 14. 풀 이미지 & 비디오 챗봇 (대화형 인터페이스) 핸드드로잉 이모지 활용 2/ 감성적 접근 더 많은 감정의 표현
  15. 15. 유저들은 이제 모바일 환경과 디지털 인터페이스에 완전히 적응했다. 액션을 유도하는 버튼을 굳이 심하게 강조하지 않아도 약간의 단서만 주면 알아서 잘 사용한다. 그러니 집중해야 할 컨텐츠 외의 것들은 단순하게 표현해도 된다. 이제 그 컨텐츠와, 유저의 감성을 건드릴 수 있는 부수장치를 고민해야 할 때이다. 그 부수 장치들 중 현재 가장 주목받고 있는 것은 동영상이다. 유저들은 다들 딱딱한 모바일/웹 화면만 들여다 보고 있으면서 그 속에서 아날로그의 감성을 찾고 있다.

×