Web Page Layout Design Techniques - PowerPoint Presentation

Slide1

Web Page Layout Design Techniques

From Moodboard to Mock-up

Research & Design Specification

Research - moodboards

Sketch it outBuild the wireframe

Use software to mock-up the page

4/01/20132.3 /91356 Develop a conceptual design for an outcome

2

Inside – Steps to designing a web page

4/01/2013

2.3 /91356 Develop a conceptual design for an outcomeThe 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

specificationThe 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:

RETRO

FUN

MEMORIES

VINTAGE

COLLECTABLE

3

Research & Design Specification

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.

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.

2.3 /91356 Develop a conceptual design for an outcome4/01/20134

Freestyle

Moodboard

Template Style

MoodboardOnce 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.

Template Style

Moodboard

This

moodboard

neatly organises ideas for elements. It is easy to read and interpret, but can be fiddly to edit.

Research -

moodboards

Sketch idea for the home page layout

2.3 /91356 Develop a conceptual design for an outcome

4/01/2013

5

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 placedNavigational elements – text or image (eg buttons)

Image placeholders Text placeholders Search Tool placeholder

Call to Action – e.g. Register nowSketch it Out

Illustrated is the

group

feature.

2.3 /91356 Develop a conceptual design for an outcome

4/01/2013

6

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.

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. 2.3 /91356 Develop a conceptual design for an outcome

4/01/20137

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..

2.3 /91356 Develop a conceptual design for an outcome

4/01/2013

8

Build the Wireframe

4/01/2013

2.3 /91356 Develop a conceptual design for an outcome9

Use software to mock-up the page

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.

Software Application

Any suitable software that supports

layers, such as

Gimp

or

Photoshop

Document Dimensions

Landscape orientation

Colour Requirements

Full colour

Heading

“By-Buy Bear”

Font Style & Colour

Kunstler Script; Regular; #FF33CC

Font Size

50pt

Tagline

“Turn your toys into treasure with our new toy auction website”

Font Style & Colour

True Crimes; Regular; # CC3333

Font Size

36pt

Call to Action

“Sign up now for a 30 Day Free Trial”

Italic

Font Style & Colour

Viner Hand ITC; Regular; # 330000

Font Size

20pt

Navigation Text

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

Body Text

Lorum Ipsum

Font Style & Colour

Viner Hand ITC; Regular; # 330000

Font Size

14pt

4/01/2013

2.3 /91356 Develop a conceptual design for an outcome10

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.

Use software to mock-up the page

2.3 /91356 Develop a conceptual design for an outcome

4/01/2013

11

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.