WEB STANDARDS CREATIVITY

Macro elements
Macro elements are the big things in the design—
the structure in which everything fits. The grid is
perhaps above a macro element, as the other elements
fit into it. Here’s my list of macro elements
for this project (see Figure 6-5).
Columns
Masthead
Main navigation
Footer
Micro elements
The micro elements are the bits that make up
the rest of the content. They’re visual elements
that need individual consideration, but they also
need to be considered in the context of a wider
design system. Here are the micro elements for
the IBO project (see Figure 6-6):
Box outs (sidebar elements)
Status boxes
Headings
Lists (ordered, unordered,
and definition)
Tables
Links
Paragraphs
Images
You can probably see where this is going. This is
beginning to look like the structure of a CSS file.
Figure 6-5. Macro elements, such as columns, can be sketched out first.
Figure 6-6. Micro elements, which fit in and around the macro elements, make
up the content of a page.
chapter 6 Grid Design for the Web
137