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 62 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.
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 62 inbound marketing website designs, listed in no particular order.
Without further ado, learn what makes a good website from these inbound marketing websites...
Because has a very image and case study driven home page layout, that looks phenomenal. Back-to-back fixed background images always look pretty cool.
Their blog is rather extensive, so their filters work with HubSpot topics and not only essential but really easy to use and understand.
HubSpot COS shout out, Because has a hamburger menu that works on scroll and uses HubSpot's native navigation menus, which can be challenging to pull off, but well executed here.
When you land on Square 2 Marketing you'll see a captivating background image of a person holding a red flag. It's imagery is perfect for their message "Conquer Your Sales and Marketing Goals".
I also love their call-to-action in the navigation. They let visitors know up front how long a marketing assessment will take. From a conversion rate optimization stand point that's genius as it addresses a visitors anxiety and removes a perceived time-barrier.
Nectafy has a bold orange as their primary color that really pops off the page. Electing to use that color as their hero background gives their site a bold, clean, minimal feel.
However, you should note they don't use that orange to provide their content. Instead, they use by comparison a more subdued blue that is easy to read text with.
They are also doing some really cool stuff on their homepage that deserves recognition. The first content section under the hero has an interactive and live calculator that tells you the amount of visits and leads you need your website to generate to meet your customer goals.
When Vital's homepage loads up, you're treated to a visual display of colors, shapes, and fonts in a slick animation that feels amazing.
Their color backgrounds and call-to-actions are all gradient backgrounds to match their logo, which is a nice touch of consistency and branding.
But Vital's best work is their navigation and they know it.
They use a mega dropdown menu that is user friendly. It opens on hover and isn't finicky. The "What We Do" section is color coded and makes it easy to work through their plethora of services.
Lynton takes a different approach to the current call-to-action design that we are all accustomed to at this point. Instead of making their call-to-actions look like a button, they have gone with a simple underline that when hovered over, the underline border works its way around the text to form a box.
Plus, their service pages are incredibly user friendly with their sticky on-page navigation to take you to where you want to go.
IMPACT has taken a new approach to their homepage for an inbound marketing agency. It's no secret that in the Inbound world IMPACT's blog has been popular, now it's their homepage.
The bright blue sidebar call-to-action definitely sticks out and the orange submit button contrasts that. Really drawing your attention to it. It also doesn't waste any space because it sticks on scroll.
They have also made a decision to go away from the trend of sans-serif fonts in favor of a serif font, 'Merriweather', that gives their site a unique feel in the inbound website world.
HubSpot COS shout out, their blog listing has content sections with other call-to-actions in them separating posts.
SpinWeb does a great job on executing their corporate video on their homepage. They use it as their video background with a clear play button above their header to actually play the video in a popover that has the sound.
Their use of their primary red color is well done in their backgrounds. Instead, of using a solid red color, they have a transparent red overlay over a background image. Which if you want to use red as a background color is the way you have to do it. Kudos.
Speaking of background images, their background images aren't stock photos. They are actually pictures of the people who work there.
The color gradient background Media Junction uses on their site pages are a thing of beauty. The transition of blue into purple with a green call-to-action is easy to look at and allows the call-to-action to pop off the screen.
Their content has a smooth fade in effect on scroll that adds visual intrigue as well and look particularly appealing in the content sections with text and images.
Who said you had to be in the United States to be on this list? Nobody. The Zeeland Family is in Finland and right off the bat they hit you with a bold yellow accompanied by a creative set of graphics and I love it.
Their graphical style and choice of color are carried out throughout the entire site and from a visual stand point set them apart.
I'm also a huge fan of their font family, Gilroy, which looks good in all font weights and is easy to read on the blog.
Another site from outside the United States, Denmark this time; is Form Agenda. They have plenty of visually appealing elements to gush over, but take a look at their individual case studies.
They have laid out their case studies in a way that guides your eyes through the information one block at a time with their use of color and layout.
It doesn't hurt that they have awesome images for each case study either.
Pay attention to Lean Labs header as you scroll down their site. They do a great job of downsizing the logo and menu to maximize readability. Plus, the logo and menu colors change between black and white based on the background color of the content your currently looking at.
I also love how large their navigation items are once the slide in menu is open, which has a smooth slide in animation.
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.
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 do 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.
OverGo Studio uses some subtle hover animations to get you engaged in using their website. On their homepage the logo tilts, the testimonials translate up just a tad, the HubSpot Impact Award tilts, and 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.
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.
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 people don't know to click the menu bar, but it's 2018 now. I think most people, especially people in their ideal customer base are aware of how to use a slide-in navigation.
Nextiny avoids having drop down navigation, which can get messy, by having on page sub navigation for their services. It comes complete with icons, which I personally 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.
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.
protocol 80 has a nice color palette that starts with their 4 icons on their homepage. The rest of the graphics on the site carry the same 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.
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. It also happens to be semi-transparent. This helps open up the viewing space for the homepage to allow them to tell their story.
MedEd Web Solutions does a great job showcasing what they have to offer.
Have two products / offers? You can split your hero section and let the visitor navigate to the right choice 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".
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.
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 palette, while maintaining consistency.
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.
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 on the site.
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 is their pricing page. If you are struggling to create a pricing page 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.
Naveego's 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 GIFs 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.
Bedrock Data uses a color scheme of 4 colors effectively. For the most part you'll only see 3 of the colors at a time as they use a lime green or yellow as accent colors.
HubSpot COS shout out, in their footer they have disguised a contact form with a non-traditional layout that you need to see.
CivicPlus has a consistent look through out their site pages based on their company and product colors. As a company they have 6 different colors in their color scheme, but because each of them are tied to either the company or a specific product it works and makes the site incredibly user friendly.
Their 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 that collects the most recent posts from their 5 blogs.
HubSpot COS shout out, if you click the "Measure My Website" link in the footer you go to a landing page that utilizes a micro commitment form to enter your "Website URL" and a pop-up modal to collect the rest of your information.
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.
Their purple and green complementary color scheme is implemented well and suits their business.
The font pairing they choose works well too. By using a sans-serif font, 'Playfair Display', for their headlines they put a visual emphasis on them without using an extra bold font.
Origami Logic has a slick hero section on their homepage. The animation of the text, phone, and graphics on load is impressive in itself, but then there's a slider inside of the phone.
Their call-to-action design with a tabbed corner for origami makes them stand out while still being on brand and matching their logo. This is my favorite part of their site and hope it doesn't go overlooked.
The best part of the Pondurance 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, which is a huge part of usability.
GameReady has some of the best homemade stock photos you'll see. Each image does a great job showcasing their product.
Then there's the actual product images, that really stand out due to how minimally designed the rest of the site is. They have plenty of white space and black text to make their red products and logo grab your attention.
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 hierarchy with various font weights between headers, sub headers, and paragraph text.
HubSpot COS shout out, the blog listing page actually is composed of 3 separate blog listings each with its own column and a tab system to switch between blogs at anytime.
EnvisionRX has a well designed blog listing page that is easy to navigate. The filter option works well here because their topics are focused.
HubSpot COS shout out, what's neat about the filter is that it also changes the feature blog post in the hero section of the listing. Most HubSpot blogs won't do that.
Clum Creative has an excellent color scheme that makes each call-to-action pop, with their bright green color.
They also incorporate two primary colors, blue and yellow, into their layout where they need to break up their content. I love the bold choice of color here. It's a unique choice in that their logo is either white or black, each color in their color scheme was created for the web.
Clum also uses subtle animations on the text while you scroll down to keep your interest on their site pages; which is a nice touch and adds to a sense of consistency.
Stringers Society is the king of this list when it comes to using the language your audience uses, "Don't Sleep On It Bro".
In terms of design, their feature posts above the fold have a different layout than the rest of their posts, adding to the perceived value. In terms of usability, having a video play icon that really stands out in the list view is a great idea.
RhythmOne has two distinct audiences, advertisers and publishers. When you hover over the call-to-actions in the hero section of their homepage you'll notice the hover background color is different. Pages related to that audience segment will match that color, which makes the site easy to follow from a visitors perspective.
Their homepage has an incredibly appealing hero section with interactive lines and points that is pretty addicting to play with actually, but captures their message "Making Connections That Matter".
The entire site has a clean look with content breaks and large colorful headers that make their pages easy to scan.
Databox has some incredibly appealing images on their site, some illustration, some product mock ups, but they all work together to show potential users what they should expect.
Their homepage header uses a typing feature that grabs your attention. It's not just for show, they use it to really define what their product is capable of in an interesting way.
Virtaskic has fun images aimed at making a visitors business day not suck so hard. They all have a sense of humor to them.
The choice to use a stylized font for their headers and sub-headers makes their website feel unique, making the sans-serif font choice for the body text appropriate.
HubSpot's gradient background colors look amazing, especially the green to blue ones.
You'll also find their theme of concentric circles on almost every page, which adds to their coherent feel despite having so many pages.
On their software pages their screenshots expand past the edges of the page to give you a close look at what their software can do, without taking up large amounts of real estate on the page.
Apptus has some nifty elements on their homepage. Starting with their hero section which has a typewriter feature that changes the first line of text in the H1, plus a responsive video playlist nested inside a laptop! The tab system used to show off their product does a great job showing that you can click inside each tab to change the image by using color and hover effects.
If you take a look at their customer case studies, you'll notice everyone's logo is the same grey color, until you hover over it. That's how it's done.
HubSpot COS shout out, their menu is pretty sweet. It's not quite a full on mega menu, but it's pretty.
Teazzers header line is visually captavating, as it should be. The color choice and the font, Bungee Inline, feel perfectly on brand.
Visually balancing their color scheme of purple, teal, and brown is done well. Directing your focus to the areas it needs to be.
Tilting the tea bags in the section under their hero is both thematic and visually intreguing. Kudos.
agileSI™ uses my favorite color scheme, in black, white and red, and utilizes it to make their call-to-actions pop. I like how the red was derived from their logo and they elected to use that over the orange for the cyber security industry.
Each page has the same visually distinct hero section with an angled cut in the top left that gives that site a cohesive feel.
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 also use 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.
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.
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. By adding the 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 executed 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.
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 and provides a link to click for the information you want.
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.
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.
Hot Springs Pools & Spas has a large header to accommodate 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.
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. It also showcases their services at a glance.
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.
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.
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.
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.
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.
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.
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.
People Doc's homepage is impressive with a video embedded in the laptop shown in the hero section. Their sub pages are equally as impressive with a consistent layout and navigation links that change color based on whether the background is dark or light.
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.
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 websites in particular.
Either way, leave a quick comment below.
I'll be around to reply to comments and answer questions...
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 :)