So, the other day, I was commissioned to create a graphic that demonstrates the subject of responsive web design. My idea was to create a simple image of the same website re-purposed on the 3 main devices (desktop, tablet & mobile) which sums up nicely what responsive web design is and how it’s implemented.
It was simple but quite effective I thought. The client was happy with it considering the 2-hour deadline I was given.
Recently, I have downloaded a bunch of Creative Cloud apps from the ‘Edge’ family to see how Adobe’s approach to current web design is maturing. I was quite surprised to see how far they’ve come.
One app in-particular impressed. Edge Animate CC.
I was so impressed I wanted to dive straight in and learn how to use it. There are a bunch of tutorials built-in to the app which are quite good. But I was quite confident that my time spent in Flash & AfterEffects would be enough to start experimenting:
It sure was and in just an hour or so, the finished animation was completed. Click here to see it in action (requires a modern web-browser). Try resizing the window. You’ll see that it even behaves responsively!
Obviously, certain projects lend themselves to native web technology based animation. My graphic, for example, does because the elements are simple, they are consistent so they morph convincingly, and it is the perfect platform for turning a flat graphic, into a simple, animated, infographic.
I’ve got more plans for this if I get time. Firstly, I want the animation on the content (represented by the white rectangles), to be more original than just fading in and out. I would like these components to actually reflow just as it would when changing a browsers size on a responsive web page.
Read more about Adobe Edge Animate.
Track any future progress with this project on Behance, and feel free to leave a comment or make a suggestion.