Creative studios are becoming much more popular with such an interconnected world of digital design. Large-to-medium sized companies are found all over the world, coupled with freelancers and small teams who launch their own personal studio. Thus competition is fierce and understanding how to design a captivating website is pivotal to success.
I’d like to share a few tips with live examples explaining how to create well-designed studio & agency websites. It shouldn’t matter whether you produce videos, websites, mobile apps or something else altogether. The purpose of a great studio website is to articulate a wonderful portfolio with details on the company and services provided. Although content structure is a big part of good design, graphics also prove to be quite enticing in the realm of agencies and studios.
The best interfaces take branding far beyond just a logo. Even discussing the subject of a logo can get very detailed – is this pertaining to the logo text or graphic? Perhaps both? I feel that a solid branding is recognizable even if you’ve only visited the site once or twice.
Logos with recognizable graphics or icons are perfect to sew throughout the page. But don’t forget that something as subtle as the color scheme can have a deep effect on branding. When everything on the page comes together as one large entity it feels like the composition is much more assertive. This assertive brand design is something you should work towards using both graphics and content.
The website for Underbelly is one of my personal favorites and has always stood out among a sea of homogeneous agency websites. Their branding can be found in the footer and header bar which scrolls along with the viewer. But looking deeper into their color scheme it matches the website’s branding(a whale) by sticking to blues. Some are darker, some are less saturated, others are vibrant and quickly noticeable.
Looking through the site I’ve found Dribbble shots and company products embedded with the Underbelly logo. For me this only reinforces a deeper recognition of the studio and how it appears in my mind. Solid branding should be memorable and it tends to be most memorable when it’s found all throughout a website.
Vibrant Page Contrast
Contrast is perhaps one of the most important factors of readability. Text and color schemes depend on contrast when colors are paired together. Light blue text on a white background is going to be quite a Jeopardy challenge for most people to read.
Studios are meant to showcase creative work, even if the work doesn’t revolve around design(such as writing). But no matter what the studio produces their website should still be phenomenal. Some of the most frustrating webpages I’ve visited have lacked consistency with contrasting colors. The best ones, while including many other features, knew how to lay out content in an easy-to-read fashion.
Ramotion is a design agency which focuses on mobile apps & games. The website is very simplistic with only a few different pages. Yet each page has a very consistent theme leaning towards minimalism. All of the content blends nicely, feels well-controlled, and behaves exactly as you’d expect.
If you need contrast between page elements consider an effect like Elegant Seagulls. Moving down the page various sections are split up with different background colors. Text is colored based on the background which may be dark or light. This may seem like an inconsistent idea but tying back into branding it all seems to work quite nicely.
Typically I don’t suggest graphics are a necessary part of portfolio design. There are plenty of minimalist layouts that work perfectly and offer the right amount of content exactly as it’s needed. But there is something to be said about icon design in a website – especially if the icons match to a consistent style or theme.
If you have the ability to design custom icons or use a free iconset make sure the icons add something to the content. Icons are fantastic but they can be tiresome when they don’t add anything constructive into the page. This doesn’t mean they always need to be used as a diagram – just placed elegantly so they provide a semblance of practicality.
The homepage for Duolingo uses plenty of different icons which all seem to follow a similar style. Some icons are placed in buttons while others are used like vector graphics to emphasize certain paragraphs. I really like this design because it uses such a wide variety of icons yet they all seem to work together in unison.
Stick to icons that work and have a purpose. If you feel that icons would just be a nuisance then ignore them and stick to a more traditional layout.
For a creative agency you might be able to get away with more outlandish interfaces. Navigation is a consistently useful piece to any website, so it must be handled carefully. With that said I think memorable navigation can add into a website’s branding and cause a link in the mind of visitors. This can lead to thought patterns like “what was that one website…” which often drives more traffic in the future.
A very popular example is the use of fixed sliding navigation bars. I notice this effect on the vast majority of studio websites today. It seems to be extremely popular with studios that only have a few pages since all the links are accessible from anywhere on the site. It’s also a good excuse to have the company logo scrolling along with the viewer.
Getting into more strange territory, have a peek at the website of Purple, Rock, Scissors. Their navigation is controlled by a hidden sliding hamburger link in the top-left corner of the screen. The menu itself takes up the entirety of the page and uses oversized link text to garner attention.
This may not be the most traditional option but it certainly captures my attention. Looking at the internal pages you’ll notice a step-based progress indicator over to the left. This can be used as a mini-nav for dynamically scrolling between page sections. I would normally expect this effect on parallax websites but Purple, Rock, Scissors has combined single-page scrolling with multi-page navigation.
Complex ingenuity is not always a great choice when designing a simplistic layout. But if you have the passion and willingness to try something out I say go for it.
Focusing on minimalism is relatively easy in theory – much more difficult in practice. The idea is to remove superfluous elements so as to create a streamlined browsing experience. Minimalist agency websites often place a direct focus on the portfolio work as opposed to extra graphics or animation effects.
As you can see from the above screenshot Yalantis, not all minimalist sites are plain white. Granted this is always an option – but even minimalism can use big fullscreen backgrounds and colorful page sections. However once you start browsing through the portfolio you’ll notice that it feels bare and perhaps lacking in aesthetic appeal. But whatever’s missing in aesthetics is made up for in ease of use and content structure.
Finely is another design studio that uses a little more than just plain white. Granted their layout is primarily grayscale, it still works and runs smoothly. This is a crucial descriptive element to minimalism in order to place a focus on content. By minimizing distractions you can draw attention onto whatever you see fit.
I’m sure most web designers already know about this trend because it’s grown into such a colossal subject. Fullscreen backgrounds whether photos or videos are absurdly common amongst creative agencies. There’s nothing wrong with this trend and I actually like how it works in most cases.
The best websites using fullscreen backgrounds are also responsive like the Typing… homepage. Every page on their website uses a fullscreen background which is fluid and naturally adaptable. Since most of the website’s content is easily digestible, background photos add into the composition rather than distract from it.
Another example can be found on Yummygum which uses fullscreen backgrounds on the homepage and other content areas. I specifically like their design because it’s so clean and thorough. It feels very professional without coming across as the stereotypical “professional business” style of the late ’90s.
One difference with Yummygum is on their internal page section style. Each heading uses a fullwidth image but it does not scale the entire page height. So outside of the homepage each header is limited to a top section of the page. This allows more content to stream above-the-fold and become more accessible. No right or wrong answer in any case – just a difference in design choices.
These ideas are just a few trends that have permeated throughout modern agency and studio websites. If you’re currently building something for yourself these examples should provide a nice pinch of inspiration. But even if you’re just curious or interested in digital design I hope this article can offer some depth into the realm of creative web design.