Queensland is the skin cancer capital of the world. Sun protection is required all year round in Queensland, even in winter. Whilst key messages around cancer prevention and early detection are relatively consistent, certain groups require more targeted information and face other challenges.
You are a freelance web designer who has been approached by a new Client who wants you to design and build a website that promotes health awareness around sun safety. The website should be visually engaging, informative and targeted at a defined demographic group.
Target group options:
The client has identified several relevant target groups. You should choose one of these to design for:
• Early Years – parents and childcare educators (0 – 4 years)
• Primary school students – P – 6
• Secondary School students – Years 7 – 9
• Secondary School students – Years 10 – 12
• Men 40 + (and their family e.g. partner, wife)
• Optional - GPs (more challenging topic)
Specific information on each of these target groups will be presented at a special guest lecture – week to be confirmed, mostly likely in Week 8 or 9.
Content for each target group should cover both prevention and early detection. The amount of content focused on each area will depend on the target group
• Prevention - Slip, Slop, Slap, Seek and Slide
• Early detection – self skin examination, skin checks at a GP or skin clinic
Consideration should be given to how you will best service and communicate with this group of people.
Things to avoid
• Using the word “SunSmart” (trademarked word)
• Using the Cancer Council Queensland logo
• Existing Website Themes – Do not use existing wordpress themes, or other website templates for your submission. The HTML and CSS you submit must be entirely self-authored. Using an existing website-template will be treated as plagiarism.
• External CSS Frameworks – The HTML and CSS you submit must be entirely self authored, so don’t use any external CSS frameworks (skeleton, bootstrap, etc.).
The site must address and include the following:
• 5 main sections or categories o These are to be defined by the main menu of the site. This
means a focus on organisational structure. The sections will contain multiple pages, you decide how many pages are required based on your research.
o One of these areas must be an ‘About Us’ page. Use this to communicate the site’s aims and objectives.
This explains what the site is about.
• A design rationale document o This should be a single-sided A4 poster with a diagram of at least one of the pages from your submitted website. This diagram must be annotated with explanations for the design decisions you have made and how these relate to the target audience.
Each section needs to be totally resolved - consider whether there is an internal hierarchical structure required within that ie. submenus.
Do the images require text to accompany them? How will you present this?
Create a site map to help determine what your sections will be and what content will be within each one.
Research Main Goals and Objectives
You should determine the main goals and objectives of the site and translate this into your mark-up (html) and style (css) by designing and implementing a suitable information architecture.
As mentioned, this requires an organised menu structure.
• What are the main areas of activity within the site?
• How have you translated your research into the interests and activities of these people into this online presence?
• Base your research of this group’s activities and interests.
Technical and Media Assets
A CSS based navigational structure.
The site must contain all html pages, using at least one external CSS.
The site must demonstrate:
• Your understanding of the separation of mark up and style, resulting in a website that is technically proficient.
• Demonstrates attention to detail in terms of code structure and layout.
• Your site should validate as HTML5/CSS according to W3 validation guidelines.
• You have considered the semiotics of the site ie. metadata, keyword, descriptions, titles, alt tags etc. These are relevant to assist in search engine optimisation in a real world scenario.
Layout and Style
The site should be designed in a way that appeals to the target audience and addresses a visual composition that suits the genre and style.
Images and graphics are required to build your design, however: • Only use images that are free of copyright restrictions;
• Are your own or;
• Are Creative Commons-licensed content.
In relation to Creative Commons licensed work, you can only use visual content that:
• Can be used Commercially;
• Can be modified, adapted, or built upon;
• Is available for non-commercial, share alike purposes.
Include concise, original body copy, well written for online reading. This includes using keywords to highlight certain areas.
There is no word count however you need to include enough copy to successfully communicate with your audience.
Your text must be original, we can check!
Content will drive your design.
Do your research first, gather your source materials and rewrite it in your own words.
Once you have determined your goals and objectives for the site, then start your design and structure based on that. Don’t let your own design tastes dictate what the site looks and acts like, its not about your preferences.
This is an opportunity to speak to and represent a specific target audience.
Think about this group and their activities, what do they like to do etc. Consider music, cars, events, fashion, visual aesthetics, gender issues etc.
You must decide what the role of the site is to be and articulate this clearly.
This material may consist of step-by-step explanations on how to solve a problem or examples of proper writing, including the use of citations, references, bibliographies, and formatting. This material is made available for the sole purpose of studying and learning - misuse is strictly forbidden.<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mycss.css" rel="stylesheet" type="text/css"/>
<div id ="content">
<a target="_blank" href="">
<img border="0" alt="Program Logo" src="img/my_logo.gif">
<a title="Home Page" href="index.html">Home</a>
<a title="site contents" href="">Site Map</a>
<a title="Contact Us" href="contact.html">Contact us</a>
<a title="help" href="help.html">Help</a>...