Layouts
It can be helpful to see a variety of different generic layout configurations to decide how you might partition the sections of content in your site.
Before getting into the samples, it's first important to see how they can be implemented across the browser window.
Span Across browser window
Centered Design
Flush Left
Flush Right
Now, on to the 12 layout samples below
None of these layout configurations are absolutes, you can request parts from different ones to make something unique. Going with a premade template nearly always speeds production along, so weigh that against your desire for customizations. We are happy to accomodate custom and templated design. It's nice to have a good mix of both too. Also remember that once your banner graphics, colors and other adornments are implemented, the site stands alone as it should, and you'll forget it came from a template.
Layout 001 — This layout has a narrow single-column setup. Notice the horizontal button navigation. Depending on your number of links, you could also request a dropdown menu.
Layout 002 — This layout has an implied header area which keeps the top design a little more free, the button bar sits next to the right. The partitioning of this design adds interest, but can leave sites with little content with too much free space.
Layout 003 — This popular configuration allows for a horizontal navigation, and extended links along the left column. The dual footer could be used for contact info, legalese, site categories or anything special you might think of. It's very flexible and always turns out well.
Layout 004 — This layout meets the needs of many organizations. The horizontal button bar is convenient and user friendly. The sidebar can contain static site information, or it simply has a lot of potential for interesting graphical buttons for featured pages. Make the header and footer as tall or short as you prefer. Add a search field in any spot you wish.
Layout 005 — This is a popular configuration for blog layout. The dual sidebars allow for graphical links, and multiple categories or tags.
Layout 006 — The three column is often referred to the "holy grail" of layouts for its usefulness and proliferation. Links from various catagories can cascade down either side. Many content management systems use this configuration for adding calendars and adminstrative functions.
Layout 007 — Similar to layout 003, this configuration makes use of a horizontal bar for addresses, dates or even popular quotations. The sidebar of links can be standard rollovers or include a dropdown menu.
Layout 008 — The unique feature of this layout, which you might consider integrating even elsewhere is the implied header. Instead of using a box to contain your header graphic, you merge it into the background color. This gives a lot of freedom to the imagery. The limited link navigation is also framed with a second header for more interest. Like layout 002, without a lot of content this configuration can feel empty.
Layout 009 — Similar to previous layouts, 009 brings back the dual footer. This is yet another example of a slight configuration change.
Layout 010 — Another invisible header area for image freedom. Often the logo is floated over a landscape with a tagline just to the right. Standard vertical button bar in the side column and plenty of room for the main content.
Layout 011 — Surprisingly, the white border around all the content in this layout is more flexible than it may first appear. The white separation between sections allows for fun variety of background colors and images. The design's decal-look seems to work for many purposes on fun and serious sites.
Layout 012 — Here we see the use of overlay tab navigation. Though similar to other layouts, the tabs can be of so many designs use imagery or flat background colors with rollover highlights. Keep, remove or shorten the dual footer as desired.
