Creating Flat Design Websites

Cover......Page 1
Copyright......Page 3
Credits......Page 4
About the Author......Page 5
Acknowledgment......Page 6
About the Reviewers......Page 7
www.PacktPub.com......Page 9
Table of Contents......Page 10
Preface......Page 12
Defining flat design......Page 16
History and evolution......Page 17
Skeuomorphic versus flat......Page 18
Exercise 1 – skeuomorphic and flat button......Page 19
The use of flat in the real world......Page 26
Summary......Page 27
Design style......Page 28
Working with limitations......Page 29
Flat is not always the answer......Page 30
Lose your "crutches"......Page 31
Photos or illustration?......Page 32
Respecting the grid......Page 34
Focusing on typography......Page 37
Flat colors......Page 38
Inspiration and references......Page 40
Summary......Page 44
Understanding web usability......Page 46
The importance of web usability......Page 48
Achieving a good balance......Page 49
Web forms usability......Page 54
Creating a web form with regular browser styles......Page 55
Recreating the form with flat style......Page 56
Refining the form's usability......Page 58
Flat readability......Page 59
Summary......Page 62
Planning our work......Page 64
Start designing your page......Page 65
Using the Designmodo.com Flat UI......Page 67
Designing in Photoshop......Page 68
Summary......Page 75
Creating our folder tree......Page 76
Prepping our images......Page 77
Developing our page......Page 79
Styling our page with CSS......Page 87
Using jQuery for navigation......Page 94
Summary......Page 95
Designing your components......Page 96
Exporting and coding......Page 99
Documentation is key......Page 103
Summary......Page 104
Index......Page 106