Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 01 2013

13:41

Free Resources for Creating a Flat Design

Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.

The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.

Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.

UI Kits

A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.

DesignModo Flat UI

This free (commercial and personal) flat UI kit from DesignModo comes with all of the basics you’ll need to create a flat user interface – buttons, menu, input, tags, switches, icons, color swatches, glyphs, and much more.

Modern Touch UI Kit

PixelKit offers this flat UI kit. It comes with a very unique, slick look and feel and the free version is for both personal and commercial use.

Flat Design UI Components

A beautiful UI kit, this one from GraphicBurger comes in a well-organized PSD file. The color scheme is nice for when you need a darker look for a website or application.

Free Flat UI Kit

This amazing free kit includes flat icons, buttons, and more in a blue/white color scheme. Just be sure to contact the developer, Enes Denis, about commercial use.

Featherweight UI

Designed by Sarah Hunt of sarahjustine.com, this kit is completely free for both personal and commercial use. It is both vector-based and retina ready, and the font works both online and offline.

Flat UI Kit

Freepik.com created this aweome free UI kit for Webdesigner Depot. Enter your email address to download it for both commercial or personal use.

Icons

Flat icons are, as mentioned already, are those that have no 3D pop. They are simply flat. Most come in the normal, flat style of primary-like colors. However, you can find a few that are line style and others that are even a bit uniquely colored, for a flat design. Icons are another great way to save time in both web and print design.

Metro UI Icon Set

This fantastic set comes with 725 flat icons that also come with a reflective quality if you decide to go less flat in style. The designer, dAKirby309, has generously make them free for use as long as you credit him in your project.

180 FREE Flat Icons

On a mission to providing Open Source resources for the WordPress world, WordPress Design Awards created this icon set for anyone to use in commercial or personal projects.

Free Flat Icons

This collection does not contain very many icons, but they are very unique. These are free for both personal and commercial use and are perfect for adding a unique touch to any flat design.

Free Flat Icons by Studio 4

In this free collection, you will find 47 icons designed with flat colors and style. The details are phenomenal!

100 Free Vector Icons

This set of line icons work great for a flat design. The precision in the icons are superb, and the best part is that they are completely free.

90 Royalty-free Flat Icons

With round and square icons, social media icons, common objects icons, and more, this royalty-free icon pack is amazing!

Templates

For those with even less time, templates are a great way to quickly throw up a website in a matter of minutes. Unlike a UI kit in which you have to arrange every element onto a page, a template already comes with elements laid out. All you have to do is add content.

Free Flat HTML5 Website Template

This free template comes with a call-to-action section, header and footer, portfolio area, and menu. With it all located in a single HTML5 file, you can easily edit it for your own use.

Free Flat Design PSD Template

A very minimal, flat design, this template for a website is called Illustrate. A WordPress theme is also available in this design.

Free Flat Website Template

The colors in this flat template are very calming, making it a great website template to use for a company that wishes to instill trust in clients.

iPhone Flat Design UI Templates

This collection of iPhone templates come with different pages in a free sample project download. A sidebar, settings screen, activity feed, user profile, and login screens are all included. Each of the screens come with 2-4 design styles.

WordPress Themes

For those creating a WordPress website, there are a few new themes out there that fall under the flat category. All of the following themes, except the first one, are Open Source themes just like WordPress, so no need to worry about hidden prices or commercial-use.

Photo Free Responsive Gallery WordPress Theme

This absolutetly free theme is very minimal and flat in its design. It would be perfect for anyone needing a basic portfolio website.

Surfarama

Each of the content boxes in this Open Source theme can include an image to enhance the home page. You can even color code the categories, upload your logo, etc without coding.

StrapVert

This is a great flat theme for easily showcasing images with blocks of text. The theme now comes with the option to turn off either the featured section, just the top section, or just the secondary section off.

Attitude

This incredible Open Source WordPress theme is retina ready, responsive, and very clean. The other big bonus to this theme is that it is also available with 5 different translation options.

Iconic One

This WordPress theme is not only flat, clean, and simple but also it is responsive, has a page speed score of 95+, and implements SEO. It also uses Live customizer so that custom changes are easy to make.

Twenty Thirteen

This theme looks good on any device and comes in a blog format. The flat style gives it simplicity and the color scheme is a nice burnt look.

Tutorials

If you are just beginning or even if you have some areas in flat design you’d like to improve upon, the following tutorials are excellent. All give detailed instructions on how to create flat designs or flat elements in a design.

How to Create a Website in Flat Design Style

This 17 minute tutorial from Designmodo uses their free UI pack listed in the UI kits above. Learn how to create a flat website in Adobe Photoshop using an interface kit.

Flat Long Shadows

This step-by-step tutorial is from Awwwards and includes resources and examples as well. Easy to follow along, this is probably one of the best tutorials on flat shadow design on the web.

Make My Design Flat

This is not necessarily a tutorial but best fits under the “Tutorial” category simply because after using it several times, you will probably will learn how to change code around for flat designs. Using this tool, you can convert any button into a flat design. Simply upload your code to receive the “flat” version that you can then copy and paste or use as a guideline for your own flat code.

Flat Design Tutorial (part 2)

This video tutorial thoroughly walks you through how to create a flat design. The designer gets a little detailed on downloading the resources he uses, but once he gets to the designing part, he does a great job of making it easy to learn flat designing.

Mastering Flat Design

You’ll have to sign up on TutsPlus to see this full series, but it is very much worth it. TutsPlus provides a comprehensive video course on flat design comprised of over 2 hours worth of videos.

Remember to share in the comments below if you have a flat design resource you’d like to share with the rest of us!

August 08 2013

13:00

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

1. Flat – Responsive Portfolio Theme ($35)

01-Flat-Premium-WP

Features:

  • Responsive design w/1070px and 480px breakpoints
  • Retina ready w/optional retina logo upload field and vectorized icons
  • Collapsible menu
  • Interactive social icons
  • Full-screen, responsive and touch-ready slider
  • 2 homepage layouts

Demo | Buy

2. MetroFolio ($40)

02-Flat-Premium-WP

Features:

  • Responsive design (Optimized for iPhone and iPad)
  • Drag & drop interface for posts, pages and portfolio items
  • Customizable header description text
  • Customizable tile color
  • Color picker for customizable options
  • Widget-supported
  • WordPress 3.5 ready (featured images, menus…etc)
  • Pages templates (full width, archives)

Demo | Buy

3. Metrolium ($45)

03-Flat-Premium-WP

Features:

  • Responsive design & retina-ready
  • 2D & 3D premium sliders
  • Real-time WP customizer
  • jQuery sortable portfolio

Demo | Buy

4. Glider • Clean & Powerful Flat Stylish Theme ($45)

04-Flat-Premium-WP

Features:

  • Excellent page builder
  • 960 Vector icons
  • 7 Layouts and all blocks
  • Woo commerce

Demo | Buy

5. Hypertext – Flat Portfolio WordPress Theme ($40)

05-Flat-Premium-WP

Features:

  • 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

Demo | Buy

6. Forest – A Flat and Bold Portfolio WordPress theme ($40)

06-Flat-Premium-WP

Features:

  • 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 )

Demo | Buy

7. Emerald – Responsive One-Page WordPress Theme ($40)

07-Flat-Premium-WP

Features:

  • Responsive design with Parallax effect
  • Advanced theme option panel
  • Drag & drop page builder with visual composer
  • Unlimited colors
  • You can add your own background images to every page sections
  • Metro Flipboard slider – build exclusively for Emerald

Demo | Buy

8. Fuse – Responsive Portfolio & Blog WordPress Theme ($45)

08-Flat-Premium-WP

Features:

  • 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

Demo | Buy

9. Lambo – Premium Photography Theme ($45)

09-Flat-Premium-WP

Features:

  • Clean, modern design can be used for any type of website
  • Fully responsive
  • Built with HTML5 and CSS3
  • Unlimited colors
  • bbPress Ready
  • Customizable background image
  • Custom background pattern
  • Advanced option panel
  • 3 Header styles
  • Turn ON/OFF responsivness
  • Strong focus on typography, usability and overall user-experience

Demo | Buy

10. Metrofy WP – Responsive Multi-Page & One-Page Theme ($40)

Features:

  • Custom theme color
  • Custom background
  • New links block. See example
  • More header icons
  • Support for bigger logos
  • Full width post template

Demo | Buy

11. FlatPack – MultiPurpose Business WordPress Theme ($55)

Features:

  • 100% Fully responsive WordPress theme for Mac, PC, tablet and mobile devices
  • Fully customizable with a vast amount of color options available
  • eCommerce ready
  • Many font choices
  • Translation-ready
  • Full width and boxed layouts
  • Choose from a blog preset or widget-driven homepage layout
  • Sidebar layout options
  • Super-powerful slider
  • Social icons included
  • WordPress 3.5, fully-tested
  • Great SEO base, built-in

Demo | Buy

12. Hurry | Responsive & Retina Theme ($35)

Features:

  • 100% responsive and retina-ready
  • WordPress 3.5 ready
  • Unique home page layout (2 available)
  • Super easy installation & setup
  • Premium support and documentation
  • Cool theme options
  • Infinite scrolling (oh yeah !)
  • Theme-ready for sharing (plugged to Twitter, Dribbble, Facebook, Flickr, Pinterest)
  • Main shortcodes included (check them out in the live preview)
  • Cool CSS3 animations
  • Gallery included
  • Created for readability

Demo | Buy

13. PrimoNews – Premium Magazine Theme ($45)

Features:

  • Clean, modern design can be used for any type of website
  • Fully responsive
  • Built with HTML5 and CSS3
  • Unlimited colors
  • Front-end editor
  • Translation support including .po and .mo files
  • Unbranded advanced theme options panel
  • Post sharing box with social icons13 Custom widgets
  • Working contact form
  • Cross browser support
  • Twitter- integrated
  • Strong focus on typography, usability and overall user-experience
  • 100+ Google fonts

Demo | Buy

14. Spruce | A Refreshing Journal & Portfolio Theme ($40)

Features:

  • 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

15. Showy – Bold & Flat Portfolio ($35)

Features:

  • Responsive
  • 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

Demo | Buy

16. Arto – A Flat & Responsive Multipurpose Theme ($45)

Features:

  • New flat design style
  • Fully-responsive design
  • Layered PSD files for easy customization
  • Wide and boxed versions
  • Advanced theme option panel
  • HTML5 & CSS3
  • Dark and light theme skins
  • Unlimited color skins
  • Customize everything!
  • 500 + Google fonts
  • 9 Ready pages and templates – Home Page, Portfolio (3 templates), Blog, Contact, About Us, Our Services, 404 Page
  • Tones of custom shortcodes
  • Custom widgets
  • SEO-ready
  • Detailed documentation
  • Child theme
  • Flexible and multipurpose
  • Clean and unique design

Demo | Buy

17. Weald – Flat Responsive Portfolio WordPress theme ($40)

Features:

  • 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
  • Retina-ready
  • Translation-ready
  • Great and fast support

Demo | Buy

18. Modern Metro – Responsive WordPress Theme ($40)

Features:

  • 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

Demo | Buy

19. Vetro – A Flat UI WordPress Theme ($40)

Features:

  • Clean, modern design can be used for any type of website
  • Fully-responsive
  • Built with HTML5 and CSS3
  • Custom background image
  • Custom background pattern
  • Designed using Designmodo Flat Free kit
  • Advanced option panel

Demo | Buy

20. ThemeTastic Flat Responsive WordPress Theme ($45)

Features:

  • 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

Demo | Buy

21. Anubis – Responsive Portfolio & Blog Theme ($40)

Features:

  • 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

Demo | Buy

22. RENOVA – WordPress One-Page Responsive Portfolio ($40)

Features:

  • 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

Demo | Buy

23. Unlimited – Flexible Responsive Business Theme ($45)

Features:

  • Visual composer – Style the entire theme from within the option panel.
  • 100% Responsive
  • Revolution Slider
  • Layout builder
  • Short-code manager
  • WordPress core resizing

Demo | Buy

24. Aeolus – Corporate Minimalist WordPress Theme ($40)

Features:

  • 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

Demo | Buy

25. Octavus Responsive Portfolio WP Theme ($40)

Features:

  • Responsive HTML5/CSS3 design
  • Built with Bootstrap 2.2.2
  • Retina-ready
  • 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

Demo | Buy

26. Acute | Beautiful & Responsive Blogging Theme ($40)

Features:

  • Compatible with the free Bean Shortcodes Plugin
  • Compatible with the free Bean Tweets Plugin
  • Clean, minimal & modern design appeal
  • Light & dark styles included
  • Brilliant CSS3 animations
  • Clean & suave typography
  • Fully responsive build
  • Retina assets/CSS
  • SEO optimized
  • Customizable 404 Page included.
  • Widget area generator
  • Powerful Bean Form Builder plugin
  • Flexible theme options panel

Demo | Buy

27. Good Bones: The WP SandBox Theme ($40)

Features:

Demo | Buy

28. Alfa Responsive OnePage WordPress Theme ($40)

Features:

  • 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

Demo | Buy

29. Naong – Premium Business WordPress Themes ($45)

Features:

  • Responsive designs to smaller screens
  • Drag and drop page builder.
  • 3 Predefined Home Page template.
  • Unlimited color options
  • 3 slider option, super easy configuration
    • 2D slider flexslider
    • 3D slider slicebox
    • Camera slideshow
  • Social share on each single post.
  • Filterable portfolio, with combination of 2, 3, or 4 columns layout
  • Portfolio item with hover effect or classic.
  • Well structured CSS
  • Well- documented
  • Fully compatible for all major browsers
  • Valid xhtml 1.0 transitional, please check
  • Translation ready, default .po and default .po file available.

Demo | Buy

30. Designy: A Design-Led Business WordPress Theme ($40)

Features:

  • 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)
  • Minified JavaScript files for increased performance, we provide un-compressed versions of the 2 core files if you want to tweak functionality.
  • 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

Demo | Buy

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl