S1
Introduction Course
S2
Introduction course
Computing
Standard Grade
Information Systems
Intermediate II
Information Systems
Higher
Internet
Safety
Business Studies
Dept.

Reminder: Page Layout

There are literally hundreds of different ways of setting up a web page. You only have to look on a few sites to see the enormous difference there is between web sites.

Despite this, there are a few essential building blocks to a page. for example there always tends to be a:-

Below are some basic modern layouts. The black boxes represent containers. Generally, smaller ones contain navigation links. Larger boxes can contain images or text. Images can also operate as links to other pages or larger image galleries.

Each example layout contains links to how the layout has been used in actual websites. In designing your own website, look at each example and think about how it could be adapted to suit your own needs.

 

 

1. 3 Box Layout.

3 Box Layout

Deceptively simple design. Very common and can be easily developed in an hour.

Often used to show off and few sample images. These are linked to other image galleries or projects.

Click on the following link to see a live example.

http://www.peterverkuilen.com/

How could you adapt this for your own needs?

 

 

 

 

 

 

2. Advanced Grid

 

Advanced Grid

Includes a combination of different sized images with one main graphic at the top of the page.

The second half of the page cold contain four boxes going horizontally across the page.

But here, two on the left have been combined and could contain text. So that the left hand side look different to the right hand side.

See how this layout has been used in practice

http://www.neveinspired.com/

How could you adapt this for your own needs?

 

 

 

 

 

 

 

3. Featured Graphic

 

Featured Graphic

Extremely simple and often used when you have very little content.

Most of the page is taken up by one main graphic or photo laid alongside a little text.

The result is minimalist bold look, because it contains few distractions for users to look at.

Key though is the main graphic which takes centre stage and so has to make an impression on visitors.

http://www.bloomfirst.com/

How could you adapt this for your own needs?

 

 

4. Five Boxes

 

Five Boxes

This is an extension of the 3 box layout. It includes a main image, with four smaller boxes for text or thumbnail images underneath.

It is a very common design. Slightly modified, perhaps using rounded corners on images, mixing images with text etc, this layout can be used in lots of different ways.

Look at the following web sites to see how its been modified in each case, but still retain the essential 5 box layout.

http://www.truetea.cz/

http://www.erikiggmark.se/

How could you adapt this for your own needs?

 

 

 

5. Fixed Sidebar

 

Fixed Sidebar

Can be considered old fashioned, but this type of layout is probably the most common.

It consists of a fixed side bar containing navigation links. The remainder of the page is normally an adaptation of the other types.

The template here shows it combined with a 3 box layout. The school website has a right hand sidebar, a top banner as a main graphic with text in the centre.

See how its been modified in the following:-

http://www.h3ostudio.com/

http://www.jhigh.co.uk

http://www.ghosthorses.co.uk/

 

How could you adapt this for your own needs?

 

 

6. Headline & Gallery

 

Headline & Gallery

Another classic design. Used mostly for galleries and in retail sites showing products for sale, it consists of a grid of images with a large bold headline.

The headline is the key with the intention of attracting visitors and encouraging them to remain on the page.

Weird and crazy fonts are also a feature.

http://blackantmedia.com/

 

How could you adapt this for your own needs?

 

 

 

7. Featured Photo

 

Featured Photo

The name pretty much gives the game away.

Used quite commonly in photography sites much of the page is taken up with a main photo with strong navigation on the left hand side.

But the navigation bar can be horizontal; above or below the main image.

http://www.danielkennedy.com/

http://www.jasonbellphoto.com/#/photographer/Jason Bell/Music/

http://www.mitchellkphotos.com/

How could you adapt this for your own needs?

 

 

8. Power Grid

 

Power Grid

Perhaps the most complex page layout, but also the most useful.

The boxes can contain almost anything. They can include:

Notice this design contains a series of nested boxes. The bottom half contains boxes within a much larger box.

See the link for an example.

http://www.proxart.org/

If you want to create your own the next link contains a tutorial the shows you how to build a similar layout.

http://designshack.net/articles/graphics/design-a-rockin-band-website

 

How could you adapt this for your own needs?

 

9. Full Screen Photo

 

Full Screen Photo

Like the Featured Photo, the name is the clue.

Rather than place content directly over a background image where it can be hard to read, this approach uses a different method.

The idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links, copy, logos and other content.

http://www.eastphotographic.com/index.php

http://www.davidchipperfield.co.uk/

How could you adapt this for your own needs?

 

 

Based on an article by  , PUBLISHED ON 16TH FEBRUARY 2011.

 

 

What you should now be able to do!

 

That's the end of the reminder!

 



Preview Completed Pages

Goblet of Fire
Lord of the Rings
King Kong

 

Widget Examples

Where In the World am I

 

Related Topics

Home | S1 Topics | S2 Topics
Computing Standard Grade | Info Systems Intermediate II | Info Systems Higher | Internet Safety
Log into Glow | School Website | Contact Us