Daily UI Design #11: Flash Message (Success/Error)

图片发自App

Today's UI design theme is a flash message, that kind of messages you see when an action is successfully completed or not.

I sketched a bit on paper to see what I wanted to make. I'd like to make success/error messages for a Send Email button: you hit a "Send Email" button, it turns into a mail and sent by an airplane; when it fails, a crack appears on the button indicating something went wrong.

图片发自App

I tried something new this time. I felt static images have been hard to express actions and I would love to use simple prototypes for design ideas, if possible. However, even though I've done lots of prototyping in Axure in the past, I have not learned how to make motion graphics that demonstrate these kind of microinteractions.

I spent a couple of hours learning about Adobe After Effects, a powerful animation tool. I just learned some really basic techniques, but it was good enough for me to get things off the ground.

I wasn't able to make animations as fancy as I planned, but I was satisfied enough for this first animation ever with After Effects. More and better ones to come, I'm sure!

flash message