Training Plan

Course CREATIVE WEB DESIGN

Unit of Competency Develop Designs for User Interface
Module Title Developing Design for User Interface
Modality: Check which modality will be applied. Multi-modal is allowed

(/)Full-online () Blended online ( ) Distance Learning

Learning Outcomes Contents Learning Resources
Create vector  Image formats LMS via Moodle Platform
graphics using  Correct application selection Student Access Resource
graphics  Manipulation of objects
applications.  Color modes Uploaded Pre-recorded
 Attributes of appearance Lecture Video
 Effects
 Filters Moodle Topic Discussion via
 Text and formatting Forum
 Interpreting a brief.
E-book
- Adobe Photoshop
Digital Imaging

Video Materials
- Photoshop Applying
Design Principles

Prepare printer  Image formats LMS via Moodle Platform

Work Environment  Correct application selection Student Access Resource
 Manipulation of objects
 Color modes Uploaded Pre-recorded
 Attributes of appearance Lecture Video
 Effects
 Filters Moodle Topic Discussion via
 Text and formatting Forum
 Interpreting a brief.
Skills on: E-book
 Artistic and creative skills - Adobe Photoshop
 Communication Skills Digital Imaging
 Interpersonal skills
 Listening skills Video Materials
 Computer application skills - Photoshop Applying
 Tasking management skills to Design Principles
 provide quality service in less time - Multimedia
Designers Vs Digital
Designers

Employ Various  Image formats LMS via Moodle Platform

Graphics  Correct application selection Student Access Resource
Application  Manipulation of objects
Techniques  Color modes Uploaded Pre-recorded
Producing  Attributes of appearance Lecture Video
Artworks or  Effects
Objects.
 Filters Moodle Topic Discussion via
 Text and formatting Forum
 Interpreting a brief.
Skills on: E-book
 Artistic and creative skills - Adobe Photoshop
 Communication Skills Digital Imaging
 Interpersonal skills
 Listening skills Video Materials
 Computer application skills - Photoshop Applying
 Tasking management skills to Design Principles
provide quality service in less time
- How to make digital
art using Photoshop

- How to Enhance
Artwork with
Photoshop CC

Produce printer  Image formats LMS via Moodle Platform

ready graphics  Correct application selection Student Access Resource
 Manipulation of objects
 Color modes Uploaded Pre-recorded
 Attributes of appearance Lecture Video
 Effects
 Filters Moodle Topic Discussion via
 Text and formatting Forum
 Interpreting a brief.
Skills on: E-book
 Artistic and creative skills - Adobe Photoshop
 Communication Skills Digital Imaging
 Interpersonal skills
 Listening skills Video Materials
 Computer application skills - Photoshop Applying
 Tasking management skills to Design Principles
provide quality service in less time
Upload of  Image formats LMS via Moodle Platform
Photoshop  Correct application selection Student Access Resource
graphics to  Manipulation of objects
prototype website  Color modes Uploaded Pre-recorded
 Attributes of appearance Lecture Video
 Effects
 Filters Moodle Topic Discussion via
 Text and formatting Forum
 Interpreting a brief.
Skills on : E-book
 Artistic and creative skills - Adobe Photoshop
 Communication Skills Digital Imaging
 Interpersonal skills
 Listening skills - Adobe Photoshop
 Computer application skills Reference(Generate
 Tasking management skills to Web Assets in
provide quality service in less time Photoshop CC)

Video Materials
- Photoshop Applying
Design Principles

- Web Graphic Slicing

e-learning Infrastructure Requirement Name of the Application

( ) LMS Moodle or Edmodo(optional)
or Others: Moodle Mobile Version
( ) application that provide access to the digital content and any
Shared resources anywhere anytime

( ) application that allows communication between trainers and Zoom, Google Meet,
peers synchronous and asynchronous Facebook Page Direct
Message

( ) application that allows administration of assessment of Zoom, Online Test , and

learning outcomes Interactive module for
Practical Test via LMS
Github Repository
 Training Plan
Course CREATIVE WEB DESIGN
Unit of Competency Develop Responsive Web Design
Module Title Develop Responsive Web Design
Modality: Check which modality will be applied. Multi-modal is allowed
(/)Full-online () Blended online ( ) Distance Learning
Learning Outcome Content
Familiarize students to Adobe  Learn the activity in
Dreamweaver environment. using the insert
command, common,
text and layout tabs.
 Learn activity in
customizing text and
images in a web page
 Create pages with the
use of HTML
scripts/commands in
the Dreamweaver
environment.
Add proper type of font,  Link all their web pages
Use of Cascading style sheets in a using Dreamweaver
page and linking documents in  Classify Internal,
Dreamweaver External links
 Make an anchor web
page based on their
project
 Explain reusable
templates and libraries
Learning Resources
LMS via Moodle Platform
Student Access Resource
Uploaded Pre-recorded
Lecture Video
Moodle Topic Discussion via
Forum
E-book
- Dreamweaver CS6:
Visual QuickStart
Guide
- Understand the
anatomy of website
Video Materials
- Dreamweaver CC -
Tutorial for
Beginners
LMS via Moodle Platform
Student Access Resource
Uploaded Pre-recorded
Lecture Video
Moodle Topic Discussion via
Forum
E-book
- Dreamweaver CS6:
Visual QuickStart
Guide
- CSS in Depth
Video Materials
- Dreamweaver CC -
 Tutorial for
Beginners

- CSS Tutorial for

Beginners Applying
Styles

Create pages with frames and  Deliver the concept LMS via Moodle Platform
framesets and Application of effects in behind frames, Student Access Resource
a page frameset and html files.
 Describe the steps in Uploaded Pre-recorded
making frames, its link Lecture Video
and its relations to its
target Moodle Topic Discussion via
 Explain behaviors in Forum
Dreamweaver, its
effect in the web E-book
 Create pages with - Dreamweaver CS6:
Frames and selected
Visual QuickStart
behavior effects in.
Guide

Video Materials
- Dreamweaver CC -
Tutorial for
Beginners

- HTML Frameset tag

and HTML Frame
tag

Create form objects in a  Present the different LMS via Moodle Platform
web page and Spry items. form tags and elements Student Access Resource
 Browse some sample
forms in existing Uploaded Pre-recorded
websites and critique Lecture Video
on it.
 Appreciate the Moodle Topic Discussion via
readymade icons for Forum
each form element
 Apply the spry and E-book
form elements in one’s - Dreamweaver CS6:
page
Visual QuickStart
 Create several pages
Guide
with some form
 elements Video Materials
 Learn a short overview - Dreamweaver CC -
of static and dynamic Tutorial for
web pages in relation Beginners
to form tags.
- How to Use Spry
Widgets

e-learning Infrastructure Requirement Name of the Application

( ) LMS Moodle or Edmodo(optional)
or Others: Moodle Mobile Version
( ) application that provide access to the digital content and any
Shared resources anywhere anytime

( ) application that allows communication between trainers and Zoom, Google Meet,
peers synchronous and asynchronous Facebook Page Direct
Message

( ) application that allows administration of assessment of Zoom, Online Test , and

learning outcomes Interactive module for
Practical Test via LMS
Github Repository

Training Plan
Course CREATIVE WEB DESIGN
Unit of Competency Produce over-all Designs for Animation
Module Title Producing over-all Designs for Web Animation
Modality: Check which modality will be applied. Multi-modal is allowed

(/)Full-online () Blended online ( ) Distance Learning

Learning Outcomes Contents Learning Resources
Relate traditional animation to 2D  Traditional LMS via Moodle Platform
digital animation animation in relation Student Access Resource
to 2D digital
animation Uploaded Pre-recorded
 Introduction to 2D Lecture Video
software application
 Interface Moodle Topic Discussion via
familiarization Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Adobe Flash
Tutorials For
Beginners
Use drawing tools.  Using the tool box LMS via Moodle Platform
 2D drawings and Student Access Resource
painting tools
Uploaded Pre-recorded
Lecture Video

Moodle Topic Discussion via

Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Adobe Flash
Tutorials For
Beginners

Work with symbols, timeline and  Constructing objects LMS via Moodle Platform
library. and converting to Student Access Resource
symbols
 Editing symbols to Uploaded Pre-recorded
create composite Lecture Video
symbols
 Using the timeline Moodle Topic Discussion via
 Organizing Forum
documents library
E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Adobe Flash
Tutorials For
Beginners
Construct objects.  Building a character LMS via Moodle Platform
 Tracing and building Student Access Resource
the Props
Uploaded Pre-recorded
Lecture Video

Moodle Topic Discussion via

Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Creating a simple
character design

Apply animation techniques and
finalized 2D animation Sequence.
 Frame by frame LMS via Moodle Platform
animation Student Access Resource
 Tweened animation
Uploaded Pre-recorded
Lecture Video

Moodle Topic Discussion via

Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Adobe Flash
Tutorials For
Beginners
Review and correct vector  Make sure that all LMS via Moodle Platform
objects. computer stations Student Access Resource
has a VEIKK
Graphics Drawing Uploaded Pre-recorded
Tablet Drawing Pad Lecture Video

Moodle Topic Discussion via

Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- A quick practice of
digital drawing
(Veikk S640)

Integrate sound animated objects
and backgrounds
 Modeling of objects LMS via Moodle Platform
 Components of Student Access Resource
objects
Uploaded Pre-recorded
Lecture Video

Moodle Topic Discussion via

Forum

E-book
- Adobe Flash
Professional CS5 on
Demand
-

Video Materials
- Learning Flash CS6:
Creating an
Animation

- Adobe Flash
Tutorials For
Beginners
e-learning Infrastructure Requirement Name of the Application
( ) LMS Moodle or Edmodo(optional)
or Others: Moodle Mobile Version
( ) application that provide access to the digital content and any
Shared resources anywhere anytime

( ) application that allows communication between trainers and Zoom, Google Meet,
peers synchronous and asynchronous Facebook Page Direct
Message

( ) application that allows administration of assessment of Zoom, Online Test , and

learning outcomes Interactive module for
Practical Test via LMS
Github Repository