UTS: FACULTY OF DESIGN ARCHITECTURE AND BUILDING BRIEF 03 87539 VC Web Media 1 ASSESSMENT WEIGHTING: 60% ASSESSMENT CRITERIA Engagement with research and planning processes Ability to think conceptually and critically, as evidence in the production of a creative and engaging concept Visual communication design in a screen-based web media form including hierarchy, typography, image quality and text and image relationships Content and structure. Informed by your research and planning process your work should display thoughtful consideration of what content is included and how it is arranged Technical understanding and proficiency as evidenced in the production of a semantic, well formed HTML & CSS website Recognition and acknowledgement of sources Demonstrated ability to work iteratively and undertake self-directed and reflective learning to expand knowledge and skills as required by a concept. PROJECT SUBMISSION: Thursday 22nd December 2016 by 5pm (more details below) PROJECT DESCRIPTION For you third and final assignment you will be planning and building a static multiple page website. Choose an existing 'text' - this could be a book, a film, a poem, a piece of architecture, a play, a piece of art, an essay, an exhibition, a piece of music, a fashion collection and create an experiential website that is a response to the text. With the response you should aim to not recreate or describe the text (i.e. if you are doing a site for a film do not attempt to make an atypical 'film' website with trailer, synopsis etc - see some examples below). You should seek to create a new work that considers the particular formal qualities of the web asa medium seeking to communicate or extend core concepts from the original text within this format. For example if your text was a poem you may split the text up over multiple pages utilizing the webs ability to hyperlink content or work with the ability to scroll. You could play with its typographic representation and generate a visual component to complement the text or you may create a site that provides an expanded view of the poem with background details and analysis. An example of a film website which breaks from traditional structures can be seen in Hi-Res!'s website for Donnie Darko which aimed to "reflect the film's puzzle like structure in the way it is constructed and left open-ended..." see http://www.hi-res.net/archives/donnie-darko.html. Note this is a more interactive examples so you will need to work within the technical knowledge of HTML and CSS that you have acquired so far. Please note that Javascript and the more complex interactions it enables are not expected for your Web Media 1 assignments and will not contribute to your final grade in any way. You should focus on the Assessment Criteria of this subject (which we use to assess the work) which center around clear and successful visual communication. This includes developing a foundational understanding of the possibilities of web technologies in visual communication (concept and content) and the crafting of appropriate and elegant designs (visual hierarchy, typography etc) that work within the constraints of the screen/web environment. When realising your designs we look for thoughtful research and planning in your project blueprint and final outcomes that are technically well formed in HTML and CSS. Do these things well in this assignment to develop a sound foundational knowledge that can be taken further in Web media 2 where we explore responsive design and more complex interactions with Javascript. Process: Your final assignment is composed of two parts: 1. Website Blueprint - documentation of your research and planning process (please note there are 2 stages to this hand in) Draft due Wednesday 14th December, in class. Final due Thursday 22nd December, by 5pm Worth 25% of your final grade An A4 PDF Submit to the DropBox Feedback will be provided in class for the draft and in UTS Review for the final. 2. Final Web Site - a working website built using HTML and CSS Final due Thursday 22nd December, by 5pm Worth 35% of your final grade Upload to the web media server add a link to your homepage + zip your folder and submit to the DropBox Your file should be clearly labelled with your tutors first name (see the course outline if you do now know their name), the assignment number,your student number and name i.e. use the following convention "MonicaA3-123456-first-lastname.pdf". Feedback will be provided over UTS Review There are more details in the Deliverables section below. DELIVERABLES The final Final Site The final site must have: 1. 5 pages or equivalent (an index.html which is your 'homepage' + 4 other pages). If your site requires more pages it is suggested that you do not go over 8 pages. 2. One CSS file for all HTML pages You should have one main CSS file that sets the site's main styles. You can link to more than one stylesheet on a HTML page if required. For example if there was some difference between the pages that you cannot resolve in the one stylesheet (i.e. you have a different background image for the body element) you might link to the main stylesheet for site wide styles but also link to another individual stylesheet for the page where you set its individual styles. WEBSITE BLUEPRINT For this part of the assignment you will be creating a blueprint of your website. A blueprint is a document that describes what you are intending to make; it defines what the site is, its intended audience, its structure and design. You will work on this material for an interim presentation in Week 9. This document must include: 1. Site Brief & Research (200-300 words + captures of research and annotations / analysis) A description of the site and its purpose. It should provide an overview the goals of the site and the project i.e. What do you hope to accomplish? Your site brief should also identify your target audience (if there is one) and their objectives. Informed by this and a 'competitive analysis' research task, the brief should also provide an outline of what design choices would be suitable and what content should be included and why. More below. Defining your Target Audience Can be defined by demographics: Age GenderLocation Education Level Income Level Occupation Can be characterised by: Personality Attitudes Values Interests/hobbies Lifestyles Behaviour Defining your Target Audiences Goals Once you have defined who will visit the site you can define why they will visit - what are the objectives/goals /aims of visitors to the website? You can separate this into goals/activities and tasks: Goals - the end result that a person strives for i.e. to be up to date of the latest in web design Activities - the tasks that people do to achieve their goal i.e read all the latest material about web design Tasks - the individual tasks that make up/support an activity i.e. read blog posts, bookmark them, follow extra resource links, follow the blog Reference: http://boagworld.com/season/2/episode/s2e2/ Researching Design and Content For this part of the assignment you will do some research in the form of 'competitive analysis' (remember the first assignment for some insight into how you can analyse other forms of web media). Look at similar sites or sites that would also be targeted at your audience. What design choices have been made, what content has been included and how has content been structured? This can also be a critical process, where you are not only looking at sites that work but also ones that do not and analysing how and why the succeed or fail. This research should be evident in your written site brief informing your decisions. You should include captures of sites or other resources that have informed your research and influenced your design/structural/usability choices. 2. A Site Map A sitemap is a diagram that represents the hierarchical structure of the HTML pages that make up a website. You use it to map out the overall structure, navigation and page hierarchy. You should aim to categorise the content into logical groups which have meaning for the user - this can create logical paths that guide targeted users in their goals (which you will have identified in your site brief).A well thought out site map provides good usability, the structure and labelling should reflect how visitors would view and use the content. You can use a graphics program like Adobe Illustrator to do this. Some resources for planning and naming your sites structure: http://blog.bordercrossingmedia.com/2011/12/create-sitemap-planningwebsite/ http://uxdesign.smashingmagazine.com/2012/03/20/the-elements-ofnavigation/ 3. Wireframe Whereas a sitemap gives you an idea of the overall structure a wireframe gives you a clear and detailed description of what type of content and functions is on each page of the site. Once again your research should inform your decisions Avoid the tendency to make this look 'designed' or too appealing as this distracts from the purpose of the wireframe - which is to decide what content will be included on the page - where content will go. One wireframe should be made for each unique page on the website. Resources: http://www.creativebloq.com/design/create-wireframes-work-you-8126137 4. Moodboard & StyleTiles What do you imagine it will look like? Create a one page moodboard and a Style Tile to communicate the graphical style that you are considering using i.e. colours, fonts, icons and interface elements. See http://styletil.es/