Ecomm Challenge Day 9 - Design & Visuals
I am not a designer by any stretch of the imagination! I think good design is quite often overlooked these days in favour of gaudy portfolio design which isn’t good for clients, careers or users. Online particularly, design needs to support the natural instincts of a users, and not be an interruptive experience of flashing things, moving things and colour. Just because you can, doesn’t mean that you should!
Although I am not a designer, I do have quite a clear idea of what I want the site to look like:
- I want the products to speak for themselves and be the focus, so the site design needs to be clean and supportive.
- Most of my traffic will be mobile due to the way that I will be marketing it, so I want the mobile experience to look as good if not better than the desktop one.
- As it is an e-commerce site I want it to be fast. So the site needs to be able to pass Google’s mobile friendly test.
- As I will be listing products from different, quite disparate categories, I need the design to be harmonising.
Yesterday, I said I would reveal the theme I chose. I decided on Kleanity and you as it fulfilled all of the criteria above.
Logo
I don’t know whether you have noticed but the avatar for this publication is actually the logo for WTL. I didn’t have any money to commission one, so I knocked up a holding logo in Photoshop. I’m not particularly happy with it, but it will do until I can afford to commission one of my designer friends to come up with something (unless they offer to do it for free). I’ve had to be pragmatic about it, and design something myself that could work on the website, on social avatars as well as other platform such as Medium.
Visuals
Ultimately I would love to be able to go out and shoot my own visuals. I really enjoy photography, but again due to practical purposes I had to reign my own enthusiasm back and decide that I would source high quality images provided by Manufacturers and do outreach to influencers and social media users to find lifestyle shots of the products in action to add some interest to the site.
I’m toying with the idea of treating all the images in some way to make them uniform. Possibly with colour, or maybe with a set amount of white space around them, just to make them distinct and stand out.
With images there are a lot of practical considerations to think about too. I need to make sure that I have the rights to use all the images on the site as well as optimising them for speed.
Lastly I want the site to give some emotion and use images that tell a story or suggest a particular lifestyle. We cannot deny our emotional response to photos and I will need as much emotional resonance as possible to make sales.
Resources
I need to look at services for batch resizing and compressing images to make the site quick. I’m decided to test the following service to see what produces the best results visual and from a compression point of view:
I started with a very large image 16.1mb to be precise. This size file would be ridiculous to upload to a site. Essentially, which ever route I go I will need a solution that will re-size the image if it is too large. This one is:
It then needs to optimise the image for web usage. I double check my theme for the maximum size images I need. The maximum size an image will ever be in a slider will is:
So I try to use all four of the services as well as optimising manually in photoshop, to see what result I get:
With Kraken the file size was too large so I discounted this service. Tiny, Compressor and Image Optimizer all did a good job. Some services offer batched processing and others don’t some offer customised compression and others not. So finally I manually compressed using Photoshop and these are the results:
At this scale you really can’t see much difference in the images, but I found when I looked at them blown up in Photoshop the PS high version was the same as the other services in terms of quality and the Very High version seemed almost as good as the uncompressed.
So I’m now decided on Photoshop, but I will need to speed up the process by using batch processing. To do this I’m going to use droplets. To do this I first need to set up my actions. I create one called Landscape Feature which will resize the photo, and then export to web with the very high settings:
I then create a droplet to apply the changes to all the images I’m going to use to build the site:
Finally, I upload all my optimised images to my media browser in Wordpress:
Now I have my main inspiration images in Wordpress I can design my main pages without having to optimise as I go. I will need to undertake the same process when I configure the shop and upload all the product imagery. For this I will use either high quality, or possibly even medium to speed load times and crop to square.
If you want to read earlier articles in this publication, you can subscribe to The Ecomm Challenge here.
If you want to chat with me you can reach me on messenger. Subscribe to regular E-Commerce Challenge updates on messenger.
