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)

Creating our folder tree


Properly organizing your files, as well as creating a comprehensive file structure, is very important when working in big projects. In smaller projects, you might not realize the importance of this, but it's a habit you should build from the beginning, so that when you work on bigger projects, you implement good practices from the beginning.

This is extremely easy to do, and it's also something you can adapt to your personal taste. I like to keep my files organized in categories. When I begin a development project, one of the first things I like to do is create three folders: css, where I obviously keep my CSS style files; img, where I save the images used to build the website, and js, where I keep all my JavaScript files. In the root of your main folder, you should have your HTML files in a way that you can easily load the rest of your files by using relative paths.

This is a very simple task, but it helps you organize all your files in a way that lets you use relative...