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)

Developing our page


Now that we have our images ready, let's start creating our page. Just like with the design, we'll create from top to bottom, starting in the header and developing the layout down to the footer.

We are going to be using Designmodo Flat UI Free for this, so the first thing we need to do is to import the files we're going to use. If you haven't done it already, download this from http://designmodo.com/flat-free/. Visit the page and click on Download HTML. This will get you a ZIP file with the Designmodo Flat UI Free pack, Twitter Bootstrap 3, and some example files.

So, just as we covered earlier, let's start by creating our folder tree. Create the following folders: css, js, and img. We will also need extra resources, so create two extra folders: fonts, where we will save the custom fonts used and bootstrap, where we will save the bootstrap files we're going to be using.

Designmodo Flat UI Free pack is built on top of Twitter Bootstrap, so we will effectively be using Twitter...