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)

Designing your components


To create your own Flat UI pack, the first step is to define which elements you should create. Your objective is to create and gather a pack of elements to reuse in future projects, so you should look for basic interface elements that are common to most projects. Elements such as buttons, form controls such as radio buttons and checkboxes, form content areas such as text fields and text areas, title style, and sizes such as <h1>, <h2>, and <h3>, once designed, thought of, and developed, can be reused in several projects. Often, a web designer finds himself or herself reusing old HTML and CSS code, so creating your own personal pack is great in order to make your workflow easier and quicker.

The first phase of creating your own Flat UI pack is to design your elements. There are several designs online for UI packs, web elements, and even great icon packs that you can use as an inspiration for your own work. A simple search on dribbble.com will help...