Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
The Principles of Beautiful Web Design, 4th Edition
Notice of Rights
Notice of Liability
Trademark Notice
About SitePoint
About the Authors
Preface
Who Should Read This Book?
What’s in This Book
Conventions Used
Code Samples
Tips, Notes, and Warnings
Supplementary Materials
Chapter 1: Layout and Composition
The Design Process
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
The Navigation
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
Responsive Design
Screen Resolutions
How Do @media Queries Work?
Responsive Web Design Principles
Always Design for “Mobile First”
Don’t Jam Elements into the Mobile View Just Because They’re in the Desktop View
SVG Is Your BFF
Responsive Frameworks
The Project: Trashmonger
Assets
Requirements
Sitemap
Chapter 2: 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
Chapter 3: Texture
Point
Line
Shape
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
Hidden Grain
Starting Your Own Textural Trends
Application: Adding a Design Motif Using SVG Patterns
Using a Pattern as a Motif
Chapter 4: Typography
Taking Type to the Web
Self-hosted Web Fonts
Web Font Services
Anatomy of a Letterform
Text Spacing
Horizontal Spacing
Vertical Spacing
Text Alignment
Typeface Distinctions
Serif Fonts
Sans-serif Fonts
Handwritten Fonts
Fixed-width Fonts
Novelty Fonts
Dingbat Fonts
Finding Fonts
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
Vertical Baseline Rhythm Is a Tool, Not a Religion
The Takeaway
The Project: Building a Type System
Creating a Basic Typography Style Guide
Adding a Visual Grid
What Now?
Chapter 5: 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
Stock Photography
Getting Professional Help
How Not to Impress
Google Ganking
Hotlinking
Clip Art
Image Presentation
Creative Cropping
Image Adjustments
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
Pulling in the Pattern Motif
Complete: Trashmonger v1.0
Onward and Upward
← Prev
Back
Next →
← Prev
Back
Next →