Most of the time, besides UI design, most designers will be tasked to design the launcher icon to go with the app, and I think there is no better way to preview the design than having them shown at the real device home screen (at least for me).

Which is why I have been working with my friend, Henry Lim (a talented web tech GDE) to create a simple web app – iconpreview.com, which works for both iOS and Android (only Android 7.1 and below, adaptive icon not supported).

It’s really simple – just navigate to iconpreview.com, select your launcher icon design with appropriate format and size (PNG, 192px×192px), give it a name, upload, and it will generate a link and QR code for your uploaded icon. Browse to the page with Safari/Chrome, then ‘Add to Home Screen’. Voila!

Quick words on how it works

iOS

For iOS, it’s rather simple. It is simply a web shortcut, so it works just like the usual web shortcut in iOS. So you just need to upload a complete square icon (just like how you provide them to Apple), and the masking will be done by the system.

Android

Android is a little bit tricky. Initially, it was meant to be a web shortcut as well, but if we simply add it to the home screen via Chrome, there will be a chrome shortcut icon added to the bottom right corner, which is obviously less than ideal for icon design preview.

We then look for other ways that can fix this issue, and Henry came up with a brilliant thought of having it added as a simple Progressive Web App (PWA), and through this way, the icon design can be previewed nicely at the home screen. The only caveat is that each time you add the new icon to the home screen, it is treated as an app so to remove it, you will need to uninstall it, as opposed to remove the shortcut from the home screen. We are satisfied with the solution though

Note on Adaptive Icon: The icon preview, unfortunately, doesn’t work on Android 8.0+ that uses adaptive icon because PWA doesn’t use the Adaptive Icon system (at least from what I tried, if you know how to do it better, let us know!), so the icon will just be placed in the center of a white icon base. If you want to preview how the adaptive app icon will feel at the home screen, you need to have a device running 7.1 or below, then upload the icon with the mask already applied.

It’s currently in Beta as we aren’t sure if there will be any more issue, but feel free to share it out! iconpreview.com

I often got asked how do I inspect an app from design perspective, especially on the layout, alignment, keylines etc., so I thought to share this in my blog. Sometimes we are able to spot some issues by just looking at it, but with some nifty tools, the design inspection can be done much easier.

Below screenshot is what I usually see when I do a design pass on the static design implementation. It’s an IMDb app screenshot with keyline grid + layout bound shown, which is very useful to spot misaligned elements and incorrect paddings.

Tools

1. Keyline Pushing app by Faiz Malkani – This awesome free app will print the 8dp gridlines on your screen which have the proper keylines recommended in Material Design. It also has some other gridlines like 4dp typographic grid which can be very useful sometimes. (Update: Another new app called Material Cue can do the same thing as well)
2. Show Layout Bound option in Developer Options –  This will show the bound of each element in blue lines (clip bounds), red lines (optical bounds) and pink area (margins). This helps a lot to spot unnecessary padding or misaligned bound. To access this option, turn on developer mode in Android. Then Settings > Developer options > Show layout bounds.

How this can help Android developers?

Few months back I introduced these 2 tools to my developer friends, and below are their comments on this tip:

It is useful to see the view paddings and margins, and immediately understand which view is causing the keyline misalignment. However, for standard views, paddings and margins have an expected behaviour so you can fix the issues without the layout bounds. Layout bound option can be really useful for custom views and custom groupviews. For these views, you can do whatever you want with the paddings, so having the layout bounds visible helps understand how your view occupy the space, which is useful to have the correct keylines.

It helped me mostly to check that clip to children works to prevent shadow, animation, and ripple effect cut-off. Also I am able to quickly check that all cards/pictures are correctly aligned based on the key line and the left/right edge of the layout bound. For layout bound, it helps to check that the touch target of images has been extended and is not only limited to the image edges. It also helps ensuring that some views ‘visibility’ are gone and not just set to invisible. With keyline pushing app, it is mainly to ensure that the Material Design spec has been fulfilled.

Happy designing and developing!

It is still pretty surprising that with the Material Design guidelines available for quite some time (close to 2 years!), there are still many Android apps ignoring the basics of Material Design. Sure, the guideline isn’t meant as a complete design checklist, but many basic design details (keylines, elevation, UI elements etc.) and common interaction patterns (Nav Drawer, Bottom Sheet etc.) shouldn’t be ignored if the app is using Material Design as the design language.

Today the victim is the new (?) IMDb app, which I will show what’s wrong with the app in terms of design (they need to work on performance as well, by the way) and which part of the design guideline is meant to address the mentioned issue.

Navigation Drawer

The navigation drawer in IMDb app is designed well according to the design spec, but the behavior of the content is wrong and unnecessary when the drawer is opened.

In the guideline for navigation drawer, it is stated that

… Closed by default, the drawer opens temporarily above all other content until a section is selected.

Because the elevation of navigation drawer is 16dp in the Material environment, when it is opened, it will appear on top of most of the UI elements in the app, so there is nothing below it should be pushed/pulled.

Toolbar

IMDb app developer team did put in some efforts into implementing scrolling technique involving the toolbar, unfortunately, the toolbar transition doesn’t have the correct visual continuity. It feels right when the toolbar grows (expanding towards status bar) as the user scroll down, but when the user scroll up again, it actually make more sense to have the extended toolbar moving back to the toolbar (the source), rather than collapsing into the status bar, which just doesn’t feel right.

Also as you scroll down even more, you will noticed that the movie title bar are overlapped by ‘another’ layer of toolbar, but there is really just 1 toolbar. To correct it, the movie title bar can have a fade out transition as soon as they are going to merge into a normal toolbar, giving the impression that every UI elements there are on a single layer of material. As a bonus, the bookmark icon can appear at the toolbar as soon as it fade out from the title bar to allow the user to use that functionality even though the user is at the end of the page.

Iconography

For the first time, Google Design team provided us all the commonly used icons in multiple formats, so the iconography used in every app design can achieve a certain level of consistency.

While the navigation drawer seems to use the proper icons, many other icons in the content are not consistent with them. Icons like share, search, bookmark, star are all available for free from Google.

Keylines

Most of the components in the Material world are aligned to an 8dp square baseline grid, and with that there is some specific keylines established to ensure all of the content and components have some breathing space from the edges, as well as achieving overall visual balance/harmony.

In IMDb app, they ignored the most common keylines – the 16dp keylines from the left/right edges, hence the contents can be seen getting too close to the edges, causing an imbalance layout.

There is one thing they did it right though – the trailer section is using the suggested ratio keyline of 16:9.

Loading Activity

Loading is always one of the most uninteresting interaction patterns in apps, but yet it has to be there due to numerous factor e.g. connection speed, content size, processor performance etc., however in any case, if content loading is going to happen, it should be happen in a simple way, and elegantly. Below is a quote from the design guideline that sum it all:

Minimize visual changes that occur while your app loads content by representing each operation with a single activity indicator.

In IMDb app, the content loading is pretty badly done in a way that it feels broken before everything is loaded. The above screenshots are what I saw when I try to access the details view for this movie – components are moving around as the content is loaded (look at that movie poster) with tons of empty white spaces, and when everything is loaded, they just appear instantly pushing other components away – which feels slow and broken.

I am not sure if this is some kind of technical limitation/issue, but if most of the components are not ready to be displayed, they can simply use the activity circle as the loading indicator, and when everything is ready, show them to the user with some simple transitional effects.

Typography

Typography is often one of the most ignored design details in many app design, but yet words are one of the most important components in UI design for communication purposes.

In the current IMDb app, there isn’t any deadly mistake in terms of typography, but if we tweak the text style and line height for some of the content, they can help improving the overall impression of the content, allowing the important content to be emphasized (movie title), and better readability (movie description).

This is what I did – tweaked the movie title to Title style (Medium, 20sp) and the line height of the movie description to 24dp.

No detail is too small

Every little detail counts in design, and all of them collectively help to differentiate between good and bad design. It’s important to be aware that sometimes a little design details can make or break a user experience using your product.

To complete the rant, I have spent some time to mock things up on the design issues that I mentioned above:

Just a quick post to rant about an usability issue I experienced today.

In software development, there are always tons of hidden rules and logics that we made internally for better usability (or may be worse?) and minimizing potential information overload for the user, but if it’s something involved with certain level of user expectation (e.g. user reasonably expecting things should work a certain way), it is always a good idea to ensure that the hidden rules of ours are sufficiently communicated to the user through feedforward or feedback, depending on the situation.

Out of Sight, Out of Mind (and Out of Reach)

Case in point – the funny (may be not so funny) logic in Dashlane that no user can understand (or realize).

So I have been using Dashlane for a while, and I have always been protecting my passwords with PIN code. When I got my Nexus 6P, I have been impatiently waiting for an update to make full use of the fingerprint scanner for it, and of course, yesterday Dashlane updated the app with the promise that fingerprint scanner is now usable in the app.

I happily went ahead and update the app, and the first thing I do after it gets updated is to go to the Settings to set up the fingerprint scanner, and this is basically what I see:

Yes, I am not kidding, this is what I see in the Settings. There isn’t any option related to fingerprint scanner in the Setting. I looked around in the app like a mad man, trying to figure out if I missed anything, and I still didn’t manage to find anything about it. I was pretty sure the app is updated to the latest version, so I went ahead and rant in the Play Store review and someone from the support team asked me to send a ticket for this issue.

And it turns out that because I have the PIN code lock turned on, I am not able to see the Fingerprint option. This is bad, really bad. 

First of all, I just cannot brain the logic behind the hidden fingerprint option when PIN code lock is turned on. Even if they might cause some conflicts, but why totally hides the fingerprint option? How does the user with PIN code lock turned on know that to access the Fingerprint option, they have to turn off the PIN code lock first? I can imagine that most of their users will have PIN code lock turned on, so if the users with the new Nexus devices doesn’t explore further, they probably wouldn’t know that they can actually use the fingerprint scanner in the app.

Secondly, I just don’t see how they can cause conflicts. In iOS version, both PIN code and Fingerprint unlock can be used together, and it make so much sense (at least for me)! E.g. when it’s impossible for me to use the fingerprint scanner, I still can use PIN code to enter the app. May be there is some business logic behind, but if it’s about usability, I don’t think this is the right way to do it.

Users know nothing about your hidden rules

There is just one thing you have to remember – your users have no idea what you have done and hence they wouldn’t have know your hidden rules. Have you been trying to enter a new password during the registration for some services, and turn out the registration failed because your password doesn’t fulfil their password requirement, which is not communicated earlier to you when you first filling up the registration form? It is one classic example that the users will not have any idea about your imposed rule(s) that is invisible to them.

If any of your hidden rules involved with the core (or even secondary) experience of the software, please give it a second thought if it is required to be communicated to the user in some way, because again, the user will never know them if it’s not communicated to them in the first place. Design is always about communication between people and objects, and sufficient communication can help in providing great user experience and managing unmanageable user expectations manageably (huh?).

You probably have not heard about The Fabulous – It’s a Health and Fitness app uses scientific-based approaches to help people in reaching their health goal through a carefully crafted step-by-step program. We purposefully crafted the journey based on the user goal by slowly showing them relevant information and motivates them during the process, and hopefully get them to form some healthy habits at the end of the journey.

Why Material?

We launched the app on early 2014, and it was still the #holoyolo era for Android Design. During that time, I decided that we can make use of bold colours to help the primary elements stand out from the rest of the UI, hence the sections with different bold colours, as well as the striking pink-coloured bottom action bar (can I call it a BAB?) which houses some of the important actions. There is also an Action Bar (toolbar in Material Design) with left-aligned tabs, which was a pretty popular tab design during that time.

The interface is working out quite OK – it wasn’t the best, but it was our first attempt creating a bold app that can both entertain and help the users. Then, of course, Material Design was launched and announced during Google I/O 2014, and I was super excited about the possibility in adapting the app to it. After a few months, with the admittedly very slow growth in the user base, and we had quite a lot of new contents generated which no longer fits into the previous design – we then decided to go Material for the app on the late 2014.

And now, after a long 9 months+ of grinding, we are glad that we managed to ship the app with Material Design adaptation (there is still many things to tweak and add) – it’s both satisfying and relieving for us.

The Fabulous

We set out to craft one of the most beautiful health and fitness app in the Play Store catalog, and it wasn’t trivial (as you can imagined). Tons of researches was done on other awesome apps, and a lot of discussions going on to see what’s fit and what’s not.

For the icon, we eventually settled on the one that have the best balance between mysterious and familiarity – each colour are deliberately picked to induce the both the familiarity (the moon, the grass) and the unknown (the purple sea, the pink sky). I also wanted to have a mysterious character in the app icon as well to represent the user who is looking forward to the mysterious journey, and thus the character which is heavily inspired by both awesome games – Monument Valley and Journey.

Material Design

The redesign of The Fabulous isn’t just a simple visual refresh, but also a complete rethink on the functionalities. ‘How should we ensure the user know what’s coming next in a day?’, ‘How should we make the user feel delight and relevant when they are executing the habit?’ – these are just a few questions that we keep asking ourselves during the redesign phase.

With the Material Design guideline, we are able to pull every screens that are designed at different time to create an app with consistent experiences in every screens. The keylines, the elevations, preset typography styles etc. does not only help making the design consistent, it also helps shorten the time to put every single pieces together on a screen.

And as you can see, imagery plays a very important role in the app, which does not just act as decoration, but as part of the deliberate communication to the user, which intend to surprise them, give them the context, as well as the immersive experience. We still have a lot to do on this one (there is quite a lot of illustrations required), but we will slowly roll them out with subsequent updates.

Design-Development Communication

To ensure the app is implemented as designed, there is a lot of communication going on between the design and development team. We used Invision for screen-to-screen linking. For design specs (or redline), we rely on Zeplin to hand-off the design to the dev team. For final design inspection, I uses app like Keyline Pushing and also Layout Bounds in developer options to ensure every elements are arranged as intended.

In Material Design, meaningful animation that communicates is also part of the experience, thus we also tried to include subtle and meaningful animations into the app. For animation, I uses Photoshop and Principle for the animated mock up, but often, such animated mock up does not help much in the implementation – if you want the implemented animation as close as what you have created, describe the animation in words, which you should include details like the distance, easing used, time, effects etc. If you can’t describe an animation in words, don’t expect the developer to implement it. 

Also, it’s important to always explain to the dev team for some design decisions if they have doubt on them. Often the developers able to raise up a design issue that sometimes a designer failed to realise, so healthy communication between the teams helps in creating great product.

What’s Next?

We are definitely not going to stop here, and there is so much more to do. We will continue to update the app with even more refinement and details, and hopefully I will have enough things to share next time.

Stay Fabulous!

Floating Action Button, or, in short, FAB, is one of the unique UI element in Material Design for primary/promoted action for a particular screen. Since it is a frequently accessed UI element in a given screen, I think it’s important to make the FAB right in every details. However, there are a number of apps doesn’t have the right FAB as specced in the Material Design Guideline, which also included some of the Google apps (I know!).

Huge Inconsistency

After some analysis on the FABs in some apps using the latest L release, I am surprised to find the huge inconsistence in the implementation of FAB. Sure, FAB is may be just a round button, but there is also a lot of specs meant for it like anchoring distance from screen edges, action icon size, ripple effect, elevation and shadow. Most of the time, it’s likely the third-party library doesn’t do the job correctly, but it shouldn’t be too tricky for those apps that only have a standalone FAB (which doesn’t expand for more options, for example).

Let’s see what I have here (there are too many apps to try and I only selected a handful of them which can be tested immediately):

The right FAB

So what’s the specifications for this distinctive button in Material Design? As you can see from the comparison sheet above, Messenger app seems to have the most accurate implementation of FAB.

I strongly suggest to check if the FAB in your app is correctly implemented as the recommended specifications, otherwise the FAB will somewhat feel out of place due to the difference in material properties compared to the other material elements in your Material Design app.

Care about Design Details

Think this is too nitpicking or too small for the user to notice? I would like to use a quote from this Google Ventures article ‘Why you should move that button 3px to the left‘:

Getting design details right can create positive emotional states that actually make products easier to use.

After all, as someone (designer/developer or whoever in the product team) who craft the product to the end user, if you doesn’t care about the details, who else will do it for you? So, do the right choice FAB!

Special thanks to Andhie for making a sample app meant for screenshot purpose with the right implementation of FAB using the Material Design Support Library.

Todoist recently have their major redesign using Material Design and I thought it was actually quite nicely done! Though I found one minor design issue that might worth a mention – did you manage to figure it out at the screenshot below?

It’s the FAB icon

If you felt there is something wrong with the FAB, you are definitely not alone. The placement of the send/save icon in the FAB doesn’t seems to be centred visually (the icon weight distribution seems to be more towards to the left), but actually it was programmatically centred.

I have made a simple comparison between the current FAB and the corrected FAB below:

As you can see, even though the asset of the icon are generated correctly and placed into the FAB at the centre, it is seems to be off from the centre to the left visually when I used a centred circle as a reference. In the corrected FAB above, the icon is optically aligned, so it looks perfectly centred even though the icon in the asset isn’t perfectly aligned to the centre (it is 2dp more to the right).

Do the Optical Alignment in the Asset

So what does it mean for designer? For situation like this where the icon visual weight distribution isn’t exactly symmetrical (like the usually + or x icon), we can do some optical alignment within the 24dp so when the developer uses the asset, they will just need to programmatically centre the icon in the FAB to achieve the perfectly aligned icon. It’s worth noting that using the centred circle as a reference doesn’t always work, especially for icon that is much more complex, but it can be used as a starting point, and align/adjust it optically (using the eyes) to achieve the most balanced placement.

More on Optical Alignment

There are already a few articles on this topic by other designers, like this and this, but I thought it would be useful to mention about this in the context of Material Design, since FAB is one of the most important elements in Material Design that the user will tend to interact with it quite often, so you definitely want it to be correctly done.

Until next time!

Just a quick entry for the day. Developers/designers etc., be on the lookout for design details/idea coming out from UX torturer. Every design details/decisions matter and most of them likely meant to handle certain user expectations, and if it’s done wrong, it can probably turn a good user experience into an unpleasant one.

For today, let’s talk about Simplenote.

I love apps with Material Design (who doesn’t?). There is an article at The Verge talking about 10 Material Design apps that your should try, and Simplenote app made into the list. It was a few years back since I last used Simplenote, so I thought why not just try their new app with Material Design – I then went to Play Store look for the app, digested the screenshots and description, and installed the app.

Not login? No FAB for you.

So this is the first screen I saw once I launched the app – and I thought it is actually not bad since they allow the user to try the app without Sign in and Sign up (It would be better to use Sign Up and Log In to separate the functions though), so I went on to try the app.

Look at the screen again. Did you notice what’s went missing from an app that has the new Material Design? Yeah, the Floating Action Button (FAB), which you can clearly see in the Play Store screenshots. So I start thinking “Wait, what’s happening? How do I make the FAB shown? How can I add a new note?”, and I saw the quick guide included with the app.

To create a new note, tap the plus button…. 

Wait, where is the plus button? Should I see a FAB with plus icon, or a plus button somewhere? So I went to Settings and see if there is a setting for it, nope. After that I tap on the pencil button, and it seems to add a new note – and at this stage, I am completely confused. A pencil button that add a note, a guide says tap on plus button to add a note, and where the heck is the FAB?

Eureka Moment

Then I suddenly have this funny idea – “Wait a minute, is it possible that once I am logged in, the FAB will be shown?”. And the next thing I see after I log into the account is the FAB with pencil icon. No sign of a plus button though. *Le sigh*

Wait, what’s wrong?

Failed to properly manage user expectation is what’s wrong here. Every design details and decisions made into the app can break the user experience and fail to build the trust. In the case of Simplenote, the onboard is simply confusing and user expectation is not being handled properly.

• Mishandled User Expectation – The new update of the app mentioned about their new Material Design. In the Play Store screenshots, the users can see the FAB in the main note list, which is a very recognisable UI elements in Material Design, so the user most likely will expect to see that when the app is launched. But as you can see, it is not shown during the first launch, and it is placed at the toolbar for non-login users, which is both confusing and less discoverable.
• Confusing Instruction – They included a note to guide the user about the app, which is not a bad idea, but the content is confusing. Instructing the user to look for a non-existent UI element is just bad – very bad.
• Forgotten UI Consistency – This is a bad, or rather confusing decision. I guess the decision is made because the designer doesn’t want to show the FAB above the Sign In/Sign up panel, but I don’t think placing it at the toolbar just for non-login user is a much better idea. Screenshots are the most important preview of the app, and the user expect to see everything they saw in the screenshots, or at least if it’s meant to be a premium feature, it must be mentioned clearly somewhere in the app. Unless it’s an informed and necessary decision, UI consistency is more important than anything else, regardless it’s for free/unregistered or paid/registered users, everyone deserved the best experience. Don’t be an UX torturer.

Every detail matters

Perhaps the things that I mentioned above are just really minor details (or some people might say: who cares?), but as a designer, these are the things that you really want to look into more carefully because they are there to handle the user expectation, and a bad choice can potentially cause bad user experience.

“The details are not the details. They make the design.”

Jack is a young indie developer that never say no to challenges – how do I know it? I previously worked with Jack for a couple of projects like Now Playing, Reverse Dictionary, and Today Calendar and Widget (pre-Material Design era), and we are really liking that push-and-pull interaction between us during the development.

Without further ado, let’s start with the interview!

Jack Underwood

Tell us a little bit about yourself (when do you start Android development, why Android? etc.)

I first started Android Development when i got my first Android phone in Summer 2010. I knew how to program before then but i’d never really done anything properly. I messed around with different tutorials and made a few tiny (and really subpar) apps that I never released. It wasn’t until summer 2012 that I actually started learning properly and making things people were using, so I’ve really been developing for Android properly for about 2 and a half years.

Which app are you currently working on (and in the past)? Can you share some statistics on these apps?

Currently all of my time goes into Today Calendar, I work on it whenever I get a spare hour or so throughout the day. Today recently just passed 200,000 total installs (Paid and Free) and is growing faster than it ever has before, it’s still pretty surreal to me really.

How do you handle design in your app? Understand that many indie developers have no access to designer due to numerous reason, what’s the direction you took to ensure the app is of high quality in terms of design?

Initially I worked on the designs of my apps myself, and the designs were not the greatest. I’d just try to emulate the look and feel of other types of app (Now Playing -> Google Now) but since then I’ve worked with lots of different designers (Including Taylor!) on my apps. I’m not the best designer by a long shot, and if you’re in the same boat, I really recommend looking for someone to help you out. There’s plenty of aspiring designers on G+ that’d happily let a developer turn their ideas into a real app for no cost (or a small amount), they’re just looking for an opportunity into the app world just like you!

How do you engage with your users? How do you handle their requests?

I like to keep people informed of how my apps are coming along. Every time I finish something I think is pretty neat I’ll post a screenshot to G+, it’s great for getting valuable feedback on ideas before you release them into the wild, and allows you to adjust to what your customers actually want. You’ll often get valuable suggestions that you would never have come up with on your own.

What’s your view on app distribution and monetization in Android? Having a great product doesn’t always mean it will have commercial success, so what else do you do to ensure it reaches to the right people and leading to a commercial success?

The Play Store can be hit and miss, especially as an indie developer, it can be really hard. Having a following on Twitter and G+ can help loads, it’s acts as your initial slingshot into the store. From here if your app is truly awesome, there’s a good chance it’ll slowly build an audience and creep it’s way up the rankings. You’ve just got to make something awesome, and be patient.

I also offer both a paid and free version of most of my apps. I usually don’t restrict features in the free version as a I like users to be able to try out exactly what the paid version would be like. Instead I usually offer a trial version, or something unique like the “Purchase Pro” event you’ll see in the Agenda Widget in the version of my Calendar Widgets.

Have you work with any designer before? If yes, what do you expect from a designer in a developer point of view? If not, why?

I’ve worked with a bunch of different designers before, some which I’ve paid and some which are just happy to contribute to improve something they use themselves. It’s a lot easier for me if designers have a very basic knowledge of how Android apps work, how they handle scaling, what 16dp means and things like that, but it’s not a deal-breaker for sure. As for the interaction between me and the designer, it’s different for everyone – some I’ve spoken to more professionally just over email and some I speak to more regularly just over hangouts.

So what’s your plan for 2015?

I plan to spend the next year almost exclusively on Today. It’s going to bring more many more features and be more stable. I’m also going to bring it to more platforms: Android Wear, Android TV and Chrome.

End of Interview

Points to Take Away

• If you can’t design, it’s fine, just look for some designer to help you out!
• Keep your users informed about what’s coming up next and get feedback from them to optimise it
• Make something awesome, and at the same time, try hard to build the audience through proper marketing techniques
• Allow the user to try out the premium features via free trial version so they can experience it before commit to purchase
• It’s a lot easier for developer if the designer have basic knowledge of Android Design

In the first UI Animation in Photoshop tutorial, I have shown the way to do simple animations in Photoshop like moving, scaling and style changing – if you are new to this and haven’t check that out yet, I recommend you to look into Tutorial #1 before this.

In this second tutorial, I will share my experiences in applying easing into the animation made with Photoshop. Special thanks to Jovie Brett Bardoles for sharing his manual way of applying easing in his animations, which inspire me to explore and dig into the Timeline feature in Photoshop.

What is Easing and Why?

Easing controls the speed of the animation to achieve realistic effect. The statement below from easings.net is pretty spot on about why easing is important:

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed.

And this is why you want to have easing applied into the UI animation because you want the UI to feel natural with some familiar physics properties rather than an artificial one that move linearly. Look at the example below, you can immediately noticed the subtle difference in terms of the animation naturality. (Left – with Ease Out function, Right – Linear)

Though keep in mind that easing in animation made using Photoshop is very basic and manual, and it has nowhere near the easing effect done in After Effect, but for simple animation, it does the job well (at least for me!). By manually modifying the linear keyframes in some patterns, we will be able to achieve the easing effect in the animation.

Prepare for Animation

1. Create a new document at 800px x 600px, color the background to any color (Blue, for example)
2. In the new document, create a new rounded rectangle at 400px x 400px with 4px corner radius, and place it in the middle. Change the rounded rectangle color to White.
3. Convert the rounded rectangle to a Smart Object (so you can do transformation on it)
4. Activate Timeline window (Window > Timeline)
5. Click Create Video Timeline button
6. At the right top corner of the Timeline window, click to show the menu, then Set Timeline Frame Rate…, and set it to 60fps.

Applying Easing

Let’s get started, shall we? We will going to animate the expanding card, similar to the animated gif above.

STEP 1

At timeline, drag the slider to 30f, then click on the Stopwatch icon to initiate keyframe for Transform. You should see a keyframe is added at 30f. At the same keyframe, resize the rounded rectangle smart object to 25%.

STEP 2

Move the slider to 54f. We will make the animation complete in 0.4s (which is also 24 frames), thus navigating to 54f. At this point, resize the rounded rectangle smart object back to 100%. A new keyframe will be added into the timeline automatically.

STEP 3

Drag the slider from the first keyframe to the second keyframe, you should be able to see the animated card with expanding animation. If you do not see it, delete the keyframes and do it again from Step 1.

STEP 4

Now the fun part started! Drag the slider to 53f (one frame before the last keyframe), then click the add keyframe icon at the left panel to add a new keyframe.

STEP 5

Click on the newly added keyframe at 53f, drag and move it to 50f. Noticed that you just moved the keyframe 3 frames before the initial frame position.

STEP 6

This is pretty much repeating the same procedure in Step 4 and 5. Drag the slider to 49f (one frame before the newly dragged keyframe), then add a new keyframe.

STEP 7

Similarly, drag the new added keyframe at 49f to 46f. Again, you moved it 3 frames before the initial frame position.

STEP 8

Repeat the similar procedures again, but with smaller steps:

1. Add keyframe at 45f, then move to 43f. (2 steps)
2. Add keyframe at 42f, then move to 40f. (2 steps)
3. Add keyframe at 39f, then move to 38f. (1 step)

If you do it right, you should be able to see the keyframes in this specific pattern.

STEP 9

Now doing similar procedures for the front part:

1. Add a keyframe at 33f, then move to 31f. (2 steps)
2. Add a keyframe at 33f, then move to 32f. (1 step)

If you do it right, you should be able to see the keyframes in this specific pattern.

STEP 10

Zoom out the timeline, then drag the start and end handler to adjust the work area so the animation will cover just the part with keyframes. Tap spacebar key and preview the result!

CHALLENGE

Now, a challenge for you! Using very similar way, but in a reverse fashion, complete the animation with collapsing cards, plus the easing.

Wait, what just happened?

You just successfully added Ease Out effect to the expanding card animation! How does that happen?

If you look at the image above, there are 2 moving circles from left to right, with all the frames shown. The top circle moves in linear motion, therefore each frame are evenly distributed from the left to the right.

The bottom circle moves with ease out effect, where you can clearly see that there are less frames at the start (which means it move fast), and a lot of frames at the end (which means it slows down). This is exactly what we are doing from Step 5 – Step 8, where we ‘squeeze’ more frames towards the end, and at Step 9, we reduce the frames.

You may have noticed that during the keyframes modification, we are doing it in a gradual pattern (3 steps, 2 steps, 1 steps) – this is to achieve the natural speed increment and decrement, so the animation is obeying the physics properties that we are familiar with. However, this is mainly based on guess work – I did not drill down the easing formula to find the best pattern, but it seems for me a good starting point. If you manage to find a pattern that provides smoother easing, do let me know!

Final Word

This is just one of the example for easing – a fast in slow out motion, which is very suitable for UI animation. Once you get the idea, you can definitely can achieve some other easing effects with some experiments.

Of course, if it’s meant for final production work, I would still recommend using After Effect because it is much easier to do complicated motion design with proper easing.

Below are some of the websites that I referred during the experiment which you might find them interesting:

http://easings.net/

http://gizma.com/easing/

http://upshots.org/actionscript/jsas-understanding-easing

Don’t hesitate to share your motion design following the tutorial, until next time!

You can download the tutorial PSD here.