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)

Respecting the grid


Grid is an important tool in graphic design as well as in digital design. The grid is a combination of imaginary lines that define the spacing and dimensions of the main layout and it's the foundation of an interface, on top of which the layout will be designed. It's a framework that gives the user the orientation and guidance to design every page and every content of a section, without having to worry about alignment, safe margins, and spacing. This is because the grid was already developed earlier to avoid these calculations for each page. Have a look at the following screenshot:

Photoshop guides with the Guide plugin

The grid is definitely essential on every design piece, but its importance is undeniable for flat. Since flat designs tend to have less boxes and lines, the grid is extremely important to hold all the visual elements together to form a layout. Two elements aligned can give the viewer the perception of a block or a line, and these visual perceptions are built...