You have an attractive, feature rich website. Yet you wait and wonder – ‘Why isn’t there an obvious improvement in business and traffic?”
For businesses today, the presence of a website is vital to appearing legit in the minds of your audience. But that’s only part of the puzzle.
A good question to consider is whether your website truly matches the level of quality you deliver.
Smart Design can turn a good website into a memorable one!
First impressions matter – 46.1% of people say a website’s design is the number one criterion for discerning the credibility of a company. That’s why you need to invest careful thought in your website design.
A one page website or a deep dive one, if it looks well designed, your audience will perceive that you’re a professional who has the means- enough clients and enough income.
A positive perception is half the battle won!
Design principles used effectively, hook your audience, help them embrace your brand and initiate them into action. But design has to be approached with the user in mind – not just a visual delight but a much more well rounded problem solving approach.
For entrepreneurs looking to increase their online visibility and garner customer attention, having an understanding of basic website design principles is an advantage. Whether you create a DIY website, work with a designer, are considering starting one or still need some more convincing to begin, constantly evaluate your website against the following best design practices for a better outcome.
A Purposeful Prelude – The Start
Your website isn’t about your product. It’s about your customers’ needs.
Marc Crouch, Founder of Firedrop.ai says, “Focus first on the single thing you want to achieve with your website. Is it to get email leads, to get people to buy things online with their credit cards, or even just to drum up interest in a particular topic to raise awareness?”
Setting clear goals delivers long term clarity for you as well as your team. Let that goal be the Northstar that enables and guides all your design decisions. Your choice of elements on your website should stay true to your purpose.
Research your customers and competition to have a starting idea of the features and benefits that matter.
Give careful thought to your appropriate audience and design with organic traffic in mind – people who don’t know you!
Crouch adds, “Think about the type of person you want to attract on your website – is it a trendy 18-24 year old consumer who’s into hip hop and has a short attention span, or a stay-at-home mother who doesn’t have time to browse reams of info on a website? Work out the 1-3 things they need, in order to take the action you want them to take. What do they need to know for them to be interested enough? The outcome can be anything – send you an enquiry, buy a product, or share your website with their friends to spread awareness? Finally, write the content in such a way that it will address their questions, in the language that appeals to them most.”
“Once people land on your website, make sure that you have a clear message that indicates to your audience what you do,” says Brand strategist Fabi Paolini. “It takes only 8 seconds for people to make a decision on whether or not they will stick around. So, you want to ensure that you are clearly communicating who you serve and how you serve.”
“As entrepreneurs grow, their site most certainly can grow with them. But to start, sometimes it’s best to keep the target audience in mind and not play too much with one main message.” advises Carrie Aulenbacher.
Those who plan, achieve.
A website without a plan can be an expensive regret, in terms of both time and money. A simple pen and paper can suffice to map out the visual guide (or sitemap) to the structure of a website or page, using just boxes, lines and text. Wireframes are a great way to do that and you don’t need to be a designer to attempt them.
“Start by laying out the topics covered on the website. This will give you a feel for how the navigation might ultimately be laid out (for the more technical, this is called Information Architecture),” suggests Nicole Bermack SEO Manager at Sturm Media LLC. “Once this is done, I recommend planning out all the key pages that will exist on the website. Imagine how you want the users to flow through a site; how many clicks should it take to get to the blog, for example? Lay all of this out – even planning ahead with just a Microsoft Word document will be better than nothing.”
Sign up and get actionable tips and fabulous resources from a pro designer!
A Smart Approach to Layout
Make it easy for users to find info or answers they need. Thinking about User intent buckets will help you categorize and lay out similar elements together.
Your audience will need 3 things .
Information- Answers to questions about your company, products and services.
Education- Blog and other instructional content and resources.
Transactions – All info that makes the purchasing process or required interactions (Eg: Sign-up)easy.
Your website is not the place to reinvent the wheel. My recommendation is to follow the established web conventions your audience is used to. This applies both to location (logo on top left, login on top right, navigation bar on top etc.) and terminology. Any digress and you risk frustrating your audience and losing them altogether.
Diane Elizabeth, Founder, Skin Care Ox says – “when it comes to website navigation, you want to use the most generic terminology for your categories, sub-categories, headings, and products. For example, your blog should be titled Blog in the main navigation and not something branded like Thoughts in Paradise. The likelihood that a new customer will know that Thoughts in Paradise is your blog is very low. The more predictable your website terminology, the more predictable your customer behavior will be.”
“Website design is subjective, but a lot of industries have already set a standard that consumers are familiar with. The goal is to create a great user experience and prolong their stay, thereby increasing your chances at conversion,” adds Lisa Chu of Black n Bianco.
As per Akiva Leyton of Falcon Marketing, “It helps to create a logical flow so that the experience is simple and straightforward, instead of confusing and all over the place.”
Reading from left to right (F-shaped reading pattern) is the popular norm. Directives on your navigation bar should be designed the same way. It’s a good practice to start with content that provides information (About, Blog) and end with action (Shop, Sign-up).
The Attention Web
While the average human attention span has come down to the single digits – in seconds – the digital information that clamors for their attention has skyrocketed. When you’ve led a prospect onto your website and have their prized attention, use design to attract and hold it!
Less is More. Today’s complexities demand simplicity – edit ruthlessly.
Simple websites lead to less overwhelm and reduced stress. Evaluate your website periodically and remove unnecessary elements for a smoother and faster customer experience.
Brad M. Shaw, CEO Dallas Website Design recommends clarity. “Websites that inspire me are simple, clean sites that incorporate clear calls to action. The most common mistake I see by professional and DIY designers alike is cramming too much content into a page. KISS, keep it simple stupid. Ensure your navigation is clear, simple, and easily understood. Unless you are a large business with multiple offerings, dropdowns are also easily avoidable.”
Kelsey Kolb, Graphic Designer at Capture Marketing adds “When it comes to website design, the simpler the better. We see the best engagement with web pages that have strong imagery and minimal text. Text heavy pages and flashy images take away from the rest of the website.”
Lead them to Action
Well designed Call to Action buttons and lead magnets are essential to website design and initiate the user to take action. Careful words, clever placement, clear instructions and smart color choice goes a long way towards the efficacy of CTAs. Newsletter signups, when placed frequently across your site ensure that more users are likely to subscribe.
Start with Why is a good example of positioning CTA’s at every scroll.
“In terms of lead magnets, a free report—or anything that could take a long time to read is a hard sell in the fast pace world we live in. Buyers are much more likely to exchange their email for something actionable like worksheets or checklists, something short and relevant to their situation.” advises Shauna Armitage, Chief Marketing Strategist Making Moxie.
Sprinkle your lead magnets smartly across your website -in sidebars, within blogs etc. This ensures a higher probability of visitors going through with the process.
Watch the Fold and then some more
The fold is the portion of your website that is visible to your visitor, without having to scroll down. Think carefully about the information you would like to put there to best capture attention. Ensure that you capture attention right away with strong images true to your brand, and a compelling Call To Action.
Paolini says, “It’s important adding an opt-in form or call to action above the fold (before scrolling) as it helps people quickly engage with your brand. You can see this in sites like Sarah Try . She clearly states what she does and has an enticing offer above the fold.”
In the same breath, adapt and align your design to your users constantly evolving interactions. With mobile overtaking desktop usage, we are beyond the tipping point. Users are no longer scroll-phobic and scrolling thumb gestures are becoming instinctive. Don’t hesitate to add pertinent information under the fold- products, testimonials, press mentions etc.
“When starting out, have your content structure in place and prioritise your main products such as bestsellers to the homepage,” says Elaine Wilkinson, Director Hollywood Mirrors.
According to Armitage, the website Urban Southern does a fantastic job of both above and below the fold content.
Is your website too small to read on the phone or too big to fit in?
You need to think responsive.
Responsive websites have pages that have perfect readability regardless of device size. Responsive design adapts your website to the device your users are viewing it on.
“After creating a beautiful website on your Mac or PC, it’s important to make sure your design is responsive across all screen sizes and devices. Find a responsive template that also displays well on mobile. Click through all of your pages while on all three devices to get a sense of the user experience. If anything is out of line, perfect it prior to your site launch.” advises Allison Scalera, Graphic Designer at Half Genius.
Sophia lemon of Photography by Sophia Lemon adds, “use a service like Square Space or a premium WordPress theme. These are not expensive options but will result in a beautiful, responsive website. And their built-in templates make it easy to attract visitors to your top content with animations and stand-out buttons.”
Kolb suggests Corporate Design Interiors as a fantastic example of a responsive design.
Test your website by using this Free Responsive Design Tool.
To skim or not to skim
Users are rarely reading every word of text. To sustain attention, smart design means breaking up text copy into paragraphs with subheadings and bullet points.
“A specific no-no would be too much text clutter in the same section of the website. Visitors today tend to skim through the website’s content rather than slowly navigate as you’d imagine. Make sure you precisely focus on the key message you’d like to put across and try to use images or short phrases that would highlight it clearly,” advises David Kosmayer, CEO of Bookmark.
Good Design is Simple Logic
Create with empathy for the user.
Make important elements BIGGER or bolder. A strong hierarchy leads the user’s eye through a visual and logical progression. A weak one offers no guidance.
Whitespace or breathing space is one of the most important considerations for a great web layout. It aids in increasing emphasis, reducing clutter and providing a rest to the eye between the various elements on the screen. In order to guide users to focus on the important, take down all the unnecessary distractions off the screen, .
Less options lead to faster results.
Think Readability First!
Choose typefaces that work well in various sizes of devices. Limit the number of Font families to a minimum (2-3 at most) and keep it consistent across all your web pages. Google Web Fonts is a free resource and optimized for web. Submit an image to WhatTheFont to find the closest matches to a font you like. For the curious, here’s a fantastic 5 Minute Guide to Better Typography.
For more Free Resources on Design, get our Mini e-Book on free Design Tools
If a picture is worth a thousand words, an icon does it even better!
Not only are they content ‘breathers,’ icons also visually direct users towards the important parts of your message and free up valuable web real estate.
On Maroon Oak, we use custom icons for #WomeninCareers. Each icon is visually designed to ‘ring the bell’ and direct the user to a relevant page. Can you guess what each of these icons convey?
Leyton mentions e-commerce website Joy Jolt that uses icons creatively to visually differentiate categories.
Your Brand – Color, Voice and Message
A memorable brand identity takes time and consistency.
Use your brand logo, voice and color to enhance your web design, not define it.
“In my experience, one of the biggest challenges that small business owners and entrepreneurs have is over-branding. Many entrepreneurs want to be innovative and in their quest for differentiation they end up confusing their audience with too branded terms,” says Elizabeth.
What feelings do your colors evoke? Is your voice fun or formal? Is your copy or product description compelling and with the relevant keywords? Strong visuals with storytelling create powerful connections. Let your choice of elements subtly echo your brand personality throughout your website.
Use colors that complement your website’s color scheme, yet, still stand out when a user is browsing your website.” suggests Kosmayer.
As a Women’s Networking platform, we have our brand colors at Maroon Oak, but we do not restrict ourselves to those, within our content. We incorporate our logo in creative ways in all our graphics and across our website, while keeping to women models and feminine elements.
If color has you in a dilemma, scroll through endless 4 color combinations with Color Hunt, a pinterest for colors or have fun creating a color palette with Palettable, an interactive tool for building one.
When faced with an array of design options, ask yourself – will this help my customer make a decision faster?
Olivia Walls VP of Sales for Intouch Marketing advises,“Prospects want to know what your company can do for them. Companies need to focus their messaging on the problems they can solve for their potential customers.“
So, what makes for a well designed website?
Website design is not an exact science! Visual appeal coupled with traffic, user engagement, brand recall, and business growth are good metrics to evaluate yours. The good news is that it is not set in stone and can be modified and adapted to change. A well designed, adaptable website eventually leads to increased ROI!
For visual appeal, Land Book is an awesome library of carefully curated, well designed websites for entrepreneurs and business owners to derive inspiration from.
With all remaining same, if a beautiful website is what will give you an edge over your competition, why not grab that opportunity. What are you doing to create a website that keeps your customers and prospects coming back?
You can’t use up creativity. The more you create, the more you have.
A Designer and Entrepreneur, Aditi graduated from a top design school and subsequently started her own design and merchandising business. Co-founder at Maroon Oak, she has over 17 years of business experience with Two Dotts, her design consulting company and an Etsy store which serves as an outlet for her gifts and patented product designs.
A mother to a teen and a tween, she enjoys running, dancing and raising her newest baby, a Bichon named Miltie.