E-commerce web designing using Bootstrap & Adobe XD

4 min readJul 5, 2020

Introduction:

As technology is making it easier to build and launch an e-commerce store, make sure you stand out from the crowd is becoming more important than ever. And by standing out from the crowd, we mean creating a website that is unique to your brand.

I am creating an E-commerce web designing using bootstrap and adobe xd. these two platforms are very beneficial for creating the best layout with a responsive and attractive way so that customer who buy product on that site without thinking about anything else they look once that website and also designing covered all aspects of E-commerce marketing that will improve business and also ease of customer who is generally not used to of that kind of pattern.

“Design is as much an act of spacing as an act of marking.” — Ellen Lupton

About:

Here E-commerce website contains various sections of men, women, electronics, book, and their subsection like jewelry, dress, boot, and many more.

For service purpose for the customer, they can create their account and get the benefit of many extra services like cart and for new offers and deal they will get notified by email or phone number, the customer wants to contact with E-commerce web that will be customer care for contact us, FAQ’s and customer services, cart page, wishlist and compare that help to the customer to make correct decision and best choice and last size guide page that will help in to pick clothes on your size.

Objective:

Help them buy something they need.

Help them find information.

Help them to save money and time.

Help them to talk to the organization.

Help them buy something they need — Sell

Help them find information — Serve

Help them to save money — Save

Help them to talk to the organization — Speak

Help them to enjoy a great web experience — Sizzle

The flow of the website:

Basic flow:

Designing flow

Basic aspects to be considered when designing an E-commerce website

· Match Your Design with Your Products. Consistency is key to making your eCommerce website work. …

· Proper Product Showcase and Descriptions. …

· Shipping Rates. …

· Shopping Cart Design. …

· Guest Checkout. …

· Easy Checkout Proces. …

· Payment Options. …

· Contact Information and Support.

Views

How to make it quick using Bootstrap, CSS & Adobe xd.

In Bootscapt there where many predefine class available to plane responsive design and custom component :

In index page :

First I used nav class for navbar and inside navbar there where dropdown, buttons, link also the javascript and jquery plugin like data toggles collapse for moving navbar to small icon menu to view mobile like small screen device.

After that there where many Carole on the whole website for slideshow purpose and most of to optimize and space. In that carousel, some product section is created in adobe xd for more attractive looks.

Product view and their pages contain many CSS effects like hover, active, transition, shadows, and clicking.

In last there is footer contains all these quick links and social media icons using the plugins of font-awesome.

Section page:(womens|men|books|Electronics)

There are only the product view and linkage with product pages with all attributes. For more animated and fine approaches I used the parallax effect on that page it also contains a gallery view of the product.

Product page:

Product Page contains product images for different angles in the carousel, best offers of banks, carts, similar kind of product, and customers rating and comments on those products.