community
"For UI Designers and Creatives generally"

UI DESIGN FOR A CHECKOUT WEBPAGE - ACTIVEMAN BODY SPRAY

Hey fellow Hivers😇, happy easter to you all. Hope you're doing great really? Well I'd be sharing my latest design in this post and some helpful tips to take note of.

PICTURE 1

Now for this page, if you look at the top left you'd see the shipping,billing and confirmation part which is made up of circles and lines, you can do this making use of the ellipse shape tool and the line tool, also ensure proper alignment in your designs too as it aids it's overall look. This part makes the user understand what stage of the purchasing process he/she is currently in, either the shipping, billing or confirmation stage

Taking a look at the PAYMENT METHOD you'd see I made use of the type tool,ellipse tool and I got the icons online. You can get free icons from flaticon.com. This part makes the user choose the payment method he/she prefers.

Moving on to the PAYMENT DETAILS.
Here, we made use of the type tool, line tool, triangle shape tool and also the Visa icon.
Now this provides the space for the user to fill in required payment details in regard to his/her selected payment method.

Lastly for the CALL TO ACTION buttons, I made use of the type tool and the rectangle shape tool.

IMG_20220415_210058_221.jpg

PICTURE 2

So for this second page, I made use of the type tool, pen tool, rectangle shape tool and an icon gotten from the Web.
(The reason I chose ActiveMan body spray was because I've used it before and it was quite good for the price besides I loved the colour too🙈)
This part can be very tricky because you have to get the colour combination right. A tip I use frequently is to look for the most outstanding colour on the product then apply lighter shades in my designs. Yeah Fonts too‼️💯,make use of fonts within the same family e.g Montserrat. Now you can choose Montserrat light, Montserrat Bold, Montserrat Italic according to your need and it'd make your work look smarter. Just my tip though😇

IMG_20220415_210058_312.jpg

HOW DO YOU GUY CHILL OUT DURING A BURN OUT?

Lol, well for me good food, changing environment or getting inspiration from websites does it. It's a pretty normal thing for designers to run out of inspiration so don't feel bad okay😊. Dribble.com offers designs for inspiration too.

It's really cold here atm 🥶🥶🥶
I'd have to close my windows

IMG_20220415_210059_108.jpg

So I use figma for my designs, dribble.com for inspiration, flaticon.com or freepik.com for resources. If you have any question please feel free to engage me below I'd love to meet you and also if you found this post helpful I'd appreciate your reblog to gain wider coverage. Thank you and see you in the comment section ❤🤗.

IMG_20220415_210058_963.jpg

UI DESIGN FOR A CHECKOUT WEBPAGE - ACTIVEMAN BODY SPRAY

This is a cross post of @dominion-e/ui-design-for-a-checkout-webpage-activeman-body-spray by @dominion-e.

For UI Designers and Creatives generally

H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Logo
Center