What is Flat Design?
Flat Design is an approach to User Interface (UI) which reduces unnecessary elements and heavily “stylized” graphics such as shadows and glossiness, in favor of a clean, crisp look. It’s an approach that is the basis of both Google’s “Material Design” guidelines which are evident on Android-based Mobile Phones, as well as in Apple’s iOS style, and even Microsoft’s Windows 10 design principles.
In the past, UI designs would often “borrow” a lot of elements from the real world, making the interactive on-screen components such as buttons and toggles look like real life switches and buttons by using shadows, 3D illustrations, and glossy reflections. This would add a lot of clutter and graphical elements to a web page. Today, such designs look dated and clunky.
This isn’t just about aesthetics and fashion; Flat Design makes it easier to use a website and ensures your users click on and interact with the most important parts of your page. But it does require you think very clearly about what is most important, and reduce or remove things that are distractions. This is particularly the case because a website needs to be “responsive” today – it must work for both a 27-inch desktop screen, a 9.7-inch iPad and a palm-sized mobile screen. To scale up and down effectively, you need to focus on what matters and remove what doesn’t. That’s the fundamental logic behind Flat Design.
Luckily, if you are using WordPress as your Content Management System for your website, implementing flat design is easy to do. The following are recommendations for a Flat Design WordPress Theme. You’ll notice that just because the design is minimalistic and “flat” it doesn’t mean it’s boring. You’ll also see that you can customize these by changing the colors and fonts to match your desired branding.
Here are some key things to keep in mind with flat design, particularly when you go to edit the theme to work with your design, or when you add any icons or graphical elements to the page.
- No Three-Dimensional Effects: 3D might be good for movies (or maybe not), but “flat” implies your design should avoid this right off the bat. Remember the old Windows 95 style dialog boxes and “wizards” with buttons that looked “raised” through the use of shadows and bevels, which animate to seem like they were “pressed in” on mouse click, or looked “half-way” pressed when you hovered over them with the mouse. Hovering isn’t even possible on a touch-based interface. So use three-dimensional elements very sparingly.
- Avoid making it “Look Like”: the technical term for this is “Skeuomorphism” – where you try to make a virtual element look like a real world thing. If you have a book on your site, you try to put it on a “bookshelf,” if you want to allow users to turn an option on or off, you make the control look like an actual light switch. This is a dated and quaint approach, which makes your site look old and even confusing. Consider that the “save” icon used to be a representation of a floppy disk. For millions of people, particularly Millennials and younger users who’ve never seen a floppy disk in the real world, the save icon makes no sense.
- Don’t go Faux: using lots of textures to make the background look like paper or stone, fake glossy effects to make page elements stand out, or lots of layered groupings will make the page look cluttered, distracting and busy. Opt instead for clean icons and simple graphics, or use good quality photos to add depth to your page. Keep it simple and clear, let photos and videos do the talking.
With that said, here are our top five WordPress Themes that feature a clean, customizable Flat Design.
Recommended Flat Design WordPress Themes
The Activello theme is minimalistic and simple in terms of look-and-feel, but very deep in terms of the features it offers. While it is primarily a blog theme, it supports eCommerce through built-in WooCommerce support. It is also built on Twitter’s Bootstrap framework for CSS and HTML, which means a web designer familiar with that toolset can easily update the theme to meet your specific branding requirements. It has an integrated slider for displaying featured images and supports infinite scrolling to prevent the need for users to click to see more. The later can result in more “time on site”, removing the need for “click to see more” content. This combination of features also means the theme performs well on mobile and tablet devices. All this and it’s free, which means you can install it directly from WordPress.org via your WordPress Admin panel.
In terms of both graphical minimalism and functional simplicity, Milo fits the bill. It doesn’t have a lot of bells and whistles, which means your content is the main thing featured by this theme. Because there aren’t a lot of visual elements in the theme, it’s particularly useful for photographers and other visual artists. The design won’t compete or clash with any of the content you place on the page. Milo is a responsive theme so it plays well with mobile and tablet layouts. If you’re looking for a layout which won’t get in the way and your needs are simple, Milo is a good option.
On the high end of the spectrum, both in terms of elegance and price, you’ll find the Como theme. It features a “builder” tool, which allows non-technical users to customize the layout and structure without code. The theme features some interesting effects and interactive elements without falling prey to the trap of skeuomorphism; this lets you add a lot of visual interest to your site without clutter. For example, photos can be layered on top of each other; on click, the one you’re interested in gets brought to the top of the pile. This shows depth without the use of a lot of extra graphical elements.
The Mountain theme is a great single page design, with continuous scrolling and parallax effects, which scrolls photos at a different rate than the page, creating a depth without shadows or extra graphics. However, as is the case with a lot of “effects” parallax is already starting to feel a bit dated to us, having peaked in popularity in 2015. That’s, of course, a matter of personal taste, and you can disable the parallax effect if you prefer. However, the single page scrolling makes the theme effective as a business information page, and it looks very professional. This would be a good theme for a professional services business like accountants, law firms and freelancers of all stripes.
Pinecone works well as a theme for agencies and photographers, as it includes a well-structured gallery. However, we think it also works really well for restaurants and other service industry sites. It offers a number of sidebar configurations, and the blog pages feature a clean layout and nicely sized fonts for easy reading. The design also offers a built-in slider and some gallery features, making it a pretty complete set of tools. The clean layout means you can easily customize it to meet your brand guidelines.
We’ve highlighted the above themes both as recommended for use, but also to give you a sense of what flat design generally looks like. You’ll have noticed that they still provide visual interest and interactivity, but keep the extra parts to a minimum. You’ll naturally have your own taste and desired look-and-feel, so there are many more themes out there to choose from, both for free at the WordPress.org directory, as well as at premium sites like Themeforest. Just keep these basic flat design principles in mind while evaluating the theme, before purchasing or installing it.
If you need help with installation, we have a step-by-step guide for outfitting your WordPress site with a new theme here. It walks you through both free and premium theme configuration.
If you’re in the market for a new WordPress host, check out our list of best WordPress hosting providers here.