Essential Elements of a Design Agency Website Layout (with 30 examples)

Today, I’d like to cover some really crucial tips to constructing a great template for your company. Design labs and agencies either work with set clients or tend to release a few products and maintain support from customers. Thus your website is intended to sell the skills your team can offer designing pixels for the world to use.

Let Your Purpose be Known

Prospective clients or even visitors browsing your website would like to know what you do right away. This can be accomplished in many scenarios – large blocks of text or illustrations work nicely. Many of the newer designers will include a subtitle underneath the heading such as “we build mobile apps”. Short, sweet, and to the point is the name of this game.

When a visitor is interested in learning more about your company it’s important they can find this information. Assuming your navigation is setup above the fold you can hold more detailed info on another page, possibly with media included like video or images.

wireframe sketches for web ui

Another alternative is to display bits and pieces from your portfolio. A jQuery-based slider or image gallery slideshow would be the perfect element to include onto your homepage. It passively gives away both the type and quality of work your agency does. This strategy works well to draw attention even if you limit 2-3 work samples.

Include Social Profiles

I think it goes without saying to tack on a small contact form or at least offer an e-mail address somewhere. But many people don’t consider setting up official profiles for their companies on the many popular networks. Twitter, Tumblr, Forrst, and Dribbble are a few examples where you can gather a large number of followers.

Graphic designers are also more open about sharing their work. You can find dozens of social networking icons available in download sets. Chances are good you can find a set to match your blog theme, maybe even choose between a few! This may seem like a small step but over time you slowly gain attention and these profiles become a new means of communication and marketing for the business.

Unique Branding

When brainstorming ideas for your agency brand try to think of some bold concepts for digital symbols of communication. Something that will stand out off your website, possibly carried from page-to-page so each visitor will remember your name or logo. Many illustrators will use custom vector art or hand-drawn mascots in the header, footer, sidebar, or wherever they can fit.

Digg unique branding - office logo

Although to setup a unique brand you don’t need to be a skilled artisan. Even small details such as a wacky color scheme or textured navigation bar can stand out. If and when visitors return to your website they should remember these bits and pieces which stood out previously.

Another good option is displaying screenshots from your apps or portfolio works. Points are awarded to the most creative and unique ideas among designers for captivating an audience within the first few seconds of pageload.

Dynamic Page Content

Web browsers have come a long way towards unifying the general use of webpage scripts. Code written in JavaScript or particularly jQuery is accepted by most of the mainstream browsers. You should feel encouraged to use this library of functions to build custom animation and Ajax content.

To throw out some ideas you may consider building a dynamic sidebar widget loading your most recent blog articles. Every agency should at least setup a simple blog to keep track of updates and recent happenings within the company. But you shouldn’t feel required to let these posts eat most of your homepage. Similarly you may try out the newer jQuery UI libraries for building animations in your header, navigation, footer, etc.

NYC Headquarters for Tumblr

With Google Analytics you can actually track stats for which browsers your visitors are using. This provides you with a golden key to judge how much of your website could rely on dynamic content. Or even better, how to gracefully degrade all dynamic effects when they can’t be displayed properly. This is most prevalent with outdated browser software and visitors on mobile phones/tablets.

Incorporate Many Design Styles

Instead of trying to focus on a single niche for your agency website I recommend mixing up a bunch into one layout. Designers are always trying innovative things to stir up competition a bit. And when you aren’t limited to solely “minimalism” or “tabbed content” you can actually include both, and many more labels to boot.

If you have any favorite websites try to put together a list of features you really enjoy from each of them. Specifically from design labs and agency websites you hold in high esteem. There is rarely anything new under the sun except rehashed ideas in a new setting. Designers are part of this process by absorbing inspiration from many different works and creating a single design from this perspective.

Agency Website Showcase

To give you an idea I put together a small gallery of some really creative agency websites. You can take away very unique concepts for your own design by studying the best of the best. Combining inspirational design with practical knowledge will ultimately lead you to creating one really awesome website!

TM Design

TM Design

Sullivan NYC

Sullivan NYC

ultranoir

ultranoir

Kuryłowicz & Associates

Kuryłowicz & Associates

Column Five Media

Column Five Media

Robinizer

Robinizer

Imaginista Branding Inc.

Imaginista Branding Inc.

Almanac

Almanac

2pxBorder

2pxBorder

Yoke

Yoke

Sentel

Sentel

Chimp Chomp

Chimp Chomp

Tractorbeam

Tractorbeam

Pixel Circus

Pixel Circus

Mark Boulton Design

Mark Boulton Design

Rain Interactive

Rain Interactive

FOMA

FOMA

Kitchen Sink Studios

Kitchen Sink Studios

Bluecadet Interactive

Bluecadet Interactive

Playground

Playground

Duncan/Channon

Duncan/Channon

Movmt Studio

Movmt Studio

South Mountain

South Mountain

Paramore

Paramore

Major Tom

Major Tom

Squidface & The Meddler

Squidface & The Meddler

RainyDay Interactive

RainyDay Interactive

RGA Comunicação

RGA Comunicação

Visual Republic

Visual Republic

2Create Studio

2Create Studio

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments