Course Title: Design web environments

Part B: Course Detail

Teaching Period: Term2 2015

Course Code: COSC5949C

Course Title: Design web environments

School: 345T Media and Communication

Campus: City Campus

Program: C6087 - Advanced Diploma of Screen and Media

Course Contact : Program Administration

Course Contact Phone: +61 3 9925 4815

Course Contact

Name and Contact Details of All Other Relevant Staff

Jeanie Hague-Smith

Ph: 9925 4815

Nominal Hours: 50

Regardless of the mode of delivery, represent a guide to the relative teaching time and student effort required to successfully achieve a particular competency/module. This may include not only scheduled classes or workplace visits but also the amount of effort required to undertake, evaluate and complete all assessment requirements, including any non-classroom activities.

Pre-requisites and Co-requisites


Course Description

This course covers, skills and knowledge required to design web environments.

National Codes, Titles, Elements and Performance Criteria

National Element Code & Title:

CUFDIG502A Design web environments


Element 1 Determine project requirements

Performance Criteria:

1. Analyse project brief to identify purpose of, and target audience for, web environments

2. Consult with clients to clarify project requirements

3. Identify target audience characteristics and determine how these influence all aspects of design

4. Identify content to be incorporated and generated and how this content is to be accessed, searched or delivered 


Element 2 Research and select web environments

Performance Criteria:

5. Research web environments and analyse their potential

6. Analyse how these web environments meet audience and content requirements

7. Identify issues relating to delivery platform and standards , and determine how these may affect web environment options

8. Consult relevant personnel to ensure that all possible web environment options are considered

9. Select web environments that will meet creative, production and technical requirements


Element 3 Draft design specifications

Performance Criteria:

10. Design the architecture of web environments to show interrelationship between environment components

11. Identify each web environment and specify its individual interactive features, functionality and navigation and its relationship to design as a whole

12. Identify content components and specify how these will be logically structured and integrated into and/or generated by web environments

13. Specify levels of access permissions to web environments as required

14. Specify media assets as required

15. Specify user interfaces of web environments

16. Specify production requirements , including appropriate testing strategies

17. Write draft design specifications to include all relevant advice to design and development teams

18. Discuss draft design specifications with client to ensure designs are consistent with project briefs


Element 4 Review design specifications

Performance Criteria:

19. Review designs against required project outcomes, as well as client and audience needs

20. Review designs to ensure they meet creative and technical requirements

21. Adjust designs as necessary after discussions with relevant personnel

22. Clarify legislative or ownership issues to comply with production and organisational requirements

23. Confirm with client acceptance of design specifications, including deliverables, milestones and timelines

Learning Outcomes

On successful completion of this unit, you will be able to apply your skills and knowledge to design web environments.

Details of Learning Activities

In class learning activities include, but are not limited to:
• class presentations
• group discussion
• online research
• independent project based work
• teacher directed group activities/projects
• workshopping of students’ own projects

Out of class activities include, but are not limited to:
• online research
• work shopping
• independent project based work

Teaching Schedule

Using Dreamweaver, bootstrap - HTML & CSS Styles basics. Style library for bootstrap & ideas for 1 page folio. BG tutorial - css colours

WeekClass ContentAssessments Due
1Course outline. Intro to responsive design. Simple code revision
Assignments briefing - Web trends, css and HTML5 & CSS3 Frameworks (bootstrap) for responsive design. Screen Sizes & devices.
Look at online Lynda course.
Test sign into server.

Code revision – start to build a simple website, using dreamweaver – setting up for coding.

2An overview of responsive web design tools & limitations of responsive websites
Code revision – linking html and css.

Assessment Task 1 assigned. Web test.
To be started in class and completed in own time, due week 3. Firefox, firebug. Dreamweaver, HTML & CSS Styles basics.

3Root folder set up & file structure.
Image formats.
Adding images to html.

Complete Assessment task 1 & submit.

Assessment task 1 (ungraded): Analysis Tutorial and webtest.
(Refer to assignment brief for details)

To be finished & submitted in class. Assessed in class.
Look at portfolio design document.
Bootstrap & frameworks for designers. How to customize the framework.
Web fonts.

Start chapter 1 Lynda Course
Bootstrap Layouts: Responsive Single-Page Design with Ray Villalobos.

Assessment task 3 assigned: Design Document for Personal Folio Website.

5Studio Time
Typography on the web and design.

Chapter 1 Lynda Course
Bootstrap Layouts: Responsive Single-Page Design with Ray Villalobos. Continue to navigation.

6Bring to today’s class a list of your content and the proposed design & layout of site. Also bring in your logo sketches, font and colour scheme exam¬ples.
Web fonts & – css design – illustrator

Chapter 1 Lynda Course
Bootstrap Layouts: Responsive Single-Page Design. Get to carousel at the end of chapter Look at final web file from Lynda and how it can be modified.


7Assessment task 2 - Using, bootstrap and skills learnt from following - HTML & CSS Styles basics. Change Styles for bootstrap and create a basic page folio.
Assessment task 2 (ungraded): Bootstrap install and customisation:
(Refer to assignment brief for details)

Install bootstrap template change page using dreamweaver, Firefox & firebug. Completed In class. 
8Assessment task 3 Due - Design Doc + Wireframe Personal Folio Website x 3 Presentations – feedback session
5 second design impact group work –
is design effective?

Chapter 2 Lynda Course Styling page.
Modifying navigation.


Assessment task 3 (graded): Design Document for Portfolio Website
(Refer to assignment brief for details)
9Accessibility, Image formats and sizes for web.

Assessment task 4 Assigned:
Portfolio website build and code.

Start coding website.

Chapter 2 Lynda Course

10Metadata and SEO

Chapter 2 Lynda Course Styling page.
Background Images.


11HTML5 video and flash
Trouble shooting code - working with firebug.
Gallery and carousel construction.
12Studio time – check webcode working with design.
Studio time
13Testing webcode –
Social networking integration
14Studio class – beta test website & Upload to server Assessment task 4 (graded): Website construction
(Refer to assignment brief for details)
15Studio class – beta test website & Upload to server 
16Studio class – beta test website & Upload to server 

Learning Resources

Prescribed Texts


Other Resources

Students are encouraged to make full use of University computer lab resources. Please consult the course
Blackboard page or the University web site for details of access times and locations.

Other required resources include broadband internet access, suitable digital media storage such as a portable hard drive or
USB flash drive, with at least 4Gb capacity.

Overview of Assessment

A variety of practical assessment tasks, to be submitted in class, will be used to establish competence in this course

Assessment Tasks

To demonstrate competency in this course you will need to complete the following assessment to a satisfactory standard.
You will receive feedback on all assessment and where indicated, you will receive a grade. Graded assessment tasks are equally weighted and will determine your final result for this course.

You will receive a grade for A03 Design Document for Portfolio Website and A04 Website construction (refer to MyRMIT for grading rubric).


Assessment task 1 (ungraded): Analysis Tutorial and webtest. Due week 3.
(Refer to assignment brief for details)

Assessment task 2 (ungraded): Bootstrap install and customisation. Due week 7.
(Refer to assignment brief for details)

Assessment task 3 (graded): Design Document for Portfolio Website. Due week 8.
(Refer to assignment brief for details)

Assessment task 4 (graded): Website construction Due week 14.
(Refer to assignment brief for details)

For further information on the grading system and criteria used, please refer to the course blackboard site.

Grades used in this unit are as follows:

Grades which apply to courses delivered in accordance with competency-based assessment, but which also use graded assessment:

CHD Competent with High Distinction
CDI Competent with Distinction
CC Competent with Credit
CAG Competent achieved graded.
DNS Did Not Submit for Assessment
NYC Not Yet competent.

Assessment Matrix

The assessment matrix demonstrates alignment of assessment tasks with the relevant Unit of Competency. These are available through the course contact in Program administration

Other Information

Please refer to the RMIT student page for extensive information about study support, assessment, extensions, appeals and a range of other matters:

The major learning experience involves studio based exercises, demonstration and production. It is strongly advised that you attend all sessions in order to engage in the required learning activities, ensuring the maximum opportunity to gain the competency.

Cover Sheet for Submissions
You must complete a submission cover sheet for every piece of submitted work including online submissions. This signed sheet acknowledges that you are aware of the plagiarism implications.

Assessment and Feedback (web link)
You will receive verbal feedback during scheduled class times, and written feedback from teachers on your work . Where appropriate, this feedback will also include suggestions on how you can proceed to the next stage of developing your projects.

Student Progress(web link)
Monitoring academic progress is an important enabling and proactive strategy to assist you to achieve your learning potential.

Special consideration for Late Submission (web link)
All assessment tasks are required to be completed to a satisfactory level. If you are unable to complete any piece of assessment by the due date, you will need to apply for an extension. You can apply in writing for up to a week’s extension from your course teacher. If you need a longer extension, you wil need to apply for special consideration.

Academic Integrity and Plagiarism (web link)
RMIT University has a strict policy on plagiarism and academic integrity. Please refer to the website for more information on this policy go to Academic Integrity

Course Overview: Access Course Overview