CRAIG ROBERTS
Portfolio

Animations

 

Designing with the 4th Dimension

Motion brings life to digital experiences and accomplishes multiple goals. Establishing hierarchy in a design, orienting a user, and communicating an idea are few ways I've experimented with using motion in experiences I've designed. On this page are a few examples of some animations I've created that live in experience that I've worked on. They were created in After Effects and converted into animated SVGs using the BodyMovin plugin.

 
 

404 Page Animation

Creating a New Page

Message Sent

 

Search Engine Optimization
Landing Page Animation

GoDaddy has a SEO product that does a great job increasing the traffic of their user base, small business owners. Although SEO seems like a common practice, many of their small business owners were unaware of the what SEO was. When landing on the introduction page to the product, we wanted to create an experience that communicated what SEO is in a quick, easy to understand way. Motion was a great solution to the problem.

 Animation in Context

Animation in Context

Desktop

Mobile

 

Online Store Import from Square  -
Importing Animations

GoDaddy has a multifaceted store experience that contains many features. One of the features is the ability to import products from a square account to a GoCentral Online Store. During this import, we found communicating the progress was essential to provide orientation to our users and managing their exceptions. We created these animations to conceptually communicate the idea of importing while also considering the end states.

 

Transferring products
from Square

Transferring products
from Square Success

Transferring products
from Square Failed

 

Facebook Animations

GoDaddy's digital marketing tools provide multiple make use of Facebook and a lead and customer generation platform. We use animation to playfully illustrate the backend processes while they wait, or to communicate the value of engaging with Facebook as a marketing platform.

 

Importing image from Facebook

 

Communicating with Facebook

draft1.gif

Creating a Page with our suggested content