Fast to Load, Fast to Edit – Meet Our New “Flat 2.0” Landing Page Templates

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:

On and off switch UI element in a realistic design style

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:

Switch UI element in the 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:

Side by side image showing a sailor. One version flat, one less flat.

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.

Example of the Flat 2.0 landing pages in Thrive Architect

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!

Shane

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Andrew T says:

    Awesome as usual Shane!

    • Shane Melaugh says:

      Thank you, Andrew!

  • Geoff says:

    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”

    • Shane Melaugh says:

      Thank you, Geoff! I’m very happy to know that we have been able to provide this service for you. :)

  • Keith says:

    Good stuff Shane, Thanks. Most important question for me is, where do you buy your shirts?

    • Shane Melaugh says:

      *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.

  • Kevin B says:

    Brilliant. I love the contrast that flat-design for everything except the buttons can bring.

    • Shane Melaugh says:

      Thanks, Kevin! Glad you like the look! :)

  • Jason says:

    Awesome post as always Shane! Any idea when we’ll get custom fonts added back in?

  • Derek Seymour says:

    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 :(

    • Shane Melaugh says:

      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

  • Thomas says:

    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.

    • Shane Melaugh says:

      Thanks for your comment, Thomas! It’s great that you had a light bulb moment from this. :)

  • Charles says:

    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.

    • Shane Melaugh says:

      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.

  • Len R says:

    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?

    • Shane Melaugh says:

      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.

  • Kathleen G says:

    As always, great work. Thank you!!

    • Shane Melaugh says:

      Thank you, Kathleen!

  • Vicente B says:

    oooooh… I was expecting something about new themes ;-)…. But Good stuff Shane, Thanks

    • Shane Melaugh says:

      Thank you, Vicente! Theme news is coming soon.

  • Mal says:

    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.

    • Shane Melaugh says:

      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.

  • Vincent says:

    Awesome

  • Tommy says:

    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

  • GX says:

    can’t wait to begin using this info.

  • Pete Quily says:

    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/

    • Mark says:

      Click “Filter templates by tags ^” right side…

  • Hans says:

    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!

  • Len R says:

    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.

  • >

    Join Thrive University (it's FREE!)