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)

Web forms usability


As we said earlier, usability is extremely important in a flat design. The element that suffers more on the usability front from this style is usually the web form. It is usually so easy to match controls such as buttons and text fields to match the flat styles that they lose the effects and features that make them identifiable. A text field is usually represented by a rectangular box with a subtle inner shadow to show that it is expecting content. This shadow is often lost in flat design, and to avoid this, we need to make sure that a form is identifiable as a form. There are several ways of doing this. The best way to do this is by laying your hands on it, so let's do a simple exercise on web forms usability.

Next, we will create a simple sign-up form for a website. To do this, we will use the ele_winvista_firefox_all.psd file, which is available on the resource pack that accompanies this book. It is also available online at http://designerstoolbox.com/designresources...