We have all visited online shops that appear too desperate. Websites that just make your skin crawl with their overly flashy adverts and ATTENTION SEEKING TEXT!!! First impressions count, especially in the online retail world. It doesn’t matter how good your products are, you can ruin all that hard work with some bad design.
Why should you listen to me?
I do try my best not to sound like I’m full of crap… I have worked on a large online shop for almost 4 years now. My daily tasks are creating adverts, banners, adding products, taking and editing photos and just general site maintenance, a bit of everything really. Our site has grown very well and I like to think some of my design work had a part to play. I could be wrong….
If you are wondering how to make your online shop look more legit and trustworthy then checking the continuity of your site is a great place to start.
Continuity = Confidence
Continuity projects self-assurance. It says we have confidence in our design and our business so much so that we stick to it. There is a fine line between being dazzling and appearing needy. Would you rather buy from an online shop that looks like it needs every cent to survive or would you rather buy from a site that looks like it has stood the test of time?
How much continuity you need depends on the type of store, audience and the products you sell. If you ran a watch shop you would need to be much more considerate. Watches represent order, organisation and precision as such the website should reflect this. Alternatively, you could argue that a site that sells crazy T-shirts can afford much more design freedom.
There is a risk of being too rigid but hopefully, after reading this article you will have a good grasp of where to draw the line, creatively.
Regardless of your website, here are a few design choices to make your website more visually consistent.
How to make your website more trustworthy:
Inconsistency with product photos can make a website look cheap and lazy. You need to decide on a template for your product photos and stick to it like glue. The most important photo is the main product thumbnail because several of these images will be side by side, making any issues painfully obvious. The secondary photos are less serious because they likely won’t be visible until a customer clicks on the product.
What template you follow is entirely up to you but the most common product photo template is a square image with a white background and a small border in the 5-10% range. This is used by many online retailers.
That template looks like this:
Each product is centred in a square image, with a white background and the border is 10%.
If you are using Photoshop you can easily set a percentile border, make sure you have trimmed or cropped your image first. Next, open the canvas size window and set the units to percent and add the percentage you want to extend the canvas by (tick relative).
Adding a percentage is better because you don’t need to worry about the size of the image the border will always be 10% of the image.
Make sure the background colour is set to white, otherwise you will end up with a colored border.
The picture size should be capped too, there is rarely any need for a photo bigger than 1800 pixels wide, 1000 pixels is often plenty. If your website doesn’t have a zoom feature you won’t need a very big image.
Try to keep the file size as low as possible too, I rarely go over 200kb.
This is actually a very big thing to take care of. When your site gets big the page loading speed will become a bigger and bigger issue. Imagine your site has 10,000 products when your site gets this big ever kilobyte matters.
This tutorial will help if you are dealing with lots of images that need compressing.
Once you have a template established for your product photos, write it down somewhere and follow it to hell and back.
What if your website sells other company’s products?
Don’t always rely on the photos that your suppliers have on their website. Sometimes they can be of terrible quality and you don’t want their half-assed work impacting your site. If the photos are not good enough I advise taking your own. It is a pain but a bad product photo can stick out, especially when it is alongside good photos.
Need to cut out a difficult photo?
Adverts and Website Content
You may think of each ad or banner as it’s own unique design, this is kind of true. But your opinion will change when you see 3 adverts side by side on the same page. It is important that these web elements do not look like they all came from separate websites. These type of designs often look much better and far more professional if they have a common design trait that links them all together.
There are endless ways to do this, by using the same fonts, colours layouts… whatever you like. If you are having trouble visualizing this, then take a quick look at my example below.
In my example, I have used the exact same template for all 3 category thumbnails. If you take a look at my Photoshop file below you can see how the file is non-desctructive and could be used over and over again.
It is very important to keep your files editable like this if you work on a website because chances are you will need to create new material in the future. It is unlikely you will be able to remember exactly how you made the image and this saves you repeating yourself.
Things like a colour overlay could be added later using CSS on your website, but this method is much easier.
What else makes a website more visually consistent?
Recycling old graphics and buttons is not only time saving but it also adds continuity. Sometimes you may think every advert or banner needs to be redesigned from scratch but this is not true.
Using buttons and graphics of the same style is another great way to add continuity to banners and image sliders. These options may not seem like a big deal but they all add to the legitimacy and professionalism of your website.
Related Monstabot Articles:
Try to create a text template for *all your products which you stick too as much as possible. This could be something simple, like a short sentence followed by bullet-pointed features, whatever it is, try to follow it consistently.
*Some products will, of course, require a different description layout but try your best to follow your own template. If you need to change your style for a specific type of product try to make sure that the entire range of products all follow the same template, sort of like a sub-template.
If you sell other peoples products it is still worth recomposing the text description you get from the supplier’s website. Don’t forget to check their content for mistakes too. Spelling mistakes will always happen and you will be surprised how many big companies still have basic errors on their website.
Double check your text doesn’t have any mistakes which might affect the customer’s experience. This will be things like the sizing which may result in refunds and returns. These mistakes are very easy to make, and they can lead to lots of disruption.
Chances are a customer will browse one or two products not just out of interest but also to check the website looks legit. We have all done this.
You don’t want one poorly finished product page to bring down the quality of the whole website.
Sticking to your Branding
Most websites and brands have a distinctive style, it is often hard to put into words but it does exist in your customer’s mind. If your brand is fortunate enough to have a good branding style established it can be detrimental to break away from it.
Context is key
For example, picture an old school ale company with an awesome website it has old vintage fonts and a rustic design. Try to imagine the website has an old burnt wood texture and a dusty look. Now imagine if the first banner you saw on the page was made with bright psychedelic colours, disco lights and featured a modern art font.
Something would look off.
You are not bound to the branding of your company but there are some design choices which need to be avoided for the greater good. You need to ask yourself: is this design in keeping with the style of our branding? Is this an advert our customers would associate with our brand?
I hope this article has helped to demonstrate the importance graphic design can play on the feel of a website. Design continuity isn’t always exciting and it takes a bit of organisation and preparation however the results are well worth it.
On a final note, probably the most important thing that signals trust is your About Us and Contact pages. Be completely honest and transparent, take your time and tell your story your own way. Make it clear how you can be contacted and how well you take care of your customers.
If your About Us page and Contact page are underwhelming that would be the first thing to take care of.
Thanks for reading.
If you want more specific tips on graphic design then take a look at my article below. I wrote this article to be useful for beginners and people who want to run their own small businesses.