Collage Style Sites
1st edition — by Patrick McNeil — Jan. 2, 2006
The Design Element
The collage as a style for web design presents many interesting problems
and opportunities. Foremost of the problems is how do you translate a collage
based design in photoshop to an actual web page. Just as with any other web
layout, any of the 4 primary options are viable.
Ways to construct pages using this style:
- Large images and image maps (piperboy.com, newspeak.tv, sergeseidlitz.com)
This technique is probably the fastest way to get a collage layout
working in html format. Primarily because very little testing has to
be done to ensure that the layout works, not to mention that the layout
needs to only be sliced into very few images.
This method can be put to very good use and can enable the designer to
create a fresh look for each page as is done on the Piperboy site.
- With tables (sestatee.com)
Good old trusty tables are a safe approach to web design in that they generally
work in all browsers and very seldom require strange fixes to make it so.
The down side is that you loose the vast majority of flexibility offered
in css based layouts. Regardless, tables are a good medium between image
maps and css based designs.
- Using css (tnvacation.com, aquasparkle.com
)
CSS based sites are all the rage, and rightfully so. Sites based on css offer
the ability to quickly change the look and feel without touching the pages
original html code. The tough side of css is that it can be quite difficult,
it is the most technically challenging option, and the images can require
the most manipulation.
Have no idea why css based sites rock, educate yourself
- In flash (planbse.com)
Flash offers the most flexibility to the collage based site. Animation
can be incorporated, and the latest version of flash enables Layer Blending
Modes which can be of great use. Flash based sites can be done by people
of all experience levels. High end users will find unlimited power, and
new people will find the ability to quickly build a site with few technical
hurdles to jump.
Sample Usage
High-Res Online Collage Resources
The Library of Congress: American Memory
Rare Books &
Special Collections (From the American Memory link above)
Smithsonian Institution Libraries
Library of Congress Digital Collections & Programs
Google Directory: Digital Libraries
The National Archives
Duke University: Rare Book, Manuscript, and Special Collections Library
The National Archives of the UK
NYPL Digital Gallery
1800's EPHEMERA
Other Links
Found Elements (purchase
items to use in collage work)
History of Collage
