We all love a good satire. It’s one of the highest forms of political wit and frequently bites at targets that would otherwise be unassailable.

Case in point: Maentis’ Universal Unbranding project, an amusing reworking of famous logos and emblems.

Of course, it’s pretty hard to find a satirical logo collection that doesn’t feature an obese McDonald’s logo, but Maentis has included some slightly more sophisticated political comment too: the Rolling Stones’ North Korean tour referencing freedom of speech; the disintegration of the € and the Red Bison are also very good.

Gillette may need to adopt Maentis’ variation on their logo if they keep adding blades to their razors, and I’m sure the Windows logo will be familiar to users of Microsoft’s operating system.

We were hoping to put together the LOGÖ to discover who it referenced, but there was a screw missing.

Which of these parodies is your favourite? Which brands are crying out to be satirised? Let us know in the comments.

8 Downloadable Web Design Courses – 90% off!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

The post Web Design Trends found in Digital Agencies & Creative Studios appeared first on Treehouse Blog.