Adobe XD CC Tutorial

Product Details

In this article, we will learn How to Create a Product Detail Page using Adobe XD CC 2018. In the previous article, we created a Home Screen. Download the document for the last article. We will start with the same document.

FileDownload
Dealsatoxyz_Home_Screen.xdLogin to Download

Following is the image show what we will create in this article.

If a user clicks on any product we need to redirect the user on Product Detail Page. On the product detail screen, we display a larger image of product. If we multiple images are available for the product, then we need to allow users to change the images. For this we have two options. First, either user slide between available images using fingers. Or the alternative a user can use small thumbnails for the available images.

On the top left corner of the Product Image, we have a button to go back. On the top right corner, we have a share button to share the Product.

Next, we have the star rating. Star rating helps us to show How popular is the product among customers.

After images and star ratings, we have product information such as

  • Product Name.
  • Price.
  • Offer Price.
  • A brief description of the product.
  • Specification Table.

Note: We missed the price and offer price in the demo document.

For the specification section, we are using a table. A table is the combinations of cells. For each cell, we are using a rectangle and a text item. As per the reference image we need two cells. The first table cell is for the product property. Second for the property value. Arrange two rectangles to create a single row. Change the width of cells as you like. We used a small cell width for the property name. Remaining space for property value cell. Create a group for the above row. Use Adobe XD CC “Repeater Grid” property for the remaining rows. You can un-group and change the properties and values. Finally, create a group for all rows.

Below the specification sections, we also have products group. You can copy it from Home section if you want.

Last we need the bottom menu. In the bottom menu, we have following buttons.
Ask Question: It will launch ask question screen. On the "Ask Question" screen user can ask the question for specific products.
Add to Favourite: It will add the current product to user's preferred products list. 
Comment or Reviews: It will launch product comments and review screen. On this screen, the user can read all the reviews and comment on the specific product.
Add to Cart: Finally, a button to add the current product to the cart.

All the above elements not able to fix on a single artboard. We may need to extend or increase the size of artboard to add all the elements. Download the Adobe XD document and check "Product Detail" and "Products Detail Extended" artboards for the difference.

FileDownload
Dealsatoxyz_Product_Detail_Screen.xdLogin to Download

In the next article, we will learn How to create a Cart Screen?

...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add