Anthony Dines

Product Designer at Control Group

1

12

iPhone app UI prototype

Update 5

Made some updates to the animation after sitting on things and thinking through a few of the issues that were bugging me. Added a lot of overlap to areas that I felt needed it, as well as changed the way the dashes animate in. I wanted to make them feel similar to a glitchy/flickering flourencent light turning on. I made that effect entirely using tons of keyframes... perhaps I'll do some research to see if there is an expression out there to create the same effect.

Check out the where I am at right now:

http://anthonydines.com/_SKILLSHARE/_MOTION/CLASS_PROJECT_o.mp4

--------------------------

Update 4

Got the animation to a spot that is ready to review. I am not 100% happy with it yet, so I'd love some feedback.

Here is what you're looking at:

  • A prototype for the UI of an iPhone app
  • A vector based UI layer, with a more organic feeling background
  • This is the loading animation of the app, showing what happens as the app will pull in all the data from APIs needed to display things after this animation is complete
  • The loading is in two parts, a build-in of all the elements of the loader UI, and then a spinning motion to denote that loading is in progress.
  • When loading of the app is done, the loader will come to a stop... more will happen after this as the rest of the app UI will build in, but that's not what I am focusing on for this class project, just the loader for now.

Like I said, I'm not 100% happy with where this is at yet, so any feedback to improve things is of course welcome, Thanks!

Check out the where I am at right now:

http://anthonydines.com/_SKILLSHARE/_MOTION/CLASS_PROJECT_h.mp4

--------------------------

UPDATE 3

Pulled back from the work I was doing in AE, since I found that it was easier to do visual edits outside of AE, and then resave the files and re-import them. 

Here is where the new look and feel is at. I am very excited to dive into this all weekend.

--------------------------

UPDATE 2

Have begun to play around with the basic shapes and the speed of things. Still trying to figure out how to have the graph lines build in.

http://anthonydines.com/_SKILLSHARE/_MOTION/BW_MOTION_d.mp4

--------------------------

UPDATE 1

I've edited the Illustrator file for the various shapes, next step will be bringing this into AE and prepping everything for animation. Here is how I envision things working:

- The large circle with the piece cut out of it, this will be the main "spinner"... after building into place in an imteresting way (I have a few ideas, one of them is having both pieces expand and fade in to this size, slightly staggered, larger piece first, then the smaller piece.) The smaller piece will be blue, the larger piece will be whitish.

- The graph lines on either side, they will never move. Perhaps I'll find an interesting way for them to build in?

- The dots on either side. After building in, perhaps sliding in from offscreen, they will also spin from the center axis of the circle, but these will act more random. At times they will come to stop and them change directions for a partial rotation. This will act as if it searching for a signal is what I am going for, while the main spinner is acting as an activity monitor.

I have more ideas, but won't know what works best until I get this into AE and start having some fun!

--------------------------

ORIGINAL POST

A friend and I have been working on an iOS on the side for a while. Up until now, I've been making everything in Photoshop and Illustrator with the intention of handing off these files to him in order work his dev magic skills. Since I have so many specific things in mind for the animations, transitions, and default motions of the various states of the UI, I felt it was time I finally learned motion graphics so I can hand off more specific examples of what we hope the final outcome will look like.

For my project, I'd like to explore one of the smaller elements of the application: the loader. Being that my design takes a lot of inspiration from modern movie UI trends (see examples I've collected here: http://pinterest.com/anthonydines/fantasy-user-interfaces/ ) as well as generative art, I felt this would be a fun project to tackle for this class.

Attached is a comp from Photoshop that I will be working from:

--------------------------

UPDATE 2

Have begun to play around with the basic shapes and the speed of things. Still trying to figure out how to have the graph lines build in.

http://anthonydines.com/_SKILLSHARE/_MOTION/BW_MOTION_d.mp4

Comments

Please sign in or sign up to comment.