eCommerce: Wireframing Kit for Prototyping in Adobe XD
eCommerce:
Wireframing Kit for Prototyping in Adobe XD
When wireframing, there is no reason you should as a designer have to recreate each feature for an eCommerce site. It's a waste of your time, time that can be spent solving actual design problems.
Continuing my series of converting and recreating my illustrator wireframing assets, this time its eCommerce bits and whatnots. It has come in handy as we have had a few online store projects lately. Use them as you see fit, and I will keep sharing small kits as I have them done moving forward.
Navigation with horizontal stacked links and a shopping cart icon.
2. Product
Single product view with image gallery, rating, color and quantity selector. An area below main content for additional details in a sectional tab.
3. Product Listing
Product cards with a preview image, label, price, short description, ratings and add to cart button.
4. Filter & Sorting, Product Listing
Product cards with a preview image, label, short description, ratings and add to download button. Icon to access filters and a sorting drop-down.
5. Card Variations, Product Listing
Three different card variations. Add to cart, download and plain preview versions.
6. Cart
Step by step cart preview. Input outlines indicate that quantity is editable, and the x to the right suggests that each item can be deleted.
7. Payment & Shipping, Cart
A second step in the checkout process. Input fields for billing address are grayed out and only available if "Billings the same as shipping address" is unchecked.
8. Placed Order Confirmation, Cart
A confirmation message with a detailed order summary.
