DailyUI 012 – E-Commerce Shop (Single Item)

Another product page, another camera. I feel like there’s a theme here. But as last time was check out, this one is the precursor to that, where you’re looking at the item.

As always I enjoy big pictures, and oftentimes when you’re shopping you want to see the product itself. So I decided to make the product image cover the entire height of the box. I see now that I completely forgot to put in the magnification icon. At least I have the back and forth arrows to scroll through images of the item. Big, round circles to show which image you are looking at and to show you that there are more images in the gallery.

Connecting the two parts is yet again a FAB, this time a favourite icon, a pivotal part of any shopping experience in my opinion. You often see an item you want but can’t buy at that specific time, so you favourite/wishlist it.

To add contrast to the two parts, I made the description side dark grey. We have the brand in a smaller, slightly darker grey text at the top, with the actual item name below much larger and lighter. Right next to that is the price. Below is a quick description of the item itself in a smaller font. I grabbed this from the official Sony product page. Right here I completely forgot that I should have had a read more button below it. While this info would suffice for quick glances, you often want to read more about it, or at least see official specification. Complete miss on my part.

Below that I once again went with a bigger button for the buy now call to action. Since we already have a FAB, another would seem very out of place. And besides, it just wouldn’t fit in a context like this.

The red colour is grabbed from the R in the image, and the font this time is Bebas Neue combined with Lato. I went with Bebas first and foremost to try something new, and that I felt it fit in much better with the title.