Daily UI 011 - Flash Messages

Week 2's last prompt before a quick break over the weekend was to design a flash message, as well as an outcome for an error and for success. I decided to create a flash message for ordering groceries - in particular, confirming the shopping order to be sent out to an address at a specific time. The colour scheme I unintentionally used turned out to resemble traffic lights but I was trying to keep up using bright and bold colours in my work.

I also experimented today with the basics of animation to add a bit more life to my designs. I kept it fairly simple today by creating a basic ring loading animation that would appear after the user has confirmed their order. This was to give the user some feedback that things were happening behind the scene. This loading ring would then turn into a tick symbol and turn green if the order was confirmed or a cross symbol and turn red if there was an error. I was pleased with how the wee animation turned out and I'm looking forward to including more complex animations as the days go on, and I get more comfortable with animating elements.

Flash-Message.jpg
Flash-Message.gif