For the last couple of months, flat web design has been really a huge topic on the Web. Up to now, it is steadily dominating the Web. From UI, to the latest portfolio update, icons and even the top web design blogs are now using flat style, not to mention Microsoft, Android and just recently Apple is going flat too!
So why are so many designers using this style?
Flat design makes things free from distractions, eliminating heavy background images, swirls, grunge that makes everything cluttered. It’s very easy to navigate, since there are no more gradients, drop shadows, glows and bevels. It puts more focus on the text, making everything readable from big screens down to mobile.
Oh, and besides if you want something more than inspiration we have nice flat countdown timer video tutorial created specially for you!
Okay, enough talking. Time to check our collection of flat web design for your inspiration!
Table of Contents:
- What Are The Best Flat Web Design Sites On The Web?
- Build Flat Responsive WordPress Website From Scratch
- 16 Premium Flat WordPress Themes That Rock!
- Do Regular Users Care If Your Website Is Flat?
- 30 Sources To Get Your Web Design Inspiration
What Are The Best Flat Web Design Sites On The Web?
Let’s get inspired for your next site design! Love it or hate it, flat design is at is peek. This section is dedicated to inspire all of you and get you to design the next big thing. There should be something for every taste.
How inspired are you? Tell us!
Build Flat Responsive WordPress Website From Scratch (High Quality Course)
If you are looking to take your web design career to whole new level in 2015 – we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat
You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will convert website to fully responsive and functional WordPress website.
Yes, you will learn how to make website responsive, but this time you will be building high quality website design you can be really proud of!
We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! Watch the video to see exactly what’s inside.
What you are waiting for? Take your skills to the next level right now.
16 Premium Flat WordPress Themes That Rock!
Looking for some flat WordPress themes for your website? Flat is hot right now! Flat design or flat UI is now the growing trend in the web design industry and the audience are going gaga for it. Going for a minimalist approach, flat designs are sophisticated, simple and sexy.
Most people don’t have enough time to spare to create a new flat web template and the best solution to that problem is to purchase one. Flat designs are also made to fit with retina displays; your blog can be visited by people on their tablets and smartphones. It’s the perfect concept for you to gather more audience. If you want to take the plunge into the awesome revolution in web design, then, let us cater to your needs in this article. Okay, let’s move on to the latest 30 rocking WordPress Themes with Flat Designs.
Note: We have recently written new roundup with 55 best premium responsive WordPress themes in 2015, many of them are flat. Check that article out as well.
If you are looking for powerful multi-purpose WordPress theme, which is flat and has so much more power under the hood you should choose X. Why? We have written detailed review about X theme and seriously consider it being the best premium WordPress theme of 2015.
The best of all, when you get this theme, you don’t just get one design, you get 33 unique designs + several more free extensions.
2. Metrolium ($45)
- Responsive design & retina-ready
- 2D & 3D premium sliders
- Real-time WP customizer
- jQuery sortable portfolio
- Excellent page builder
- 960 Vector icons
- 7 Layouts and all blocks
- Woo commerce
- Fully responsive design
- Drag and drop unique page builder
- Revolutionary slider, fully integrated
- Valid HTML5/CSS3
- Filterable portfolio with isotobe
- Translation-ready .po/.mo files included
- Many post media types
- Many portfolio media types
- Extensive theme options
- Responsive design from Head to Footer
- Optimized for retina display
- Powered by StagFramework, a light yet powerful theme options panel
- Full localization support ( .po/.mo files included )
- In-built StagShortcode generator
- In-built SEO settings
- Custom widgets ( Twitter, Flickr, custom page and others )
- Ultra responsive design
- Retina-ready (provided you upload pictures at least 1000px wide)
- Ultra smooth scrolling
- Extensive theme options based on our awesome WpGrade Framework
- Multilingual translation ready and .po/.mo files for localisation included ( WPML )
- W3C HTML5/ CSS3 Valid
- Custom header backgrounds (full width, pattern or color) – also an option to add a single site-wide header image.
- Custom accent color pickers on each page & post.
- Compatible with the free Bean Portfolio Plugin.
- Compatible with the free Bean Shortcodes Plugin.
- Compatible with the free Bean Tweets Plugin.
- Clean, bold, & timeless design
- Left and right sidebar switcher on any default page template.
- Fully responsive build
- Retina assets/CSS
- Built with HTML5 & CSS3
- More posts can be loaded functionality
- Custom audio, gallery, video
- Embedded video post formats
- Related posts
- SEO optimized
Demo | Buy
7. Showy – Bold & Flat Portfolio ($35)
- Special CSS3 flip effect (fall back for older browsers and touch screens)
- Filterable portfolio
- Homepage portfolio shows 6 at most with link to full portfolio
- One, Two or three column portfolio
- Simple & clean layout
- Fully working blog (Image, gallery, video, quote, link, aside)
- Special single portfolio item page
- Fully responsive
- Easy to use single page layout (everything works automatically based on the main navigation)
- Unlimited color schemes
- Portfolio with multiple categories
- Ajax pagination
- Post formats
- Featured images
- 20+ shortcodes
- 250+ icons using Entypo
- Unique slider generator with Nemus Slider
- Great and fast support
- Metro, modern UI, tile based layout
- Advanced responsivness – two completly different layouts: horizontal with column based text and vertical layout for mobile.
- Easy to manage tile manager for every post, page and gallery item tile
- Unlimited colors and style possibilites that may be changed with few clicks
- Possiblity to set multiple featured images for each page/post that will be sliding on tiles or slider.
- Cross browser – supports all major browsers.
- Easy and clean admin panel
- Build in blog and gallery page system
- Automated share panel
- Quick start video and documentation guide.
- Advanced typography
- Compatible with the latest WordPress version
- Responsive layout (Tested on iPad, iPhone and Android) – can be turned off with one click!
- Build content easily with visual composer and/or shortcodes
- Custom build theme & page options
- Localizable with .po .mo translation files
- WPML multi-language plugin support
- Unique 3D slider caption effect which can, of course, be deactivated
- 100’s of retina icons included for crisp graphics on every device
- Various post formats with image, slideshow, Youtube & Vimeo video support
- Many different portfolio/blog layout customization options
- Unlimited portfolios
- Unlimited sidebars
- Ultra responsive design
- Extensive theme options
- Shortcode generator
- Accent color control
- Sortable team & portfolio
- Full localisation support (contains .po/.mo files)
- 3 Custom widgets (Twitter, Flickr, social profile)
- Revolution slider included
- Isotope portfolio filter included
- Fancybox included
- Stunningly unique design and highly reusable layout – a creative theme best suitable for creative agencies/ individual portfolios and for innovative business showcases.
- Flat Design style, a popular trend on web that produces a clean and minimal look and feel.
- Perfectly responsive layout across all devices including iOS mobile devices, Android and Windows phone platforms.
- Built with Bootstrap 2.3.2 – The world’s best responsive front-end framework
- Easiest to use and customize.
- Isotope (Premium plugin worth US$15) powered filterable portfolio
- Gallery with Lightbox.
- Ajax and stand-alone blog pages with post format support
- Content + Image carousel/slider – a very usable content slider that supports any HTML5 content.
- Also supports all UI patterns from Bootstrap.
- Integrated Twitter widget, displaying the latest tweets.
- Working contact form with validations and PHP email sender
- One-Page sections and standalone pages
- Custom post type for slideshow
- Support WordPress 3.x menu system
- Post thumbnail support with dynamic image resizing
- Custom page templates
- Portfolio page templates with Pop-up Lightbox (support for image and Video type) with categories filter
- User-friendly shortcodes
- Translation-ready (available .po file)
- Widgetable sidebar
14. Octavus Responsive Portfolio WP Theme ($44)
- Responsive HTML5/CSS3 design
- Built with Bootstrap 2.2.2
- Unlimited colors (Integrated with WordPress built-in theme customizer)
- Integration with built-in WP theme customization
- 600+ Google fonts
- 55+ custom shortcodes
- Shortcodes generator, also available in fullscreen mode
- Supports different post types: ‘aside’, ‘gallery’, ‘link’, ‘image’, ‘quote’, ‘video’ (even self-hosted movies!), ‘audio’, ‘standard’
- Custom widgets
- Ready for internationalization
15. Alfa Responsive OnePage WordPress Theme ($40)
- Full screen slider
- Full screen video
- Fully responsive layout
- Isotope Gallery With Fancybox (Youtube, Vimeo, Metacafe, Dailymotion, Twitvid, Twitpic, Instagram… )
- Fully working AJAX/PHP contact form
- Parallax effects
- Single page
- Creative design
- Built With HTML5 and CSS3
- Google web fonts
- Easy setup
- Child theme supplied
- Client logos custom post type–supports links/no links
- Our Team custom post type with masonry layout
- Portfolio custom post type with gallery functionality, built in
- Homepage item custom post type, create your homepage with this versatile full featured editor
- Show/Hide client logos on ANY page
- Full control of colours and font sizes and fonts
- General template text translatable via theme options
- Debadged theme options (no reference to MeanThemes)
- Google Analytics
- Show/hide author information
- Show/Hide social icons in footer
- Centre logo & navigation
- Centre logo for mobile view only
- Turn sharing on/off across posts, pages or portfolio
- Share via Twitter, including your username
Do Regular Users Care If Your Website Is Flat?
Flat design has started a revolution that affected a big chunk of web design as we perceive it. It has changed most of websites’ colors schemes, iconography, layout and more. It has made leaps in starting a total revamp where the third dimension in designing has been eliminated and much simpler designs are in style.
Indeed, flat design is now the trend and I see why web designers suddenly went gaga over this new design trend. Here are some of the reasons:
- Flat design websites are easy to read
- They are trendy
- They are clean-looking
- They are bright
- They are lively
- They focus on great typography
- They are are simple to use
Having said that, one may easily conclude that flat design really is something you should follow. However, some websites like Reddit have not adapted this trend. Some websites still function well despite their non-compliance with flat design.
This might lead to a wonder. Reddit has not adapted the flat design trend, yet it functions and generates traffic like it always does. Some websites don’t get the popularity they want despite shifting into flat design. And so, a question now arises:
“Do Regular Users Really Care if Your Website is Flat?”
I asked around and a vocal minority of web designers have said their views on the topic. Let us see some of what other average web designers have to say:
Tiero starts with the three tenets in web design to focus on: (1) Content. (2) Accessibility (or simplicity). And (3) No stupid crap.
BlueParukia added, “People care only about the content and a good design is one that doesn’t draw attention to itself but to the content on the page. It should not make things difficult for the user trying to find information and should take little time to load.”
DeathShadow agreed by saying that quality, content and accessibility were what really matters in a website. Anything other than those were mere waste of bandwidth, code and time. To him, content were really the primordial concern a web designer should focus on.
He added that some people who claim to be SEO experts “are so concerned with getting traffic to the site they stop caring about if that traffic consists of visitors who actually care about the content, if that content is even relevant to the topic the site is supposed to be about, or even if the visitors can get at the content.”
According to him, this is why most Google searches in the past two years had no relevant results until page 2. He challenged that the biggest question a designer should focus on when creating a website is, “How does this make the site more useful to visitors?”
Content Is King
Clearly, these people agree in one thing: Content is still king. It means that regular users really don’t care if the website is flat or skeumorphic. Regular users still care about what will they get from your website. I have to agree with DeathShadow when he said that a web designer must always ask himself about how the website would be useful to visitors.
You, as the designer, should always focus in creating a design that is content-conscious. Every element that you put in the page should always lead to great content. Thinking about that would lead you to faster and more efficient ways into reaching your goals.
A few other designers agree to this.
Kristina Halvorson, a content specialist, said that the design decisions you had made as a designer should always be driven by content. You created the layout to support the content and not the other way.
“Copywriting is interface design. If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters,” Getting Real by 37 Signals says.
Hearing from these people would make us conclude one thing: we may never know if users really care if your website is flat or not. Heck, it’s not really the first thing they look for upon visiting your website. Web users look for content. If a website is beautifully designed but the content sucks, then the design’s beauty is tarnished.
But just because I am saying that content precedes over design, it doesn’t mean that you design your website like a two-year-old kid would do, no. You have to understand that the design should always highlight the content. Your role as the designer, is to beautify the website so that the visitors will stay for what really matters. The content.
Do you agree with me? Or do you have your own rebuttals? Let me hear them.
30 Sources To Get Your Web Design Inspiration
If You are developing web designs, then You know there is times when You struggle without any ideas. That’s the time when these web sites becomes handy. I collected nice list with some of the most known web gallery sites showcasing and listing well design sites into different categories, letting You to promote and demote all designs.
Every site is a little bit different, so make sure to check everyone of these and pick up Your most favorite ones. Hope this list will help to get Your inspiration back.
Best Web Gallery is an inspirational gallery site collecting a wide range of quality design websites (Flash & CSS).
Get Your web inspiration in this great site, overall 313 pages with amazing designs.
This site collects the best Flash and CSS web sites from around the world. Web sites are categorized by CSS or Flash and also by different elements of the design, so You can find and get the best out of it.
CSSImport has been collecting new web sites from year 2005, check out archive page to get overview about each month. Pretty huge collection can be be found there.
CSSRemix collects the best designed web 2.0 sites, with more than 14 thousand RSS subscribers.
Currently site is undergoing maintenance, but check out this site later.
CSSMania is one of the most popular CSS-based and regularly updated sites with more than 14,700 RSS subscribers. All sites are organized in really detailed topics, also listed by countries and much more, currently there are more than 12,000 web site collection.
Very well designed web site showcasing just WordPress based sites.
DesignSnack site features XHTML/CSS and Flash web designs, categorized by categories – You can browse designs even by color.
This is really popular CSS-based site – the code always remains the same, You switch only external .css file – amazing to see what people can do just by coding CSS. Really inspiring selection!
Get inspired in this popular site – really wide selection with CSS based sites.
Unmatched Style is a constantly growing community dedicated to acknowledging those who have made exceptionally gorgeous web sites using Cascading Style Sheets and web standards. By recognizing these exceptionally beautiful designs, other designers and businesses can get inspired and find a direction they may wish to take with their own web sites.
EduStyle is a web design gallery dedicated to higher education websites and powered by higher education web design professionals. Users submit, review, and comment on sites they like (or don’t like). The aim is for higher ed web professionals to learn from and be inspired by the work of their peer.
Not like other CSS repositories. Site only offers he cream of great design, filtering through lots of the redesigns that occur every day across the Internet, and cataloging the greatest projects out there, priding themselves on having a huge selection of inspiring sites – perfect for getting that spark of creativity going again.
Site collecting the best dressed sites on the web.
Slowly this site collects more and more great web designs. Make sure to check out this site too.
CSS Heaven is all about Fresh and innovative CSS / XHTML web designs submitted by web designers from around the world.
This is one of the network sites, there are also sites like MostSliced, MostHired, MostPreviewed, MostSported and MostListed. There are more than 20,000 web designs You can inspire from. Check out “Sites” section.
Huge list of design resources, there are even descriptions about each site telling what it’s about.
U-Creative is a design gallery. Create a graphic design portfolio, submit your designs and rate other graphic design work, great inspiration place.
Faveup is a simple gallery of inspirational design. Everybody gets designer’s block sometimes so it’s nice to have somewhere to go to get your creative juices flowing again. Faveup also gives credit where credit is due, rewarding great design with the respect and linkage it deserves. There are even more sections – logos, business cards, flash websites and CSS websites,
CSS Nature is a showcase of well designed eco green and organic CSS based web site designs.
Styleboost is a gallery for showcasing beautiful web sites. It has been around since January 2001 and is created, designed and maintained by Johan Bakken.
Where do You get Your web design inspiration from? Share with us in the comments to evolve our community!