I went a bit further with my Dr. Marten's rebrand and designed out a product category page to go with my homepage comp. (Check it out!) I decided to mimic the product card style of the homepage here with the intentionally mis-aligned product cards.
I brought in the teal color from the homepage as the background, putting emphasis on this new color I created for the Doc's palette. They currently use black and yellow exclusively, but a third color balances the two out and allows me to use the yellow as more of a secondary color.
Favorite part of this page was designing the expandable / collapsable filter component. When collapsed, the products appear in a 4 column grid, but when expanded, the products shift to a 3 column grid. The filter itself is narrowed down from what is currently on the site, and placed in a much more user-intuitive place on the page.
Lastly, the cards themselves are simplified to show the only things a user needs to see at this stage of their search: The shoe itself, various angles of the shoe, the name, the price, and the colors offered.
Let me know what you think!
Digital Surgeons | Instagram | Twitter
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.
Almost Sold Out: Hang Time Workshops with Jon Contino, Danielle Evans, and MDS.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.