Book Review: Creating Flat Design Websites

Creating Flat Design Websites was recently published by Packt Publishing. Written by António Pratas, this book's subtitle is "Design and develop your own flat design websites in HTML." The book features six chapters and is fewer than 100 pages in substantive length. In case you're wondering what the term flat design means, I include a definition here provided in the first chapter of Creating Flat Design Websites:

[Flat design] is characterized by a really minimalistic look, focused on removing all extra elements and effects from a design, such as bevels, shadows, lighting effects, depth, texture, and every element that creates and gives an extra dimension to these elements.

Preface

Staying true to the pattern established in other Packt titles, the Preface of Creating Flat Design Websites contains useful overview information such as a chapter-by-chapter summary of what the book covers, what is required for applying the book's examples (primarily PhotoShop, a text editor, jQuery, and a web browser), and who the intended audience is ("designers and developers who are interested in creating websites").

Chapter 1: What is Flat Design?

The initial chapter of Creating Flat Design Websites defines "flat design" (see definition shown above) and talks about the history of flat design. The coverage of flat design's history included reference to The Flat Design Era post and includes examples of how Microsoft and other vendors have adopted flat designs in recent years.

Chapter 1 contrasts Skeuomorphic and flat designs and lists advantages and disadvantages of each. As part of this, Skeuomorphic design is defined: "Skeuomorphic design, also known as realism, consists of creating visual elements that represent their original, physical counterpart." The chapter also includes a detailed example of creating buttons in both styles using PhotoShop that enables the differences between the styles to be made more obvious. The chapter concludes with side-by-side examples of well-known logos that have been changed from skeuomorphic style to flat style.

Chapter 2: Designing in Flat

The second chapter of Creating Flat Design Websites explains how flat design is more than just minimalistic because flat design has a "specific look and certain rules." The chapter discusses some of these rules about what is "allowed" and "not allowed" for a design to be considered a flat design. For example, shadows are allowed while gradients and textures are not. The chapter discusses applying photographs and illustrations in flat designs and introduces 960 Grid System (fixed grid) and Unsemantic (responsive grid) during its discussion of application of grids in flat designs. The chapter lists five "freely available [predesigned flat] icon sets online."

Typography and fonts in flat design are also covered in the second chapter. This section includes a list of six "font families suggested for use in flat design." The section on flat colors introduces and describes how to use the Flat UI Colors site to select flat colors. The chapter concludes with several pages of screen snapshots demonstrating good flat designs that could be used to inspire readers' own flat designs.

I was happy to see that the author states that flat design is not always the answer. Most books covering a topic act as if the tool or approach being covered always works better than the alternatives and it's always more credible to me when an author evangelizes an approach while also recognizing its limitations.

Chapter 3: Creating a Flat and Usable Interface

Chapter 3 of Creating Flat Design Websites addresses maintaining usability features in flat designs, which can be an issue because flat "style may create several usability problems given its simple look." The chapter outlines reasons that usability is important in web pages and sites and then discusses balancing functional and appearance aspects. The chapter then provides an example of applying some of this chapter's principles to migrate a web site to flat design.

The third chapter explains how flat design can lead to removing of some of the normal cues of the existence of web form and then goes through an example of how to convert a web form to a flat design in which it is still obvious that a web form is involved. The chapter concludes with a discussion regarding "flat readability" and advises to "always look to achieve the best contrast between text and background."

Chapter 4: Designing Your Own Flat Website

Creating Flat Design Websites's fourth chapter describes steps to take to design one's own flat website. Topics include planning the website based on anticipated audience, designing the sections of the website, and using tools such as PhotoShop, uiFaces, flatuicolors.com, Lightbox, and Dribbble to create an attractive web page adhering to flat design principles. The chapter introduces Designmodo's Flat UI Free as a tool for quickly jump-starting the website design process.

Chapter 5: Developing Your Site

Chapter 5 of Creating Flat Design Websites extends the example started in Chapter 4. Topics covered here include laying out the project's directory structure, preparing images and generating image assets with PhotoShop, developing the website with Bootstrap-based Designmodo Flat UI Free, and applying HTML, CSS, and JavaScript/jQuery to the website.

Chapter 6: Creating Your Own Flat UI Kit

The final chapter of Creating Flat Design Websites references Alexandre Crenn's FREE Pack UI .PSD as an example of a personal Flat UI kit and then explains how the reader can create his or her own kit. The chapter covers creating elements with PhotoShop, creating sprites with Sprite Cow, writing HTML, writing CSS (includes introduction to CSS3 Generator), and documenting the developed code.

General Observations

• The screen snapshots in the PDF edition I reviewed are full color, which is important for illustrating design principles and examples.
• I liked the frequent use and mention of freely available online resources and tools for building flat design websites.
• It seems difficult to really explain flat design and differentiate it from other minimalistic design styles with words alone. The many examples of existing flat designs and of implementing flat designs helped make the subject clearer.
• Although Creating Flat Design Websites includes content related to design and code development, it seems more focused on design than on code development. For me, this was a positive aspect as I am more comfortable with how to implement the code than I am with how to design the page. I appreciated the tips of flat design and design in general.

Conclusion

Creating Flat Design Websites introduces the concept of flat web designs and provides descriptions, code examples, and visual examples of implementing flat designs. This relatively short book provides a nice introduction into what constitutes flat design and how the reader can begin creating his or her own flat design websites.