Web Design Trends found in Digital Agencies & Creative Studios

Getting Started with Grunt

The process of launching your own design studio or web agency is very time-consuming. There is a lot of preparation required to create notable branding, structure the website, and organize a captivating portfolio. Advancing trends in web design have pushed us further down this path where new digital agencies have a larger pool of ideas to draw from.

In this article I want to point out just a few trends which have emerged in various studios & agencies around the world. These design trends mostly focus on the website itself, showcasing prominent example works and maybe a little about the team. As you check out more websites over time you can learn some of the best methods for implementing similar trends in your own layout designs.

Fullscreen Backgrounds

This is possibly my favorite design trend emerging over the past couple years. CSS3’s background-size property allows frontend developers to easily create fullscreen backgrounds. All you need is a large image which can scale nicely to fit any larger desktop resolution. It is a beautiful method for capturing attention while also branding your company’s website.

whiteboard studio design agency creative background videos images

Many designers already know about Whiteboard and their amazing layout. Each content panel is broken down into sections with differing backgrounds. Each section will span the entirety of the page while keeping the fixed header navigation at the top. Many of the backgrounds actually use videos of the team working. It is an extremely creative way to showcase a company which handles such a large client base.

agency fullscreen background image website playground inspiration

Another more simple example can be seen on Playground, Inc. which only uses a fullscreen image fitted at the top of each page. This is usually how I like to see agency websites because capturing attention above-the-fold is quite significant. Plus all of the lower content is written on a clean white background, so it is easier to digest.

You’ll notice the layout is also split up vertically between content sections. Each block will span the entire width of the page and keep the background images at full-width, too. We are lucky to be using HTML5/CSS3 specs where creating fully-scaled background images does not require a lot of extra code. But if you are looking for a solution with greater browser support I would recommend the jQuery plugin Backstretch.

Vector Graphics

Web designs are often made to capture attention and stick within the mind of your visitors. Vector shapes & characters are very memorable and often delineate a hidden/obscure meaning behind the company name. MailChimp is one such example using a fictitious mail carrier monkey as the logo.

dangerdom illustration studio website portfolio

Taking a look at some alternatives, Dangerdom Studios is a very colorful website utilizing these exact features. Many of the pages have vector shapes and icons scattered around bits of content. There is no one single branding effect aside from the overall color scheme. These colorful shapes almost define a style for the work quality and they certainly exude a level of confidence in the studio itself.

envy labs studio website robots vector brand logo design

The design team at Envy Labs also has a similar take on vectors. Their homepage displays a wonderful illustration with satellites and a rocket ship. These elements were chosen to further expand their branding, which is a futuristic robotic pair of antennae. Envy Labs is a really beautiful example of connecting vector graphics on the page into the overall company branding.

Fixed Navigation

Lots of designers will object against fixed navigations. These can get in the way when reading content and not everybody requires access to the navigation at all times. But for many website layouts the fixed navigation can be a wonderful interface feature.

hicks design website portfolio side navigation fixed

An example from Hicks Design actually uses a vertical sidebar fixed nav menu. This is fairly uncommon in comparison with other examples like Tone Agency, keeping the navigation right at the top of the page. But great designers are never afraid of pushing the envelope to find new and exciting ways of creating interfaces.

The fixed navigation trend often works best when the homepage includes parallax scrolling. This will generally break down into 3-5 various sections of content which can make the browser scrollbar tiny. Having that navigation fixed on the page allows readers to quickly scan your webpage details without needing to scroll back and forth.

Single-Page Parallax Scrolling

The topic of parallax website layouts is another branch in the tree of studio/agency design trends. Now there are plenty of other similar websites that can effectively use parallax scrolling. But online portfolios and digital companies make better use out of the features because there is simply more content worth displaying altogether.

teamgeek portfolio studio agency fixed heading navigation links

One of my favorite parallax websites Teamgeek implements this effect perfectly. When there are smaller tidbits of information to display it can be easier writing this together on a single page. Granted the Teamgeek layout is quite advanced using transition effects for the navigation highlights. But it is also a great starting point to get ideas and see how others are incorporating parallax design into their own websites.

design studio sputnik website parallax scrolling effect

Sputnik Creative is one other cool example which uses a similar type of parallax navbar. The links do not display right when the page loads, but only after you have scrolled a little ways down. This technique means you can provide heavy branding right at the top of the page for new visitors without removing extra space to fit a navigation.

Mobile Responsive Layouts

The mobile responsive trend is huge but not always a requirement. Granted in this day and age you really should try to support mobile users wherever possible. But I have found many non-responsive agency/studio websites that are also beautiful and catch my attention quickly. This really comes down to personal preference if you want people experiencing your site naturally on a smartphone or tablet PC.

twogether web design agency studio responsive mobile

Spend lots of time digging through responsive website layouts to see how others are doing it. Twogether is one such example and you can see how the images and navigation bar naturally collapse within a smaller browser window. Before jumping into your HTML/CSS code, determine how you want the website layout to appear on a mobile screen. There have been articles written about mobile-first responsive design suggesting a deeper look into media queries for handling desktop and mobile resolutions.

grafik branding studio inspiration mobile navigation toggle menu button

Another brilliant example on Grafik actually collapses the navigation into a three-line dropdown menu. This technique is really easy to create once you understand the CSS(or jQuery) rules behind it. This navigation trigger menu button is also very common within Android/iOS applications. Following such a responsive trend will allow for a more natural experience from mobile users who are familiar with using native applications.

Dynamic Animations

One final UI/UX trend I have noticed is greater advancing web animations. These are not simply animated page items or Flash containers. But natural jQuery animations or even CSS3 transitions placed on common website elements. Navigation bars, anchor links & button hovers, lazy-loading images, along with many other new ideas which have been emerging rapidly.

engage interactive yellow website animations effects screenshot

The website for Engage Interactive is really crazy and provides a great presentation. The top navigation links appear initially to be embedded into the page background. As you scroll the nav will stay fixed, and then animate a bit smaller to fit snug into the top of the page.

Also when clicking between page sections you will notice a loading gear icon. This animation makes the whole website appear to run Ajax-style loading which is more sleek and definitely more impressive. There are some other cool animation effects within the page contents and you have to see these for yourself to understand how much this impacts the user experience.

oopm agency website animated content boxes webdesign

Some other nifty animations can be found on OOPM Creative. The most notable effect appearing on all their pages would be the sliding content blocks. When you scroll down on any page the lower contents will animate nicely into place. I am not sure exactly how this is accomplished, but it looks beautiful and it does make the website stand out among many others.

Use these animations sparingly in your own site as to not annoy your visitors. By studying other similar websites you can learn where animations tend to enhance the interface vs detract or even distract from the page content.

Final Thoughts

In today’s modern era it is possible for a small team of 2-3 people to successfully launch their own digital agency. This could be focused on design, development, marketing, copywriting, or any other alternative services. I like to research professional design trends within agency/studio website layouts just to see how the market is evolving. I do hope this brief collection of ideas can invigorate some designers when creating new insightful projects online.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Jake Rocheleau

Jake is a writer and user experience designer on the web. He currently publishes development tutorials and articles related to startups and user interface design. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

Comments

11 comments on “Web Design Trends found in Digital Agencies & Creative Studios

  1. This is a really good article. Makes me feel as though I need to up my game with my web design skills based on the quality of work on show in this article.

  2. Great inspirational article, but you make it seem as though fixed menus only work on paralax websites. What about every single one page website or websites with a lot of content below the fold? Fixed menus are a lot better than those nasty ‘back to top’ links. And is the menu in the way so people can’t read the text? It’s easy to hide it just outside the window with just a small label hanging out.

  3. Hi..
    Own Digital agency ? Couldn’t agree but this article seems to be convincing. Would not be bad to try it with friends sometime…
    Etastar