Leitmotif Build Guide BETA
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 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 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.