How to Design a Small Business Website your Customers Love

How to design a small business website your customers love
Smart design can turn a good website into a winner! But what counts & where should you focus, to design a small business website your customers love.

You have an attractive, feature rich website. Yet you wait and wonder – ‘Why isn’t there an obvious improvement in business and traffic?’

The presence of a website for a small business is vital for appear legit in the minds of your audience. But that’s only part of the puzzle.

A good question to consider is whether your website design 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 making your own website..

A simple 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 designing a website has to be approached with the user in mind – not just a visual delight but a much more well rounded problem solving approach.

Whether you make your own 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.

How to design (or redesign) a website for your small business?

We asked top website designers and small business owners for their advice on how to design a small business website that converts. Here’s a summary of what to expect further on:

  1. Start right– Define your websites purpose, persona and strategy 
  2. Layout matters– Lead with intent and adhere to flow and behaviour
  3. Grab, then hold attention– Simple, responsive and skimmable
  4. Utilize the pertinent design elements– Hierarchy, Whitespace, Readability, Typography and Iconography
  5. Be on brand– Color, Voice and Messaging
  6. Get more– Additional Tools and Resources for you!

 

Start Right with your website design  

Your website isn’t about your product. It’s about your customers’ needs.

Purpose

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 and SMART 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.

Plan, track and crush your Goals!

Grab the Ultimate Handbook with SMART Goals Examples and Template to write yours!

SMART goals template and ebook

Persona

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, when creating your website, write the content in such a way that it will address their questions, in the language that appeals to them most.”

Proposition

“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 when building your website, 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.

Wondering if your website delivers on its purpose and proposition? Our comprehensive Website and Brand Audit can help.

Plan

Those who plan, achieve.

A website without a plan can be an expensive regret, in terms of both time and money. When creating your own website, a simple pen and paper can suffice. 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.”

Here’s an example of a web page wireframe (with annotations) from Lucid Chart

How to design your website - wireframeDesign a website layout that converts 

Intent

Make  it easy for users to find the info or answers they need. Categorize and lay out similar elements together into User Intent Buckets.

Your audience will need 3 things .

Information- Answers to questions about your company, products and services.

Education- A Blog and other instructional content and resources.

Transactions – All info that makes the purchasing process or required interactions (E.g. Sign-up) easy.

Flow

Your website is not the place to reinvent the wheel. A best practice 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.

How to do flow in your website deisgn

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.”

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.”

“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.

Website not converting? Our comprehensive Audit for Marketing Elements can get you the answers

Behavior

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).

how to website design - f reading pattern

 

Grab attention with your website design 

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 effective design to attract and hold it!

Simplicity

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. When making your website, ensure that 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 the ‘how 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 (CTA) 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 your CTA buttons. 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 buttons 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-paced 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.

You can grab our free guide that shows you 35 places to promote your lead magnets.

Best Places to Promote your Lead Magnets
Watch the Fold and then some more

The fold is the upper portion of your landing webpage that is visible to your visitor, without having to scroll down. Think carefully about the information you would like to put above the fold 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 to add an opt-in form or call to action button above the fold (before scrolling) as it helps people quickly engage with your brand. You can see this in sites like Elna Cain. She clearly states what she does and has an enticing offer above the fold.”

In the same breath, adapt and align your website  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 making your website, have your content structure in place and prioritize your main products such as bestsellers to the homepage,”  says Elaine Wilkinson, Director Hollywood Mirrors.

The fashion website Richer Poorer does a fantastic job of both above and below the fold content.

Is your website content impactful above the fold? Our brand-focused Website Audit can save you the stress and time.

An expert & comprehensive Website and Brand Audit for a website that converts!

Get expert evaluation and tips on Marketing to Menu, Content to CTAs, Navigation, Tech aspects and more!

Take your business to show with a top-notch website and brand audit!

 

Be Responsive

Is your website too small to read on the phone or too big to fit in?

You need to prioritize responsive.

 Responsive design adapts your website to the device your users are viewing it on. Responsive websites have pages that have perfect readability regardless of device size.

“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. When designing a website, 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.

Whether you’re monetizing your blog or using it as a tool to generate traffic, use our free guide to find out which text, visual, technical and marketing elements can make your blog ‘read and share worthy!’

key elements of a killer blog post

Use simple logic to design a website

When you create your website with empathy for the user, logic flows naturally.

Visual Hierarchy

Make important elements BIGGER or bolder. A strong hierarchy in website design leads the user’s eye through a visual and logical progression. A weak one offers no guidance.

Strong heirarchy leads the eye
Whitespace

Whitespace or breathing space is one of the most important considerations in designing a website. Adding it is as simple as hitting enter and adding margin and padding. It aids in increasing emphasis, reducing clutter, and providing a rest to the eye between the various elements on the screen. In logically prompts users to focus on the important, by taking away the unnecessary distractions off the screen.

Less options lead to faster results.

How to design a website - white space

Also Read Make it Better: 5 Point Cheat Sheet for Non-Designers

Typography

Think Readability First!

Choose typefaces and website fonts 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. 

Don’t know your website fonts?

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

Free Design Resources E-book
Icons

If a picture is worth a thousand words, icons on websites do it even better!

Not only are they content ‘breathers,’ icons on a website also visually direct users towards the important parts of your message and free up valuable web real estate.

Leyton mentions e-commerce website Joy Jolt that uses icons creatively to visually differentiate categories.

On Maroon Oak, we use often custom icons for #WomeninBusiness. 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?

 

Use icons to say more with less

Browse and choose from thousands of icons with The Noun Project or Flat Icon.

Use cohesive branding in your website design Messaging

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 Business 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 and social media, while keeping to women models and feminine elements.

Creative logo an dcolor use on Maroon Oak

If your website color scheme 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.

The bottom line?

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.“

Unsure of your branding and messaging? Our comprehensive Website and Brand Audit has you covered.

How to design a Website – additional Tools & Resources

For the curious, here are some additional resources for web design:

A Guide to all the Design Trend Guides

A Magazine for Web Designers & Developers

Free Design Resources- Wireframes, icons and UI kits

A One Page website design gallery for Design inspiration

A library of carefully curated, well designed websites for design inspiration

Tools to get ahead with Blogging

Tools and Freebies to Conquer SEO

7 rules to Design a Logo that Elevates Your Brand

Remote and Freelance Graphic Design Jobs

A free eBook on the best, easy to use Free Design Tools available to you today.

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 the same, if a beautiful website is what will give you an edge over your competition, why not grab that opportunity? Add SEO best practices to your user-friendly website and you got yourself a sure-fire winner!

Contributor-Aditi Tandon
Aditi Tandon

The best thing in design (and life) is simplicity!

Designer and Entrepreneur, Aditi graduated from a top design school and subsequently started her own design and merchandising business. Co-founder at Maroon Oak, where she writes and curates content on business and work-life, Aditi also 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 forever baby, a Bichon named Miltie.

Maroon Oak on LinkedIn

Tags:
24 Comments
  1. Daphne 3 years ago

    Excellent tips in this article! I’ll definitely be using them as I continue to format my blog on its new platform.

  2. Wioletta Lech 3 years ago

    It was really helpful for me. Thank you for sharing so much valuable information 🙂

  3. Preet 3 years ago

    This is a very informative post. I agree with the points you have mentioned, Responsive designs make a lot of difference in how the visitor thinks about you and your business. It is something we constantly work at improving.

  4. Jasmine Eclipse 3 years ago

    I love all these tips! I’m building a site for my mom soon, so I’m going to use this as a guide to help me! Thank you!!

  5. Rachel 3 years ago

    Great tips and things to remember! Thank you sharing 🙂

  6. Marie 3 years ago

    Definitely needed this right now! Web design is something I really struggle with! The rules change all the time! Reading your post allowed me to learn a lot – especially on important basics!

  7. Ellie Plummer 3 years ago

    This was really helpful. I have been looking at designing a website for a while but never knew where to start so thanks for this.

  8. ankit 3 years ago

    Smart design will make you to reach large audience..these tips are very helpful to me as i have also created website for my business.

  9. Courtney Blacher 3 years ago

    Brand name and the logo are important to a website! These are such a brilliant tips and ideas!

  10. Jagriti Roy 6 years ago

    This all tips are such a useful guidelines for the entrepreneurs who are looking to promote their business online.. It’s really an informative article I must say..

  11. Karina 6 years ago

    This is a very detailed explanation of everything a new
    Business owner would need. I think a good website and a good online presence in general are especially important.

  12. Helena 6 years ago

    Loved this post! Love your concepts and approach!

  13. Ithfifi 6 years ago

    This was super helpful to read and so clear in your instructions. I need to set up a website for my dads business in the near future so I am grateful for the help!

  14. Meeta Garg 6 years ago

    This is a great write up about website designing full of valuable tips for people who are into designing a new website or wants to improve the existing one. Today website is our face for our clients, so should be perfectly presented and always have a scope of improvement.

  15. Amy-Lynn Vautour 6 years ago

    VERY useful information. I’d be interested in interviewing you for my own blog that focuses more on newbie freelance writers. Just for a quick blog piece. Let me know if you’d be interested. Also, signing up for your mailing list. I’m too bogged down with actual clients to keep growing my business aspirations right now, but I know you’ll be a valuable resource when I’m ready.

  16. Michelle 6 years ago

    These are some really great tips, especially useful for making a site user friendly. I agree that its important nowadays for growing businesses to have a good website.

  17. Sophie 6 years ago

    Wow this post is amazing! So much value in one post!! Bookmarking this so I can take time to read it later. Thanks for this post 🙂

  18. hal 6 years ago

    I completely agree – the second I see a website that looks amateur I automatically assume it won’t be the best option even if it is – they’re doing themselves a serious disservice!

  19. Zoë 6 years ago

    I’ve always been questioning my website and I think some of your points are super key! I like the idea of first impressions too. Thanks for the tips, incredibly helpful!

    • Pooja Krishna Author
      Pooja Krishna 6 years ago

      Thank you Zoe! True, most users rarely offer a second chance!

  20. 6 years ago

    This is very timely! I have been in back and forth with my designer the last few days and I’m so glad I read this. Will be referring to this again! Thanks!

    • Pooja Krishna Author
      Pooja Krishna 6 years ago

      Glad it helps Georgia! As a business owner, its good to understand some fundamentals when you work with a designer.

  21. […] Read the full article here. […]

Leave a reply

Your email address will not be published. Required fields are marked *

*

©2024 Maroon Oak LLC

CONTACT US

Please email us here - we'd love to hear from you!

Sending
or

Log in with your credentials

Forgot your details?