3 essential design trends, November 2014
Trends are the sort of thing that come and go, we all know that. At times we even start to consider the fall of a brand new design trend because we know the trend will eventually be a thing of the past. And yet, in the moment of the trend it would seem that it perfectly represents the time. I have been writing about web design trends since 2007, and I can honestly say that every trend seemed appropriate for the time. That is to say, trends never feel forced, they always feel great, like a perfect form that seems to represent the best that we have to offer. And this brings us to today, not tomorrow, or yesterday. What is the state of trendy design as it stands today. I want to briefly look at 3 different visual design trends that are the “go-to” styles right now.
Semi flat design
There tends to be a consensus that pure flat design has passed its prime time in the spotlight. We have entire showcases of flat design, we have mastered the art of flat shadows and we of course have mountains of beautiful (yet often times generic and without purpose) templates to select from. In my opinion flat design can be really gorgeous, but also really generic when used in its purest form. I don’t think I am alone in this opinion, given the natural way this trend is progressing. It would seem that the pure flat design phase really was an overreaction. But through that cleansing process we gained something really great — a new found appreciation for minimalism. As we move forward, and this is where we stand today, we find flat design at work but with a dash of realism, dare I even say hints of skeuomorphic design. Let’s look at some examples to see what I have in mind.
Google Material Design
Perhaps the most powerful example of this is the Google Material Design specification. Through the style is essentially flat in nature, we find hints of depth subtly woven into the specification. In the example above we can see that the buttons have a subtle shadow to them. We can vividly see how this hints at their functionality. Some might call this skeuomorphic, which I suppose it is, but more importantly it is an affordance to what the element does. It is something to push or click, and the shadow hints at that.
This web utility for creating online dashboards blends flat design has hints of flat design elements. The primary style at work here though harkens back to an almost classic Apple look. It certainly feels more skeuomophic, if only due to the heavy use of gradients. But the technique is anything but random. Note how all of the key elements are treated with this more dramatic style. This pushes those key elements to the foreground. Interestingly the actual dashboard interface uses this same style, but in a much more subtle way. I challenge you to consider how flat and non-flat design styles can be blended to achieve clear and effective communication in your design.
Images as backgrounds
A simple design element that seems to be entirely out of control is the use of large background photos. In my obsession with web design I have observed this style at work on thousands of sites. I could probably write an entire book on the topic. The biggest learning point I have noticed is to have a purpose. Don’t just throw in a photo because it looks cool. Which is actually easy to do with sites like Unsplash.com giving away mountains of insanely yummy photos. And while I agree the results can be really pretty, I think the photos often fail to communicate something meaningful. This is actually a reason that many themes up for sale look so appealing. They rely on gorgeous photos that bring the life to design. Until you replace it with your photos, then all the sudden the design tanks. In many ways it was built on a flimsy idea. This is akin to the pig that made his house out of straw (my kid’s obsession with the three little pigs is on my mind). In contrast, we want to build our house out of brick, so it can stand the test of time, content and purpose. Let’s review a few samples that accomplish just that.
This lovely example would seem on the surface to follow the trend blindly. Except for one huge detail that transforms this into a powerful demonstration of how to really use this style. The background photo not only fills the background, but the content is part of the foreground as well. By showing one of their themes displayed beautifully on an iPad it is implied that their themes are responsive in nature.
In this example we see a similar approach at work. Though in this case I suspect the foreground and background images were merged together. All the same, the results work in the same way. It comes off as a single image. And more important than that, both elements (foreground and background) communicate important information. The background informs us of the context in which the app is used, and of course the foreground shows us the actual app. This is anything but meaningless or random.
The hipster style is another trend that is at a turning point. The hipster style is a close cousin of the two previously discussed styles. Most often it relies on flat design elements, background photos with a dash of mixed typography (multiple fonts used together) and some decorative elements. Since so much of this article is about the evolution of design styles it makes sense to consider how the hipster style is evolving. Let’s dissect a few examples to see how it is being put to work.
Coffee beans delivered
Here we see the hipster style in full force. It even has a logo that feels plucked from one of the many hipster style logo templates that are so popular. On the one hand it is a trendy design, giving it a fresh and modern feel, which happens to reflect in a positive way on the brand. But I think there is something bigger at work here. By reflecting a hipster style they set themselves apart from the many mega brands. In a way they are embracing their smallness (which happens to be a classic marketing strategy by the way).
In other situations the use of a trendy style is purely an effort to stay relevant. The fashion and personal care industries have long embraced this approach. In this case, a trendy hipster style site simply says we are alive and aware of where the world is. We have a product that we believe fits in, and we are positing it to be hip and trendy. I guarantee if the world changed tomorrow and a new style emerged, they would eventually redesign the site to fit the new paradigm. In some cases, trendy design is just that, trendy.
I think the overarching theme, or trend here, is that meaningful and intentional design will never be outdated. Styles and trends may come and go, but we can easily move along. In so many ways the real goals never really change, though the brush we paint them with does.