Semi flat designThere 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 DesignPerhaps 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.
TheDash.comThis 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 backgroundsA 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.
ModernThemes.netThis 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.
Credencys.comIn 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 hipsterThe 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 deliveredHere 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).
V76.comIn 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.
ConclusionI 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.
Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.