Creating A Wireframe: Nigelbuckner 2014

The document discusses creating wireframes as part of the web design process. It defines a wireframe as a diagrammatic representation of a web page that determines its structure and content without color or design features. The design process typically starts with hand sketches, followed by a wireframe to organize elements and structure, then visual design, and finally coding the page. The document provides instructions for creating wireframes using Photoshop and Illustrator, including making custom image placeholder shapes and symbols.

Uploaded by

Nino Joshua Castino

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

49 views

Creating A Wireframe: Nigelbuckner 2014

Uploaded by

Nino Joshua Castino

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 11

Creating a wireframe

nigelbuckner 2014

The key to successful web design is planning. Creating a wireframe can be

part of this process.

In web design, a wireframe is a diagrammatic representation of a web page.

The purpose of a wireframe is to determine the structure and content for a
web page. It displays the elements for a web page in outline. It its strict sense,
a wireframe does not use colour or stylistic design features.

Creating a wireframe is an initial part of the design process. In can be created

by hand and or with a computer programme such as Photoshop or Illustrator.

The design process

A typical design process would start with creating initial sketches by hand.
These can be thumbnail size or larger as required. They help to develop ideas
for content and layout. Next is creating a wireframe, in order to organize the
elements and structure of the page. Next stage would then be to develop the
design visually, adding form and colour to the elements, by using a computer
programme or detailed drawing. Finally, the build phase where the design is
built in code to become a web page.

The design process can be expressed thus:

sketch


wireframe


graphic visual


code
Some examples of initial sketches:
Some examples of wireframes:
Creating wireframes with Photoshop and Illustrator

Create a new document that is wider than the width of your proposed page
content e.g. if the content is 960px then make the document 1100px or more.
This will give you room to work in and, if needed, make notes. Height is not
important as long as it is deep enough for the content. Set resolution to 72ppi.

If you wish, use guides to define the content area and other elements for the
layout. Pull guides out from the Rulers.
Alternatively, you could use a grid for aligning content to. In PS and Ai, the
grid can be accessed via the View menu. The size of the divisions for a grid
can be set from the application preferences.

Placement of the grid lines can be positioned from the XY axis. Do this by
pulling out the XY axis from the top left corner of the rulers and placing it on
the document.

Creating an image placeholder Shape with Photoshop

Photoshop allows you to create your own shapes and save them as Custom
Shapes. These then become available in the Custom Shapes library for
repeated use.

Wireframe representation for an image

Custom shapes can be created from one shape or a combination of shapes.
For a Custom Shape to be created from a combination of Shapes they must
be all combined on one layer.

An image placeholder symbol can be created from a combination of lines

drawn with the Line tool. The simplest way to do this is to draw the lines in
alignment with a grid: View > Show > Grid.

The process is to make the edges of the box with four lines and then do two
diagonal lines across the centre of the box. To begin, draw a line along one of
the grid lines to form one edge of the box. Set the weight of the line, in the
Shape Options, to around 3-5 px. Before drawing a second edge, ensure that
Combine Shapes is selected from the Shape Options at the top of the
workspace.

On completion, all the Shapes should be combined on one layer.

When the symbol is complete convert it to a Custom Shape. Do this by going

to Edit > Define Custom Shape…

In the dialogue box that follows, give the shape a name and click OK.
The Custom Shape will now become available for use. Choose the Custom
Shape tool from the Tools panel and in the Shape Options click on Shape:
Creating an image placeholder Symbol with Illustrator

Illustrator allows you to create Symbols and save them into a library. These
are graphic elements that you can create and re-use. You can do this to
create a wireframe symbol for an image.

To create an image symbol in with Illustrator, draw a box with the rectangular
shape tool. Holding the Shift key will make it a perfect square.

Set a black stroke for the box and make or leave the fill as none. The Stroke
panel can be found on the right of the workspace. It can also be found under
the Window menu.

With the Line tool draw two diagonal lines, corner to corner.
Select the image by drawing a marquee around it with the Selection tool.

Open the Symbols panel. The Symbols panel can be found on the right of the
workspace. It can also be found under the Window menu.

Click on the fly-out menu for the panel and choose New Symbol…

In the Symbols Options dialogue, give the symbol a name and click OK.
Your drawing is now available as a symbol in the Symbols panel. To use the
symbol, simply drag it from the Symbols panel onto the document. Position
and resize as required.