The Principles of Beautiful Web Design, 4th Edition

The Principles of Beautiful Web Design, 4th Edition

by Jason Beaird, Alex Walker, James George
Released September 2020
Publisher(s): SitePoint
ISBN: 9781098124748

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

The Principles of Beautiful Web Design is the ideal book for anyone who wants to design stunning websites that provide a great user experience. Perhaps you're a developer who wants to understand how to make your applications more visually appealing, or you're a novice who wants to start on the path to becoming a designer.

This book will teach you how to:

  • Understand what makes "good design," from discovery through to implementation
  • Use color effectively, develop color schemes, and create a palette
  • Create pleasing layouts using grids, the rule of thirds, and symmetry
  • Employ textures: lines, points, shapes, volumes, and depth
  • Apply typography to make ordinary designs look great
  • Choose, edit, and position effective imagery

This easy-to-follow guide is illustrated with beautiful, full-color examples, and will lead you through the process of creating great designs from start to finish.

The fourth edition of this bestselling book has been greatly revised and now features:

  • Updated and expanded coverage responsive web design techniques
  • A new sample project
  • New sections on pattern libraries and how design fits on modern app development workflows
  • Common user-interface patterns and resources

Publisher resources

View/Submit Errata

Table of contents

  1. The Principles of Beautiful Web Design, 4th Edition
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About SitePoint
  6. About the Authors
  7. Preface
    1. Who Should Read This Book?
    2. What’s in This Book
    3. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
    4. Supplementary Materials
  8. Chapter 1: Layout and Composition
    1. The Design Process
      1. Discovery
      2. Client Meetings Don’t Have to Take Place in an Office
      3. Exploration
      4. Implementation
    2. Defining Good Design
      1. Users Are Pleased by the Design but Drawn to the Content
      2. Users Can Move about Easily via Intuitive Navigation
      3. Users Recognize Each Page as Belonging to the Site
    3. Web Page Anatomy
      1. The Containing Block
      2. The Logo
      3. The Navigation
      4. The Content
      5. The Footer
      6. Whitespace
    4. Grid Theory
      1. The Rule of Thirds
    5. CSS Frameworks
    6. Balance
      1. Symmetrical Balance
      2. Asymmetrical Balance
    7. Unity
      1. Proximity
      2. Repetition
    8. Emphasis
      1. Placement
      2. Continuance
      3. Isolation
      4. Contrast
      5. Proportion
    9. Bread-and-butter Layouts
      1. Left-column Navigation
      2. Right-column Navigation
      3. Three-column Navigation
      4. Navigationless Magazine Style
      5. Bare-bones Minimalism
      6. Break the Mould Layouts
    10. Web Trends
      1. Video Backgrounds
      2. Masonry Layouts
      3. Parallax Scrolling
    11. Finding Inspiration
    12. Using a Morgue File
    13. Responsive Design
    14. Screen Resolutions
      1. How Do @media Queries Work?
    15. Responsive Web Design Principles
      1. Always Design for “Mobile First”
      2. Don’t Jam Elements into the Mobile View Just Because They’re in the Desktop View
      3. SVG Is Your BFF
    16. Responsive Frameworks
    17. The Project: Trashmonger
      1. Assets
      2. Requirements
    18. Sitemap
  9. Chapter 2: Color
    1. The Psychology of Color
      1. Color Associations
      2. Red
      3. Orange
      4. Yellow
      5. Green
      6. Blue
      7. Purple
      8. White
      9. Black
    2. Color Temperature
    3. Chromatic Value
      1. Saturation
    4. Color Theory 101
    5. Red, Yellow, and Blue, or CMYK
    6. The Scheme of Things
      1. A Monochromatic Color Scheme
      2. Monochromatic Color Scheme in the Real World
      3. An Analogous Color Scheme
      4. Analogous Color Scheme Examples
      5. A Complementary Color Scheme
      6. Complementary Color Scheme Examples
      7. Common Complementary Pitfalls
      8. Split-complementary, Triadic, and Tetradic
      9. Other Variants
    7. Creating a Palette
      1. Hexadecimal Notation
    8. Color Tools and Resources
      1. Paletton
      2. Colormind
      3. Adobe Color
      4. COLOURlovers
      5. Colour Contrast Check
    9. The Application: Choosing a Color Palette
  10. Chapter 3: Texture
    1. Point
    2. Line
    3. Shape
      1. Designing in CSS
      2. Rotation and Angles
      3. Directing the Eye
      4. Putting It Into Practice
    4. Volume and Depth
      1. Perspective
      2. Proportion
      3. Light and Shadow
      4. From 3D Renders to Flat design
      5. Flat Design
      6. Is UI Design Still a Flat Earth?
      7. Photoshop Filters
    5. Pattern
    6. Building Texture: Vintage, Patterned, Worn, and Nostalgic Styles
      1. Paper Grain
      2. Paints, Pencils and Other Traditional Media
      3. Faded Memories
      4. The Digital Retro Look
      5. Halftone and Ben Day Dots
      6. DIY Halftones
      7. Hidden Grain
      8. Starting Your Own Textural Trends
    7. Application: Adding a Design Motif Using SVG Patterns
    8. Using a Pattern as a Motif
  11. Chapter 4: Typography
    1. Taking Type to the Web
      1. Self-hosted Web Fonts
      2. Web Font Services
    2. Anatomy of a Letterform
    3. Text Spacing
      1. Horizontal Spacing
      2. Vertical Spacing
    4. Text Alignment
    5. Typeface Distinctions
      1. Serif Fonts
      2. Sans-serif Fonts
      3. Handwritten Fonts
      4. Fixed-width Fonts
      5. Novelty Fonts
      6. Dingbat Fonts
    6. Finding Fonts
      1. Free Font Galleries
      2. Commercial Font Galleries
      3. Individual Artists and Foundries
    7. Choosing the Right Fonts
    8. Establishing a Typographic System
      1. Typical Body Font Sizes
    9. Scaling Your Type
      1. Type Scaling in Practice
      2. Mobile Considerations
    10. Vertical Baseline Rhythm
      1. Vertical Baseline Rhythm Is a Tool, Not a Religion
    11. The Takeaway
    12. The Project: Building a Type System
      1. Creating a Basic Typography Style Guide
      2. Adding a Visual Grid
    13. What Now?
  12. Chapter 5: Imagery
    1. What to Look For
      1. Question 1: Is It Relevant?
      2. Question 2: Is It Interesting?
      3. Question 3: Is It Appealing?
    2. Legitimate Image Sources
      1. Take It or Make It
      2. Stock Photography
      3. Getting Professional Help
    3. How Not to Impress
      1. Google Ganking
      2. Hotlinking
      3. Clip Art
    4. Image Presentation
      1. Creative Cropping
      2. Image Adjustments
      3. Filters
    5. File Formats and Resolutions
    6. Creative Image Treatments
      1. Using Images to Enhance Images
      2. Using Pure CSS to Enhance Images
      3. Breaking
    7. The Project: Pulling the Design Together
      1. Pulling in the Pattern Motif
      2. Complete: Trashmonger v1.0
    8. Onward and Upward

Product information

  • Title: The Principles of Beautiful Web Design, 4th Edition
  • Author(s): Jason Beaird, Alex Walker, James George
  • Release date: September 2020
  • Publisher(s): SitePoint
  • ISBN: 9781098124748