Web Page Layout Design Techniques
From Moodboard to Mock-up
Inside – Steps to designing a web page
•
•
•
•
•
Research & Design Specification
Research - moodboards
Sketch it out
Build the wireframe
Use software to mock-up the page
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
2
Research & Design Specification
The brief is to design a home page for a toy auction website. The first step is to conduct
research based on the design specification so you can develop some design ideas that are fit
for purpose to share with your stakeholder:
Design specification
The home page needs the following design elements:
Font styles suitable for: Header; Sub-title; Body text; Navigation;
Images suitable for: Background; Visual appeal; Icons; Line; Text backgrounds / boxes; and the
Company logo.
Start by brainstorming words that reflect the brief:
Select three or four of these adjectives and begin researching visual elements that reflect
those words. You can use the internet and printed media such as newspapers and magazines
to find your resources. Refer back to your list later if you need more ideas.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
3
Research - moodboards
Once you have sourced your images, fonts, textures and
shape ideas, start organising them onto moodboards.
Freestyle Moodboard
This moodboard uses collage techniques. If you want
flexibility with your layering use software with layering
support. If you use cut and paste without layers it can’t
be changed later.
Freestyle Moodboard
Template Style Moodboard
Template Style Moodboard
This moodboard neatly organises ideas for elements. It
is easy to read and interpret, but can be fiddly to edit.
Stakeholder Checkpoint
You should show your stakeholder the completed moodboards
and gain their feedback on your research. If you need to make
changes to digital files make sure you use versioning to keep
track of your changes.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
4
Sketch it Out
Now you have completed your design
investigations the next step is to work on the web
page layout. Check the design specification, then
sketch out where you think the specified elements
should go on the page.
Try to do several different layout ideas – the more
you do, the better the result.
Home Page Design Specification:
• Website logo prominently placed
• Navigational elements – text or image (eg
buttons)
• Image placeholders
• Text placeholders
• Search Tool placeholder
• Call to Action – e.g. Register now
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
Sketch idea for the
home page layout
5
Build the Wireframe
When you are happy with the placement of the
elements on the page the next step is to turn your
sketch into a true conceptual layout using
wireframing techniques.
The wireframe should show the exact placement
and sizing of all the required elements as specified
in the design specification.
Remind me
Google Drawings was used for this example, but
there are many other tools you could use.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
Illustrated is the group
feature.
6
Build the Wireframe
GOOGLE Drawings has a comments
feature.
Whichever software you choose add a
comment or label to each image box to
identify the images you will use later.
Maximise your workspace to help you
manage your files.
Simply drag and drop images onto the
page. This model demonstrates the
feature in GOOGLE Drawings, but you
can do this in PowerPoint too.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
7
Build the Wireframe
The final wireframe
Stakeholder Checkpoint
At this stage you should consult
with the key stakeholder and gain
their feedback on your layout.
Document their feedback and
remember to track any changes
you make to the design..
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
8
Use software to mock-up the page
Software Application
Document Dimensions
Colour Requirements
Heading
Font Style & Colour
Font Size
Tagline
Font Style & Colour
Font Size
Call to Action
Font Style & Colour
Font Size
Navigation Text
Body Text
Font Style & Colour
Font Size
4/01/2013
Any suitable software that supports layers, such as Gimp or
Photoshop
Landscape orientation
Full colour
“By-Buy Bear”
Kunstler Script; Regular; #FF33CC
50pt
“Turn your toys into treasure with our new toy auction website”
True Crimes; Regular; # CC3333
36pt
“Sign up now for a 30 Day Free Trial” Italic
Viner Hand ITC; Regular; # 330000
20pt
TITLE: “Toy Categories”
True Crimes; Regular; #33CC66; 36pt
LINKS: “Tin Toys; Soft Toys; Dolls; Cars and Trucks; Collectable
Sets; Rare and Antique”
True Crimes; Regular; # FFFFCC; 20 pt
Lorum Ipsum
Viner Hand ITC; Regular; # 330000
14pt
Here you will use your
wireframe to help you create
a conceptual design for your
home page layout. You will
need image editing software
that supports layers, such as
Gimp or Photoshop.
This design specification
details the text you need to
include, with examples for
styling.
2.3 /91356 Develop a conceptual design for
an outcome
9
Use software to mock-up the page
In your image editing application create a new
document that is the size of the web page 1280x800 pixels is a good size.
Use rulers and visual guides to help you layout
the page as accurately as possible.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
10
Use software to mock-up the page
Stakeholder Checkpoint
You should now present the final conceptual design for the web page to the key stakeholder and
evaluate the success of your work against the brief.
Remember to document the feedback you receive and your own evaluation of the project.
4/01/2013
2.3 /91356 Develop a conceptual design for
an outcome
11