Top 51 Visually Appealing Websites Using Inbound Marketing

Posted by Manage Inbound's , last updated on

visually-appealing-website-awards-banner.jpg

If you’re looking for well designed, visually appealing websites that are built on HubSpot or practicing inbound marketing, you’ve come to the right place. Here are the 51 most attractive websites using inbound marketing.

As you know, there’s no shortage of websites practicing inbound marketing on the web. But we decided to separate the wheat from the chaff and give you the absolute cream of the crop. Whether you’re an agency or a one man (or woman) army, these websites will give you the inspiration to create your own well designed website.

What Makes a Good Website Visually Appealing?

At the most basic level, in terms of design and theory, there are six elements that need to be considered when designing a website to be visually appealing.

Color: The site’s color should match your brand and present consistency throughout the site. Color does play a role in evoking emotions on the web with your audience and it should be considered when choosing your color palette. However, the colors on your website should be easy to read and easy on the eyes. It’s often very difficult to look at a screen full of bright colors.

Font: The site’s font doesn’t necessarily have to match the brand or logo. Making sure that the font is legible is the most important goal. You can vary your font throughout the site as well to increase intrigue and add visual appeal. When varying fonts, make sure they compliment each other well. Only vary fonts between headers and body font. You can use two different types of fonts in your headers — one for h1’s and one for h2’s or h3’s. Keeping the body font consistent across the whole site is essential.

Imagery: Avoid using stock photos from iStock or Fotolia. Instead, use stock photos that don’t suck from websites like Unsplash or Death to Stock Photos. Pictures will give your website the look and feel that will set your website apart from competitors.

Simplicity: The simpler the better. Keeping design simple allows for the “clean” look that people are looking for.

Usability: Make Functionality key on your site. A visually appealing website should not sacrifice ease of use for a better visual. Creating user-friendly websites with easy-to-understand navigation and page layout is what determines how users interact with the website.

Consistency: As mentioned in some of the sections above, keep the design consistent. If you have one sub page with a top featured background, they should probably all have a top feature background section. The website colors, fonts, button styles, heading sizes, image styles, image sizes and backgrounds are among the pieces to keep consistent.

While all of these elements are part of what makes a website visually appealing, they are all relative. Website design trends change frequently and trends come and go year in and year out.

Bonus: Download our Inbound Website Performance Checklist to make your website your number 1 salesperson in 90 days. Easily save it to your computer or print it for reference for your next website.

These are the top 51 inbound marketing website designs, listed in no particular order.

Without further ado, learn what makes a good website from these inbound marketing websites...

Awards for the Most Visually Appealing Websites

 

Inbound Marketing Agency Websites

1. BEcause

because.png

BEcause does a phenomenal job with their navigation. Having the split navigation bar isn't something you see very often. Typically the navigation is always at the top, even when there is a top bar and main navigation, but here the main navigation is at the bottom and it sticks on scroll.

A really cool idea.

Their blog and guides pages sport a well designed, and easy to read, grid style with some bright eye catching colors as well.

2. Squaredot

squaredot.png

Squaredot's homepage is seriously fun to look at. Above the fold there's a background that changes color and their logo morphs from a square to a circle! That sets the tone for the rest of the page, and website, which is full of amazing animated graphics.

Plus, they have section navigation on the side of the homepage that you don't see too often on HubSpot sites.

They do a great job applying the theme of their background pattern to the whole website as well. Their graphics and team section have the same pixelated style. 

3. Credible Customers

credible.png

Credible Customers utilizes a "behind the scenes" feel video background that really makes you feel like they are transparent. They have more content above the fold than most inbound websites these days, but I think they make it work.

The website has a simple, but bright, color scheme through out their website to tie everything together.

4. OverGo Studio

overgo-1.png

OverGo Studio uses some subtle hover animations to get you engaged in using their website. On their homepage the logo tilts, their testimonials translate up just a tad, their HubSpot Impact Award tilts, their solid color calls-to-action grow. Their clients, resources and portfolio pages use animation as well and it really works for the consistency of the site.

5. Inturact

inturact.png

Inturact has some awesome, messaging on their website. You don't have to look any further than their header on their homepage. "Wake Up. Kick Saas. Repeat." They use a web friendly font in "Open Sans" that further accentuate their content.

Their video background is simple, but engaging.

They have a great color scheme with the Green and Yellow, which looks awesome as semi-transparent buttons instead of traditional or ghost buttons.

6. Square 2 Marketing

square2.png

Square 2 Marketing uses a triad color palette to great effect throughout their site. I commend them on using the blue for their background sections, even though red is their primary color. Large sections of red tends to be hard on the eyes.

7. Nectafy

nectafy.png

Nectafy forgoes the big hero background image, in favor of a solid color and it contributes to their branding on the website. The orange and blue compliment each other nicely and are both surprisingly easy to read white text on.

With that said the biggest take away you should have from Nectafy is their self selector section on their homepage. It's something you should expect to see more often for an inbound marketing website, but it's more rare than you'd think.

8. Vital

vital.png

Vital uses side navigation to take you through their homepage for some smooth scrolling and it's definately the way you should view the page. 

They have a mega menu that is pretty slick when you go to look at "What We Do", and they do a lot. Like 28 things in 3 different categories, the best part of this mega menu is that each category has it's own landing page to talk with them about that specific category.

Quick shout out to their blog listing layout and it's share design beneath each post.

9. Lynton Web

lynton.png

Lynton does a great job mixing multiple fonts in their headers to create emphasis. They pair "Great Vibes" with "Montserrat" to create a combination of cursive and bold fonts for a classy feel.

The site navigation is simple and limited to just 5 items, which makes it clear for visitors where they should be clicking through to.

Another HubSpot COS shout out here, if you look in their footer or on their blog listing page the blog subscription notification frequency features a drop down.

10. Kuno Creative

 kuno.png

Kuno Creative uses subtle hover and scroll effects to keep you engaged, but the real innovation here is the slide-in navigation. 

Moving the slide-in navigation keeps the site viewing simple, while providing a large navigation. You can argue that people don't know to click the menu bar, but it's 2016 now. I think most people, especially people in their ideal customer base are aware of how to use a slide-in navigation.

11. IMPACT

impact.png

IMPACT has an extremely well designed website. No doubt about it. There are plenty of innovations here for a HubSpot website.

For starters take a look at their blog. The pop-up for their featured resource looks great, but the best part is the message you get when you say "No Thanks", the offer then floats at the bottom right of the page in a non-intrusive way.

Second, their blog has an easy to use filter system to help you find the content you want.

Third, there's a break in the blog listing to showcase their free eBook offer.

12. SpinWeb

spin-web.png

SpinWeb uses a grid design throughout their website to give it a consistent and easy to use feel. Here's another site that keeps their navigation simple, only 6 items with no dropdowns. Their header is big and bold for easy use and each navigation item changes background color to really let you know what item you are hovering on. 

On a side note, the play button in the hero section of the homepage is a good alternative to a button that says "Watch the Video" or "Click to Play".

13. Nextiny

nextiny.png

Nextiny avoids having drop down navigation, which can get messy, by having on page sub navigation for their services. Which comes complete with icons, personally I think it's a nice touch.

Their background imagery is top notch as well. Take a look at their homepage for instance, it matches their headline perfectly and directs your eye right to their call-to-action.

14. Media Junction

mediajunction.png

When you visit Media Junction's homepage you might think to yourself, "Hey, this looks a whole lot like the HubSpot homepage" and you'd be right. The entire homepage is in grid layout, much like HubSpot. But Media Junction is more fluid with this design because they use the grid design on their subpages as well to build a consistent user experience.

15. VIEO

vieo.png

VIEO Design has a different, but eye catching design on their calls-to-action. Each call-to-action, even their submit buttons, are red with a red outer border and negative space that fills on hover. 

Their blog is appealing and user friendly as well. From the blog listing page you can see related posts and it has a filter drop down to find the content topic you want.

16. protocol 80, Inc.

protocol.png

protocol 80 has nice color palette that starts with their 4 icons on their homepage. The rest of the graphics on the site carry that color palette for a consistent look.

They do have a slider for their hero section on the homepage, but it isn't auto scroll which is great.

Their drop down navigation is styled well as it pops with a white background and a reddish-orange border.

17. That Agency

thatagency.png

That Agency took a different approach for their site navigation, instead of having it at the top of the page they went for a side navigation. Which happens to be semi-transparent. What that does is really open up the viewing space for the homepage to allow them to tell their story.

18. MedEd Web Solutions

meded.png

MedEd Web Solutions does a great job showcasing what they have to offer.

Have two products / offers? Great split your hero section and let the visitor navigate to the right one for them. 

HubSpot COS shout out, they are using a HubSpot call-to-action in the header to track clicks and when you navigate to their "MedEd Manager" service page the call-to-action dynamically changes from "Contact Us" to "Demo MedED Manager Now".

19. White Space Marketing Group

whitespace.png

White Space Marketing Group's website design pairs very nicely with their logo. If the design wasn't inspired from it directly, then it was an accidental coincidence.

They have a tall logo, so their large header and split navigation works. The site design consists of a grid layout for their marketing services and case studies, while there are plenty of elements that are boxed with a border that remind you of their logo.

Overall a website design that thrives on consistency and layout.

20. Raka Creative

raka.png

Raka has a great font pairing going on their website. They are using a serif font for their headers, "Roboto Slab", and a sans-serif font for their body copy, "Roboto". This makes their content easy to scan and easy to read.

They have also created a bunch of custom icons and graphics that use a colorful color palette, while maintaining consistency.

21. Tone

tone.png

Tone knows what their ideal customers are looking for, case studies. They have a slider with a slow zoom on each background image that gives off a slick feel.

Their slide-in navigation is smooth as well, the font, borders and spacing make it easy to use once it's brought in.

However, the blog is one of the coolest agency blogs out their. The listing page showcases each author instead of the posts featured image, which is a unique take you won't find everywhere.

22. PR 20/20

pr2020.png

The PR 20/20 website showcases their main offer on every page. "The Marketing Performance Blueprint", a real book written by the founder of the company Paul Roetzer.

Their primary call-to-action has a consistent design and placement, but a different message or quote depending on where you navigate to on the site. 

23. Web Canopy Studio

webcanopy.png

Web Canopy Studios uses animations on just about every page for an interactive experience that is really engaging. All that accompanies on-page sub navigation that sticks on scroll instead of the main navigation to help you get through their pages.

The one thing you should take away from their site though is the pricing page. If you are struggling to put up pricing or want a more interactive way for customers to view your pricing you might want to implement something like their slider that has a fun message when you max it out.

Industry Websites Using Inbound Marketing

24. Insivia

insivia.png

Insivia's website has a personal touch that introduces you to their team on almost every page, building a trust factor with their visitors. They have also used some nifty video tricks on their homepage and their services page that are worth checking out.

Insivia has really set out to be the kings, or queens, of video and it's apparent with their "Insights" page. All of their insights, at least recent ones, are videos making their content quick and easy to digest.

25. Naveego

naveego.png

Naveego uses a very interesting color scheme, with the primary colors being blue and green, but with a yellow call-to-action in the header and yellow color for their submit buttons, it's not a standard color palette. That said, it pops.

Their Data Quality Product page uses a video that you can click to play to explain their product, but if you don't watch it they use gif's as you scroll down the page to showcase how their product works.

The Data Digest blog has a great tabbed filter system as well that is very clear from a user experience stand point. 

26. LeanDog

leandog.png

LeanDog has great readability on their site pages. They use a dark enough gradient on their background images to back the white text readible, plus their font-size on site pages is almost 26px. Using a larger font-size is good if your content is short-form.

For reference, standard font-size is 16px, which you can find on their blog. Using a standard font-size for long-form content is a best practice you can take away from their website.

27. Mike Walsh

mike-walsh.png

Mike Walsh uses a parallax scrolling effect on their homepage which is slick. The site uses a transparent header on the sub pages, minus the blog, to keep a consistent feel and uses an on page sub navigation to keep the primary navigation clean and simple.

28. Bedrock Data

bedrock.png

Bedrock Data keeps it simple, with plenty of white space and a big bold colored calls-to-action. Their integrations page is pretty standard for what it is, but that's a good thing. It's very easy to follow and simple to find what you are looking for.

29. Afflink

afflink.png

Afflink uses a split header to make it easy to find their phone number and log-in, which is a key part of their user experience.

Their trust bar is appealing and eye grabbing as well, just by adding that orange section with the arrow pointing to the right they changed what could be a throw away section to one that demands your attention.

The case studies section is simple at the top level, but well excecuted providing you with the information you want to learn more. The inner page of the case studies is well done and showcase the impact they had for their customers.

30. Habitat for Humanity San Francisco

habitatsf.png

Habitat for Humanity Greater San Franscisco has the best slider in terms of styling and usability I've seen. It's clear from the outset what each slide is going to tell you about provides you a link to click for the infomation you want.

31. Mote 

mote.png

Mote has some amazing images on it. This is great because it's what is going to make you want to support an aquarium. Images speak louder than words in this case.

Aside from that, their website is huge. It has a ton of pages, which is why having that search bar in the navigation is essential.

32. Murphy & Prachthauser

murphy.png

The Murphy & Prachthauser website is designed to help visitors find what they are looking for. With a live chat feature that is apparent, but not intrusive and a styled box on the homepage to direct you to the right information they do a great job in terms of site usability.

33. Hot Springs Pools & Spas

hot-springs.png

Hot Springs Pools & Spas has a large header to accomodate their large logo, but it isn't a waste of space. Having the whitespace above the primary navigation directs the visitors eye to the phone numbers and account information in the top right, which is where the money is.

34. Window World

window-world.png

Window World has a nifty interactive graphic on their homepage to send you to the right page for siding, windows, doors, and gutters which is fun and interactive, but it also showcases their services at a glance.

35. CivicPlus

civicplus.png

CivicPlus blog design showcases their 5 most recent posts in a slider and provides you with a link to read more. The rest of the blog listing page uses a grid style and a load more posts feature that means you never have to leave the page to go to "page 2".

HubSpot COS shout out, if you click the "Grade My Website" call-to-action you go to a landing page that utilizes a microcommitment to enter your "website URL" and a pop-up model.

36. Lesco

lesco.png

Lesco, a company in the HVAC and plumbing industry, uses a real photo as the background for their hero section on every page. Which is a big deal for this industry. There are plenty of websites in this space that use stock photos instead of real ones.

They use a drop down selector to direct you to the information you want, and does it just under their hero section. Based on color and size it ends up being the primary attention grabber.

37. Transline Group

transline.png

Transline Group has one of the most interesting navigations I've come across. When you click on a navigation item you get a pop-up filled with that items sub navigation plus images.

Another nifty design element is on their "Who we are" page. They have a timeline of their milestones that you can scroll across from left to right, definitely check it out if you are struggling with an idea on how to use a timeline on your website.  

38. Closet Works

closet-works.png

Closet Works takes a unique approach to online free consultation forms. Instead of having a link you have to click through on their navigation, they have their form in their navigation. On first page load the form opens up and you can click to close it, but the visitor can still click to open the form again.

39. Gebauer Company

gebauer.png

Bebauer Company strays away from the straight line breaks between content sections in favor of slanted ones. You can find content sections with the angled line break through out the site for a consistent feel.

40. Bizible

bizable.png

Bizible has a clean consistent look across all of its page, but I want to direct your attention to "Request a demo of Bizible Today" section at the bottom of the page.

Having an interactive form like that where it's looks like a MadLibs is extremely creative. 

41. Catapush

catapush.png

Catapush has an animated graphic on their homepage that draws your interest and shows off what you can do with their product.

From a design perspective they chose to go with a ghost button and a solid button side by side to put the emphasis on the one they want you to click, while providing you a secondary option for usability.

42. 4Sleep

4sleep-1.png

4Sleep has a fun background video that entices you to keep watching, an interactive graphic on the homepage to showcase the features of their mattress, but what you need to look at is their product page and checkout process.

For anyone who has built a HubSpot website you know that it's not built for e-commerce, so 4Sleep's checkout process is pretty smooth.

43. Tout

tout.png

Tout has a simple color scheme and navigation that, for the most part, brings you down the page with the expection of "About" and "Blog" each of which have their own navigation.

The impressive part of the website, however, is the video background and client bar that fill the screen at all screen sizes. Plus, the animated gif down arrow just in case you feel stuck or there isn't more content on the page.

44. Origami Logic

origami-logic.png

Origami Logic does a good job at using white space in their design, but the way they decided to do their navigation is noteworthy.

Instead of using a drop down navigation, they coupled a traditional top level navigation with a slide-in expanded navigation. Each site page has sub navigation on it that take you further down the page, which is included in the expanded navigation.

45. LanguageLine

languageline.png

LanguageLine takes their logo and applies it to all of their calls-to-action to create a consistent feel across the website. Coupled with a solid color palette of a bold blue and yellow, their calls-to-action are eye catching.

46. Pondurance

pondurance.png

Pondurance has content that slides in as you scroll down the page and animated numbers that count up to keep the site interactive. However, the best part of the website is the "Incident Response Request" button that gives you the emergency number when you need it. It's the most eye catching element above the fold, as it should be because you don't want to have a visitor searching for that number if they really need it.

47. The Entrust Group

entrust.png

The Entrust Group has a simple design outside of it's extension drop down navigation, but their site pages have a side navigation to help you navigate as well.

The real gem of their website is the "Learning Center". The overview section makes it easy to see what they have to offer despite not having much in terms of bells and whistles, it's just clean and simple.

48. Game Ready

gameready.png

GameReady takes smart content to the next level, by asking who you are when the site loads and giving you the opportunity to change your user profile at anytime in the header. While that's not much in terms of design styles, that is serious usability design to give the user the most relevant content for them.

49. CareATC

careatc.png

CareATC uses big bold messaging to get their point across. The size and weight of their headers make their content easy to scan and present an easy to follow information heirarchy with various font weights between headers, sub headers, and paragraph text.

HubSpot COS shout out, the blog listing page actually is composed of 3 seperate blog listings each with it's own column and a tab system to switch between blogs at anytime. 

50. People Doc

 peopledoc.png

People Doc's homepage is impressive with a video embedded in the laptop shown in the hero section. Their subpages are equally as impressive with a consistent layout and navigation links that change color based on whether the background is dark or light.

51. UrbanBound

urbanbound.png

UrbanBound's software pages have a great design with layout that showcase the software on a laptop to give you a peek under the hood before you request a demo.

HubSpot COS shout out, in the footer they have a "Latest Blog Posts" section that shows one post at a time, but scrolls down through their recent posts.

Now it's your turn...

Use these websites to create a visually appealing website of your own, whether you are an inbound marketing agency start-up or trying to implement inbound marketing on your website on your own.

Have any specific web design questions?

Or maybe you just like one of these website in particular

Either way, leave a quick comment below.

I'll be around to reply to comments and answer questions...

So go ahead and ask a question and leave your thoughts here or download our Inbound Marketing Performance Checklist to make sure your website is looking good too :)

Bonus Content: Free PDF Inbound Website Performance Checklist

blog author

Hunter Liptrap

Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.