Instead of using ads, I am having you mine for crypto currency to support this site. Here are your stats:
You can start or stop at anytime but please wait for some accepted hashes before you do.
Visit Learn Barmaga to learn more about how this works
WHAT'S NEW?
Loading...

Some Ideas for Checkout Effects

CheckoutConcepts

View demo Download source
A while back we explored a morphing button concept where the active element gets transformed into its target, aiming to create a fluid UI experience with a semantic connection of the involved elements. Today we want to apply that same concept and some other ideas to the first step of the checkout process. The checkout process in online stores is one of the most challenging and crucial in terms of UI design. Done well it can create a pleasant and smooth purchasing experience for the user; done wrong, it can lead to an abandoned shopping cart and no sale at all. There are many carefully planned and well designed e-commerce sites out there and making the UI uncluttered is definitely a great trend welcomed by anyone who buys things online.
With the demos we’ve created today we are looking into how we can make the peek into the shopping cart, one of the potential first steps of the purchase process, more fun and engaging while exploring some new layouts and effects.
They are simple concepts that hopefully spark your imagination for new ideas.
Please note that we use lots of new CSS properties that will only work in modern browsers.
IE does not allow a transformation of table rows which is a real shame; so you might not see the table rows animating in some of the effects.
The shopping cart icon used in the demos is by Freepik from www.flaticon.com and it’s licensed under CC BY 3.0.
Here are the screenshots of the demos:
CheckoutConcepts01
CheckoutConcepts02
CheckoutConcepts02
CheckoutConcepts04
We hope you enjoy these ideas and get inspired :)