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)

Photos or illustration?


The answer to this question is pretty simple: both.

Flat design illustration is something that was picked up really fast by designers, especially to design flat iconography, thus achieving a very interesting effect using flat colors on these icons. These illustrations look great and are really a good complement to the flat look on your website (if they are indeed relevant to your product and target), but photos can (and should) also be used. Flat is not only about text and simple colors; it's about creating a layout where your photos and your content stands out, by bringing the focus of the user on the content instead of on the interface. This was something that often happened on skeuomorphic interfaces.

Nowadays, it's very common to see websites using very wide and high-resolution photos of people, products, or environment to showcase their product in a real-life situation more easily. It is frequently said that a picture is worth a thousand words, so, use those pictures...