Basics of Web Authoring and Design

Whitespace & Negative Space in Web Design

Parts of a Composition

Frame: Bounding size of artwork
Size of space where subject is placed
Positive Space: subject The main focus
Negative Space: Empty space around subject
Defines and implies shape of the plane

Negative Space

How it Works

Negative space helps define a subject
Works best when there is a balance of positive and negative space
Helps draw viewers’ eyes to the subject

How to Use

Readjust your frame to the subject
If the subject moves inside or outside the frame, the shape and amount of negative space will change

Benefits

If you work with negative spaces more than positive spaces, you will end up with: A more accurate and aesthetically pleasing design Creates a balanced composition Use negative space to intelligently organize texts and graphics to give relief to viewers’ eyes

Whitespace

How it Works

White space is the space between elements in a composition

Macro & Microwhitespace

Macro whitespace: space between major elements
Micro whitespace: space between smaller elements
Between list items
Between caption and image
Between words and letters

Active and Passive Whitespace

Active Whitespace: whitespace used to lead readers from one element to another Used to better emphasize or structure information
Passive Whitespace: create visual comfort, creates breathing room

Places to add Whitespace

Menus
Captions
Headers
Footers
Between lines of text
Around graphics
Between items on a list
Between characters
Making font thinner