Course Title: Design web environments

Part B: Course Detail

Teaching Period: Term2 2014

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:

2.1 Research web environments and analyse their potential
2.2 Analyse how these web environments meet audience and
content requirements
2.3 Identify issues relating to delivery platform and
standards , and determine how these may affect web
environment options
2.4 Consult relevant personnel to ensure that all possible
web environment options are considered
2.5 Select web environments that will meet creative,
production and technical requirements


Element 3 Draft design specifications

Performance Criteria:

3.1 Design the architecture of web environments to show
interrelationship between environment components
3.2 Identify each web environment and specify its individual
interactive features, functionality and navigation and its
relationship to design as a whole
3.3 Identify content components and specify how these will be
logically structured and integrated into and/or generated
by web environments
3.4 Specify levels of access permissions to web environments
as required
3.5 Specify media assets as required
3.6 Specify user interfaces of web environments
3.7 Specify production requirements , including appropriate
testing strategies
3.8 Write draft design specifications to include all relevant
advice to design and development teams
3.9 Discuss draft design specifications with client to ensure
designs are consistent with project briefs


Element 4 Review design specifications

Performance Criteria:

4.1 Review designs against required project outcomes, as
well as client and audience needs
4.2 Review designs to ensure they meet creative and
technical requirements
4.3 Adjust designs as necessary after discussions with
relevant personnel
4.4 Clarify legislative or ownership issues to comply with
production and organisational requirements
4.5 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 ContentAssessmentsCUFDIG502A
1Course outline. Intro to responsive design.
Assignments briefing - Web trends css and HTML5 & CSS3 Frameworks for responsive design. Screen Sizes.
Search for inspiration for one page portfolio website. Search for examples of successful responsive frameworks or templates
  1, 2
2An overview of responsive web design tools & limitations of responsive websites
Firefox, firebug. Dreamweaver, HTML & CSS Styles basics. Sign into rams server.
Begin to Research – sketch layout ideas for your personal portfolio - look at bootstrap framework and site examples.
Formative 1 - Basic Skills Assessment – Browser code analysis Firefox & firebug. In class 1, 2
3Using Dreamweaver, bootstrap - HTML & CSS Styles basics. Style library for bootstrap & ideas for 1 page folio. BG tutorial - css colours  1, 2
4Background Images. Adaptive images. Bootstrap. Bootstrap & frameworks for designers. Install Bootstrap. Web fonts  1, 2
5Formative 2 - Browser based changing of code – CSS over-rides (HTML 5 + CSS3) – BootstrapFormative 2 - Basic Skills Assessment – Install bootstrap change page in Firefox & firebug. In class. 1, 2
6Web fonts & – css design – illustrator template for responsive layout. Tutorial in Lynda

Typography on the web
Bring 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 examples

  1, 2, 3
7Summative 1 - wk 7 - Design Doc + Wireframe Personal Folio Website x 3 Presentations – feedback session
Present photoshop or illustrator mockups to class to obtain feedback - 5 second design impact group work - is design effective?
Summative 1 – design portfolio responsive layout in photoshop or illustrator.1, 2, 3, 4 
8 Menu tutorial - CSS & basic jquery page scrolling Bootstrap 1, 2, 3
9Accessibility & media – HTML5 video and flash - Intro to Summative 2. Begin website coding 2, 3
10Metadata, SEO Bootstrap configuration & upload
– looking at CMS
 3, 4
11Gallery tutorial bootstrap
studio time
 2, 3
12Slider tutorial bootstrap
Studio time
 2, 3
13Studio class – social networking integration 2, 3
14Studio class – beta test website & Upload to server 1, 2, 3, 4
15Summative 2 - Launch Personal Folio Website
Cross browser/device testing and issues. Submit developed website & Upload to server
Summative 2 – coded responsive website portfolio in html5 & CSS 3 using bootstrap1, 2, 3, 4
16Peer test and web page critique, troubleshooting & debugging.
Submit developed website & Upload to server
 2, 3

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

Assessment tasks in this course are either formative or summative. Formative tasks provide the basis for ongoing feedback and can be considered as essential building blocks for the more substantial summative assessment tasks.
To demonstrate competency in this course, you will need to complete each one of the following pieces of assessment to a satisfactory standard. You will receive feedback on all assessments and a grade for the summative assessments.


Formative 1 - Basic Skills Assessment – Browser code analysis Firefox & firebug. In class. Due week 2.

Formative 2 - Basic Skills Assessment – Install bootstrap change page in Firefox & firebug. In class. Due in week 5.

Summative 1 – design portfolio responsive layout in photoshop or illustrator. Due week 7.

Summative 2 – coded responsive website portfolio in html5 & CSS 3 using bootstrap. Due week 15.

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

The major learning experience involves studio based exercises, demonstration and production. It is strongly advised that students 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. This signed sheet acknowledges that you are aware of the plagiarism implications.

You will receive spoken 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 feedback at RMIT;ID=9pp3ic9obks7

Student Progress
Monitoring academic progress is an important enabling and proactive strategy to assist you to achieve your learning potential. Student progress policy;ID=vj2g89cve4uj1

Special consideration Policy (Late Submission)
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. Special consideration, appeals and discipline;ID=qkssnx1c5r0y

Academic Integrity and Plagiarism:

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;ID=kw02ylsd8z3n

Work Placement:
It is a requirement of this program that all students participate in authentic work related tasks. These may be either simulated or in a real work environment. On occasion, we are approached by industry and given opportunities for students to apply for short term placements. When these placement opportunities arise, students are required to negotiate the specific details with the relevant program coordinator or teacher. All industry placements require students, RMIT staff and host organisations to sign a written agreement prior to the commencement of the placement.

Course Overview: Access Course Overview