Creating Flat Design Websites

definitely recommend Jakob Nielsen's book, Designing Web Usability, available on Amazon at http://www.amazon.co.uk/Designing-Web-Usability-Practice-Simplicity/dp/156205810X.

he following screenshot shows Flat UI Colors from http://flatuicolors.com:

There are some types of preferred colors to be used in flat though. The website, http://flatuicolors.com, is great to check these quickly as well as use them.

The following are some of the font families suggested for use in flat design:

Proxima Nova (http://www.myfonts.com/fonts/marksimonson/proxima-nova/)
Futura (http://www.myfonts.com/fonts/bitstream/futura/)
Lato (http://www.google.com/fonts/specimen/Lato)
Montserrat (http://www.google.com/fonts/specimen/Montserrat)
Open Sans (http://www.google.com/fonts/specimen/Open+Sans)
Cobert (http://www.fontsquirrel.com/fonts/corbert)

If you're looking at creating a responsive website, a good tool to help in this task is unsemantic, which is available online at http://unsemantic.com/demo-responsive. This is a grid system that is very similar to 960, but instead of being a fixed grid, this system has a fluid grid. Instead of being defined over a fixed number of columns, the fluid grid is entirely based on percentages, allowing the layout to adapt to the device viewport and provide a responsive experience to the user.

To help you design, there are already several grid systems developed for several kinds of applications. Specifically for the Web, one of the most used ones is the 960 Grid System. It can be found online at http://960.gs. The following screenshot shows the 960 Grid System being used on tapbots.com:

Flat Design Icons Set Vol1 by Pixeden (http://www.pixeden.com/media-icons/flat-design-icons-set-vol1)
Free Flat Icons by buatoom (http://dribbble.com/shots/1095922-Free-Flat-Icons)
Free Flat Icons by Jan Dvořák (http://dribbble.com/shots/1054478-Free-Flat-Icons)
Flat Icon Collection (http://www.flaticon.com/)
Flat Icons Collection (http://flaticons.net/)