Identify, explain and apply the design principles that

Assignment Detail:- ITECH2003 Web Design Document - Federation University Assignment - Design Document OverviewIn this first assignment, you are required to prepare a "Design document" in the format of a report which will cover most of the analysis, planning, content and design considerations of a personal website about yourself that you will develop in Assignment 2- Learning Outcome: Knowledge:• Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design;• Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective-Skills:• Demonstrate analytical skills to design quality multimedia and web pages, and efficient human- computer interaction;Application:• Select appropriate design principles to design multimedia products and web pages that are align with project expectations;Values:• Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright- Assignment Details This semester you are required to design and develop a Personal Website about yourself and your future career ambitions- It should be:• Small, unique and professional in appearance;• A portfolio of your achievements; and• A showcase to future potential employers-This task runs the entire semester and is broken down into two assignments- Assignments Overview Assignment 1 DetailsIn this first assignment, you are required to prepare a "Design document" in the format of a report which will cover most of the analysis, planning, content and design considerations of the personal website about yourself that you will develop in Assignment 2- A template has been provided for you on Moodle to create your Design Document- Use this to template and then follow Lab 1, Exercise 4 to begin your assignment- Additional Lab exercises assist with other parts of the assignment, check the template for details-As the website must be about yourself and your career ambitions, choose a career to showcase on the website that you are passionate about- Example: Web Designer, Mainframe Administrator, or Primary School Teacher- If you are uncertain, make one up! Example: Wrestling Champion, Superhero or Award Winning Musician-Below are all the requirements of the actual website you will be building in Assignment 2- Become familiar with these so you can correctly document the content and designs for your personal website- • You are expected to create your website by yourself hand-coding HTML, CSS and JavaScript-o -Lab and lecture materials and resources can be used to help you with your website, BUT your design should be your own, not for example the design/layout of lab exercise--• You may not develop the website using server-side scripting languages, such as PHP, ASP, etc-• Your design should focus on design rules learned during this course such aso Rules of good content and visual design;o Usability guidelines related to Colour, Typography, Placement of objects, Readability and Balance-o A solid understanding of the use of other elements such as; contrast, white space, layout, focal point, alignment, proximity, etc-• All text should follow the rules of writing for the web, including appropriately "chunked" content, use of Plain Language and the "Inverted Pyramid" style of writing- Design Document StructureThis design document is focused mainly on the final step of the design phase, called "Information Architecture" fromLectures 2 to 6, which handles all of the design considerations for planning a website-Use the following structure for the creation of your Design Document- Before handing in your assignment, make sure that all sections are present and that they contain the information required- 1- Overview-Step 1 of the Design Phase is typically the Needs Analysis from Lecture 2, but this assignment has already identified why your website is needed and who it will benefit- Instead you will outline your personal website in an overview and discuss its Target Audience- The Target Audience Analysis is step 2 of the Design Phase, and is described in Lecture 2-- DescriptionIdentify the name of your personal website and a short "blurb" that sums up your strengths- Your own name should be included within this to identify the individual the website is based on- Discuss your career ambition that your personal website will focus on- Provide a summary of the eight webpages and justify how they relate to yourself and your future career- HighlightsThis section should describe content with particularly interesting and/or rich features- For example, you should detail the dynamic features of your required image gallery- You should also detail any other content you plan to place on your personal website that you consider to be especially distinctive and with interesting features -such as social media integration, CSS3 animations and transitions, sticky navigation/header/footer, JavaScript and responsive design-- You may have come up with some ideas after your competitive analysis of other personal websites-Remember that when discussing features your website is required to be developed fully on the client-side -no PHP, SQL and other server-side functions---Lab 2 contains an exercise to get your started with the Highlights- Target AudienceThink about one core demographic that will want to use your website - this has been summarised for you on page 2 of these specifications- Now use the Lab 2 exercise to fill in the details of the demographics of this user-Age and Gender are very important and should be discussed-Other demographics should be considered in your discussion: Education Level, Interests, Background, Culture, Language, Employment Status, and Location--Lab 3 contains an exercise to get your started with your Target Audience demographics-- 2- Site Content & Structure-Site Content and Site Structure are described in Lecture 2, including the content inventory, site map, and navigational elements-- Content InventoryA simple list of all the content and their types needed for each web page in your personal website- Each webpage on your website will contain a number of contents, their types and their labels to identify what they are -based on the assignment specifications---Lab 4 contains an exercise to get your started with your content inventory-- Navigation SchemeDescribe how users will navigate the eight webpages in your personal website- -Navigation is first described in Lecture 2and includes many different types of navigation you may consider for your website--Include the functionality and visual details of each of your website's different types of navigation -if applicable-:• global primary and secondary,• local,• utility,• in-text and• external links-With eight webpages total required, you need to decide how to categorise your webpages in order to meet the 5±2 guideline -Lecture 3-- For example, which webpages belong together under a single category to reduce cognitive load for the user???? You can support navigation discussion with images-Additionally, create a diagram of your website's structural site map that identified the relationship between all eight webpages- The home page should be at the top of the hierarchy, as most users start at, or return to this page- All of your web pages should be identified by both their page name, and an appropriate html file name- -Lecture 2 discussed site maps and categories--Lab 5 contains an exercise to get your started with your navigation scheme-- 3- Content Design-Content Design is discussed in Lecture 3- You should also consider the Grids layouts discussed in Lecture 4-- Page LayoutThis section requires a detailed description of the general page layout you will use for your website, and why you have chosen this layout- -Options discussed in lecture 4 include fixed, centered, and flexible- Responsive design -as well as adaptive design- is another consideration that can look great, but more time-consuming-Discuss the minimum screen width you have chosen to focus on -if responsive, the multiple screen width breakpoints-, as well as how you will take advantage of the available screen real estate -after you take "browser chrome" into consideration-- WireframesEvery web page in your website must include a digitally-created wire-frame for desktop screen layout- -Lecture 3 first describes wireframes, while Lab 6 contains directions on how to create these using appropriate software and what each wireframe should include for higher marks-- If pursuing a responsive/adaptive design, see the rubric for creating additional wireframe-s- for mobile devices and how they are marked-Use the composition principles of balance, contrast, focus, harmony, motion, simplicity, and space to provide order to your web pages -For more information, Visual Design and Composition was discussed in Lecture 4--Your wire-frames should consist of all of the following:• Navigation: look, font type, font size, colour• Content: label, type -video/sound/text/animation-, size• Text: font type, size, colour• Headings: font type, size, colour• Footer: font type, size, colour• Background: colour-s-/image-s-• Colours: all colours in your wireframes must be defined as a hexadecimal value -#999999-• Fonts: all fonts in your wireframes must be mentioned by name -Arial, Garamond, etc- and size- 4- Visual design-Visual Design was discussed in Lecture's 4, 5 and 6- Home Page Mock-UpThis section should include a mock-up of your home page to give a very good indication of the website's final appearance-The mock-up should clearly show the header, footer, navigation, composition, colour scheme, typography, and layout of your home page with good composition- All placeholders for media shown in your wireframes should now contain the actual media -image, video/audio controls, etc--This should be as close to the look of your final website home page as possible- -Lecture 4 first describes mock-ups and composition, while Lab 6 contains directions on how to create a web page mock-up using appropriate software-- Colour SchemeProvide a detailed description of the colour scheme that you will use, and how these colours will express your web site's mood and personality- Provide a justification for this colour scheme and how it suits your proposed target audience-Provide a colour swatch of your colour scheme which also identifies the hexadecimal value of each colour in your scheme- For example, if you have 5 colours for your website interface and typography, your colour swatch will show those 5 colours and their hexadecimal value- -See Lecture 5 for how to pick good colour schemes and create swatches-- TypographyProvide a detailed description of the typography that you will use- Detail the fonts used and their sizes for every different use of text on your website -eg: headings, navigation, content, footer, rollover effects, etc--- Provide a justification for choosing these fonts and sizes- Provide samples of each font - take a screenshot to embed each in your document- -See Lecture 6 for how to pick good font combinations and create good hierarchy-- 5- ReferencesList any references you have used for this document in APA Style format- References should be used to help justify your target audience demographics and design choices-If you state something as a fact you must provide an in-text APA citation and an end-of document APA referencefrom where you obtained this knowledge- Assignment 2: Website Development OverviewIn this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1- You should avoid the mistakes made by the competition from your competitive analysis- Learning Outcomes • Recognise the importance of user analysis, content organisation, interface design, interface usability and the accessibility issues associated with multimedia and web design;• Identify, explain and apply the design principles that underlie good multimedia and webpage design, from both a visual & content design perspective-Skills:• Demonstrate the appropriate use of visual and content design tools, and multimedia and web authoring software;• Develop a sophisticated web site from scratch, using information gathering and design techniques-Application:• Select appropriate design principles to design multimedia products and web pages that are align with project expectations;• Operate appropriate software packages to build multimedia products and web pages that are align with project expectations-Values:• Appreciate ethical behaviour in relation to multimedia and web page design, in particular issues related to copyright- This semester you are required to design and develop a Personal Website about yourself and your future career ambitions- It should be:• Small, unique and professional in appearance;• A portfolio of your achievements; and• A showcase to future potential employers-This task runs the entire semester and is broken down into two assignments- Assignments Overview Assignment Details In this second assignment, you are required to develop your personal website from scratch, based on the design document that you created in Assignment 1- You should avoid the mistakes made by the competition from your competitive analysis- The requirements for building the website are listed below- All of the labs this semester are designed to help you with this assignment; learning HTML, CSS and JavaScript- Do not discount their potential to assist with parts of developing this website- For an overview of what each lab contains, please click on Moodle's "Content" section at the top of this Moodle course- Attachment:- Web Design Document-rar

Most Recent Questions