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 readability


Flat design usually features large sans-serif typefaces used for messaging and titles. These bits of text look great over photos and flat colors, but as with everyone, you always have to make sure that your typography is readable. In the case of flat, where you're not supposed to use drop shadows or gradients, you have to be extra careful about readability. For this, always look to achieve the best contrast between text and background.

Let's do a quick exercise using the following steps to try out the best ways to achieve good readability:

  1. Create a new document on Photoshop, where we will try the colors. We just want to overlay text on top of blocks, so create a small rectangle of size 160 x 175 px. Set the color of this shape as black, and create a text field inside of it in white. This contrast, white on top of black, is extremely readable. The best contrast for readability is, of course, black on top of white, like every book and every newspaper. We just created the inverse...