9 amazing agency websites made in Webflow
Check out how 9 creative agencies have used Webflow to build their websites, attract clients, and share their work with the world.
Every company turns, at one point or another, to an agency to execute creative concepts. That’s a testament to the agency model’s enduring power to help overcome organizational shortcomings. But more importantly, it’s a testament to the creative powerhouses working within agencies, whether they’re tiny two-person teams or international entities with thousands on staff.
So it’s no surprise that when agency designers want a mix of efficiency and creative freedom, many of them turn to Webflow to bring their ideas to the web.
Here, in no particular order, are 9 of the best agency websites built with Webflow (so far):
1. Greenwood Ents
The Greenwood Ents team did an incredible job of capturing the human element in their site design. Placing a friendly face in a clean layout creates a level of trust that can be difficult to achieve with copy and product screenshots alone. And they back up that human feel with a friendly font stack and fun, icon-based illustrations.
Greenwood’s homepage features a rotating headline that quickly communicates services including design, development, and analytics. A crystal-clear “Hire Us” call to action leads straight to a contact form that gathers more than just your name, email, and phone number.
While more fields can mean more drop-off, kudos to them for collecting relevant information in the contact form, so the team has valuable information on hand before reaching out to potential clients. After all, a contact who’s not willing to fill out a few extra fields might not be ready to work just yet.
I genuinely thought that the icons in the “What we do” section would link off to relevant pages with in-depth service descriptions and example projects, but they don’t. If it were me building this, I’d consider turning these into tabs with quick descriptions, and maybe links to deeper information.
The use of whitespace in their site design leaves ample breathing room and leads you through from the icons to the various pricing levels. It did feel a little odd to me that these arrow buttons in the lower right open the contact form. Typically, a link with an arrow indicates that you’re going to a new page or to more content. In this case, adding a landing page for each pricing tier with a curated selection of relevant work and a tailored form might make more sense, and drive more conversions.
Website design lessons to learn from Greenwood Ents
- You can add a human touch to your website simply by including team photos
- Make sure your site has a clear purpose for visitors — and that that purpose is reflected by a single, prominent CTA
- Keeping web standards in mind can make the difference between meeting user expectations — and frustrating users
2. Super77
The team over at super77 does incredible motion design and animation work. The focus of this site is the beautiful content they produce, from their 2017 Show Reel to their work page, and it’s easy to lose an hour or two just watching their work in awe. As a motion design and animation studio, their goal is to get the site visitor to see their content, which in turn will drive conversions and leave a lasting impression.
Their Work page is visually striking, and highlights their featured work at the top of the page. Each thumbnail links to a detail page where they showcase their video work, describe the project, and sometimes even share some of their process.
The key lesson to learn here is to always drive your site visitors to the content you want them to see, and to remove any distractions between them and that “aha!” moment.
Website design lessons to learn from super77tv
- Keep your site visitors focused on your best work through careful curation and thoughtful design
- Remove anything that might distract your visitor from diving into that best work
- Make it easy to access more info if desired, but don’t let it get in people’s way
3. ThomasARTS
ThomasARTS does an excellent job of introducing their fun and playful brand with a video background in their site’s hero section. They also give you numerous ways to navigate around the site and find the content you want. Ensuring that level of accessibility while still being creative can be a difficult balance to strike, but their team did so by including several methods of navigation.
Notice that they have a navigation bar at the top, as well as arrows to navigate left, right, and down. Then they also added in a hamburger menu in the upper right, which actually zooms out of the page and reveals that you can navigate through the site by clicking the arrows or the nav links. This provides every visitor with what could be a really fun way to explore the site.
Of course, complex, multidimensional navigation can be fun — but it can also be frustrating for someone who has a clear goal to fulfill. The lack of one clear call to action could leave many visitors confused and ready to bounce.
But it’s possible that the team isn’t focused on driving conversions from their site. They might actually prefer that visitors explore and get to know the brand before committing to a collaboration — and if that’s the goal, job well done, ThomasARTS team!
Website design lessons to learn from ThomasARTS
- Your website doesn’t have to be focused on conversion — as long as something else is picking up the slack
- Providing multiple paths to navigate around a site can create a fun, immersive experience — but it can also distract
- People typically appreciate having one clear path marked for them
4. Presentation
In sharp contrast to ThomasARTS, Presentation cuts to the chase by clearly describing their company, services, and location right in the first paragraph of the site. From there, they lead you right into their work examples with a CTA to “scroll.” I’m enthralled by the slanted background images that sit behind their work examples.
Their services page is just as clear, concise, and descriptive as their homepage hero section, and throws in a charming graphic depiction of their formula for performance:
I also enjoy their unique hamburger menu, which reveals the word “close” upon opening the menu.
Website design lessons to learn from Presentation
- Clarity is king. The web is a diverse, confusing place, so clear, straightforward experiences prevent cognitive dissonance and help people get their tasks done.
- Thoughtful graphics can communicate a lot in a little space.
- Irregular background imagery and accent colors can enliven what might feel like a “boring, homogenous” layout into something uniquely branded
Disclaimer: I worked on this site about two years ago with the team over at B12.
The site has changed a bit since I last saw it, but it still features beautiful imagery, immersive videography, and clear descriptions of what they do and who they are.
71 Degrees North is an international video production house, and their site focuses on their work, as well as the people behind that work. Their homepage provides a short list of project types, which serves as both a summary of services and an easy way to dig into their work (in case the background video in the hero hasn’t sold you yet).
Somewhat ironically, this gives significantly more real estate to the people behind the cameras, which does a lot to humanize the brand. On the other hand, this choice deemphasizes their video work, which feels somewhat less user-centric, as that’s probably job 1 for any potential clients visiting the site.
That said, the button-like section dividers on the homepage strike a bit of an off note. Clearly meant to delimit the various sections of the page, their visual design implies that they’re buttons … but they’re sure not.
On the copy front, I have to say I admire the way their descriptive homepage copy tells you who they are and what they do, but also adds a bit of implied social proof and expectation-setting:
71 Degrees North creates content for clients that seek start-to-finish workflows and impeccable production value. Our ability to execute productions across the globe has led to work with celebrities, top artists and international brands.
After reading that, I know not only who they are and what they value, but also whether they’d be a good fit for me to work with!
Website design lessons to learn from 71 Degrees North
- Immerse visitors in what you do right off the bat. For a video production company, a video-focused hero makes perfect sense.
- Content that’s about you not only can, but should be crafted to set client expectations too.
- Straying from user expectations can mislead site visitors. If you design something to look like a button, people will expect it to work like a button.
6. CREA International
Crea International calls themselves “the Italian physical brand design company.” We’re not 100% sure what that means, but the work those words introduce stands for itself.
Crea’s “about” page provides an excellent example of how to lay out a brand identity and company structure on a single page. This statement sums up what they do in one sentence: “We transfer the brand value through a perfect combination of digital and physical space, pioneering innovative solutions to deliver superior retail service design. “
I’m not personally a fan of scroll jacking, but Crea International uses the technique just about as well as it can be with the scroll interactions on their homepage.
Website design lessons to learn from Crea International
- If evocative but difficult-to-grasp statements like “We are empathy concept designers” are a good fit for your brand, be sure to back up those bold statements with concrete examples of what you actually do. Inspiration is powerful, but most potential clients are more interested in results.
- Remember that your homepage’s H1 headline is a goldmine for SEO, so terms that no one searches for are typically best left to pages you’re less focused on driving traffic to.
- Be careful with scroll-jacking. While it can be used to great effect, as here on Crea’s site, it can also irk some people as it takes control of the site out of their hands.
7. Heco Partners
I absolutely love the homepage of this site. It’s original, interesting, and beautiful. Their H1 says it all with “We turn information into experiences people care about.”
In that single line, Heco captures what every web designer and developer seeks to do, and makes it their own.
Heco’s site also takes a unique approach to the long-scroll format of their site design, without leaning on a navigation bar. Rather, they have in-context links that drive you to individual case studies, which you can then click through using the arrows in the lower right.
Delivering a long-scroll experience that holds people’s attention can be difficult to do, but Heco makes it work with soft transitions as you scroll through the page.
Want to take a page from Heco? Learn how to create a background scroll interaction like this in Webflow.
Website design lessons to learn from Heco
- Make the most of your homepage headline. While Heco’s probably isn’t driving a lot of search traffic, it does clearly and succinctly convey what they do, and it aligns well with what clients want: creative that their audiences will care about.
- Pay close attention to your Collection Template Page (i.e., pages generated by the CMS) designs. Because they’re templatized, these pages can easily feel generic. Heco overcomes that with creative use of color fields, thoughtfully cropped images, and text callouts.
- Remember that your site is itself an embodiment of your creativity and execution — a portfolio piece people experience before they even get to your portfolio. So make it amazing!
8. Salt
Salt does an excellent job of showcasing their work by putting it front and center — right after you see their latest big accolade. This approach is very appealing to potential clients as they can immediately see that you’re proud of your work, and that you’ve garnered some high-profile clients. Not to mention awards.
One of the most powerful aspects of Salt Branding’s site is their case study library. Case studies offer a great opportunity to show how you’ve worked with past clients, what problems you identified, and how you arrived at a solution.
The vast majority of agency sites I’ve perused point to their “work” section, where they showcase a product with some images and maybe a sentence or two about the work. Breaking down your previous projects into case studies (with your client’s permission, of course) allows you to tell potential clients not just what you did, but how you work with and impact other businesses.
A clean grid of previous clients’ logos (prioritizing the most prominent brands) again builds confidence in potential clients.
Want to know more about how Salt uses Webflow?
Website design lessons to learn from Salt
- Make your portfolio more than a pretty screenshot or three. Every project is a story, and by sharing that story with potential clients, you can do so much more than say “we make pretty screens.”
- Prioritize your most prominent clients and the solutions you built for them. Saying that brands like AAA, Adobe, and Coca-Cola trusted you for their creative projects goes a long way toward earning other potential clients’ trust.
- Highlight any awards and other forms of recognition your work has earned. Great work means a lot. Great work that’s been recognized by relevant groups for its greatness means a whole lot more.
9. Assemble
Assemble highlights (literally) what they do right from the start with their H1 headline: “Hire an elite production team to create your next video project.”
Then they start building trust with a list of brands they’ve worked with. In between, you get two clear CTAs designed to appeal to different visitors: “Start project” and “Instant quote.”
The latter leads to one of my favorite aspects of the site: an instant quote calculator that’s absolutely incredible (and really fun to play with):
Website design lessons to learn from Assemble
- Not to beat a dead horse, but: when writing your homepage headline, focus on clarity, just like Assemble does. Bonus points for starting it with an active verb, which helps it work as a kind of call to action!
- Offering two different CTAs in your site’s hero section can help engage different types of visitors. Assemble uses two buttons to appeal to both those who are ready to get started, and those who want to see how Assemble might fit into their budget. Smart.
- Did you notice the downward arrow and “Scroll to discover” in the hero section? Affordances like this can drive people to check out more of your site, which is especially handy when, as here, the site looks fairly complete without scrolling.
What does your agency build with?
If you haven’t discovered the power, efficiency, and creative freedom Webflow offers, give it a try. It’s free to get started, and on our Team plan, your whole design group can share one dashboard, create templates for style guides, and more.
Waldo Broodryk: Web designer and Webflow evangelist. Follow him @waldobroodryk
Originally published at webflow.com.
