🌐 Public

Designing meaningful UI animation

By Mariusz Ciesla

Introduction

A look into designing user interface animations that enhance the user experience. Playlist is intended to be pretty broad: covering anything from basics of animation, through designing meaningful transition to building actual prototypes with After Effects, Quartz Composer and Framer.

Mariusz Ciesla — Interactive designer. Developer. Co-founder of @lifetrampapp. Gets grumpy at times.

Added by Mariusz Ciesla: “Great notes on animation basics from RMIT University

1 Animation Notes Contents

What is Animation? Animation History (Part II) Pose to Pose Animation Technique Inbetweening Cyclic Animation Lip Sync Animation Table Top Animation Pixillation Notes and Project Paint-on-Glass Animation The Creative Use of Sound Disney's Principles of Animation Animation History (Part I)

3 Motion Ui Design Principles

This blog is a quick look at some simple Ui motion design principles. There isn't too much documented about this area of mobile ui design and I thought there would be some value in expressing my views. From what is documented already I urge anyone interested in ui motion to check out Pasquale D'Silva http://psql.me/ and Johannes Tonollo's meaningful transitions

4 Dive In: Resources for Web Animation

I'll admit it-animation is usually left until the very end of my design process. After nearly all of my other design decisions have been made, I'll look through the coded designs for opportunities to add some "flair." What I loved about Val Head and Rachel Nabors' articles last week is that they advocated for a much more meaningful way to

5 Web Animation at Work

Issue № 390by Published in Rachel NaborsGraphic Design, Interaction Design · When I left my job last April, the plan was that I'd use my fancy CSS3 animation tricks to land a front-end development position at an agency in New York. But as I spoke at more and more conferences and interviewed at more and more companies, I realized I

6 UI Animation and UX: A Not-So-Secret Friendship

Issue № 390by Published in Val HeadCSS, Graphic Design, Interaction Design · Using the words "animation" and "the web" together tends to conjure up memories of frantic searches for the "skip intro" button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there's no arguing that. But adding motion to our

9 Animation Principles in UI Design: Understanding Easing

Animation Principles in UI Design: Understanding EasingAn in-depth look into Ease-in and Ease-outWhat do you think these balls are doing? The green ball is obviously bouncing, but what's the red ball doing? Sure, it's moving up and down like the green ball. It's taking the same time as the green ball to go down and come back up. Yet, the

Added by Mariusz Ciesla: “Using Framer.js with Angular for prototyping animation and transitions.

10 Web apps deserve sexy transitions too!

Web apps deserve sexy transitions too!How we designed and built motion into the new Potluck with Framer and Angular.jsEarlier this week we released a refreshed design for Potluck, which aims to get you new and interesting things to talk about every time you log in. Our design process was a little different this time. We wanted to change the core

11 Animate Your Way to Glory

Math and Physics in Motion "The last time that I stood here was seven years ago." "Seven years ago! How little do you mortals understand time. Must you be so linear, Jean-Luc?" Note: This article is significantly longer than previous instalments. It features 4 interactive slideshows, each introducing a new tool as well as related concepts around it. In one

13 Smart Transitions In User Experience Design

Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites. We'll share some lessons drawn from various models and analyze why these simple patterns work so well. When we design digital products, we often use design applications such as Photoshop and Sketch. Most people who

Added by Mariusz Ciesla: “When designing animations, make sure that it communicates what you want it to communicate and reinforces the experience.

15 What Are Your UI Transitions Saying? | Val Head - Designer, Consultant and Speaker

UI animations can be a lot of things. The best ones are lovely and elegant (yay!), but often times they just kind of miss the mark (blah.). Animations are at their best when they help reinforce your message but when the motion doesn't fit the design, things feel off. A Tiny Apple Faux Pas?One example of this (one I'm always

Added by Mariusz Ciesla: “Great insights into designing meaningful UI animations from the Google Material Design guide

16 Google design guidelines

In the physical world, forces must be applied to an object in order for it to move. The strength and duration of these forces dictate how quickly an object accelerates, decelerates, or changes direction. Even the most jarring stops and starts are not instantaneous, because it takes time for an object to speed up or slow down. Consequently, when animations

Added by Mariusz Ciesla: “There is a great paragraph about functional aspects of animations in there.

18 What Screens Want by Frank Chimero

Some thoughts on digital canvases The past two years were a wild goose chase for answers. I read books, looked at art, listened to my heroes, and sketched out scratchy thoughts of my own to search for any sensible response to a question that had been lodged in my head for months. I couldn't get the question out of my

Added by Mariusz Ciesla: “Good primer in After Effects for UI animation

20 Accessible After Effects

Animation plays a vital role in the products we use every day, providing feedback, intrigue, and delight to the people that use it. Often, the use of

Added by Mariusz Ciesla: “All-around getting started tutorial to After Effects.

21 GSG Cast: Intro to After Effects - Greyscalegorilla

That was really great, thanks. It makes me want to go try it even though I know nothing about motion design.. I was wondering where you want comments, on your website or vimeo? I bet you could probably shut off comments in vimeo so everyone writes comments in the same place.

Added by Mariusz Ciesla: “Improving your CSS animations by using animation studio techniques

29 Animation Studio Power Techniques

with Rachel the Great (aka Rachel Nabors)I am Rachel the Great NaborsYou can still read the comic adventures of Rachel and Tuna at RacheltheGreat.comMy new canvasNow I tell stories using my front-end development skills at my company, TinMagpie.comAssumptions! We have them!We're using Chrome, but these animations will work in all recent browsers plus IE 11 (and 10-ish). Using -prefix-free instead

Added by Mariusz Ciesla: “Prototyping with Framer.js

30 Prototyping Swipe and Drag Gestures with Framer.js

Prototyping swipe and drag gestures with Framer 3Update late 2014: This post is now over a year old. Framer Studio works with CoffeeScript (this post was written for Javascript) and certain syntax has changed. Head over to the draggable example on the Framer website for updated code. Here at Potluck we recently started using Framer.js to prototype and try out

Added by Mariusz Ciesla: “A great iOS mockup presentation template by Creativedash

31 UI8 | Showcase Template

Give your iPhone designs the presentation medium they deserve. Easy to use Photoshop and After Effects templates will have you presenting your work in no time with stunning results. 50% off the full price of $28 for a limited time!

32 The state of Interaction Design tools

The state of Interaction Design toolsThe current state of tools is decent, but how they fit together is less than ideal.Pull up a chair & get your butt cheeks comfortable, because this will be a comprehensive mind explosion. Animation is really, bloody hard. Furthermore, the idea of using animation in the context of interactive design is really new for many

Added by Mariusz Ciesla: “A set of precomposed touch gestures for your mockup animations.

33 Precomposed Touch Gestures

EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL AREUS WADE BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THE USE OF THE GESTURES, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

34 Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don't just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

Silvia Sánchez

Never stop learning. My philosophy: A negative mind will never give you a positive life. ...

  • 3 Playlists
  • 1 Followers

Florian Sänger

Freshman

  • 0 Playlists
  • 0 Followers

kennykang

Freshman

  • 0 Playlists
  • 0 Followers

sash

Freshman

  • 1 Playlists
  • 0 Followers

Shiran Azkiel

Freshman

  • 0 Playlists
  • 0 Followers

joshua.neely

Freshman

  • 0 Playlists
  • 0 Followers

Max de Rooij

Interaction Design Intern. Notebook lover. Axure Warrior.

  • 0 Playlists
  • 0 Followers

monteroramses

Freshman

  • 0 Playlists
  • 0 Followers

Leosis

Freshman

  • 0 Playlists
  • 0 Followers

Lordmando03

Freshman

  • 0 Playlists
  • 0 Followers

Imran Khan Limon

Freelance UI/UX/ Web Designer

  • 0 Playlists
  • 0 Followers

Rob Voets

Freshman

  • 0 Playlists
  • 0 Followers

Ashley Nee

Freshman

  • 0 Playlists
  • 0 Followers

Manon_S

Freshman

  • 0 Playlists
  • 0 Followers

Joshua Brinksman

...designer // dad // foodie // believer... 1 peter 5:7

  • 0 Playlists
  • 0 Followers

Pablo_Collazo

Freshman

  • 0 Playlists
  • 0 Followers

Remington Robertson

Former tech startup founder, product designer & growth hacker consultant available for hire. https://t.co/8kvRGw3LbL

  • 0 Playlists
  • 0 Followers

Pedro Henrique Ribeiro

Designer Gráfico da empresa Cuca Design

  • 0 Playlists
  • 0 Followers

Anthony Reyes

UX @ TradeCraft | Interaction Design, Games, Ideation, Aspiring Foodie, Meditation addict, and inspired to ...

  • 0 Playlists
  • 0 Followers

Harsha Parakot

Art director

  • 0 Playlists
  • 0 Followers
Load more

Delete your comment

Are you sure you want to delete your comment?