Book Image

Creating Flat Design Websites

By : António Pratas
Book Image

Creating Flat Design Websites

By: António Pratas

Overview of this book

<p>Flat design is a simple yet visually appealing and increasingly popular style, particularly good for people just starting to develop their own websites. This book helps you to create a simple and good looking product in the flat design style.</p> <p>Creating Flat Design Websites will cover the origins of flat design, its principles as a visual style, and how to start designing right away, always making sure that the interface designed doesn't suffer from usability problems. Learn to design and develop your flat website with external frameworks to save time and money in your project. The book also provides you with tips to avoid the usability mistakes that commonly accompany this style due to its simple look and elements, as well as how to start developing the look of your website in HTML and CSS. Finally, you will learn how you can create your own Flat UI kit to suit your needs.</p>
Table of Contents (14 chapters)

Flat colors


The rules for using colors in flat are pretty simple: avoid gradients and textures. These colors should be used as they are, without any modifications. Even a flat color will look like it has a bit of a gradient to it because of the way the LCD screens are built. This is because the color won't be exactly the same in every area of the screen, and also, the light that surrounds your device has some influence on it. So, try to test your colors and choose a palette that works and looks good.

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. By just clicking on the color on the screen, the hexadecimal code will be copied to your clipboard and be ready to be pasted in your Photoshop or CSS code. The colors shown on the website easily represent the kind of colors used. It's an interesting take on using vivid colors, but they should be toned down a bit. A strong and greener turquoise...