Cluster Name: Interactive Design (ID2)

Transcription

1 Name and Course Code: Advanced Diploma of Graphic Design - CUV60411 Cluster Name: Interactive Design (ID2) Year: 2015 Semester/ Dates: Semester 1 / February June Location: City Flinders Campus Prepared by: Lisa Cianci VU Unit Guide Lisa Cianci Interactive Design 2015 page 1

2 UNIT/UNIT CLUSTER DETAILS Unit Code Unit Name CUFDIG506A Design Interaction ICAWEB501A Build a Dynamic Website Unit Cluster Title Interactive Design (ID2) Semester 1 Year 2015 Class P15 Day Wednesday Time 13:00 17:00 No of Weeks 17 Room/s Location City Flinders Indicative Total Hours 68 CONTACT DETAILS Name Telephone Teacher Lisa Cianci [email protected] Education Manager Adam Hutterer [email protected] DELIVERY OVERVIEW Class Time Activities/ Practical application Work Integrated Learning (WIL) Indicative Total Nominal Hours 4 hours 68 hrs 0 hrs 68 hrs RECOGNITION OF CURRENT COMPETENCY (RCC) OR RECOGNITION OF PRIOR LEARNING (RPL) Applications for Recognition of Current Competency and or RPL should be made to the Program Manager at the commencement of the unit. RCC will be granted to those students who submit a valid portfolio of evidence of competency. Arrange an appointment with the Program Manager if you feel you qualify for RCC or RPL. ASSESSMENT DETAILS Assessment Task Due Week Linked to Unit/s # Result (For student use only) Design Mobile Interfaces - Health App Design Responsive Interfaces - Video Website Introduction to Dynamic Websites Interactive Dynamic Portfolio (Wordpress Customisation) Class 4 Class 8 Class 9,10,16 Class 17 CUFDIG506A CUFDIG506A ICAWEB501A ICAWEB501A VU Unit Guide Lisa Cianci Interactive Design 2015 page 2

3 INDICATIVE DELIVERY & ASSESSMENT SCHEDULE Sessions Topic / Activities (including any pre- reading/resources required) 1 11/2 Introduction to user- centred design for mobile Develop a Persona for your health app Share Personas Download and read Designing for touch Highlight areas and discuss as a class Assessment Start AT1: Design for mobile devices Read through Assessment Task /2 Design problems when designing for mobile Read Finger- Friendly Design: Ideal Mobile Touchscreen Target Sizes Sketch rough mobile designs (1 page of sketches per screen) for a new health management application. Screens should be: Load screen Home page with a list of functions Pages for each function (min 3 functions) Refer to mobile design patterns for design inspiration patterns.com/ ui.com/ Share sketches and discuss design solutions 3 25/2 Design a mobile interface Draw the interface for your app in Photoshop or Illustrator. It must: Be based on the design specifications Be made to correct dimensions for the mobile device you are designing for. Use a font size which is legible and consider fat finger and thumb input 4 4/3 Feedback Submit all sketches and mockups for your mobile app designs at the end of class Submit AT1: Design for mobile devices Talk about design strengths and weaknesses 5 11/3 Introduction to responsive web design Look at responsive design patterns Start AT2: Design responsive interfaces really- useful- responsive- web- design- patterns/ is- responsive/patterns.html Complete handout Design for web Read through Assessment Task 2 VU Unit Guide Lisa Cianci Interactive Design 2015 page 3

4 6 18/3 Responsive design project development Research at least 3 video apps and focus on the layout and functionality and how these are positioned for different screen sizes 7 25/3 Responsive design project development Draw the interfaces for your video app in Photoshop or Illustrator. It must: Be based on the design specifications Be made to correct dimensions for the different devices you are designing for. Use a font size which is legible and consider fat finger and thumb input / mouse input Develop your design document with interfaces, style guide, rationale for design choices and user feedback from peers. mid- semester break 29/3-12/4 8 15/4 Responsive design project development Complete your project. Submit and present to the class 9 22/4 Dynamic web development Look at the types of scripting and server software required for a dynamic website: HTML, CSS, JavaSCript, PHP, MySQL What are each of these scripting languages and what is their purpose? What does the code look like? What is the structure of a dynamic website? 10 29/4 Dynamic web Development & Developing online folios Complete a quiz on dynamic websites - identify the scripting language and it's function Submit AT2: Design responsive interfaces Start AT3: Introduction to dynamic websites Submit AT3 task - coding exercise Start AT4: Interactive dynamic portfolio Submit AT3 task - quiz Introduction to online folios: review 2 folios as research Discuss what online folios are, and what they can be Look at examples of folios 11 6/5 Getting yourself online - WordPress Participate in discussion what should be included in a folio Complete Quiz What is important in a folio? Create class list of projects setup WordPress Account Explore themes in WordPress Justify selected Theme Customising WordPress, Formatting Content Read getting- online- domain- hosting.docx Install your theme Read your theme documentation Start modifying your theme VU Unit Guide Lisa Cianci Interactive Design 2015 page 4

5 12 13/5 Uploading content and creating a custom menu Create custom menu for your portfolio with appropriate pages and nesting Add minimum 2 pieces of work plus write- ups 13 20/5 Customisations: widgets and other add- ons Customise your site with appropriate widgets and other elements Add minimum 2 pieces of work plus write- ups AT4 review portfolio layout 14 27/5 Create an animated GIF Use Photoshop to create an animated GIF & add this to your Wordpress site Connecting and branding with social media Successful socialising Brand your: o Facebook o Youtube o Twitter o LinkedIn Continue designing + adding content to your folio Add 3 pieces plus write- ups 15 3/6 Customisations: style and other tweaks How to tweak your Wordpress style 16 10/6 Managing dynamic websites: how to backup a Wordpress site How to back up the data from your Wordpress site. How to import/export data How to manage media content 17 17/6 Final class: completion of projects & presentation of online folio Complete your portfolio and present to the class Submit AT3 task - backup wordpress Submit AT4 - dynamic portfolio VU Unit Guide Lisa Cianci Interactive Design 2015 page 5