Agency websites are a strange paradox. Agencies are all about representing, communicating and promoting brands, its the bread and butter of their in-house talent – yet one of the biggest challenges for an agency is: how do we represent ourselves? How do we distill down all the creative and technical talents and vision of our own brand?
The agency website is a vital part of the sales cycle, especially when starting out. It serves as the first touch point with a prospective client, where they come to see previous work, and get a sense of the ethos and working style of the agency.
An impressively executed agency website means more work with higher calibre of clients.
So if you’re starting up a new agency, or looking to refresh your online presence, you’re in the right place! We’ve scoured over the web to bring you these 30 stunning examples of impressive and creatively realised agency websites. Beautiful designs, exquisitely executed. Read on!
1 Bold but detailed.
The CP+B website balances the boldness of their design with fine grain details. Its the best of minimalism, but without the occasional sense of emptiness and sterility that can accompany that design aesthetic.
2 Make Your Website Human.
Background hero videos are often employed simply as a backdrop to draw the foreground into focus. The HLK Agency website takes a different tack, and makes brilliant use of the human face and its gaze, to create an instant and intimate connection with their audience. Underlining their tagline “Authenticity Is What Drives Us”.
3 Why So Serious?
Agency websites are a vehicle for expressing the values and aesthetics of a brand. Not only what they produce, but what they would be like work with. The Famous agency from Belgium is fun And funny. Its hero header reads: “FAMOUS IS A FAMOUS CREATIVE AGENCY FAMOUS FOR USING THE WORD FAMOUS FOUR TIMES IN ONE SENTENCE”. Don’t be afraid of humour.
4 An Agency is as good as its people.
The venerable Wieden Kennedy’s Amsterdam branch do a feed style design, combining examples of the agency’s work, with blog articles and profiles of their staff. This not only marks them as a modern agency with a modern mentality (a.k.a native to the social platform), but the staff profiles highlights the calibre and breadth of their staff. An agency’s capabilities are as good its staff.
5 Bullet-Proof Social-Proof
Animade lets their client list do the selling. It’s understated mind you, not brash and bright – but they’ve got logos and quotes from some very serious hitters. The landing page design very plainly communicates what the agency specialises in and, juxtaposed with the logos of their previous clients, provides social proof to back it up.
6 Think Different
In Agency world it pays to think differently. And your website should communicate that to prospective clients. The Lawler Ballard Van Durand website has an eccentric but on-the-pulse creative aesthetic, riffing on the typographic design of newspaper headlines, mixed with some of the irreverent GIF humour of the early web.
7 Invite Exploration
There can be an antagonistic tension between explaining the full philosophy, mission and style of an agency, and just showing the actual work they’ve done. This Is Dare, a London based agency, circumvent this tension with a clever use of text and hyperlinks. They have an unfolding and increasingly in-depth company mission statement, that can be explored to whatever degree the audience wishes.
8 Walk On The Wild Side
Sydney’s creative collective Glue Society keep it simple but unforgettable, with a very plain design and (at the time of writing) this compulsively watchable short: https://vimeo.com/8026411.
9 A Picture (Can Be) Worth A Thousand Words
Hum are a design studio. And so, as a good design agency, their website is intensely visual. They tell the “story” of their work, the style of their agency and their capabilities largely through imagery. Similar to “#1 Bold But Detailed”, Hum manage to balance clarity and focus in their images, with auxiliary detail (the way a frame from a Wes Anderson film has a clear central focus, but framed with rich and intricate detail).
10 Color Chameleon
UsTwo are a digital product design studio. Creating engaging digital products (something that we care very deeply about here at Qwilr HQ!) is about imbuing those products with individual personalities and distinct brands. UsTwo’s website has an elegant scroll based effect, transitioning the background colour of the page to match the colour scheme of the products they showcase. The effect helps to emphasise the breadth and uniqueness of the products they are producing, how each has its own distinct character and tonal palette.
11 Push the Medium
Nclud are that rare agency whose rhetoric on their capabilities (merging the artistic with the technical etc.) is fully matched by the scope and quality of their execution, and their website is no exception. Even the state change pushes the medium of the web to a place I’ve never seen it go before. Its a wonderful and original detail for the interactive experience. Do yourself a favour and check it out!
12 Anticipation Maximisation
Redrep.tv make clever use of the fullpage video on their splash page, featuring a man desperately running up stairs to meet a beautiful woman. Only with the looping of this video, it forms an infinite-staircase MC Escher like loop. The anticipation is palpable.
13 Elegance Through Geometry
Werkstatt call out the vertical grid system that underpins their site’s design, situating the content in geometric space. Its a subtle but effective antidote to the “Fields Of Empty Whitespace” that minimalistic content-first design can sometimes engender. Speaking of geometry, Werkstatt’s menu icon animation and loading state also make beautiful use of vector shapes.
14 99.99% Perfect
I think we can all agree that perfection in design is an ideal to pursue, but not an achievable reality. Form and function have a certain friction between them. That being said, I think Huge Inc comes as close you can get to design perfection in their website. It balances an energetic and detailed aesthetic, with a total focus on content. The execution manages to balance clarity of communication, within a very engaging aesthetic medium.
15 Lego Mentality
Metalab make interfaces. They build their own products and do work for some serious players as well: Slack, Disney and Coinbase to name a few. What makes their site sing, and I think this is true of their design approach in general, is simplicity, focus and friendliness. Their particular aesthetic brings to mind, what I think of as the “Lego” mentality. Something colourful and friendly, and as a unitary medium, very simple to comprehend – but in aggregate, capable of creating amazing and powerful structures.
16 Reclaim the GIF
While the concept of the flashing GIF might bring to mind Web 1.0 circa 1999 (see: http://www.warnerbros.com/archive/spacejam/movie/jam.htm) – Talk PR appropriate this notion, along with some clever masking, to excellent and apt effect in their site header. PR is about putting energy behind a topic or business and getting the world talking. And Talk PR’s logo (in all its flashing GIF-iness) perfectly evokes and this sense of excitement and energy.
17 What Is The Matrix?
I’ve seen some amazing WebGL experiments since browser vendors started supporting and encouraging it. But to date, I haven’t seen this nascent tech integrated as a native and natural extension of the web’s visual lexicon. Homunculus’s site comes about as close as I’ve seen. The “scrunching digital paper” hover effect on their work is absolutely awesome.
18 Joy In The Craft
I did a lot of research to compile this list, and looked through a lot of agency sites – but none exuded quite as much pure joy in the craft of design and development as Ghostly Ferns. The design aesthetic, like the site, is full of fun and precise details, “easter egg” hover states, and cute touches.
Design agencies take note, if you are pitching yourself as a creator of brands that people can connect with on an emotional level, check out this site for a How-To on Fun-And-Friendly.
19 Packaging Counts
One of the surprisingly difficult challenges in designing an agency website is working out the right approach for project / work cover images. The work itself might be full of amazing visuals and content, but you need to condense all that quality down into a single tile to represent the project on the “Our Work” type page. Furthermore, there are considerations of how that image will interact with images from other projects.
For design based agencies this problem can be especially acute. US, Denver-based studio Mast, have done an excellent job of crafting beautiful cover images for each of their work projects, that all cohere in a synergistic way on their work summary page. And so they should, since their agency pitch is “We love to tell unique stories by pairing beautiful images with relevant messages”.
20 Big Precision
Sometimes the “big and bold” design aesthetic can backfire. Coming across as brash, or adolescent in its energies. Film house Film Gerberei’s website makes it work, striking a fine balance between precision and its big, confident typography and full screen imagery. The strong right-angled geometry of the container shapes, maintains a sense of orderliness through the content.
21 Case Study Centre Stage
A well written case study can be a powerful thing. Its an opportunity to communicate not only the calibre of clients you work with, but more importantly the process of collaboration, invention, iteration and delivery of impressive outcomes. Brian Hoff Design puts the case study front-and-centre of their site. Telling the story of the project, while showcasing their beautiful work.
22 Contained Energy
Deux Huit Huit, a web design agency from Montreal, nail a lot of aspects in their website. But I think the defining and original feature of their site is their rather kinetic use of visual layout and the page itself. They’ve got their slowly pulsating fullscreen footer, their angle swiping page transitions, and their breakout, overlapping design showcases. These are all aesthetic moves I think could have become distracting or overblown, but these guys have got it just right in their palette, sizing and pacing. Bravo!
23 Mad Genius
Similar to Web GL as mentioned in #17 on Homunculus, I think the use of SVG animation has been in 9 out 10 cases largely gimmicky, and more in the vein of Check This Out, than as the correct mode of expression for an idea or emotion. The Fieldwork website however knocks it out of the park with their Rube Goldberg Machine (see: xxxx) header animation. It captures not only the sense of Mad-Genius-At-Work, but also manages to exude fun AND reliability. A result I think of the even and regular pacing of the animation and the colour palette. (PS: And bonus points, because its even mobile friendly!).
24 All In For Image
Billing themselves as a “design-led creative agency”, DBLG from London, go all in for images on the landing page of their site. Its a real design challenge to get this kind of approach to work without looking cluttered or overwhelming with visual information – especially factoring in the wild card of device size and orientation – but DBLG have got it working pitch / palette perfect.
There’s a paradox in building an agency website. The longer you’ve been in business, the more impressive and deep your back catalogue of client work the more difficult it becomes to communicate all those achievements. Its a challenge of information density. Instrument’s website (probably my favourite agency website of 2014) surmounts this challenge expertly.
The central navigation schema feels very spacious, with a clever obfuscation of the full-page project cover image, revealed only on hover. Instrument have a number of client work showcases, each with fairly deep and rich content. Using fullscreen imagery and generous padding and line height for the text, gives a sense of ease and space around all their work (which is truly excellent as well!).
26 Deft Touch Of Movement
The Bakken & Baeck site makes subtle use of video to bring its product shots to life. By keeping the device largely static in the frame, and using the focus of the lens to draw attention to the screen itself – the product shots are alive, but static enough to easily absorb the design of the interface.
Full disclosure: one of the founders of this agency, Johan Bakken used to run a site called StyleBoost. This is the site that made me want to become a designer + engineer, and without it, possibly I never would have ended up founding Qwilr. Hence: I am a huge fanboy of Johan and his work. #disclosed.
27 Picket Studios
“Write as straight as you can” Ernest Hemingway told F. Scott Fitzgerald. Picket Studios takes this notion to heart, and applies it to the design of their website. Eschewing the image heaviness of most design & development agencies, Picket Studios instead focuses on clear and concise written communication.
Sometimes all you need is an unadorned sentence.
28 Tone and Color
The website for industrial and space designers StokkeAustad nails the “Scandinavian” aesthetic, with clean grid lines for the content and harmonising, generous white space. But I think the particular technique that makes this site work so well is that the product photography, typography, and in the in-situ photography of the studio and its founders, all resonate with a cohesive tone and colour palette.
29 Mission Statement Menu
Code and Theory’s site approaches the structure and presentation content in a rather innovative way. First: instead of a traditional menu system, the navigational structure is couched inside a company manifesto and mission statement. This is a pretty bold move – especially considering the depth of content on the site. But it works perfectly. The navigation communicates how the agency itself conceptualises the value of its offering.
Second: there is the presentation of client work. Similar to #25 / Instrument, Code and Theory have a deep an enviable back catalogue of impressive clients and projects – but instead of the traditional grid-list of projects – Code and Theory have gone for something much more akin to a blog or news site. Detailing case studies on the creation and launch of its projects.
30 Math Is Beauty, Beauty Is Math
Dataveyes, who specialise in data visualisation development and design, do a wonderful job of encapsulating their service offering with the aid of animation. The animations capture the essence of their work: taking a chaotic system of data points and distilling it down into a comprehensible and meaningful visual form.