O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Flat Design Websites

Book Description

Design and develop your own flat design websites in HTML

In Detail

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.

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.

What You Will Learn

  • Get to grips with flat design and how you can create your own flat design projects
  • Discover how to create flat designs without losing any functionality or ease of use
  • Develop your HTML website using frameworks to save time
  • Plan and organize your website sections and content
  • Design the layout for a flat design website
  • Understand common flat design usability mistakes and how to avoid them
  • Use Designmodo Flat UI kit to enhance your flat design websites
  • Create your own Flat UI kit for future projects

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Creating Flat Design Websites
    1. Table of Contents
    2. Creating Flat Design Websites
    3. Credits
    4. About the Author
    5. Acknowledgment
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. What is Flat Design?
      1. Defining flat design
      2. History and evolution
      3. Skeuomorphic versus flat
        1. Exercise 1 – the skeuomorphic and flat buttons
      4. The use of flat in the real world
      5. Summary
    10. 2. Designing in Flat
      1. Design style
      2. Working with limitations
      3. Flat is not always the answer
      4. Lose your "crutches"
      5. Photos or illustration?
      6. Respecting the grid
      7. Focusing on typography
      8. Flat colors
      9. Inspiration and references
      10. Summary
    11. 3. Creating a Flat and Usable Interface
      1. Understanding web usability
        1. The importance of web usability
        2. Achieving a good balance
      2. Web forms usability
        1. Creating a web form with regular browser styles
        2. Recreating the form with flat style
        3. Refining the form's usability
      3. Flat readability
      4. Summary
    12. 4. Designing Your Own Flat Website
      1. Planning your work
      2. Defining your sections
      3. Start designing your page
      4. Using the Designmodo.com Flat UI
      5. Designing in Photoshop
      6. Summary
    13. 5. Developing Your Site
      1. Creating our folder tree
      2. Prepping our images
      3. Developing our page
      4. Styling our page with CSS
      5. Using jQuery for navigation
      6. Summary
    14. 6. Creating Your Own Flat UI Kit
      1. Designing your components
      2. Exporting and coding
      3. Documentation is key
      4. Summary
    15. Index