The Principles of Beautiful Web Design

✍ Scribed by Jason Beaird, Alex Walker, James George

• Publisher: SitePoint
• Year: 2020
• Tongue: English
• Leaves: 277
• Edition: 4
• Category: Library

✦ Synopsis

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

✦ Table of Contents

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