Webwork
/
Wireframes

Once the basic requirements of a Web page or Web site have been determined and outlines and site architecture have been loosely established, the actual design work often begins with a wireframe:

Wireframes can be simple, hand-drawn sketches:

drawing_small

or elaborate blueprints (drawn with dedicated wireframing software) that are filled with detailed illustrations and annotations:

wireframe_elaborate

The more complex your site is, the more important it is that you wireframe it before starting construction. More examples of wireframes are here and here.

To use Photoshop as your sketch pad for Web design, begin by opening a new file at whatever width you are building your site. The most common widths in use at this time are 800 or 1000 pixels. Resolution should be 72 pixels per inch and color mode should be 8-bit RGB:

empty_window_white

Height is not important since it will be determined by the amount of content you place in the HTML page. The purpose of this step is to build the site's graphics, its "look and feel."

Working from a Wireframe

At this point, if you are working from a wireframe, you can rough-in the page layout:

drawing

If you are working for a client or as part of a team, this is a "review point." Initial wireframes should be reviewed and approved by everyone involved before work proceeds.

wireframe-window

If you are working for a client or as part of a team, this is a secondary "review point." Finalized wireframes should also be reviewed and approved by everyone involved. Wireframes should address how content is presented, how the user navigates the site and any included interface elements like drop-down menus, forms, etc.

From here, you start the actual design of the Web page:

widgets-r-us

Again, if you are working for a client or as part of a team, this is a "review point." Before you start actually coding the pages, save JPEGs of your Photoshop design work to distribute to anyone who needs to approve the site. There can be a huge amount of "back and forth" at this stage of site development as logos, navigation, color, etc. are finalized.

Once the Photoshop mock-ups are approved, use Photoshop's Web tools to export the graphics and begin building the site.

Here's another example. Mouse over it to see the mock-up based on this wireframe:

wireframe-handout
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com