Design Inspiration

Since flat design has taken over subtle animations make all the difference in making an experience different and stand out from the rest. The below show how animations in UI can change the experience entirely;

player_loop3

replace

mti5mdi2mdi2mdi1mdmwotmw

mti5mdi2mdi3mdk4otazodi2

mti5mdi2mdm2mji1ntkxmza2

mti5mdi2mdq1njiwodmymjy2

mti5mdi2mdq5mtewnty4otmw

google-material-design

As you can see the most important thing being shown here is smooth animation mixed with bright colours. They all follow the same Google Standard which means the user knows what to expect when they action any button on a site. One really vital note here is that the user understands the concept of depth within the design to allow them to understand the context of the content. You can see here a really good example of how this works;

77a55021280343-562fe88087993

It is important to note that material design can also be mixed with real images to create an even more interesting design and layout;

mti5mdi2mdq4mdm2otu4mtc4

It also works really well with the use of current web trends, an example of this is how parallax design still works really well here;

dribbble_i8

It is really good that good that Google themselves have put together the following video to show how appealing material design done properly can really be.

The use of animated icons aren’t included in material design but always seem to work quite well so I have included a few nice examples that I could consider using…

drop-loader3