OUGD504 Studio Brief 03 - Study Task 08 - Web style guide research

A guide to the comparison of Points to Pixels.

An example of the BBC NEWS webpage @ 100% on 2560 x 1600 resolution.

Body copy 13px

Smaller header 16px

Large Header 32px

Headings 12px

HEX: #336699

RGB: 51,102,153

HEX: #990000
RGB: 153, 0, 0

HEX: #660000
RGB: 102, 0, 0

HEX: #330000
RGB: 51,0,0

HEX: CC6600
RGB: 204,102,0

Original.

 A underline of colour appears under each heading when hovered over:

Links become highlighted when hovered over.

Links become highlighted when hovered over.

Original.

Underline and length of video appear when hovered.

ID Magazine

When a header is selected, a pink underline appears as well as a drop down menu.

Hovering over an image darkens the selected image (left)

Hovering over an image darkens the selected image (centre)

Hovering over an image darkens the selected image (right)

When hovered over, the FB option changes from a tick to a cross.

When hovered over, the FB option changes from a tick to a cross.

Clicking on the magnifying glass to start a search.

The magnifying glass becomes a line with a cross to indicate cancelling the search.

'The VICE Channels' drop down menu option. 

'The VICE Channels' drop down menu when selected appears.

Social media buttons without highlight.

Social media buttons with highlight.

'About' menu without selection.

'About' menu with selection appears a drop down menu.

The header bar is static.

The header bar is static.

The Function Pro font family.

Text is placed over a opaque grey rectangle,
this makes all text legible over an image that may have a white background.

The only colour used in the design of the web page is this pink hue.

HEX: FF3366
RGB: 255, 51, 102

Urbano Cond is used scarcely on the page to indicate further reading, Topic, Author and Date.

Urbano Cond is used scarcely on the page to indicate further reading, Topic, Author and Date.