For product pages on PlanetAxel.com I wanted to create a simple list with the features for a product.
Before redesigning the site I had developed and designed the iOS app where I used a UITableView to display this information. Luckily, I was able to use a definition list for the site, which perfectly translates the same list-style design from an iOS table view to the web.
The customer can quickly glance through the special features, such as whether a title has 7.1 surround, is 3D-compatible or which languages are available in the movie or game.
If a feature isn't available (or for example, the languages aren't yet known), this element simply doesn't get rendered. The order in which the features appear is always the same.
I have a attached a screenshot of the the full product page view and you can see it for yourself here: https://www.planetaxel.com/product/John-Carter-(Blu-ray-3D-+-Blu-ray-+-DVD-+-Digital-Copy)/786936819076
Other products such as a PS3 game have a number of other features that need to be listed, including specific game features. Here's an example of a game product page: https://www.planetaxel.com/product/Killzone-3/711719823421
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Take our community survey and get an amazing giveaway and font discount.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.