Building a website designed to inspire leads and convert customers is a multi-step process. It starts with a foundation of great technical performance and ends in a strategic conversion funnel. While there are many paid services and modules you can use to boost your on-site conversion rate, there are also more than a few completely free conversion-boosting tactics through simple graphic design.
You want your website to draw the eyes of future customers. You want it to be pleasing to navigate and create the sort of vibe where customers can actually hang out online. You also want your website to create a natural, no-pressure conversion funnel that guides site visitors toward exploration and conversion. In short, you want that website design to be aesthetically appealing.
Here are 13 absolute tips for making your site's graphic design look so good that leads can't help but to click.
Choose a tight colour palette incorporating a few complementing and contrasting colours that look excellent together. Choosing the starting palette is simple for most businesses, as you already have brand colours so can further explore the palettes available to sport those colours appealingly.
"Group your palette colours into specific clusters that you will use to create visual elements."
Group your palette colours into specific clusters that you will use to create visual elements. This will create a colour-code for your website's features and navigation that will shine through stronger than any other visual feature. By using a tight colour scheme you'll help to direct that path and purpose throughout your website to guide customers to click in the right spots at the right time.
For example, the 'enrolment' path through the website might always be highlighted in orange, while current customer access may always use green hues. Not only will your website look very tidily designed, with all your colours lined up, but you will also enhance the usability and appeal of the brand's overall layout.
Alignment in a website is like alignment in a text editor. You can make content stick to the right or left side of the page, or you can have it centred or columned down the middle. This alone provides a surprising amount of power when it comes to content arrangement, but it can also be used to make your pages more interesting.
"This alone provides a surprising amount of power...but it can also be used to make your pages more interesting."
You may have noticed that it's easier to scroll down a page when the content alternates from right-to-left alignment. Or that right-alignment content is often read after left-alignment and is more associated with decision-making. Use these elements to your advantage when lining up each page design and template.
If you place an image in your website or embed it into your content, don't leave the edges naked. Give each and every image you present a frame that tidily wraps the entire thing. The effect of a simple few-pixel frame brings formality and a business-casual seriousness to your website design.
Any teenager can throw together a website with some text and images. It takes professionalism to remember that every picture deserves a frame and to frame them. Show your viewers that thought went into each website design, and it will add a subtle gravitas without weighing down your brand personality.
"...it will add a subtle gravitas without weighing down your brand personality."
Having a unified design is essential for a good-looking website. You want your website to look like each page was printed from the same template, off the same 'printer', using the same elements.
"You want your website to look like each page was printed...off the same 'printer'..."
Just like the letterhead, you want to use the exact same page elements on every single page. Show that your website design is unified and that the brand has a single appearance. Another way to think about this is that each page is a room in your professional facility. Customers are assured that they are in the right place with the right people when each room looks tidy and exactly like the last.
Don't crowd your elements. It's easy to get excited when putting together the page elements of your business website. There is so much to say and so many graphics to place. But whitespace is sacred. The whitespace (not necessarily white, always empty) around each element must be respected so that the eyes of your site visitors can tell one element from the next. If your graphic elements are too crowded together, the page will look busy instead of guiding the eye toward conversion elements.
"A big part of that is actually providing the whitespace to allow for mental sorting."
A good school website draws the eye to the most important information, and makes it easier for each type of visitor to find what they need. A big part of that is actually providing the whitespace to allow for mental sorting. Consider the difference between a cluttered versus simply designed mobile app and apply the same principles of space and aesthetics to your website's design.
A hierarchy shows how one element is more important than another, or leads to the elements below it. For example, one large image with several smaller images arranged underneath shows a hierarchy, where the biggest image is the most important. One large text header followed by smaller text shows that the smaller text 'belongs' to the bigger text.
"The hierarchy provides a quick visual category system that can be mentally sorted and selected much more quickly..."
Use this principle to show how elements naturally relate to each other in your web page design. In fact, a clear element hierarchy will make it easier for your website visitors to find what they are looking for. The hierarchy provides a quick visual category system that can be mentally sorted and selected much more quickly than a block of vertical text or even a grid of same-size elements.
You probably know that fonts can convey mood. Accordingly, a scrawling font can indicate romance. A clumsy font can suggest childish or playfulness. A typeface-style font might indicate business or history. You can demonstrate that your brand is fun-loving or business-like simply by using a font to indicate the requisite mood.
It is recommended to choose only a small collection of fonts to work with, so choose fonts that aptly reflect the brand personality and types of messages that you need to convey. It can take time to discover the right font, or the first exotic font you find might be the perfect choice. If you're more sure, try searching through some of the shared font directories.
"...choose fonts that aptly reflect the brand personality and types of messages that you need to convey."
There are thousands of fonts to choose from so you don't have to choose an alternative version of Verdana or Tahoma. You can find and use a unique font that will make your audience immediately recognise branded copy and banners.
When you have a set of images in the same campaign, unify them visually. Instead of posting each photo with its individual framing and colour scheme, make an effort to ensure all your images look like they belong to the same album. Even if the photos were taken at very different times, locations, or events, you can still make them look like they belong together. The trick is to use devices like borders and overlays to unify the image sets.
"The trick is to use devices like borders and overlays to unify the image sets."
Use the same colour filter, crop them similarly, and use the same border style for each image. This creates a type of visual unity that the audience loves to see. Whether it's your social media campaign, a photo gallery, or the images for each one of your blogs - unify them.
Use filters, place text over the top, or enhance each consistently, so the colours pop and they look like they all belong in the same set of assets - no matter how disparately these images were collected. (This also makes each campaign look unified while also providing a similarly branded difference from one album to the next.)
Employing transparent elements is a great way to add depth to your page without occluding content. With the use of transparent shadows and transparency to add branded watermarks gaining popularity, the technique can also be applied to floating assets to show what has been covered behind, or to 'annotate' your own web pages with helpful overlays. (This might create a tutorial, a game, or in-line work notes depending on how you put the transparent overlay to use.)
"Employing transparent elements is a great way to add depth to your page without occluding content."
Symmetry is a typical approach used in web design when designers stray from the usual left-aligned standard. That's because it's considered aesthetically respectful to make most designs symmetric. Symmetry can be artistic or utilitarian. But it can also be defied for effect.
"Symmetry can be artistic or utilitarian. But it can also be defied for effect."
When you're looking to draw the eye, create asymmetrical elements. When you're looking to create a browsable design, use symmetric elements. Symmetry is comforting and orderly. It looks balanced and makes people feel stable. On the flipside, asymmetry is unbalanced. It makes people low-level anxious, but also has a greater potential to be artistic or to convey important stand-out messages.
When you use floating assets, avoid the paramount mistake every website makes at least once: Do not occlude your own content. Never place a floating panel where it cannot be closed or seen through AND ensure that floating elements can always be closed or minimised. (This can be essential both for function and for testing when occlusion accidentally happens.)
"Do not occlude your own content."
It's also important to add a margin. In fact, give side-tray elements a greater side-margin for them to slide through like an empty track. For lower-screen elements, give the page a deep footer margin so that all content can be scrolled and read, even with the floating element open. And finally, for pop-ups, always make sure that there is an 'x' and that a simple tap of the 'Escape' key promptly closes the window.
Make smart use of both colour saturation and colour contrast. Know how to enrich colours, intensifying the pigment vs. increasing the difference between light and dark. You can make many different images that look like they belong in the same set by matching their colour intensity (saturation) and colour contrast. Tweak the settings in an image editing program to get the best results for each photo or graphic.
"Make smart use of both colour saturation and colour contrast."
Finally, be sure to test. No matter how amazing your graphic design, no matter how rock-solid your template, no matter how good your theme - always test. Test, test, and test again. Have the new design tested on every single page of the website and for every possible screen size. (Better yet, hire outside teams and total strangers to test with all their devices.)
"Test, test, and test again."
It is all too easy for a new design element to wreak havoc on old designs. Occluding text, blocking buttons, or clashing frames are just the beginning of the types of issues that can come about as a result of introducing a new design element. It's always vital to ensure that no content is occluded, all links work correctly, that everything is appropriately spaced, and that the whole design is attractively mobile-responsive.
Every business needs a quality website to maintain an online presence with customers. Today, this has never been truer. Your website design not only represents the brand, it's becoming a business' primary identity. In the digital era, your website design is more important than ever.
Get a leg up on the still-adapting competition and start onboarding your remote customers through a visually compelling website design. From ease of navigation to winning the hearts of new customers, website design matters for every modern business.
PS: Are you receiving free publicity opportunities, straight into your inbox?
No?!! (Wha?)