Website Codes and Conventions
11 likes22,408 views
The document outlines the key codes and conventions of websites, emphasizing the importance of understanding a website's purpose and target audience. It details various elements such as URLs, home pages, navigation, multimedia, and advertising methods, explaining their roles in website design and user interaction. Additionally, it highlights the significance of analyzing these elements to assess a website's effectiveness and user experience.
Website Codes and Conventions
- 1. Websites Codes and Conventions
- 2. 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
- 3. 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 Consider the purpose and target audience for the following websites:
- 4. 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 Consider the purpose and target audience for the following websites:
- 5. 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 Consider the purpose and target audience for the following websites:
- 6. 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 Consider the purpose and target audience for the following websites:
- 7. 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 Consider the purpose and target audience for the following websites:
- 8. WEBSITES - Codes and conventions 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.
- 9. WEBSITES - Codes and conventions 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.
- 10. WEBSITES - Codes and conventions 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. 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.
- 11. WEBSITES - Codes and conventions 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.
- 12. WEBSITES - Codes and conventions 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.
- 13. WEBSITES - Codes and conventions 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.
- 14. WEBSITES - Codes and conventions 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.
- 15. WEBSITES - Codes and conventions 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.
- 16. WEBSITES - Codes and conventions 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:
- 17. WEBSITES - Codes and conventions 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
- 18. WEBSITES - Codes and conventions 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.
- 19. WEBSITES - Codes and conventions 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. 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.
- 20. WEBSITES - Codes and conventions 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. 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.
- 21. WEBSITES - Codes and conventions COPY ‘Copy’ is the technical term for text in a media product.
- 22. WEBSITES - Codes and conventions COPY ‘Copy’ is the technical term for text 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.
- 23. WEBSITES - Codes and conventions COPY ‘Copy’ is the technical term for text 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.
- 24. WEBSITES - Codes and conventions 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:
- 25. WEBSITES - Codes and conventions 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: - The camera shot - The lighting used - Any special effects - The composition of the image
- 26. WEBSITES - Codes and conventions 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: - 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.
- 27. WEBSITES - Codes and conventions Multimedia elements Modern websites make full use of all multimedia elements including: - Animations - Video Clips - Music - Image slideshows
- 28. WEBSITES - Codes and conventions Multimedia elements Modern websites make full use of all multimedia elements including: - 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.
- 29. WEBSITES - Codes and conventions Multimedia elements Modern websites make full use of all multimedia elements including: - 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.
- 30. WEBSITES - Codes and conventions 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.
- 31. WEBSITES - Codes and conventions 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. It is very common for external links to open the new page in a fresh window or tab.
- 32. WEBSITES - Codes and conventions 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. 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.
- 33. WEBSITES - Codes and conventions 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.
- 34. WEBSITES - Codes and conventions 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.
- 35. WEBSITES - Codes and conventions 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.
- 36. WEBSITES - Codes and conventions 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.
- 37. WEBSITES - Codes and conventions 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.
- 38. WEBSITES - Codes and conventions 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. 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.
- 39. WEBSITES - Codes and conventions 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. 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.
- 40. WEBSITES - Codes and conventions White space The use of white space is very important when analysing websites.
- 41. WEBSITES - Codes and conventions White space The use of white space is very important when analysing websites. Too much white space and a site could appear amateur or unfinished.
- 42. WEBSITES - Codes and conventions White space The use of white space is very important when analysing websites. Too much white space and a site could appear amateur or unfinished. Too little white space and the site may look cramped and unprofessional.
- 43. WEBSITES - Codes and conventions White space The use of white space is very important when analysing websites. Too much white space and a site could appear amateur or 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.
- 44. WEBSITES - Codes and conventions ‘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.
- 45. WEBSITES - Codes and conventions ‘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.
- 46. WEBSITES - Codes and conventions ‘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. 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.
- 47. WEBSITES - Codes and conventions
- 48. WEBSITES - Codes and conventions
- 49. WEBSITES - Codes and conventions 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
- 50. 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.