How to create a cool motion blur for UI design presentations

This tutorial is about how to add motion blur to your UI design compositions so as to make swift movement look realistic and polished for your mobile app or website design. If you have not read the article on how to make animated GIFs you might want to take a look at this tutorial. This article will touch on the process I use briefly but its main focus is to explain how to apply motion blur to your application presentation.

Continue reading

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

 

Screen Shot 2014-05-21 at 11.36.13 AM
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 2

Weather app animated GIF

Weather app animated GIF

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 1

Weather app animated GIF

Weather app animated GIF

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

Strategic solutions for mobile design

So what exactly is the best way to design for mobile devices? What is the difference between native apps and sites created in HTML5? Are there patterns that one can learn or even copy from, for their mobile project?

In this post I share an insightful Slideshare presentations by one of my mentors, mobile UX consultant Theresa Neil presenting at Door64 in Austin.  Theresa presents mobile design strategies taken to design mobile apps successfully. In a nutshell, the first 45 slides look at the mobile strategy options and explains each, the next 150+ slides deep dive into the four options: responsive, mobile optimized sites, native apps and hybrids.

Mobile Design. Strategic Solutions.

Mobile app development Part 4 – High fidelity and In-screen Prototyping

This is the fourth part in a series of how the development of a commercial educational  app was conducted. In the first part we looked at the need finding activities used to evaluate what features to include into the application. In the second part explored the creation of personas to reflect target user goals and motivations. The third part looked at the need for prototyping and user testing as being key in creating the perfect experience for the user.

Continue reading