What is effective web design?
Giants like Apple and Google seem to redefine that term just about every day. But is effective for them also effective for your small business or start-up?
We believe the short answer to that would be simply, no.
Because effectiveness tends to look so vastly different depending on which small business you’re referring to, we’ve decided to boil it all down in this week’s blog to the least common denominators for effective web design. These elements are crucial for just about any website across the board.
We know you’re anxious to start reading about how to improve your website, so we’ll dive right in. In no particular order, here are the 9 game changers for effective web design.
1 ::: Powerful Imagery
A picture is worth a thousand words, but the wrong picture will use those words to write the eulogy for your small business’ funeral.
Choose strong imagery that clearly represents the overall purpose of your website. Trying to create a sense of community for your charity’s website? Use a photo of your volunteers in action – anything sentimental and genuine. Need to create excitement around your brand? Find an image that presents an up-close, in your face look at your newest product or service. It’s sure to leave a memorable first impression, especially on your homepage.
Take a look at Red Bull’s site…
No matter which page you’re on, there is a massive, up-close photo that represents the company’s action-packed philosophy. It pulls you in and promotes the exciting vibes that Red Bull has come to be known for. By the way, it’s almost difficult to find a pic of their energy drink product, but that doesn’t matter! They’re selling you a lifestyle.
Use our BBBC method as a checklist for your web images:
BIG – Size does matter! Larger images tend to pull in your visitor.
BOLD – Nothing passive here. Your imagery is there to make an impression.
BEAUTIFUL – A photo that is big and bold will have the opposite effect for your brand if it’s hard to look at. We’re not saying you need a swimsuit model on every landing page, but make sure the photo is attractive in its own right.
CLEAN – This could mean a lot of things. Basically, just be sure your imagery is of high resolution, and that its overall aesthetic doesn’t distract from the rest of your design elements (unless it’s designed to do so).
2 ::: Clear Call-to-Action
The entire purpose of your website -scratch that- of your entire marketing strategy is to entice your potential customer to do something.
Whether you want them to download your latest ebook, sign up for a webinar, join your mailing list or simply call you, the generally short attention span of your visitor will turn them away from your website if they are unclear about what to do or where to go next.
I’ve heard them called “Ghost Buttons” – a transparent box, ribbon, oval or other shape with your CTA inside that looks “clickable” and redirects the customer to some sort of next step. They tend to help your CTA stand out a little nicer. We featured a ghost button (on our old website) as our call-to-action in each separate section on the homepage.
3 ::: Large Headers with Legible Typography
This could really be two separate design elements, but then we’d have to go back and change this blog title to “10 Game Changers…” instead of “9.”
Plus, we feel they go hand-in-hand.
As you can see in this blog itself, large and bold headers on any webpage help to differentiate between elements, ideas and sections of a page. They serve to add a clear order and also help organize a reader’s thoughts as they navigate your site.
As far as typography goes, I’m certainly a fan of some tasty fonts, just as long as they’re unique to your brand and don’t take away from your site’s overall goal of conversion. Also, the font itself must be highly legible.
This becomes especially important with the sharp rise in mobile users, which creates a perfect transition into our next gamer changer…
4 ::: Responsive Web Design
Have you visited a website from your phone or tablet recently? Was that website difficult to navigate in mobile form? Was the text too small or the images too difficult to make out?
If you haven’t already noticed what I’m referring to, you will soon enough. And it will become one of your biggest pet peeves.
Although most companies and small businesses have made great strides in recent years, I am still surprised by the amount of companies who have yet to make the transition into mobile-friendly design.
According to an article written last October on The Verge, “more than half of all Google searches now happen on mobile devices.” And there is nothing to suggest that this trend will slow anytime soon.
These mobile prospects may want to visit your site. They may even INTEND on revisiting your site on a desktop computer after having a terrible experience on your user-unfriendly mobile site. I know there are times when I, too, have this INTENTION.
Know what happens? I click out of the site on my phone, start watching Sons of Anarchy on Netflix, and suddenly I’ve forgotten all about my plans to revisit your desktop site.
Is that a risk you’re willing to take? We don’t think so.
So, let’s address the issue.
If you’re using a hosting service such as WordPress or SquareSpace, your website usually comes in a nice little mobile-friendly package, no matter what template you choose.
If you’re using something a little more advanced, be sure to discuss certain items with your web designer such as:
Text – Obviously, you want your readers to be able to, well, read your site. Make sure your paragraph and especially header text is large enough to remain legible on even the smallest of phones.
5 ::: High Contrast
I considered leaving this one off the list because it’s not a necessity.
Personally, I like a lot of strong contrast between my text and background and between the images and text. Strong contrast seems to make everything easier to read and distinguish. It also gives everything a sharper overall aesthetic.
6 ::: Scroll-Friendly Design
I touched on this a bit in the Responsive Design section, but this applies to even your desktop site.
Disclaimer: This is merely a current design trend. However, it’s a design trend utilized by many successful companies, and it WORKS.
The key here, is to structure your webpage in a way that flows in a logical way for your reader. It is much more natural to keep scrolling down the page you’re already on in order to gain more information, rather than go back up to the menu and click to another page.
HINT: This is also a great way to increase your “Time On Site” per visitor.
It doesn’t matter how many, or how few pages your site has – the approach is the same. You must make it as simple and natural to navigate your website as possible.
We recently launched this new website here at 10ton Gorilla. You will notice how we used chunks of contrasted background color to differentiate between sections on the homepage.
Our homepage itself serves as a preview or teaser for the site’s other pages, as well as housing our various CTAs. This way, the visitor can get a snapshot of all the site’s features with one quick scroll, rather than wasting more of their precious time blindly clicking around in the menu.
7 ::: Keep it Minimal
Apple has executed this approach perfectly – oversimplifying everything they do, including their website. Plenty of white space; only one idea or product per grid block; an overall clean and tidy look. Hundreds of other companies have tried to duplicate the effect, or at least take bits and pieces, but few ever go to this extreme.
Whatever works for your brand, refer back to that timeless philosophy from grade school – the K.I.S.S. method (“Keep It Simple Stupid).
Why is a certain design element there? Does it serve a purpose? If not, get rid of it. It’s only distracting from the things you actually NEED your customer to notice.
Decide what message you are trying to get across, and delete anything that doesn’t support that message. The last thing you want is to muddy your message and confuse your potential customers.
8 ::: Search
Not a whole lot to mention here, as it sort of explains itself.
However, you will notice some kind of search bar on almost any major website. You may not need one immediately, especially if your website is rather simple and only features a few pages.
When you begin to create more and more content for your site, you will want a place where your customer can go and find exactly what they’re looking for.
With a generation so used to Mr. Google and Mrs. Siri taking them by the hand as they search for their favorite products, services and businesses, you can’t afford to have them getting lost on your own site.
9 ::: Icons vs. Text
Speaking of this new generation, the texting/tweeting/snapchatting phenomenon has led to the emoji becoming commonplace in our new way of communicating with others.
Just like using pictures to tell a story, using appropriate icons on your website rather than describing with text allows you to provide the same message in less space – something that is crucial with so many users on small mobile screens.
Try these tips on your site:
After reading through this list, you should have noticed a lot of repetition in key elements for effective design:
If you can follow these basic guidelines, you will be in a much better place and all those new business leads might just start pouring in.
Now, rush home and begin mapping out a redesign, before someone notices your website is stuck in 2005!
Let us know what you thought of this week’s blog in the comments below. Each comment helps us improve on providing you with the best information to help your small business grow!