designing your site...page layouts
Every site has one or more page layouts. A page layout basically consists of these elements:
- header and/or footer, text and image areas above and below the body of the web pages in a single column
- a number of columns, generally one, two or three in the body of the web page
- an overall width, 800-1024 pixels or fluid, meaning that the page utilizes
the full width of the audience display screen - a navigational map layout of either vertical or horizontal - down or across the web page
A higher number of columns generally lets you display more small items around a page, while single columns pages offer the widest area for a particular intent, a photo gallery or a large entry form, for instance. In the latter case, we want to be able to make the photos appear as large as possible without constriction, or be able to get the entire form to appear easily. You can have multiple page layouts on a web site, often dictated by these content issues. Some web sites may have more columns on the initial or portal page, and fewer on the interior pages. But you have choices you need to make in advance of the start of development of your web site.
a client showcase and look at page layouts in action
Here are some real examples of web sites we've built with links to them and explanations of their layout properties. First, a look at some of the technical areas of your layout.
Each web page generally has a header, at the top, footer at the bottom
and one, two or three columns of copy, links and features shown.
The above example is a New Jersey non-profit, Reach Out and Read. The site uses a fluid, or full screen layout in three columns on all pages. They have lots of text copy and need space to present all of their facets. This site also uses a Tab Bar horizontal menu system. Check out the site to see how that works; it's a very clean and fresh way to present your navigation bar in a horizontal form.
The above example is a two column fluid design on a dark layout pallette.
The navigation map features a new, accordion-type vertical expansion capability
that explains choices under each of the major categories for the site.
It's a great way to make navigation more "friendly" to new visitors. The overall page is eye-catching for the large background image at top and the dynamic gradient fade in the footer area. See this site in action to experience the accordion effect.
Classic rounded corner layout that takes advantage of the
left column to highlight the logo, navmap and iconic choices for the audience.
Note that this design has a footer, but no header.
Via Elisa Fresh Pasta is shown on a 1268 pixel display above as an 800 pixel, fixed width layout (the background is a textured matte. The actual container is 800 pixels wide, hence, as it is displayed on larger screens, the content is centered in this rounded edge format. This is a very classy format, with a vertical pop-out menu on the left. When displayed on an 800x600 monitor, the sides disappear and only the two-column content boxes remain, along with the header and footer. Note that on any given page the left and right column do not necessarily end at the same horizontal position. Visit the Via Elisa Fresh Pasta web site to see a vertical pop menu, accordion panels and other dynamic html features. If you visit the local orders page, you will note that the site also has some pages that are only one column, allowing full width to accommodate a very large order form.
A very clean, two-column fixed layout set on a fluid background to
create a unique look for this dynamic real estate web site.
Storm, Inc. is a Real Estate firm that wanted a site unlike so many of the "canned" real estate offerings in the marketplace. At the same time, you will find features such as a forum, multilist and other dynamic, data-driven features that blend perfectly into the overall presentation of the site. We went all the way to Australia to get just the picture we needed for the header area. This site also uses some Flash and a horizontal Tab Bar Navigation system. Note how the outlines around the columns with the gradient background faded from left to right gives this site a very distinctive, measured look.
DCIWebworks incorporated some Flash elements on the home page
to offer a slide show (with optional sound) that can be controlled by the viewer.
MotherLion Media is a square-edged, fixed width (800 pixel) layout that also accommodates fluid width features with effective results. Note that the header black stripe extends across any sized display, and the footer copyright information is left justified to the edge of the screen. This gives the site a very full look even though it has been designed to work specifically and perfectly with older displays. That comes in handy since the site displays videography, where having everything fit into the container properly is extremely important. you can see how the Video Viewing Area displays videos with ease when we have the fixed width layout. Overall, this is a two-column, fixed width site layout with a vertical pop menu system.
A two column, fluid width web site provides a spacious look, even when
there is a great deal of copy and photo content, with elegant rounded corners.
Mountain Plain Homes makes effective use of the fluid width layout to accommodate the extensive copy that describes the area, properties and home development on their web site. The central picture below the header is actually a slide show. Mountain Plain Homes uses the web site as a marketing tool, with both web pages and accompanying PDF documents--all developed by DCIWebworks--to showcase their homes online and allow viewers to download home model specifications and floor plans along with detailed features and amenities. The site features a horizontal menu bar at top, wth breadcrumb analog navigation at the bottom of the body. Virtually all of our sites feature either link or breadcrumb analog navigation on each page to ensure that any audience, regardless of browser limitations, can navigate the site easily.
This is a custom, one column, letterbox-style layout. A black edge was
added to show the "look" in a 1280 pixel-wide display.
One Production Place offers a minimalist look at web design, including custom rollover-effects (visit the web site and roll your cursor over the navigation boxes at top to see what happens) on a stylized navigation map. Here, the experienced client knew exactly the look that they sought and simply had DCI implement it. It lends itself to concise text while it opens the door to smooth video presentations. This site includes a Flash splash page (initial page) that serves as an introduction to the videographer's work.
A fixed-width layout on black background with sponsors shown in the
footer area; this has a vertical pop menu and slide show on the home page.
Performance Now Theater Company has a two-panel design in a fixed-width layout on a black background. The color of your background says much about the content of your web site...in this case, the background is much like a darkened theater where the stage is lit in the center of the viewing area, so the design is used to great effect. Also check out the stage production photo galleries on this web site. The footer is used to highlight the theater's sponsors.
A strict 800 pixel-wide 2 column format with the columns tightly placed
for the best use of space.
Jack Quinn's uses a slide show on the home page to announce events with links underneath. The site contains both the two column and some one column pages (calendars). This creates a very clean site that is compact and efficient for all types of viewer displays.
Black and white photography site with photo galleries. This is a custom site for
Morton Broffman, photographer to civil rights, poverty and protest exhibit to the Smithsonian in
Washington, DC. See the gallery page below.
Morton Broffman Photography is a stylized site, stark contrasts without color, using a two-column fluid design, with a pop-out menu and standard header and footer. It is imple and elegant at the same time, functional to combine with the exhibit.
Gallery pages work dynamically without Flash to show photographs individually. Easy to
navigate and view, the site offers a stark, black and white theme that embodies the photographer's work.
Click on the images above to visit the Morton Broffman site. There are other examples of color galleries that we can offer. Call or write for further information.
These are just some actual examples of web sites that were created and are hosted by DCIWebworks. Once you select the basic "look" of your web site after determining the content, we can work to provide additional design tools, such as accordion panels, scrolling text, tab panels, flash or javascript slide shows, random images and more to bring your site to life with a vibrant and clear appearance.