Experience = Good Design

Animation and motion is honestly something I have not worked with yet. But, I would like to explore it soon. I believe that animation can help exemplify your brand’s personality and give it life. Without personality, your experience becomes flat and cold. Good design must have an experience, and design without a purpose is just art. While keeping that in mind, I’m going to consider how I could apply animation my portfolio website.

Starting from the Top

In the article, Designing Interface Animation, Val Head explains that if you do not already use any animation or if you’re starting a new project, you develop your brand’s animations design guidelines from the top down. So, you start with adjectives that describe your brand/product. For my portfolio website, I would use three adjectives to describe it: stable, organic, and calm.


The article mentioned that using Ease-in-outs (any easing that gradually speeds up into the action, is fastest in the middle, and then slows at the end of the action) are stable. It creates a sense of stability and balance of my personal brand. The best way to show this movement would be by simple horizontal movements.

Here is an example of where I could use a simple horizontal movement. This type would have a small movement that would go left to right. This would move the viewer’s eye down to the second paragraph, which is the most important text in this section.


Organic is not an adjective that was given an example for in the article. But if I had to guess, I would assume soft motions that flow gradually. Calm relates to organic with using soft motions. The article states that animation doesn’t necessarily have to include large movements, or even any motion at all (mind blowing). So, using smaller movements can contribute to the stable and calm personality of your brand


The left image is showing that once your cursor is over an image the box is filled with green. A motion that would work for this would be a soft motion, that doesn’t actually move – but fades in. The right side I could use the same motion in the first example, a simple horizontal movement, that has small movements.

And that’s the flavor of the week.

This post was written by carlievank

Posted March 13, 2017 7:28 pm