I'm the co-founder of a startup called SparkPCB Technologies in India (website: www.sparkpcb.com). I'm not any expert on customer-centric design, but I tried my best in culminating all my previous years of experience to put all the best practices into consideration, without overloading the interface.

The website design got completed about a month ago, but I'm not satisfied with the product page that I designed myself. I wanted it to be unique, focusing on the product image as much as possible, but now I realize that I've done something wrong (example product: link). On smaller screens, if you load a product page, most probably it is going to get cut out because of liberal use of white space. However, if you scroll down a bit, and focus the whole rectangular frame on the center, it starts to look somewhat OK. I'm thinking of getting it redesigned, and I need some feedback as to how I should approach this topic.

Other suggestions regarding the general design and usability of the website are also appreciated.

Thanks KD

Sample image from a 13-inch Macbook Pro

  • Could you add a screenshot(s) to better illustrate your question; how the page looks like on different screen sizes. – locationunknown Aug 4 '15 at 7:46
  • hey @locationunknown, I've added the image! – Kamaljeet Dhiman Aug 4 '15 at 8:29
  • 3
    Question is too broad, specify. – RobSeg Aug 4 '15 at 8:36
  • Why the cart icon and cart count overlapped?other than that if u remove white space and make website responsive it would be fine,providing price and discount rates takes lot of space reduce it – BlueBerry - Vignesh4303 Aug 4 '15 at 8:37

You could go a long way with two simple changes;

1 - reduce the whitespace in the menu area, similar to how it shrinks in the mobile version. One way to do this is to use percentage based measurements for the whitespace.

2 - make the image scale sooner. Right now the product photo starts scaling when the screen hits about 680 pixels width. at 700 pixels the image is still full size; and on, say, an 800x600 screen an image of 640x480 is a HUGE pixel-cost. So I suggest making the images wider; about 900 pixels like the containing div. Yes, it means you'll have a lot of white space in your image. But it means you might not evan have to tweak the code. But consider implementing %-based margins/paddings here too for just that extra bit of usable space.

As a bonus, scaling the image sooner will keep the proportions of the box a bit more rectangular, giving a more consistent feel between the large and small screen version. Essentially, you'd just have (relatively) larger fonts on a small screen.

Here's a mockup: enter image description here

| improve this answer | |
  • Thanks a lot for the feedback! I will implement percentage-based resizing soon. However, I was also asking for structural changes - such as how instead of just product image, description and other things can be included besides the image. I wrestled with these things a lot when I was designing this page, but I guess I didn't really get anywhere with that. – Kamaljeet Dhiman Aug 4 '15 at 8:29
  • Your question of 'feedback for redesign' is very broad like others mentioned. It may be more appropriate for another forum, or perhaps consider hiring a consultant for a few hours? The problem of 'my content gets cut off on small screens' was, in my opinion, specific enough to fit on this subsite. – PixelSnader Aug 4 '15 at 9:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.