Web Page Layout Design TechniquesFrom Moodboard to Mock-up

2.3 /91356 Develop a conceptual design for an outcome

2

• Research & Design Specification• Research - moodboards• Sketch it out• Build the wireframe• Use software to mock-up the page

4/01/2013

Inside – Steps to designing a web page

2.3 /91356 Develop a conceptual design for an outcome

34/01/2013

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

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.

2.3 /91356 Develop a conceptual design for an outcome

4

Stakeholder CheckpointYou 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

Freestyle Moodboard

Template Style Moodboard

Once you have sourced your images, fonts, textures and shape ideas, start organising them onto moodboards.

Freestyle MoodboardThis 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 MoodboardThis moodboard neatly organises ideas for elements. It is easy to read and interpret, but can be fiddly to edit.

Research - moodboards

2.3 /91356 Develop a conceptual design for an outcome

5

Sketch idea for the home page layout

4/01/2013

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

Sketch it Out

2.3 /91356 Develop a conceptual design for an outcome

6

Illustrated is the group feature.

4/01/2013

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.

2.3 /91356 Develop a conceptual design for an outcome

7

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

Build the Wireframe

2.3 /91356 Develop a conceptual design for an outcome

8

The final wireframeStakeholder 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

Build the Wireframe

2.3 /91356 Develop a conceptual design for an outcome

94/01/2013

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 orientationColour Requirements Full colourHeading “By-Buy Bear”Font Style & Colour Kunstler Script; Regular; #FF33CCFont Size 50ptTagline “Turn your toys into treasure with our new toy auction website”Font Style & Colour True Crimes; Regular; # CC3333Font Size 36ptCall to Action “Sign up now for a 30 Day Free Trial” ItalicFont Style & Colour Viner Hand ITC; Regular; # 330000Font Size 20ptNavigation Text TITLE: “Toy Categories”

True Crimes; Regular; #33CC66; 36ptLINKS: “Tin Toys; Soft Toys; Dolls; Cars and Trucks; Collectable Sets; Rare and Antique”True Crimes; Regular; # FFFFCC; 20 pt

Body Text Lorum IpsumFont Style & Colour Viner Hand ITC; Regular; # 330000Font Size 14pt

2.3 /91356 Develop a conceptual design for an outcome

104/01/2013

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.

2.3 /91356 Develop a conceptual design for an outcome

11

Use software to mock-up the page

4/01/2013

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.