We've released an updated and modernized version of one of our earliest landing page sets in Thrive Architect. The new set is called "Flat 2.0" and in today's post, you'll discover the pages in this set as well as the many benefits of flat design.
More...
What is Flat Design?
Flat design is a design minimalist design philosophy. It emphasizes the use of simple, monochromatic shapes. Flat design can be best understood by what it isn't, though: it try to be realistic.
Here's an example of a realistic (also called "skeuomorphic") design for a switch element in a user interface:
Even though you're looking at this on a 2-dimensional screen, this switch design tries to imitate a physical switch that you might encounter in the real world. It uses shadows and gradients to create a 3D effect.
Here's the same switch in a flat design style:
Its a much simpler design style. But it's no less recognizable as a switch. This is a key to flat design: it conveys the same meaning, in a simpler form. Another example of this can be found in this beautiful illustration by Dribbble user Facundo:
So, we've got skeuomorphic (realistic) design on the one hand and flat design on the other. You may prefer one design style over the other. That's completely subjective.
What's not subjective is that one of these styles is better for the web than the other.
The Benefits of Flat Design
Flat design is perfect for the web. And while it has evolved in many ways over the years and goes by many different names now, the flat design philosophy is still the basis of almost every modern web design and user interface design you'll find online.
The reason is simple: flat design is faster.
Because flat design is simple and minimal, it literally uses less data. For example, the flat "switch" image above is about half the file size of the realistic counterpart. And if you design a web page using flat principles, it will require fewer lines of code than if you create a more realistic look with gradients, shadows and so on.
Another advantage for us is that flat designs are easier and faster to modify. This was one of the principles behind this quick-to-edit landing page set we created for Thrive Architect. A flatter, simpler design means you can customize the look of a page in fewer moves.
We are big believers in speed. Both in terms of loading speed for websites and in terms of rapid implementation as a way to work.
Is Flat Design Old Fashioned?
The term "flat design" was a buzzword in web design a few years ago and has since been replaced with various new design trends, such as material design (and variations thereof) and a more recent reappearance of gradients all over the place.
However, almost every web design trend in the last few years has been a derivative of flat design. Because of the unique advantages flat design offers for websites, the basic principles of this design language are as valid now as they ever were.
The Flat 2.0 Templates
As the name implies, our new set of templates follows the flat design philosophy and adds a modern twist. The set is vibrant, attention grabbing and easy to customize.
In the set, you'll find a homepage template, all the pages needed for a list-building funnel and a video sales page.
All of these templates are available right now as landing pages in Thrive Architect for WordPress.
Note About "Conversion Content"
In the video, I mention that you can add a link to a piece of conversion content on the Flat 2.0 download page. The concept of conversion content comes from this post about the 5 types of content you should publish on your blog.
How do you like this new set of pages? Let us know by leaving a comment below!
Awesome as usual Shane!
Thank you, Andrew!
Thrive Themes – the gift that just keeps on giving! As a more ‘mature’ member of Thrive Themes, I can’t thank you enough for all your input. Basically all I know about all things pertaining to websites etc. I have learned from you guys. Once again an BIG “Thank you”
Thank you, Geoff! I’m very happy to know that we have been able to provide this service for you. 🙂
Good stuff Shane, Thanks. Most important question for me is, where do you buy your shirts?
*shirt
Singular.
It’s literally only one shirt and I only use it for these videos. It was made by “Jackie’s Tailor” in Bangkok, Thailand. It’s a pretty good shirt, but I say that as someone who doesn’t know the first thing about shirts.
Brilliant. I love the contrast that flat-design for everything except the buttons can bring.
Thanks, Kevin! Glad you like the look! 🙂
Awesome post as always Shane! Any idea when we’ll get custom fonts added back in?
It’s interesting to see how web design used to evolve with operating system design… Windows XP brought the glass and gloss designs with it. Now web design has influenced the current flatter OS designs.
LOVE the latest update to Architect more than anything though! I’ve already implemented the fancy dividers and the custom menu in some of my sites.
Having the hamburger menu on the desktop allows me to comply with paid traffic regulations while still hiding it enough not to create obvious leaks on my landing page.
Still, need an “Auto Reveal On Second Visit” option added to the Content Reveal element… That’s the one feature Optimize Press has and holds over you for creating VSL pages that have time-delayed Add To Cart buttons 🙁
That’s a really interesting point, yes. I’d say that the relationship has flipped, even. Windows 8 and beyond has taken design queues influenced from web design, more than the other way around, I think.
Wow, you were fast to the punch with the new features. 🙂
Glad you liked them. I’m really proud of the menu element.
My best invertion for my page. Tk
Wow. You just articulated the word I was searching! Over the years I’ve intuitively stumbled upon the idea of using color and icons for page design. For some reason I’ve found it to be more professional because of speed, contrast and branding. But now I know that I’m not alone in thinking like this.
Thanks for your comment, Thomas! It’s great that you had a light bulb moment from this. 🙂
Speed Kills.
1. Your obsession with speed may come from your corporate clients who are desperate for every possible $ from their site. Luckily the reasons for a website, especially for nonprofits, go way beyond that.
2. A button should like it’s part of a professional site. And it should invite clicking. Flat buttons that look like the kids made them with scissors and colored paper, often look mass produced. Primitive can be a style for some sites, but it has to give off the “vibes” of fine design.
I can’t agree with your first point there, Charles. Unless the purpose of your website is to get people to leave and never come back, speed matters. There’s no demographic and no type of website that isn’t better off when it loads faster. There’s almost no metric that doesn’t positively correlate with speed.
Whether the business is for profit or nonprofit, there’s a message to get across and a desired action visitors should take, right? A slow loading nonprofit site doesn’t do anyone any favors.
Great looking set. I can’t wait to play around with it and take it for a spin. Are there any best practices when it comes to using flat design pages with regards to the image types used in them? Should you stick to one style or the other (flat design vs realistic) over the entire site?
Yes, I recommend that you keep a consistent style in the types of images you use on your site. It helps make everything look more cohesive. We’ve got a course on this topic as well. Check it out here.
As always, great work. Thank you!!
Thank you, Kathleen!
oooooh… I was expecting something about new themes ;-)…. But Good stuff Shane, Thanks
Thank you, Vicente! Theme news is coming soon.
Hi Shane, thanks for your informative video.
A clear explanation as always.
Looks like I am on the outer here, but that’s just me all over. :>)
I must say that I absolutely hate flat designs, and always have.
They are usually pale and lifeless. Trendy yes, interesting, no. Not for me.
And to counteract the file sizes of vibrant graphics, you can just have less on a page.
That is the design I prefer. Simple and directly to the point, and of course most of your designs are like that.
Another thing I don’t like, which is not really because of flat design, but more because of the pervading page templates I guess, are the massive
long pages that people seem to use today.
Try reading one, and you will find that the page is constantly moving while it loads more and more.
It actually makes reading a nightmare.
Yes, I actually try to read the stuff on a page I visit.
A classic example would be a Forbes page for instance.
Take care, Mal.
PS. Sure, I have some long pages too, but I am always thinking of ways to make them shorter. Usually by using video I guess.
Thanks for your comment!
Design is to some degree always subjective. It’s true that the “classic” flat design has a certain look that can feel like it’s a bit too much. But I’ve seen many variations of flat design that are much more subtle. Personally, I also like design that fades into the background, so to speak. The kind of design where you don’t notice it’s there, because you’re just focused on the content.
Awesome
As a member of Thrive Themes going on 3 years, you guys have over delivered. Always providing relavent content and helpful information. Thanks for everything…
Hi Shane,
I’m seriously thinking to replace my current webpage to this flat webpage style (tomorrow if possible).
However, I have a couple of questions:
1) Some of these flat style templates are suitable for blogs or only for advertorial webpages? My current webpage is more a blog style (actually the home page is more editorial).
2) What are the backend implications of replacing my current webpage to this flat style. I mean, with all the plugins, analytics, pixels, metrics, tag manager, etc.?
3) How can I preserve (and restore) my current webpage in case I do not like the new flat style?
Please let me know your thoughts,
Carlos
can’t wait to begin using this info.
Can you please put some categories and sorting mechanisms in the thrive Landing Pages Gallery where this and other pages are listed?
Instead of wading through 256 entries, it would be nice to sort them by homepages, lead gen page, thank you pages, video sales pages, groups of a particular style etc.
I’m just starting out and looking for home page designs for a coaching website but there is no easy way to sort through them to find them. https://thrivethemes.com/landing-pages-gallery/
Click “Filter templates by tags ^” right side…
Hi, Shane. Really nice template set. And the fact that it includes the entire conversion funnel is very helpful–the link to the blog post is a great touch.
Question: Are there any special considerations when mixing flat graphic images with photographs?
Thanks!
In this video, are you using a lav mic with your Zoom H2n recorder? If so, would you mind sharing what lav mic you are using? I’m in the market for a lav mic that will pair well with the Zoom H2n recorder.
Hey! My templates all disappeared or not showing… Any suggestions?
99% of the time this is a caching issue. Make sure to empty browser cache and any caching plugin you have running on your site.
Hey, I have Thrive Architect but can’t find this template anywhere, thoughts? Thanks
After using other theme builders and reading about Thrive Themes over the years, I am seriously considering switching over to Thrive Themes. I have Thrive Architect, and maybe it’s time to switch to something faster and conversion-based.
If you like Thrive Architect, you’ll LOVE Theme Builder. 🙂
I really like this! The explanation is lucid and completely explains the design philosophy. A reference on complimentary colors might be a useful addon. Sincere thanks.