{"id":17449,"date":"2013-06-20T23:01:27","date_gmt":"2013-06-20T15:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17449"},"modified":"2022-10-16T19:45:30","modified_gmt":"2022-10-16T11:45:30","slug":"flat-design-resources","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/","title":{"rendered":"Ultimate Guide to Flat Website Design"},"content":{"rendered":"<p>The combination of bright colors and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/showcase-web-design-beautiful-typography\/\" rel=\"noopener\">exotic typography<\/a> has paved the way for unique flat interfaces. <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/clean-simple-minimalist-website-design\/\" rel=\"noopener\">Minimalism<\/a> is a big part of this design idea, and you can see how popular these trends have become in recent months.<\/p>\n<p>Flat website design is a brilliant concept because it focuses solely on the content. But many designers are unfamiliar with the <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2013\/\" rel=\"noopener\">latest<\/a> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-design-trend-2012\/\" rel=\"noopener\">trends<\/a> and don\u2019t know where to get started.<\/p>\n<p>In this guide I want to present the ultimate collection of articles, tutorials, free graphics, and website layouts based on flat design. Anybody who is still getting into this concept will certainly learn something new. These trends have been around for a long time but we have just recently witnessed a major rise in flat website design.<\/p>\n<p>And this comes with plenty of good reason! Flat design mixed with page content is easier to read and easier to interact with.<\/p>\n<p><strong>Shortcuts to:<\/strong><\/p>\n<ul>\n<li><a href=\"#flat_popularity\">Popularity of Flat Design<\/a><\/li>\n<li><a href=\"#flat_guide\">Designer\u2019s guide to Flat Design<\/a><\/li>\n<li><a href=\"#flat_resources\">Design resources<\/a><\/li>\n<li><a href=\"#flat_showcase\">Flat websites<\/a> <em>(Showcase)<\/em><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/flat-ui-design-showcase\/\" rel=\"noopener\">Flat UI<\/a> <em>(Showcase)<\/em><\/li>\n<\/ul>\n<p>You should not expect to be using flat design in every project. Like all design trends, flat website layouts should be used exclusively when the details fit together. Otherwise it can feel jarring to force a minimalist approach into a more complicated website.<\/p>\n<p>But when carefully placed together I have found that flat user interfaces are brilliant, simple, and so effortlessly enticing they will captivate your visitors for years to come.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/flat-ui-design-showcase\/\" class=\"ref-block__link\" title=\"Read More: Showcase of Beautiful Flat UI Design\" rel=\"bookmark\"><span class=\"screen-reader-text\">Showcase of Beautiful Flat UI Design<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/flat-ui-design-showcase.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16753 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/flat-ui-design-showcase.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Showcase of Beautiful Flat UI Design<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBehold web and user interface designers, a new trend (or style), is taking the world of UI and...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2 id=\"flat_popularity\">Popularity of Flat Websites<\/h2>\n<p>As mentioned in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.forbes.com\/sites\/quora\/2013\/06\/12\/what-is-the-principle-behind-the-flat-ui-ux-design-being-adopted-by-apple-google-microsoft\/?sh=46edaa686b40\">this article on Forbes<\/a>, flat website design is a growing maturity within the industry. It removes a lot of the more complicated textures, patterns, shadows, bubbles, gradients, and other shiny effects to focus on simplicity.<\/p>\n<p>Flat buttons still look clickable and the input fields still look editable. Flat website layouts in general still look interactive but without the more exquisitely refined graphics.<\/p>\n<p>Flat design has been around for a while but recently picked up steam from the Microsoft mobile platform, and now Microsoft Windows 8. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.theverge.com\/2013\/6\/8\/4408756\/microsoft-metro-design-concepts-windows-mobile-windows-phone\">Metro design<\/a> has started a major trend which pushed the ball forward into flat layouts.<\/p>\n<p>Both web and mobile interfaces have seen a major uptick in trendy new user interfaces. And with responsive websites blurring the difference between desktop and mobile devices, flat UI has bridged the gap for simplicity with a bit of cultural class.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/840445-Metro-Style-Dashboard-View\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new\" width=\"600\" height=\"400\" alt=\"metro dashboard analytics user interface design\"><\/a><\/figure>\n<p>The biggest problems you will face when designing a flat website are the interactive elements. Visitors need to know which areas of the page are plain static content, while other areas are clickable and draggable and whatnot.<\/p>\n<p>Flat design can still use light shadows and edge effects to imply this interactivity. But subtlety is the name of the game and you can witness examples among many other flat website layouts.<\/p>\n<h2 id=\"flat_guide\">Helpful Designer Guides<\/h2>\n<p>There are quite a few online articles which I have presented a bit lower, but I want to share a couple specific resources to help with flat design concepts. I like to think of these more as guidelines than actual rules.<\/p>\n<p>In a Medium blog post referencing <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/medium.com\/@missytitus\/dont-blame-flat-ui-for-your-design-problems-3a69c61a8dd2\">flat design & UI problems<\/a>, the author Missy Titus goes on to explain that flat UI should help to solve your problems or just make them easier to look at.<\/p>\n<p>By stripping away textures and stitching and box shadows you should not be removing the important content from the page. Design trends are just a certain look.<\/p>\n<p>Of course, flat design is not for every website. There are so many various website trends and they are all popular for a reason \u2013 people like variety. Carefully-crafted flat 2-D interfaces stand out because they look really simple to use. And it keeps visitors focused more on your content than anything else.<\/p>\n<p>Another great article on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.com\/flat-design-principles\/?u=limhongkiat\">the principles of flat design<\/a> will help you understand the more concrete interface features.<\/p>\n<p>Most notably you want to focus on content hierarchy within the page. Elements do not usually intersect each other and the page should flow very naturally. This includes switching between colors and box content.<\/p>\n<p>It is easier to think of the page being built around typography, and these various boxes of text will inform the user how to interact with the page.<\/p>\n<p>Some buttons may use flat background colors, while other buttons may use shapes and pictograms. Webpage text and color schemes are two vitally important design concepts to your flat website.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flatdesign-css-website-gallery-homepage.jpg?new\" width=\"600\" height=\"400\" alt=\"flatdesign interface css gallery website inspiration\"><\/figure>\n<p>The Metro look originally popularized by Microsoft has a great system of picking out colors. These are important because colors make your website stand out. Colors make buttons and links and headings appear not so black-and-white. But sometimes it can be difficult choosing a scheme that works well.<\/p>\n<p>You need to look through examples of other designs and see how professionals have been doing this in the past. Check out the outstanding <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/search\/flat\">FlatDesign inspiration gallery<\/a> for a collection of similar website interfaces.<\/p>\n<h2>Flattened Design Colors<\/h2>\n<p>DesignModo has published a very large collection of resources based around flat user interface design. While on the subject of colors I want to point out another article discussing <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.com\/flat-design-colors\/?u=limhongkiat\">flat design and color trends<\/a>.<\/p>\n<p>The schemes themselves are made up by starting with one color displayed at full hue, then removing hue lower and mixing in black\/grey. This method will create multiple shades for your new color palette.<\/p>\n<p>The most saturated and bright colors stand out amongst any light or dark background. On DesignModo they published another interesting post on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.com\/retro-colors\/?u=limhongkiat\">retro color schemes<\/a> which can relate perfectly into a flat website layout. But really the process requires some practice and intuition when building a new project.<\/p>\n<p>The online resource <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flatuicolors.com\/\">Flat UI Colors<\/a> is a great place to start when attempting to focus your creative efforts on flat color schemes.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flatuicolors.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flat-ui-color-picker-webapp.jpg?new\" width=\"600\" height=\"400\" alt=\"flat ui colors webapp chooser picker\"><\/a><\/figure>\n<h3>Related Articles<\/h3>\n<p>Instead of copying and regurgitating offbeat content into this article, I want to share other inspiring blog posts which are related to flat user interfaces. I have read countless articles on this subject and the viewpoints are exquisite.<\/p>\n<p>Take a few minutes to skim just 2 or 3 articles from this list and you may be surprised what you can learn.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bits.blogs.nytimes.com\/2013\/04\/23\/the-flattening-of-design\/\">The Flattening of Design<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.getfeedback.com\/resources\/\">Flat Web Design: Trend Or Revolution?<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/uxmag.com\/articles\/a-look-at-flat-design-and-why-its-significant\">A Look at Flat Design and Why it\u2019s Significant<\/a><\/li>\n<\/ul>\n<h2 id=\"flat_resources\">Free Resources<\/h2>\n<p>With some of the design theory nailed down we should move into discussing other flat design resources. Both graphics and code samples are available all around the web if you know where to look. Open source codes are some of the best ways for new developers to immerse themselves into a new design trend.<\/p>\n<p>But graphics also play a critical role in understanding flat user interfaces. Both website design and mobile app design have grown into tremendous areas of study. Consider these free resources as learning tools for practicing your flat design ideas.<\/p>\n<h2>Free Resources: Graphics<\/h2>\n<p>Both designers and developers have a need for graphics. Symbols, icons, logos, and other common graphical traits can be found in almost every website layout.<\/p>\n<p>Thus freebie graphics using flat techniques are becoming even more popular around the Internet. This is a small collection of my personal favorite UI kits and icons created in the realm of flat design.<\/p>\n<h3>Pixeden Flat Icons Set<\/h3>\n<p>I simply love <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/\">Pixeden<\/a> for their amazing collection of freebies and premium graphics. Just recently I found a number of Dribbble shots advertising a free Flat Design Icons set.<\/p>\n<p>The icons have been released in 4 volumes, each containing a different set of icons. The vol1 & vol2 sets were accidentally labeled the same but you can tell this is a tremendous collection of flat icons \u2013 all free to use in any number of web projects!<\/p>\n<p><em>Pixeden:<\/em> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/media-icons\/flat-design-icons-set-vol1\">Vol #1<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/media-icons\/flat-design-icons-set-vol2\">Vol #2<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/media-icons\/flat-design-icons-set-vol3\">Vol #3<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/media-icons\/flat-design-icons-set-vol4\">Vol #4<\/a><\/p>\n<p><em>Dribbble Mirror:<\/em> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1016855-Flat-Design-Icons-Set-Vol1\">Vol #1<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1036448-Flat-Design-Icons-Set-Vol1\">Vol #2<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1056285-Flat-Design-Icons-Set-Vol3\">Vol #3<\/a> \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1075472-Flat-Design-Icons-Set-Vol4\">Vol #4<\/a><\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pixeden.com\/media-icons\/flat-design-icons-set-vol1\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/pixeden-flat-website-icons-vol1-preview.jpg?new\" width=\"600\" height=\"400\" alt=\"pixeden flat iconset freebie vol1 thru vol4\"><\/a><\/figure>\n<h3>Colorful Flat Iconset<\/h3>\n<p>Freebiesbug has a ton of great PSD files for designers. One exceptional example is their set of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/freebiesbug.com\/psd-freebies\/unigrid-100-free-flat-icons\/\">flat colorful icons<\/a> for user interfaces. You can download this free set from their website or directly from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/michaeldolejs\">the Dribbble page<\/a>.<\/p>\n<p>The set includes 12 icon designs which are based on popular Internet services. And this collection may not be useful for every project, but it is nice to know there are plenty of flat freebies out there for graphic designers to play with.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/freebiesbug.com\/psd-freebies\/unigrid-100-free-flat-icons\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/freebiesbug-flat-colorful-icons.jpg?new\" width=\"600\" height=\"400\" alt=\"freebiesbug colorful flat iconset freebie psd\"><\/a><\/figure>\n<h3>Flat Web Browser Icons<\/h3>\n<p>There are more than a few reasons you might need to include browser icons in your website. Design agencies and SaaS companies will frequently need to list their features and supported clients.<\/p>\n<p>And these <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1032875-Flat-Icons\">flat browser icons<\/a> are the perfect companion for any new layout. You can also download this iconset from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1032875-Flat-Icons\">original Dribbble shot<\/a> published by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/stefanotirloni\">Stefano Tirloni<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1032875-Flat-Icons\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/web-browser-flat-icons-freebie.jpg?new\" width=\"600\" height=\"400\" alt=\"flat icons freebie web browsers firefox\"><\/a><\/figure>\n<h3>Flatilicious Icons<\/h3>\n<p>Flatilicious are some brand new icons released just last month <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1075149-Flatilicious-48-Free-Flat-Icons\">on Dribbble<\/a> by designer Lukas Jurik. This wonderful collection includes 48 free flat icon designs in a PSD file. You are free to use these on any web or mobile projects.<\/p>\n<p>What I specifically enjoy about this set is the variety of icons to choose from. Truly a creative masterpiece for designers just getting into flat UI.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flatilicious-flat-iconset-freebie-psd.jpg?new\" width=\"600\" height=\"320\" alt=\"flatilicious icon set freebie psd download flat ui\"><\/figure>\n<h3>IconShock Flat Icons<\/h3>\n<p>This fantastic set of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.iconshock.com\/flat-icons\/\">flat icons<\/a> released by iconShock includes over 3600 different examples. The design features a slight glossy effect on many of the icons and it stands out among other similar iconsets.<\/p>\n<p>And this is great because the icons have been resized into 3 various settings for big, medium, and small website elements. What a collection for these freely available flat icons!<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.iconshock.com\/flat-icons\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/iconshock-flat-freebie-set-3600-icons.jpg?new\" width=\"600\" height=\"400\" aria-alt=\"iconshock flat freebie icons ui psd\"><\/a><\/figure>\n<h3>Flat Event Planning UI PSD<\/h3>\n<p>The darker color scheme from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/892656-Event-Elements\">this events input freebie<\/a> really stands out using flat design features. The interface itself is built for a website to handle user input for scheduling an event, or possibly signing up for attendance. Of course you can use this freebie just for practice.<\/p>\n<p>But I also think the various PSD styles along with the color scheme itself provide a nice framework for learning. All credit for this freebie goes to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/dylanopet\">Dylan Opet<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/892656-Event-Elements\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/event-planning-website-flat-ui.jpg?new\" width=\"400\" height=\"300\" alt=\"freebie psd ui flat design form interface\"><\/a><\/figure>\n<h3>Flat Dropdown Menu PSD<\/h3>\n<p>When you are designing a website layout it can be tough gathering ideas for inspiration. The various page objects from image sliders, navigation links, thumbnails, and certainly dropdown menus can be difficult to brainstorm without examples.<\/p>\n<p>This freebie PSD contains an excellent flat website dropdown menu. The icons are easy to scale and you can duplicate many of the same box shadows using CSS3 effects. Check out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/867212-Dropdown-UI\">original Dribbble shot<\/a> to download a copy and see another preview.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/867212-Dropdown-UI\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/freebie-psd-dropdown-flat-menu-ui.jpg?new\" width=\"400\" height=\"300\" alt=\"dropdown navigation menu links flat ui design psd freebie\"><\/a><\/figure>\n<h3>Freebie Flat Website UI Kit<\/h3>\n<p>If you are looking for a collection of web-based user interface elements then look no further! This brilliant <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1029240-Freebie-UI-Kit-PSD\">flat UI PSD freebie<\/a> released by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/andreean\">Andreea Nicolaescu<\/a> is an excellent starting point when coding your own website.<\/p>\n<p>Use this PSD kit not just for graphics, but also to help with color selection and matching up a full color scheme. The PSD is built around a white background which is most common among minimalist designers. You can view a full-screen preview on the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1029240-Freebie-UI-Kit-PSD\">original Dribbble shot<\/a>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1029240-Freebie-UI-Kit-PSD\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/freebie-ui-kit-flat-website-elements.jpg?new\" width=\"507\" height=\"400\" alt=\"freebie flat ui kit andreea nicolaescu psd\"><\/a><\/figure>\n<h3>Flat UI Kit PSD #1<\/h3>\n<p>Along with the brilliant flat icons I also want to share a collection of user interface kits. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/947782-Freebie-PSD-Flat-UI-Kit\">This first PSD file<\/a> was created by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/rikitanone\">Riki Tanone<\/a> and released for free on Dribbble.<\/p>\n<p>It is a small file, but it contains a number of offbeat elements such as a video player and email inbox. The colors are brilliant and they almost remind me of various pastel shades.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/947782-Freebie-PSD-Flat-UI-Kit\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flat-ui-set-riki-tantone-gui1.jpg?new\" width=\"600\" height=\"488\" alt=\"riki tantone freebie release psd kit flat gui\"><\/a><\/figure>\n<h3>Flat UI Kit PSD #2<\/h3>\n<p>Now this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/968433-Freebie-PSD-Flat-UI-Kit-2-Blog\">second UI kit<\/a> was also released by Riki Tanone and focuses more on blog elements. It is just about the same size as the other PSD and contains blogging items like a subscribe box, calendar, compose textarea, tags input box, and some other neat stuff.<\/p>\n<p>The color scheme is more solidified yet the flat buttons\/elements look almost identical. If you want to get started quickly I recommend downloading both of these kits and practicing in your own time.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/968433-Freebie-PSD-Flat-UI-Kit-2-Blog\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flat-ui-set-riki-tantone-blogging-gui2.jpg?new\" width=\"600\" height=\"450\" alt=\"riki tantone gui psd flat kit #2 freebie\"><\/a><\/figure>\n<h3>Flat UI Kit PSD #3<\/h3>\n<p>This alternative <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1083847-Flat-UI-Kit-Free-PSD\">flat UI kit<\/a> was designed by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/iDev\">Devin Schulz<\/a> and also released for free on Dribbble. I really like this PSD file because it focuses mostly on common website elements.<\/p>\n<p>Input fields, horizontal & vertical navigation, sliders, buttons, and lots of other page objects. The color scheme follows grey\/green on almost every element and it looks simply fantastic.<\/p>\n<p>All of these free UI kits encapsulate the flat design culture perfectly. And I am certain there are many many more examples to be found online. Actually just <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/search\/flat-ui-kit\">searching through Dribbble<\/a> presents a long list of results for flat UI kits. I encourage all designers to check out similar examples and see what you can build off these flat webpage elements.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1083847-Flat-UI-Kit-Free-PSD\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flat-website-gui-psd-freebie-devin-schulz.jpg?new\" width=\"600\" height=\"515\" alt=\"devin schulz freebie flat website ui psd\"><\/a><\/figure>\n<h3>Flatlyfe UI Kit PSD<\/h3>\n<p>The designer <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/dylanopet\">Dylan Opet<\/a> who also created the Event Planning UI freebie above, also released a newer flat UI Kit. The elements are based on common website objects like sliders, buttons, switches, tags, and input fields.<\/p>\n<p>I definitely recommend <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1093256--flatlyfe-UI-Kit-FREEBIE\">downloading a copy<\/a> and using these designs on some practice websites. Even the process of coding CSS3 styles based off this PSD would be a huge learning experience.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/1093256--flatlyfe-UI-Kit-FREEBIE\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/flatlyfe-flat-psd-website-ui.jpg?new\" width=\"600\" height=\"400\" alt=\"flatlyfe ui kit psd freebie graphics webdesign\"><\/a><\/figure>\n<h3>WDD Flat UI Kit PSD<\/h3>\n<p>Just recently there was a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webdesignerdepot.com\/2013\/05\/flat-ui-kit-free-download\/\">big post on Webdesigner Depot<\/a> releasing a new flat UI kit. This set is designed more towards the metro trends with a similar color palette, interface elements, sliders, bars, and other offbeat page objects.<\/p>\n<p>I would think this UI kit may also be used for mobile app design as well. It is a free download after you enter your e-mail address for their newsletter signup.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webdesignerdepot.com\/2013\/05\/flat-ui-kit-free-download\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/wdd-designer-depot-flat-ui-kit-psd.jpg?new\" width=\"600\" height=\"411\" alt=\"flat website user interface kit webdesigner depot psd\"><\/a><\/figure>\n<h2>Free Resources: Codes<\/h2>\n<p>Frontend web developers are always interested in the latest trends. Web design and development tend to overlap in many key areas, and this happens frequently when you are coding a website interface. Check out some of these free code samples which you can use in your flat design projects.<\/p>\n<h3>Flat UI<\/h3>\n<p>The Flat UI kit is probably the best resource for web developers getting into this trend. DesignModo has released both a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.com\/flat-free\/?u=limhongkiat\">free version<\/a> and a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.com\/flat\/?u=limhongkiat\">pro version<\/a> which includes both PSD files and HTML\/CSS coded elements.<\/p>\n<p>But the free version is honestly astounding and it provides all of the major items you would need like input fields, switch buttons, headers, icons, and so much more. Their free version is also <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/designmodo\/Flat-UI\">hosted on Github<\/a> for developers who may want to fork the project and extend functionality.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/designmodo.github.io\/Flat-UI\/?u=limhongkiat\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/designmodo-flat-ui-kit-freebie.jpg?new\" width=\"600\" height=\"429\" alt=\"designmodo psd and source code flat ui kit github demo\"><\/a><\/figure>\n<h3>iCheck<\/h3>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dargullin\/icheck\">jQuery iCheck plugin<\/a> is a tool for enhancing your input buttons. Notably checkboxes and radio inputs are two elements which can be difficult to style using CSS.<\/p>\n<p>iCheck is completely free and open source, which is perfect for new developers. You can build outstanding interfaces which blend perfectly into your website layout with just a few customizations.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/dargullin\/icheck\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/icheck-jquery-plugin-square-inputs.jpg?new\" width=\"600\" height=\"302\" alt=\"icheck jquery open source plugin radio checkboxes flat ui\"><\/a><\/figure>\n<h3>Boxy Buttons<\/h3>\n<p>Web developers are probably familiar with cloud-based IDEs such as jsFiddle and JSBin. Well <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\">CodePen<\/a> is another example which actually catalogs and presents the latest pens in one location. Developers will practice their skills and release awesome freebie codes to the world.<\/p>\n<p>This example presents a common set of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/chriscoyier\/pen\/iphrb\">flat interface buttons<\/a> designed in 3 varying sizes. You can obviously update the color scheme to match your own website. But I am really impressed with the hover\/active states on each button.<\/p>\n<p>Although the design is \"flat\" you can still notice a shadow beneath the button as you click. It is a really nice effect and it\u2019s awesome to find stuff like this out there for free use.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/chriscoyier\/pen\/iphrb\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/codepen-boxy-buttons-css3-flat-interface.jpg?new\" width=\"600\" height=\"477\" alt=\"codepen open source flat buttons css3 html5\"><\/a><\/figure>\n<h3>Simple Button Styles<\/h3>\n<p>These simple button styles are also found within CodePen. This is more of a bare-bones example which actually does not support an active state.<\/p>\n<p>The button hover uses CSS3 transitions for updating the background color in an elegant animation effect. Take this example with a grain of salt and see if you can expand on the codes to suit your own needs.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/simonbusborg\/pen\/cyxad\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/codepen-flat-button-styles-css.jpg?new\" width=\"600\" height=\"121\" alt=\"codepen free open source flat ui css3 buttons\"><\/a><\/figure>\n<h3>Signup Form<\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designbombs.com\/freebie\/\">CSSFlow snippets<\/a> may be one of the best online galleries for free HTML\/CSS codes. This particular example is a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designbombs.com\/freebie\/sign-up-form\">signup form<\/a> using a flat button and a couple input fields. You can actually try out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designbombs.com\/freebie\/sign-up-form\/demo\">live demo example<\/a> and see how this works in your own browser.<\/p>\n<p>The submit button has a natural hover and active state, plus the input fields also glow on focus. It is not much to start with but you can find other flat design examples from the CSSFlow snippets page.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.designbombs.com\/freebie\/sign-up-form\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/css-flow-flat-ui-form-open-source.jpg?new\" width=\"600\" height=\"400\" alt=\"flat user interface signup login form ui\"><\/a><\/figure>\n<h2 id=\"flat_showcase\">50 Beautiful Flat design Websites<\/h2>\n<p>What ultimate design guide would be complete without some beautiful examples? Flat design concepts are fun to discuss and debate, however talking will not always get you to the finish line.<\/p>\n<p>Browsing through some examples of other layouts can actually help you put together interfaces in your mind which you may not have thought about on your own.<\/p>\n<p>I have collected 50 luxurious flat website layouts which I hope will prove inspirational to designers all around the world.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.inky.com\/\">Inky<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.inky.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/01-inky-flat-website-ui-design.jpg?new\" width=\"600\" height=\"400\" alt=\"cloud desktop app inky flat website layout\"><\/a><\/figure>\n<h3>Squidee<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/02-squidee-homepage-flat-ui-design.jpg?new\" width=\"600\" height=\"400\" alt=\"squidee psd file sharing designers flat homepage\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/werkpress.com\/\">WerkPress<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/werkpress.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/03-werkpress-homepage-fullscreen-flat-background.jpg?new\" width=\"600\" height=\"400\" alt=\"werkpress wordpress theme customization studio\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/campaignmonitor\">Campaign Monitor<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/go\/campaignmonitor\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/04-campaign-monitor-homepage-flat-buttons.jpg?new\" width=\"600\" height=\"400\" alt=\"flat email newsletter marketing campaign monitor homepage\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rgb.to\/\">RGBto<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rgb.to\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/05-rgb-to-color-selector-webapp-flat.jpg?new\" width=\"600\" height=\"340\" alt=\"rgb color hex value converter flat design\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mapbox.com\/\">MapBox<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mapbox.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/06-mapbox-illustration-flat-ui-design.jpg?new\" width=\"600\" height=\"400\" alt=\"startup flat homepage vector shapes mapbox\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fitbit.com\/global\/sg\/home\">Fitbit<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fitbit.com\/global\/sg\/home\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/07-fitbit-fitness-website-webapp-homepage-flat.jpg?new\" width=\"600\" height=\"373\" alt=\"exercise webapp homepage layout interface flat\"><\/a><\/figure>\n<h3>United Pixelworkers<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/08-united-pixel-workers-flat-homepage-design.jpg?new\" width=\"600\" height=\"413\" alt=\"flat homepage website layout interface design\"><\/figure>\n<h3>President for a Day<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/09-president-for-a-day-flat-website.jpg?new\" width=\"600\" height=\"400\" alt=\"president for a day website flat interface homepage\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/teamtreehouse.com\/\">Treehouse<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/teamtreehouse.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/10-team-treehouse-teaching-flat-website-homepage.jpg?new\" width=\"600\" height=\"400\" alt=\"web design educational homepage flat interface design\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.rockwerchter.be\/en\/\">Rock Werchter 2013<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.rockwerchter.be\/en\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/11-rock-werchter-2013-flat-website-layout.jpg?new\" width=\"600\" height=\"408\" alt=\"rock werchter flat website layout music concert\"><\/a><\/figure>\n<h3>Erik Ford<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/12-erik-ford-personal-website-homepage.jpg?new\" width=\"600\" height=\"452\" alt=\"erik ford website flat homepage layout inspiration\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/minimalmonkey.com\/\">Minimal Monkey<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/minimalmonkey.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/13-minimal-monkey-website-flat-ui-theme.jpg?new\" width=\"600\" height=\"271\" alt=\"minimalmonkey flat website design layout\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ourlittleprojects.com\/\">Our Little Projects<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ourlittleprojects.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/14-our-little-projects-website-flat-metro-design.jpg?new\" width=\"600\" height=\"434\" alt=\"little projects homepage flat metro website layout\"><\/a><\/figure>\n<h3>Server Talk<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/15-server-talk-blog-homepage-flat-inspiration.jpg?new\" width=\"600\" height=\"400\" alt=\"website blog forum server tech talk flat homepage\"><\/figure>\n<h3>Sumall<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/16-sumall-website-flat-user-interface-design.jpg?new\" width=\"600\" height=\"400\" alt=\"analytics for marketers sumall beta website startup\"><\/figure>\n<h3>Pixel Plant<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/17-pixel-plant-website-flat-homepage-layout.jpg?new\" width=\"600\" height=\"414\" alt=\"convert flash graphics into html5 css3 website\"><\/figure>\n<h3>Gidmotion<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/18-gridmotion-homepage-flat-bars-design.jpg?new\" width=\"600\" height=\"400\" alt=\"Gabriela Iglesias creative artist portfolio flat homepage\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.moddit.nl\/\">Moddit<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.moddit.nl\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/19-moddit-website-homepage-flat-ui.jpg?new\" width=\"600\" height=\"400\" alt=\"moddit flat website homepage layout blue dark\"><\/a><\/figure>\n<h3>Cool Design Jobs<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/20-cool-design-jobs-homepage-metro-flat.jpg?new\" width=\"600\" height=\"358\" alt=\"flat metro website homepage cooldesignjobs\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/softwaremill.com\/\">SoftwareMill<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/softwaremill.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/21-software-mill-website-flat-homepage-design.jpg?new\" width=\"600\" height=\"360\" alt=\"softwaremill development team flat website layout\"><\/a><\/figure>\n<h3>Invoisse<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/22-invoisse-website-red-flat-ui-design.jpg?new\" width=\"600\" height=\"400\" alt=\"flat website layout design inspiration invoisse startup\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/appstronauts.com\/\">Appstronauts<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/appstronauts.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/23-appstronauts-homepage-flat-website-design.jpg?new\" width=\"600\" height=\"400\" alt=\"online website layout inspiration appstronauts\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.snowbird.com\/\">Snowbird<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.snowbird.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/24-snowbird-website-flat-ui-inspirational.jpg?new\" width=\"600\" height=\"400\" alt=\"flat white minimalism snowbird homepage\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.involvio.com\/\">Involvio<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.involvio.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/25-involvio-iphone-flat-homepage-website.jpg?new\" width=\"600\" height=\"517\" alt=\"school events involvio startup flat homepage layout\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/womenandtech.com\/\">Women and Tech<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/womenandtech.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/26-women-and-tech-website-flat-design.jpg?new\" width=\"600\" height=\"423\" alt=\"women and tech homepage flat website design\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flaticons.co\/\">Flaticons<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/flaticons.co\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/27-flaticons-flat-website-homepage-interface.jpg?new\" width=\"600\" height=\"441\" alt=\"flat icons set homepage interface designs\"><\/a><\/figure>\n<h3>Palace<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/28-flat-metro-website-layout-palace.jpg?new\" width=\"600\" height=\"426\" alt=\"palace exceptional design studio flat website\"><\/figure>\n<h3>Pears<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/29-pears-wordpress-theme-homepage-flat.jpg?new\" width=\"600\" height=\"339\" alt=\"pears wordpress theme patterns flat homepage layout\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.dropbox.com\/home\">Dropbox DBX<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.dropbox.com\/home\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/30-dropbox-dbx-2013-conference-flat-website.jpg?new\" width=\"600\" height=\"303\" alt=\"flat website conference dropbox homepage layout\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.techwalla.com\/articles\/how-to-verify-a-verisign-certificate\">Dynamit<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.techwalla.com\/articles\/how-to-verify-a-verisign-certificate\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/31-dynamit-website-flat-metro-homepage.jpg?new\" width=\"600\" height=\"321\" alt=\"metro flat homepage layout dynamit agency\"><\/a><\/figure>\n<h3>Tiny Big Studio<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/32-tiny-big-studio-website-homepage-layout.jpg?new\" width=\"600\" height=\"468\" alt=\"studio website layout homepage flat interface\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wistia.com\/\">Wistia<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wistia.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/33-wistia-video-hosting-startup-flat-homepage.jpg?new\" width=\"600\" height=\"400\" alt=\"flat website layout interface wistia homepage\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/symbolset.com\/\">Symbolset<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/symbolset.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/34-symbolset-icons-flat-ui-homepage-design.jpg?new\" width=\"600\" height=\"280\" alt=\"symbolset featured icons flat interface design\"><\/a><\/figure>\n<h3>P And R<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/35-pandr-design-agency-studio-flat-homepage.jpg?new\" width=\"600\" height=\"400\" alt=\"pandr design studio agency flat website\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegadgetflow.com\/\">The Gadget Flow<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegadgetflow.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/36-gadget-flow-homepage-metro-flat-website.jpg?new\" width=\"600\" height=\"400\" alt=\"homepage flat website gadget flow inspiration website\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegentlymad.com\/\">The Gently Mad Podcast<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thegentlymad.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/37-gently-mad-design-homepage-agency-website.jpg?new\" width=\"600\" height=\"231\" alt=\"tgm gently mad podcast flat homepage website\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hanno.co\/\">Hanno<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hanno.co\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/38-we-are-hanno-portfolio-flat-icons.jpg?new\" width=\"600\" height=\"315\" alt=\"flat website icons hanno interface design\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/oppositehq.com\/\">Beard Design<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/oppositehq.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/39-beard-design-yellow-flat-inspiration-homepage.jpg?new\" width=\"600\" height=\"386\" alt=\"flat yellow white design agency homepage\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/onsite.io\/\">OnSite<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/onsite.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/40-onsite-flat-ui-homepage-design-freelancer.jpg?new\" width=\"600\" height=\"403\" alt=\"onsite quality curated freelancers flat homepage design\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ournameismud.co.uk\/\">Mud Agency<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ournameismud.co.uk\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/41-mud-design-agency-flat-website-layout.jpg?new\" width=\"600\" height=\"394\" alt=\"digital design agency we are mud homepage\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vsco.co\/\">Visual Supply Co<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/vsco.co\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/42-visual-supply-company-website-layout.jpg?new\" width=\"600\" height=\"388\" alt=\"flat website layout visual supply company\"><\/a><\/figure>\n<h3>La Carotte<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/43-la-carotte-carrot-flat-website-shop-layout.jpg?new\" width=\"600\" height=\"314\" alt=\"carrot website interface layout design\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.futureinsights.com\/\">Future Insights<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.futureinsights.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/44-future-insights-conference-flat-website-layout.jpg?new\" width=\"600\" height=\"333\" alt=\"website design startups conference futureinsights flat layout\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/segment.com\/\">Segment.io<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/segment.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/45-segment-io-flat-homepage-startup-landing.jpg?new\" width=\"600\" height=\"400\" alt=\"segment flat website layout homepage design\"><\/a><\/figure>\n<h3>Startup Giraffe<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/46-startup-giraffe-website-flat-homepage-layout.jpg?new\" width=\"600\" height=\"344\" alt=\"flat giraffe vector graphics homepage layout\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.awpny.com\/\">Ancient Wisdom Productions<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.awpny.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/47-awp-ithaca-homepage-flat-website-layout.jpg?new\" width=\"600\" height=\"302\" alt=\"AWP ithaca new york design agency flat website\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/entypo.com\/\">Entypo<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/entypo.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/48-entypo-web-font-icons-homepage-flat-buttons.jpg?new\" width=\"600\" height=\"343\" alt=\"entypo flat icons website homepage layout\"><\/a><\/figure>\n<h3>Awkward<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/49-awkward-design-agency-flat-homepage.jpg?new\" width=\"600\" height=\"400\" alt=\"flat awkward design agency website layout\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thinkpixellab.com\/\">Pixel Lab<\/a><\/h3>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/thinkpixellab.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/50-pixel-lab-homepage-flat-blue-layout.jpg?new\" width=\"600\" height=\"400\" alt=\"pixellab design agency flat website layout\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you can see how popular these trends have become in recent months. Flat website design is a brilliant concept because it focuses solely on the content. But many designers&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[2372,2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ultimate Guide to Flat Website Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ultimate Guide to Flat Website Design\" \/>\n<meta property=\"og:description\" content=\"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-20T15:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-16T11:45:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Ultimate Guide to Flat Website Design\",\"datePublished\":\"2013-06-20T15:01:27+00:00\",\"dateModified\":\"2022-10-16T11:45:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/\"},\"wordCount\":2901,\"commentCount\":80,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-design-resources\\\/metro-dashboard-dribbble-shot.jpg?new\",\"keywords\":[\"Flat Design\",\"Website Design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/\",\"name\":\"Ultimate Guide to Flat Website Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-design-resources\\\/metro-dashboard-dribbble-shot.jpg?new\",\"datePublished\":\"2013-06-20T15:01:27+00:00\",\"dateModified\":\"2022-10-16T11:45:30+00:00\",\"description\":\"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-design-resources\\\/metro-dashboard-dribbble-shot.jpg?new\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-design-resources\\\/metro-dashboard-dribbble-shot.jpg?new\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-design-resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ultimate Guide to Flat Website Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ultimate Guide to Flat Website Design - Hongkiat","description":"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/","og_locale":"en_US","og_type":"article","og_title":"Ultimate Guide to Flat Website Design","og_description":"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you","og_url":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-06-20T15:01:27+00:00","article_modified_time":"2022-10-16T11:45:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Ultimate Guide to Flat Website Design","datePublished":"2013-06-20T15:01:27+00:00","dateModified":"2022-10-16T11:45:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/"},"wordCount":2901,"commentCount":80,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new","keywords":["Flat Design","Website Design"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/","url":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/","name":"Ultimate Guide to Flat Website Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new","datePublished":"2013-06-20T15:01:27+00:00","dateModified":"2022-10-16T11:45:30+00:00","description":"The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-design-resources\/metro-dashboard-dribbble-shot.jpg?new"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ultimate Guide to Flat Website Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4xr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17449"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17449\/revisions"}],"predecessor-version":[{"id":62981,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17449\/revisions\/62981"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17449"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}