Small Business Web Design Tips & Trends

Each small business is very different and has different needs for their website.

As a designer, you have to understand these needs to figure out the best interface for each company. But there are many trends that overlap in the small business world.

I’ve organized my thoughts here sharing what I think are the most important factors in a small or midsize business website.

Granted these are not the only factors that make up a usable interface. But they will go a long way towards designing a great website regardless of the industry or clientele.

Related reading: Showcase of the Best Corporate Websites

Add Some Personal Photos

Every small business typically works local and has a smaller team. This means that photos of the team can really improve the perception of the company to make it appear, well, small!

Whether it’s a family-owned business or a proud company of 10 employees supplying a large metropolitan area with furniture, the idea is the same.

All that matters is adding a personal touch into the design.

Ultimately this depends on the type of SMB and what they do, but I’ve found personal photos help more often than not.

For example the plumbing company Roscoe Brown, Inc. features a large header with a slideshow of different photos.

These include photos of the company’s owner and staff working on various project.

Some of these may also be stock images which can do well. Although there’s a great A/B case study on this topic where total conversions increased by over 160% just by using a real photo of a real employee.

Smartphones make this incredibly simple nowadays so you wouldn’t even need to hire a photographer unless you really wanted to.

Another nice example is the homepage of the Gomez Law Firm based in San Diego.

The header also uses a large background image which takes up the entire page. You could even design your site like this with a hero header if you can find high-quality photos to use.

Ultimately I can’t say that personal photos make sense for every header.

But I can say that personal photos do really well just being added somewhere on the website. This can be an “about us” page or a “contact” page.

Just give visitors a chance to see the faces behind the business. It’ll go a long way towards building trust from people who are browsing online.

Product Photos Sell Too!

You can add pics that go beyond just personal photos and still see great results.

I actually find that many SMB homepages do best with a mix of personal photos and product/service-oriented photos.

For example, if you’re designing a plumber’s website then it helps to showcase some of their tools or their trucks. Or maybe show a beautiful bathroom redesign they worked on.

This can require a photographer so it’s not as simple. But you’d be surprised how much you can get with just an hour of time.

Have a look at the Rich-Way Landscape website and skim through their homepage photos.

You’ll notice many of them feature landscapers hard at work on gardens, lawns, and shrubbery. But there’s also photos of homes and pools without employees in them.

Try a mix of both and see how it goes. You can always rotate photos using a slideshow if you prefer going that route.

Either way, this is a powerful tool for showing exactly what the company does at a glance.

Camp Bow Wow is a dog petcare center and daycare/training facility. They use tons of pet photos on their homepage because… well, that’s their clientele!

This is a great example of mixing photos with real humans along with photos of the various services provided.

Granted these various dog photos won’t always get potential customers to connect with their dog. But it shows the company cares about dogs and does a great job caring for other people’s dogs. So why not yours?

My favorite example of photo-based SMB sites is always design/architecture firms.

Carpentry By Chris has a similar design even though it’s a company focused on carpentry and woodworking.

Still these photos are phenomenal and they show off real work.

That’s far more value than any stock photo could ever be.

Clear Type & Simple Colors

I’ll tread with a light foot here and recommend these design styles with a grain of salt.

Not every business website needs to use simple colors and basic typography. However it is a good strategy when starting out because you can always add more complexity into a design; but it’s tougher to remove it afterwards.

There’s plenty of ideas to debate like simple minimalist layouts or adding sidebars or how to structure the footer.

But my recommendation is to start simple with colors that match the company’s branding.

Carrabba’s Grill uses flat colors and large text. Super easy to read and even easier to look at.

Most of the backgrounds are darker and the text contrasts off this accordingly. Note that contrast is a big deal when designing clear type for a webpage.

You need to consider typographic clarity for each section of the page. This is easiest when you’re designing with clear fonts like Open Sans or Roboto, both free in Google’s Web Fonts library.

But you can always go the other way with color and complexity. Have a look at Maglio Electric for one example.

This website uses a lot of varying elements:

Odd shapes
Custom patterns
Varying color choices
Illustrations

Yet they all blend so nicely into the page.

This is hard to pull off but will leave a lasting impression on your visitors.

So don’t go just for minimalism when you’re designing an SMB site. Instead look for clear typography, colors that work together, and a website that represents the company very well.

Contact Details Are Crucial

I can’t overstate the importance of contact information.

This is really, really important. Small businesses often get work through referrals or through random people searching the Internet and finding the company’s website.

You want to design a layout that makes it crazy simple for someone to go from “hey what’s this?” to “lemme call and setup an appointment”.

Check out the contact page above from Mustache Barbershop.

This is a very nice example where almost every form of contact is available. You can send an email, call either branch, and find the physical locations along with a map if you need directions.

It could not be simpler to find your way to this local barber.

Another great example is Flow Fitness where the contact details are available at the top of every single page.

If you look at the top black bar you’ll find hours of operation plus a contact link with a phone number. Even on the homepage near the footer there’s duplicate contact info for visitors who scroll down further on the page.

I highly recommend adding contact details above the fold if there’s room. At least add the phone number and operating hours since these are the two main things people look for.

James Allan Properties does an excellent job of this with a bright phone number in big letters in the page header.

This number also uses a lighter blue to grab attention. Not to mention if you scroll a bit further you’ll find this number again plus a personal photo of James(good idea!) and a simple email opt-in form.

Explain What You Do (And Fast!)

Nothing’s worse than a vague confusing small business website. This not only harms the business’ image but also infuriates customers who aren’t sure if the business can help them.

You want to clarify exactly what a company does right on the homepage. Immediately.

Is this company B2B? B2C? Both?

What exactly do they sell or which services do they offer? You can do this through imagery or a tagline on the page. Or through headings, or certain navigation links explaining your services.

The key is to clarify intent fast so potential visitors aren’t wasting time on your site.

Notice the homepage of Sevenly Outfitters feels pretty vague at first. But if you read the sub-heading in their hero image section it reads “expression apparel + accessories”.

Boom. Clear indicator of what the company sells and what you might buy from them.

Now it doesn’t have to be this clear and blatant if your company is a little more complex. For example law firms often help with many different legal services, not all of which can be listed above the fold.

BD&P Law is a legal firm based out of Canada. You can pick that up by quickly skimming the homepage.

So which areas do they practice? You won’t find this right away, or at least not at first glance. But if you click the “select a practice area” you’ll find a list of everything they offer.

This can be slightly annoying but it’s also the most reasonable way to offer lengthy information without taking up tons of extra space.

I think the BD&P design is exceptional considering how much they cover. Really a great design to model for any larger law firm or service-based company offering a lot of different services.

Brand Like Crazy

A recognizable branding is imperative to every company. You want people to remember your name, your logo, or something that’ll get them to remember your business.

You may not have full control over creating a new brand for the company you’re designing. But you can work hard to merge their existing brand into a new website for them.

Take for example the RollPark website featuring their logo in the header along with the main favicon. This also includes a small illustration designing a clear image for the company.

As you scroll through the homepage you’ll find a bunch of custom illustrations all matching this style. It’s a clear branding signal that creates a repetitive aesthetic on the site.

This is an often-overlooked type of branding that really plays a big role in design.

Think about the yeti creature for Foundation and how big a role that plays in their branding. The same concept can apply to small businesses too.

You can also borrow branding ideas from the logo itself. Take for example Boardroom Salon and their “B” insignia.

This is naturally found in the header alongside their main logo. But it’s also found in their footer with the logo displayed prominently against social profiles.

Try to find a simple logo design like this where you can copy and replicate a small icon throughout the site. It’s a great way to sell the brand in smaller spaces where you can’t fit the whole logo.

I’m also a big fan of color choices and matching textures throughout a website. It may not technically be logo branding, however, it does create a similar aesthetic that can be applied to print work and business cards.

Milk Jar Cookies does two things right with branding.

First they keep their top navigation fixed to the page as you scroll. This way the logo is always visible.

And second they reuse a lot of similar colors in the design. This blends the page into one large design and it immediately helps to sell the brand with pastels and custom illustrations.

Each example I listed in this article has a unique branding that you should study.

There’s a lot of ways to brand a website and these designs are just the tip of the iceberg.

Moving Forward

Whether you’re working for a business client or trying to launch a website for your own business, all of these tips comfortably apply to your work.

The key is to figure out which ideas fit best with your project and push aside the rest. In web design you have to learn how to borrow ideas from other websites and combine those with your own ideas to create the final product.

Hopefully this guide can get you started towards designing a killer SMB website that actually works and converts visitors into lifelong customers.