Mobile | UX Design Mastery

Creating animated design GIFs using Invision and Photoshop Part1

In the tutorial series “How to create animated GIFs for UI design presentations” we looked at how firstly to create and export the animations from After Effects and save as GIF in Photoshop. This process is very time consuming but the results are really impressive. After Effects allows for unique, quality animations and greater creative control. In this tutorial we will look at a simpler and faster technique for creating animated design GIFs for mobile app presentations using Invision, Camtasia, ScreenFlow and Photoshop.

Continue reading “Creating animated design GIFs using Invision and Photoshop Part1” »

How to create animated GIFs for UI design presentations: Part 3 After Effects animations and transitions

What truly sets animated GIFs apart is the smooth transitions and animations between states, one can showcase. This enhances the digital experience for a user. A use case can be scripted or merely a simple mobile app turning on. The only drawback is the quality, length of animation and the size of file. In this third part of our tutorial, I will shared what effects I used to get my animated GIF of a mobile weather app. The first tutorial was on the full overall process and the second tutorial is on exporting into optimized GIFs.

Continue reading “How to create animated GIFs for UI design presentations: Part 3 After Effects animations and transitions” »

How to create animated GIFs for UI design presentations: Part 2

This is the second part in the series of creating those awesome cool, animated GIFs of UI designs. In the first part we had used Adobe After Effects to create two compositions. One for transitions and animations of a weather app. The other one for how we want to present it on a mobile phone background. In this second part, we save our composition properly in preparation for optimizing it into a GIF.

Continue reading “How to create animated GIFs for UI design presentations: Part 2” »

How to create animated GIFs for UI design presentations: Part 1

You may have seen really cool animated GIFs that design professionals are using to present UI design on Behance, Dribble and other design communities platforms and wondered how did they created them. What is fast becoming one of the best ways of illustrating gestures and animations in mobile apps, animated GIFs offer a little more over traditional storyboards and static screenshots. In Part 1 of the series, I show how to create the animated GIF above. The second part will explain how to export your files properly and optimize into a GIF. Download of project file is also available. The third and final tutorial breaks down the transitions and animations more fully. Continue reading “How to create animated GIFs for UI design presentations: Part 1” »

Axure vs Balsamiq prototyping

Axure is used for designing interactive prototypes for websites and mobile applications. Similarly Balsamiq is a rapid wireframing tool for designing web and app mockups. I use both and wanted to share in this brief article a comparison between the two applications using examples from a case study.

Continue reading “Axure vs Balsamiq prototyping” »