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
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma