The Principles of Beautiful Web Design

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 implementationUse color effectively, develop color schemes, and create a paletteCreate pleasing layouts using grids, the rule of thirds, and symmetryEmploy textures: lines, points, shapes, volumes, and depthApply typography to make ordinary designs look greatChoose, 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 techniquesA new sample projectNew sections on pattern libraries and how design fits on modern app development workflowsCommon user-interface patterns and resources 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