Creating Flat Design Websites [Book Review]

Yes, you know me, I am restless ;) I am always trying to find new sources of inspiration and new ways to ignite my creativity…

This is the reason why I really enjoyed reading “Creating Flat Design Websites” by António Pratas. As soon as I started to read this book, new ideas started to pop into my head. And, with every new chapter, I soon found myself sketching flat interfaces.

The first time I purposefully and consciously tried to design a flat interface was last year. I use the words “purposefully” and “consciously” here because I have always favored simple, clean interfaces that prioritize content but until now I understand that this is the ultimate goal of flat design. In Pratas´ words:

Flat is not only about text and simple colors, it´s about creating a layout where your photos and your content stand out, by bringing the focus of the user on the content instead of on the interface. This was something that often happened on skeuomorphic interfaces. (Pratas 2014: 21)

flat_design1

This image and the rest of the images in this post are examples of some of my sketches.

 

Throughout the book, I found clear step-by-step instructions and useful resources that allowed me to continue exploring this style and evaluate how to accomplish its ultimate goal.

It is frequently said that a picture is worth a thousand words, so , use those pictures well to help you communicate your message. Photos can be very important in setting the mood and the tone of the website, a flat design looks great over a picture as it´s a mix between the complex (image) and the simple (layout), which gives a great contrast between the two. (Pratas 2014: 21)

Example 1 - flat design

Photo from http://www.raumrot.com/10/ Overlay color: Midnight blue #2D3E4F (25% transparency) Font: Lato https://www.google.com/fonts/specimen/Lato Button style: hollow buttons.

I could also evaluate how to apply some of these ideas to my eLearning and mLearning projects. “Flat” lends itself to designing mobile interfaces. As I said in a previous post, when designing for mobile, we need to prioritize a single action and let the content guide the learner. A simple interface can help  users quickly complete that primary task.

Flat is great because it is such a simple style that allows you to showcase its content. In the end, it´s all about the content and the design´s function is to give that content to the user/reader in the easiest and quickest way (Pratas 2014: 21).

Example 2 -flat design

Photo from http://www.raumrot.com/10/   Font: Nova http://www.dafont.com/es/nova2.font Color schema: Green sea #17A085 and Old beige #E1D2BF

This book also provides valuable tips, from planning visual sections to evaluate the usability of a design. My favorite chapter is “Developing your site” because it is a great starting point for learning how to code a basic HTML5 page and add JQuery transitions and CSS3 effects.

ipad

My Responsive Flat Website in HTML5 (iPad Rendering)

 

phone

My Responsive Flat Website in HTML5 (Android Device Rendering)

 

Creating Flat Design Websites is not only a great book to practice your skills as a designer but also a useful resource if you -like me- seek to acquire development techniques.