Designing User Interfaces has always been more exciting to me than traditional Art or traditional Print Design. The reason being, User Interfaces (U.I.’s) combine Graphic Design with Interactivity and Animation. Subjects I’ve studied, worked with, and loved for years. In my new article, I talk about my recent observations in the field of User Interface Animation and cover applying the traditional Principles of Animation to User Interfaces in a few experiments using Flex Builder and Flash. Click here to read the full article.
Archive for the ‘User Interface Animation’ Category
Pre-viz for Chat Application UI/User Experience (Login/Inbox)
28
Dec
(Play Quicktime Movie) Pre-viz for Chat Application User Interaction v01 by Dolores Joya 08
The practice of making a Pre-viz (lookup definition) to map out and think thru a complex sequence of events prior to executing them, has been around in Hollywood for awhile. Emerging RIA technologies like Adobe Flex and Silverlight are finally bridging Design and Development pipelines to blend 3D, Interaction, Animation and Applications into a rich seamless user experience.
This example is my creative thoughts on how the user experience for a Chat Application could be when a user is alerted to take an action and logs in to receive new messages. The bouncing icon indicates user action is required. Potentially, I believe the user would already be logged in. The background should really be the user desktop. I removed all the traditional chrome of the browser and application window (which I think may become a standard practice in the future for entertainment/social networking type apps. Video players already do this.). Just in doing this short pre-viz I had many realizations of what could and probably could not be done. Also, I had many more new ideas to wow and lull the user into interacting more with an interface.
With the help of Maya and After Effects, I’m finally able to get these thoughts down on screen. I did try to execute this concept with keyframed SWC’s embedded in Flex components, thru timeline animation in Photoshop and Flash. In the end, the Maya/After Effects combination seemed to offer the most direct route to executing my concept.
I believe the future of User Experience Design, Interactivity, RIA’s, User Interface Design and other interactive mediums will have the Designer move into pre-vizing the interactivity after or parallel to Photoshop mock-up stage. In my experience the static Photoshop mock-up doesn’t reflect the life or UX of the application and pre-viz can fill that void. Currently, many teams already do a pre-viz prior to development usually in Powerpoint or After Effects. The addition of Autodesk Maya will come into play when more user experiences are built Papervision 3D. Now that Flash Player 10 supports more 3D and Photoshop and After Effects support more 3D and Maya supports Photoshop files the pipeline seems to be linking up nicely.
Flex + Flash + Maya + zBrush
14
Nov
Here’s an experiment I did with some of my favorite Computer Graphics tools mashed up to together. I’ve been working heavily in Pixologic’s zBrush (Awesome 3D Sculpting) and Maya 2009 (Out of Control Animation) when I’m not creating out Flex UI Designs and Flash Skins. Ultimately, I want to push everything together to create innovative and inspirational user interface widgets and what-not. So here is the output from those pipelines melded into a wicked skull.
Flex + Flash + Maya + zBrush
Here is the original zBrush Sculpt. This is the version I intended to use in my Maya Animation but I’m still figuring out Displacement Maps in Maya/zBrush.
zBrush Sculpt of Skull by dolores joya moore
Flex + Flash + Maya for 3D UI button controls
19
Jul
3D is a passion of mine. I’ve been doing some experimenting exporting 3D rendered stills from Maya to Flash and then finally to Flex. I like the concept of creating GUI elements that are squashy, transformed or deformed in some way. I’m hoping to create an entire interface with 3D elements. Maybe blend these elements with video for a Game like experience? We’ll See…Here’s where I am so far.
3D Rendered GUI Flex Skinned Components
Animation Fun with Flex Effects
22
Mar
I’ve been playing around with Flex’s Effects lately and I thought I would post some of my experiments here. These are just my creative sketches. I like to play around with User Interfaces so I sat down to see what kind of animations I could create as a Designer.
Here I use Blur, Zoom, Resize, Fade, Move. I also put some Bounce.easeOut on the Zoom effect.
Bounce
play Flex Bounce Effect Animation
Zoom
Here I tried out the Flex Animation Effects combined with a Video Embedded in a Flash SWF. Looks pretty cool. I call it “Cloudscape. Could be a whole theme.
play Flex Zoom Video Animation