Week 12 Outside of Class

This weekend I read Chapter 3 in Above The Fold. These are my notes.
Chapter 3 - Web Design Unity
ORGANIZATION AND HIERARCHY

• Visual hierarchy is the sequencing of elements within a design
• Almost every type of information can be broken down into three or four levels of importance - more than that makes contrasting the difference between the levels difficult
• To create hierarchy, a designer must first create a system
• A system is created by logically grouping the elements of a design, either through meaning or function, and forming visual relationships between them.
• An effective design system takes precedence over the individual elements so that the user perceives a cohesive unit

WHITE SPACE

• Deliberately constructed white space, not unconsidered or empty space, is often overlooked as an element of web design
• Space is essentially for creating relationships that form systems that lead to hierarchy
• The interplay between the objects of a design and the background is called the figure-ground relationship
• White space design elements include:
• Margins - area surrounding a design
• Gutters - space between columns of a grid
• Padding - area around an element contained by a border
• Line Spacing - or leading
• Paragraph spacing
• White space is also essential for making a layout scannable, a critical aspect to web design

THE GESTALT PRINCIPLES OF PERCEPTION

• "The whole is greater than the sum of the parts"
• These principles refer to the mind's ability to group elements based on one of the following relationships:
• Similarity - mind groups elements that have a unique visual relationship (2 rows of squares, 2 rows of circles)
• Proximity - grouping of elements that are close to one another
• Closure - grouping of elements that complete a larger unit (squares that form an incomplete square - we still see a square)
• Continuance - grouping of elements that complete a pattern or progression (squares form an incomplete line)

CONTAINMENT

• Borders, lines, and boxes can be helpful in defining the space and containing elements within sub-groups

GRIDS

• Grids not only organize the elements of a design, they organize the space within a design
• To create a fixed-width grid for the web, a designer must first determine the width of the design, which is determined by the target user's monitor resolution
• Most sites are still optimized for 1024 x 768 pixels, therefore most web grids are between 950 and 990 pixels wide - they are about 50 pixels less to account for scroll bars and other browser elements
• Once width has been determined, a designer decides how many columns are needed
• Generally, three is too limiting, however, too many columns can make recognizing relationships difficult
• The column width for a grid is determined by the overall width divided by the number of columns
• Finally, gutters (space between columns) are added, providing separation between the elements in each column
• Fixed-width (Floating centered; fixed left) - width of columns never change - they float either to the left or in the center
• Variable width - each column expands proportionately with the width of the browser frame
• Combination of Variable and Fixed width - as the browser window expands, only one column width expands with it - some expand, some don't

THE BASELINE GRID

• A baseline grid is a horizontal grid system that exactly aligns the baselines of all the text on a page, regardless of size or style
• A web designer starts by choosing a type size for the majority of the text on the page
• To create the appearance of a baseline grid, all other measurements, including the margin spacing, display type size, etc., should be multiples of the line height

MODULARITY

• For a web designer, modularity means creating reusable or modular design assets that fit within the established grid system and get reused throughout a site
• Modularity can also refer to the necessary design flexibility required in web design