웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
WEBDESK
Inspiration
HOME WEBDESK Inspiration
다양한 형태의 모션을 이용한 디자인 사례
Posted by kimdirector | 2015.03.20 | Hit : 13573
모션 애니메이션 모바일 GIF
목록보기이전보기
스마트폰을 사용하면서 가끔 느끼는 것들 중에서 재미있는 효과 또는 신기한 효과들을 볼 때면 나도 모르게 감탄사를 연발할 때가 있다. 이런 느낌을 가질 수 있는 것은 이 분야에서 일을 하고 있기 때문일 것이라 생각한다.
 
일반 사용자들에게는 다양한 사용자 경험(UX)을 제공하여 보다 쉽게 인지할 수 있고, 재미있는 요소와 흥미를 유발할 수 있다면 좋을 것 입니다. 
 
모바일 환경에서 모션 또는 애니메이션을 활용하여 구현된 다양한 앱들을 소개한다.
 
물론, 실제로 구현되지 않은 것들도 있지만, 충분한 가능성을 가지고 있는 것들일 것이다. 또한, 안드로이드 디자인 컨셉인 머트리얼 디자인을 활용한 구현방식도 눈여겨 볼만한 것들도 있다.
 
다만, 모션이나 애니메이션이 많이 들어갈수록 베터리 소모량이 커질 수밖에 없을 것도 현실이지만 한두가지 정도에서 활용된다면 조금은 나은 모바일 환경을 만들 수 있지 않을까 생각한다.
 
소개하고 있는 GIF 애니메이션으로 만들어진 것들이기에 디자인이나 개발할 때 유용한 참고자료가 될 수 있을 것이다.
 
 
Material Design Menu animations by Virgil Pana
 
 
Sidebar Animation by Jacub Antalik
 
 
Binary Game
 
 
Seconds+
 
 
Delivery Card
 
 
News App
 
 
DodgeIt - The Color Balls Game
 
 
Map interaction by Rally Interactive
 
 
Day/Night Toggle Button by Tsuriel
 
 
Share Results
 
 
Circle Game Menu
 
 
Game Loading Intro
 
 
Large Screen Navigation
 
 
Comic App Design
 
 
Power Chart by Kingyo
 
 
Onboarding for Müzo
 
 
Dashboard
 
 
Survey Platform Graph Design
 
 
Share Animation
 
 
Animated Infographic
 
 
Flat Label Form Interaction
 
 
Pull Down To Refresh
 
 
Energy Predictions
 
 
Contacts Screen
 
 
iOS Card Animation
 
 
Profile Cards iOS App
 
 
Onboarding Animation
 
 
Search Animation
 
 
Animated Check-in Button
 
 
Search Animation
 
 
Animated Tab Bar Icons
 
 
Sign Up Transition
 
 
Chat iPhone App Design
 
 
Chat Screen by Ramotion
 
 
Contact Sync by Ramotion
 
 
Progressive Reduction Swift module by Ramotion.
 
 
Profile Gallery Design
 
 
Balance Graph
 
 
Google Material Design
 
Small Universe Android Wear app design
 
 
City Guides for iPad
 
 
Delayed / On Time
 
Posted by kimdirector | 2015.03.20 | Hit : 13573
Tags 모션 애니메이션 모바일 GIF
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=71

COMMENT
목록보기이전보기

모바일 UI 디자인 애니메이션 3가지 원칙
아래 내용은 "3 Key Uses for Animation in Mobile UI Design"의 내용을 번역한 내용입니다. 의역이 있을 수 있으...
NO:63 2020.05.25 424 
[인포그래픽 사이트 추천] 50만 장이 넘는 셔...
Creative Template with apple banner / can be used for infographics / banners / concept vecto...
NO:62 2015.11.27 6106 (1)
2015 로고 디자인 트렌드 Top10
Design Bolts—New trends of Logo design for 2015을 번역 및 재구성한 포스트를 소개합니다. 여러분의 로고 디자...
NO:61 2015.04.28 8836 
30 Dark iPhone App UI Designs
모바일 UI 디자인은 현재 간단한 버튼이나 라인 아이콘 편평한 요소에 초점을 맞추고 있습니다. 괜찮은 어플리케이션이 많이 있지만, UI의 영감을 위한 최...
NO:60 2015.04.17 5633 
기발하고 창의적인 로고 디자인 15선-하이컨셉,...
기발하고 창의적인 세계의 로고 디자인 15선   가장 단순 심플 하지만 많은 것을 담고 있어야 할 로고 디자인 그러한 이유로 로고 디...
NO:59 2015.04.10 2852 
다양한 형태의 모션을 이용한 디자인 사례
스마트폰을 사용하면서 가끔 느끼는 것들 중에서 재미있는 효과 또는 신기한 효과들을 볼 때면 나도 모르게 감탄사를 연발할 때가 있다. 이런 느낌을 가질 ...
NO: 2015.03.20 13573 
The 2014 Logo Trend Report
2014년 올 한 해동안 있었던 다양한 스토리들이 연말에 많이 솟아져 나오고 있습니다. IT계도 크게 다르지 않았습니다.    2014년에 기...
NO:57 2014.12.26 6083 
효과적인 기능성을 갖춘 UI, UX 디자인 사례
웹 기반 응용 프로그램과 모바일 앱을 디자인 할 때, 제일 먼저 고려해야 할 사항은 어떤 것들이 있을까요?   단순히 디자인만 강조할 것인지...
NO:56 2014.12.18 9701 
40 Effective Responsive Naviga...
아래 소개하고 있는 사이트들은 기본으로 반응형 웹 형태로 되어 있습니다. PC 버전인 경우에는 상관없이 서핑이 가능하겠지만, 모바일 버전에서의 ...
NO:55 2014.12.13 2075 
25 UI design inspiration
아래 소개하고 있는 대부분의 UI 디자인은 애플리케이션 또는 모바일 앱이나 웹 페이지에서 활용 가능한 UI 요소들 입니다. 각종 메뉴 아이콘 부터 슬...
NO:54 2014.11.26 2878 
26 Parallax Scrolling Design I...
요즘 부쩍 Parallax Scrolling에 대한 포스팅이 많은 것 같습니다. 현재 많이 이슈화되고 있는 트렌드이기도 하지만 그만큼 관심을 많이 ...
NO:53 2014.11.11 2648 
jQuery 라이브러리 기반 무료 오픈 소스 플러...
소개하고 있는 플러그인은 주로 jQuery 라이브러리를 기반으로 무료 오픈 소스들입니다.  원하는 효과를 재현하기 위해 간단한 JavaScript ...
NO:52 2014.11.03 4144 
Elements of a Brilliant jQuery...
웹사이트 제작시, 활용도가 가장 높은 image slider 에 대한 좋은 리소스 파일들을 소개합니다. 그 이유는 여러가지가 있겠지마 그 중에서 컨...
NO:51 2014.10.31 7791 
Interesting Examples of HTML5 ...
웹디자이너들에게 중요한 건 포트폴리오입니다. 자신이 작업한 결과물을 정리하기 위한 수단으로 포트폴리오를 관리하기도 하지만 내가 제작한 작업물들...
NO:50 2014.10.24 2085 
모바일 앱 디자인에 최적화된 UI 구현 사례들
모바일 인터페이스 디자이너들은 모바일에 최적화 된 사이트는 사이트 개발자의 부담을 가볍게 할 수 있지만, 일부가 아닌 전체 기능의 앱을 구축하고 개발하...
NO:49 2014.10.16 10226 

 1 2345
WEBDESK
Webdesign Report
Web Plan Report
Inspiration
Web Development
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign Web Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
Tags
웹사이트 CIP 구글 아이콘 일러스트 웹디자인 리더 하이브리드 구글 폰트 아웃룩 월페이퍼 능력 홈페이지 iPhone 전원끄기 Ubuntu 무료 행사 캘린더 한국디자인진흥원 iPad 파워포인트 스마트폰 정보보호 한계 페이스북 html 컬러 음성기능 배경이미지 BIP 지식 kimdirector webcolourdata 어플리케이션 웹폰트 서비스 안드로이드
Recommend Tags
디자인 씽킹 퍼스널 브랜드 사용자 경험 서비스 디자인