Basic Page Layout

Every page on your site should at minimum feature your 1) logo/title 2) site navigation menu 3) contact or author byline (sometimes linked or listed in the site menu).

Each page has a purpose - to display text, like a blog entry, or to showcase an image with text, as in a portfolio. This basic purpose will determine how you orient the layout of your page - whether you organize your information in columns, vertically, to accommodate text, or take advantage of the horizontal to really make your images stand out.

THE WINDOW

The contents of your web page should either be aligned to the top left or to the center of the browser window so that your site adjusts to your visitor's browser size. If you're light on words and prefer to let your images speak for themselves, then you can ignore that guideline and align to the middle right of the page as well, especially effective when displaying a slideshow. We recommend limiting the width of your page content to around 1000 pixels, with your main text section comprising at least 500px. This is a rough guideline that should display without trouble on the widest variety of browser sizes and monitor resolutions.

THE PAGE

Masthead - This is the section of your site that contains your identifying info (logo, name, project title) and, frequently, the main menu of your site. (You can choose to put the menu anywhere you like, but eyes tend to look to the top left of the page for this key information). Your title or logo serves like your return address on an envelope, and usually links back to your homepage - it provides visitors with an easy point of reference as they browse your site.

Menu - As you add pages, they will automatically be added to your site menu. Sub-pages, such as a single product page out of a shop section, will not display on your main menu - only the parent pages will.

Body - This is where your text, blog entry, or portfolio image belongs.

Sidebar - A sidebar is entirely optional. It is a good place for secondary navigation (archives by month, categories, related links or favourite bookmarks) or supporting information, like the five most recent comments on your blog, or thumbnails from your shop. The information you choose to display in a sidebar will help you determine if the sidebar should go on the left, before the body (a good choice if it only contains secondary navigation, such as on the page you are reading now) or on the right, after the body (when the information in the sidebar is simply less important than what's happening in the body).

Footer - A footer is recommended on pages that are long enough to be scrolled - they're a good place to reiterate your identifying info, your copyright notice, or a simple "back to top" link that gets your visitor back to your main navigation more easily. A footer is also optional, like the sidebar, and can replace the masthead on pages that are oriented horizontally.

EXAMPLE LAYOUTS

The fundamental elements can then be rearranged in a surprising number of ways, for example (a layout on the left outlines the example site to its right):

Okay, so what good is a wireframe?

A wireframe is a map to guide your site design. The wireframe lays out the basic elements of any page before you begin, ensuring the essentials are represented in your design. It can be as free-form as you like, even a pencil sketch; or you can start with just the three basic elements outlined above - 1) logo/title 2) site menu 3) contact or author info.

Above are example wireframes, alongside live designs, to demonstrate the method. Once you have a wireframe, print it out or edit it in Photoshop, and start getting messy.

There are still some decisions to make about text and type, but they can wait until after you've added some color. Perhaps the best place to assemble your site's palette is from your artwork itself. Many artists cut and paste any single piece of their work, either as a layer in Photoshop on the digital wireframe, or on a physical printout.