Website Codes and Conventions

Websites
Codes and Conventions

WEBSITES - Codes and conventions
As with all media products it is important to identify
two key elements when looking at any website:
- The purpose of the product
- The target audience

As with all media products it is important to identify
two key elements when looking at any website:
- The purpose of the product
- The target audience
Consider the purpose and target audience for
the following websites:

In order to analyse the effectiveness of a website, it is important
to deconstruct the website and identify how it conforms to the
codes and conventions that we expect.

Not all websites will feature all of the codes and conventions
listed here, and in some circumstances their omission may be
as noteworthy as their inclusion.

Not all websites will feature all of the codes and conventions
listed here, and in some circumstances their omission may be
as noteworthy as their inclusion.
It is not enough to simply identify the inclusion of the
following codes and conventions. They must also be analysed
in order to identify how they contribute to the effect of the
website as a whole.

URL - uniform resource locator
The URL, also known as the ‘web address’
is how users will find and access the
website.
In almost all circumstances the URL is short, and clearly represents
the content of the site, whether that be through a name or a
factual description.

HOME PAGE
The home page is simply the main page for
the website.
When typing in the URL into a web browser, you will be taken
to the website’s home page.

HOME PAGE
The home page is simply the main page for
the website.
When typing in the URL into a web browser, you will be taken
to the website’s home page.
The content of the home page can vary dramatically depending
on the site itself, however it is usual to find information about
the site itself to make it clear to the audience as to the purpose
of the site, as well as to find navigation elements to direct users
around.

Masthead
The website’s name and/or logo. It may
not have changed for many years so it is
the easiest way to identify a website. A
very important element of website
branding.

Masthead
The website’s name and/or logo. It may
not have changed for many years so it is
the easiest way to identify a website. A
very important element of website
branding.
The decisions made in the choice of font, colours, size, style etc.
can tell us a lot about the website and it’s content and target
audience.
When clicking on the masthead the user would expect to be
taken back to the website home page.

House style
A house style is a set of rules which state how all documents and
written communication for a business/individual should be
formatted. In the case of websites, how each page on the site
should be formatted. It will cover:

House style
A house style is a set of rules which state how all documents and
written communication for a business/individual should be
formatted. In the case of websites, how each page on the site
should be formatted. It will cover:
- the colours to be used
- the font style and size
- where the logo should appear
- whether text should be right, centre or fully justified
- the ratio of images to copy

Navigation
The navigation covers all of the links that move the
user around within the website itself. Moving from page
to page but not leaving the site as a whole.

Navigation
Anything that moves a user can fall
into the category of navigation,
however it is a common
convention to have a specific
navigation bar that easily allows
the user to move around the site.

Navigation
Anything that moves a user can fall
into the category of navigation,
however it is a common
convention to have a specific
navigation bar that easily allows
the user to move around the site.
Navigation elements can be very simple, using simple text, or much
more complicated, using images and animations that change as the
mouse moves over the top.

COPY
‘Copy’ is the technical term for text
in a media product.

COPY
in a media product.
On a website the copy could be
large blocks of text, for example a news story on a particular
news website.
Or a small amount of text accompanying an image or multimedia
element.

COPY
in a media product.
On a website the copy could be
large blocks of text, for example a news story on a particular
news website.
Or a small amount of text accompanying an image or multimedia
element.
The language used and the amount of copy can tell you a lot
about the type of website, as well as the target audience.

main image
The main image is found on the
homepage of the website and
can be analysed in the same way
as we look at other visual media
elements, by looking at:

main image
- The camera shot
- The lighting used
- Any special effects
- The composition of the image

main image
- The camera shot
- The lighting used
- Any special effects
- The composition of the image
The choice of image used immediately tells the user a lot
about the website and what to expect moving forward.

Multimedia elements
Modern websites make full use of all multimedia elements including:
- Animations
- Video Clips
- Music
- Image slideshows

Multimedia elements
- Animations
- Video Clips
- Music
- Image slideshows
The use of these elements allows a website developer to more
easily share content with the website’s users.

Multimedia elements
- Animations
- Video Clips
- Music
- Image slideshows
The use of these elements allows a website developer to more
easily share content with the website’s users.
All of these elements have a purpose of their own, and can be
analysed individually as well as within the context of the website
as a whole.

External links
External links are like navigation elements, however upon
clicking on the link, the user will be redirected away from the
website that they are on to a completely different site.

External links
It is very common for external links to open the new page in a
fresh window or tab.

External links
It is very common for external links to open the new page in a
fresh window or tab.
By opening the link in a new tab, the original site is still open. It
is undesirable for a website developer to move a user away
from their site without giving them any way to return.

Social media links
Social media links are very specific external links that redirect
the user to an associated page on another website that relates
to the page they are on. For example a band website will link to
that band’s Facebook page, their Myspace page etc.

Social media links
Social media links are very specific external links that redirect
the user to an associated page on another website that relates
to the page they are on. For example a band website will link to
that band’s Facebook page, their Myspace page etc.
Again it is very common for these social media links to open in
a fresh window or tab.

banner advert
A banner advert is an image/animation embedded into the web
page somewhere that is advertising something external to the
website that you are on. The content of a banner advert is not
always controlled by the website developer.

banner advert
A banner advert is an image/animation embedded into the web
page somewhere that is advertising something external to the
website that you are on. The content of a banner advert is not
always controlled by the website developer.
Upon clicking on the banner advert it acts like an external link,
taking the user away from the website that they are currently
on to the new one. Banner adverts are designed to distract and
get users to click on them.

pop-up advert
A pop-up advert has the same purpose as a banner advert, in
that it is attempting to get a user to leave the website that they
are currently on to look at what is being advertised. However
the pop-up advert is much more intrusive, rather than being
embedded into the website, it appears in front of the site itself.

pop-up advert
By appearing in front of the content that the user has visited
the site to see, the pop-up advert is forcing the user to interact
with it in order to proceed.

pop-up advert
By appearing in front of the content that the user has visited
the site to see, the pop-up advert is forcing the user to interact
with it in order to proceed.
The most intrusive pop-up adverts trigger another pop-up
advert upon being closed, essentially attempting to force the
user to interact with the advert in the way in which they want
them to.

White space
The use of white space is very important when analysing
websites.

White space
websites.
Too much white space and a site could appear amateur or
unfinished.

White space
websites.
unfinished.
Too little white space and the site may look cramped and
unprofessional.

White space
websites.
unfinished.
Too little white space and the site may look cramped and
unprofessional.
The position and amount of white space used can again tell you
a lot about the websites purpose and target audience. A more
mature and sophisticated user may appreciate the white space
more than a younger more interactive user who may wish to
have as much content available as possible.

‘above the fold’ content
‘Above the fold’ is a phrase used
to describe what can be seen
by a user on any page without
having to scroll down.

Some websites are designed
specifically so that all content is above the fold in order to
ensure that the user does not miss any content.

Some websites are designed
specifically so that all content is above the fold in order to
ensure that the user does not miss any content.
A website that has content ‘below the fold’ will often use one of
the previously mentioned elements in order to direct users
further down the webpage.

For the website screenshots, identify and analyse all of the codes
and conventions that you can see within the webpage.
Masthead
House Style
Navigation
Copy
Main Image
Multimedia Elements
External Links
Social Media Links
Banner Adverts
Pop-up Adverts
White Space
Above/Below The Fold Content

Write four extended PEE paragraphs
Each should look at a different element used in website production
and explicitly explain the effect that it has and/or it’s use within the
webpage.
You should cover both why the creator of the website has used
the particular element, as well as what the effect is on the
audience.

Website Codes and Conventions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Website Codes and Conventions

Ähnlich wie Website Codes and Conventions (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Website Codes and Conventions