Books
Antonio Pratas

Creating Flat Design Websites

  • Артем Малахивскийhas quotedlast year
    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.
  • Артем Малахивскийhas quotedlast year
    he following screenshot shows Flat UI Colors from http://flatuicolors.com:
  • Артем Малахивскийhas quotedlast year
    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.
  • Артем Малахивскийhas quotedlast year
    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)
  • Артем Малахивскийhas quotedlast year
    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.
  • Артем Малахивскийhas quotedlast year
    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:
  • Артем Малахивскийhas quotedlast year
    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/)
fb2epub
Drag & drop your files (not more than 5 at once)