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.TheDash.com
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.ModernThemes.net
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.Credencys.com
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
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).V76.com
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.Conclusion
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.Patrick McNeil
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.
Read Next
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne
15 Best New Fonts, August 2024
Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…
By Ben Moss