Download as PDF, PPTX
Uploaded byJohn DF
Website Codes and Conventions
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.
In this document
Powered by AI
Identifying key elements in website analysis: purpose and target audience.
Importance of deconstructing websites to identify their conformities and omissions.
Overview of the URL as the web address and the function of the home page.
Masthead as a branding tool, showcasing the website's identity and user expectations.
Definition and importance of house style in formatting and design elements of a site.
Functionality of navigation links to facilitate user movement within the site.
Significance of 'copy' in websites, indicating text size, style, and audience targeting.
Importance of the main image on the homepage and its visual communication elements.
Role of various multimedia facets like animations, videos, and music in website design.
How external links function as navigation to new sites while retaining original site access.
The role of social media links in connecting users to relevant external profiles.
Differences between banner and pop-up ads in engaging users and driving traffic.
Balancing white space to maintain a professional appearance and meet user expectations.
Explanation of ‘above the fold’ content strategy to optimize user engagement without scrolling.
Conducting analysis on various website elements and their impact through structured writing.
More Related Content
Similar to Website Codes and Conventions
Website Codes and Conventions
- 1. Websites Codes andConventions
- 2. WEBSITES - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand conventions COPY ‘Copy’ is the technical term for text in a media product.
- 22. WEBSITES - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand conventions Multimedia elements Modern websites make full use of all multimedia elements including: - Animations - Video Clips - Music - Image slideshows
- 28. WEBSITES - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand conventions White space The use of white space is very important when analysing websites.
- 41. WEBSITES - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand 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 - Codesand conventions
- 48. WEBSITES - Codesand conventions
- 49. WEBSITES - Codesand 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 extendedPEE 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.