Cluster Name: Interactive Design (ID2)

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

U

/U

C

D

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

17.13

Location

City Flinders

Indicative Total Hours

68

D

O

Class Time

Activities/ Practical

application

Work Integrated Learning

(WIL)

Indicative Total Nominal

Hours

4 hours

68 hrs

0 hrs

68 hrs

R

ECOGNITION OF

C

URRENT

C

OMPETENCY

(RCC)

OR

R

ECOGNITION OF

P

RIOR

L

EARNING

(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.

A

D

Assessment Task

Due Week

Linked to Unit/s #

Result (For

student use

only)

Design Mobile Interfaces - Health App

Class 4

CUFDIG506A

Design Responsive Interfaces - Video Website

Class 8

CUFDIG506A

Introduction to Dynamic Websites

Class 9,10,16

ICAWEB501A

Interactive Dynamic Portfolio (Wordpress Customisation)

Class 17

ICAWEB501A

C

D

Name

Telephone

Email

Teacher

Lisa Cianci

[email protected]

I

NDICATIVE  

D

ELIVERY  

&

A

SSESSMENT  

S

CHEDULE  

Sessions     Topic  /  Activities  

(including  any  pre-­‐reading/resources  required)  

Assessment  

1

11/2

• Develop  a  Persona  for  your  health  app       • Share  Personas      

• Download  and  read  Designing  for  touch  –  Highlight  areas  and  discuss  as  a   class  

Read  through  Assessment  Task  1  

Start  AT1:  Design  for   mobile  devices  

2

18/2

• 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      

• http://www.mobile-­‐patterns.com/       • http://pttrns.com/      

• http://inspired-­‐ui.com/          

Share  sketches  and  discuss  design  solutions              

3

25/2

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

Submit  all  sketches  and  mockups  for  your  mobile  app  designs  at  the  end  of  class       Talk  about  design  strengths  and  weaknesses  

Submit  AT1:  Design  for   mobile  devices  

5

11/3

Look  at  responsive  design  patterns      

• http://designshack.net/articles/css/5-­‐really-­‐useful-­‐responsive-­‐web-­‐

design-­‐patterns/      

• http://www.lukew.com/ff/entry.asp?1514      

• http://bradfrost.github.io/this-­‐is-­‐responsive/patterns.html          

Complete  handout  –  Design  for  web       Read  through  Assessment  Task  2    

Start  AT2:  Design   responsive  interfaces  

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

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

Complete  your  project.      Submit  and  present  to  the  class  

Submit  AT2:  Design   responsive  interfaces  

9

22/4

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?    

Start  AT3:  Introduction   to  dynamic  websites     Submit  AT3  task  -­‐   coding  exercise  

10

29/4

Complete  a  quiz  on  dynamic  websites  -­‐  identify  the  scripting  language  and  it's   function          

Introduction  to  online  folios:  review  2  folios  as  research  

• Discuss  what  online  folios  are,  and  what  they  can  be       • Look  at  examples  of  folios      

Start  AT4:  Interactive   dynamic  portfolio      

Submit  AT3  task  -­‐  quiz  

11

6/5

• 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  

12

13/5

• Create  custom  menu  for  your  portfolio  with  appropriate  pages  and  

nesting      

• Add  minimum  2  pieces  of  work  plus  write-­‐ups  

13

20/5

• 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

• 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

• How  to  tweak  your  Wordpress  style  

16

10/6

• How  to  back  up  the  data  from  your  Wordpress  site.       • How  to  import/export  data      

• How  to  manage  media  content          

Submit  AT3  task  -­‐   backup  wordpress  

17

17/6

• Complete  your  portfolio  and  present  to  the  class  

 Submit  AT4    -­‐  dynamic   portfolio