Sunday, July 14, 2013

VVWEB302A - Build simple web


 
VVWEB302A - Build simple web

1.     COURSE DETAILS
National Course Code
CUV40311
ASCOL Course Code

National  Course Title
Certificate IV Design
National Unit
Code
VVWEB302A
ASCOL Unit Code

National  Unit Title
Build simple web

2.     GROUP DETAILS
Group Name
CERT IV
Group Title

Day
Mondays
Room

Unit Start Date
15/7/13
Start Time

Unit End Date
29/10/13
Finish Time


3.     CONTACT DETAILS

Name
Room
Phone
Email
Teacher
Kai Cheng


kcheng@swin.edu.au
Senior Educator



@swin.edu.au
Administration



@swin.edu.au

4.     DELIVERY OVERVIEW
Class Time
External Activities
Student Project


Nominal Hours





50


5.     UNIT DETAILS
Unit Type
Core
Elective
X
Result
Graded
X
Ungraded
Pre/Co Requisites
Not applicable.
Description
This unit describes the performance outcomes, skills and knowledge required to use typography techniques in design work. It includes a general knowledge of typography and its application to different design briefs.
Elements
1
Identify authoring requirements
2
Create and save files
3
Add content to web pages
4
Create simple navigation
5
Test website





6.     LEARNING RESOURCES
Blackboard 9.1 - iLearn
https://ilearn.swin.edu.au/webapps/login/
(additional learning materials, resources, assessments, quizzes etc can be access via the link)
Books

Material

Other


7.     ASSESSMENT DETAILS
Assessment Task
Mark*
Graded units only
Due Date
Research and analyse on 5 websites with different design style
40
26 Aug 2013
Website design mock-up with chosen topic
60
14 Oct 2013







Total
100





Refer to student handbook for explanation of result codes.

Decision Making Rules
Decision making rules must be provided for the unit eg: every task must be completed satisfactorily for competence to be achieved.

* For graded units, competence must be demonstrated before a mark will be given.

8.     SCHEDULE
Date
Week
Topic/activity/assessment

1
Week 1.

1.1 Select preferred web authoring tool according to client requirements
1.2 Set preferences for the web authoring tool, including site file transfer protocol client

Intro to web design tools: Photoshop / Illustrator / Indesign and Dreamweaver (WYSWYG)

Protocol: HTTP, HTTPs, FTP

HTML Basics:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Ref: 
http://www.w3schools.com/
Activity: Google Map integration

Web design - Components

Design Inspiration:

52 Beautiful Blue Layouts in Web Design

http://abduzeedo.com/52-beautiful-blue-layouts-web-design

2
Week 2.
2.1 Create files and save in correct location or directory
2.2 Navigate the web authoring tool environment or workspace
2.3 Access and use a range of features in the web authoring tool

HTML Basics:

HTML Headings
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<hr>
<br>
HTML Links
<a href="http://www.w3schools.com">This is a link</a>

Web design - Components

 

Design Inspiration:

10 Rock Solid Website Layout Examples

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

 

Tutorials:

How To Create a Clean and Colorful Web Layout – Photoshop Tutorial

http://www.tutorial9.net/tutorials/photoshop-tutorials/create-a-clean-and-colorful-web-layout-in-photoshop/

3

week 3.
2.4 Maintain suitable directory structure for the site
2.5 Save in appropriate directory structure
2.6 Upload files to appropriate folder on the server

HTML Basics:
HTML Images
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Intro to Dreamweaver CS6

Design Inspiration:

8 Universal Web Design Principles You Should Know

http://conversionxl.com/8-universal-web-design-principles-you-should-to-know

 

Tutorials:

Use Dreamweaver to create simple website

·      Project setup

25 Excellent Photoshop Web Design Layout Tutorials

http://sixrevisions.com/photoshop/25-web-design-layout-tutorials/

 

Activity:

Website design research (1)


Ref : Web Design Principles Checklist

http://mason.gmu.edu/~montecin/webdesign.htm

4
week 4.
3.1 Insert and format text content according to client
requirements
3.2 Insert images, data tables and simple forms

Design Inspiration:

21 Clean Web Design Layouts

http://webdesignledger.com/inspiration/21-clean-web-design-layouts

 

Tutorials:

Use Dreamweaver to insert and format text content

Use Dreamweaver to insert images and other components


Activity:

Website design research (2)

5
wee 5.
3.3 Access markup language and make basic modifications to code
4.1 Create a site map to plan navigation

Design Inspiration:

34 Flat Website Layouts for Design Inspiration

http://designm.ag/inspiration/34-flat-layouts-design-inspiration/

 

Navigation design - part 1

http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/

http://nowtheme.com/2013/06/55-examples-of-unusual-and-creative-navigation- http://www.1stwebdesigner.com/inspiration/creative-website-unusual-navigation/

 

Activity:

Website design research (3)

6
week 6.
4.2 Create links between pages to reflect content structure using both text and images

 

Navigation design - part 2

http://www.webdesigndev.com/inspiration/21-beautiful-and-creative-navigation-menus

http://vandelaydesign.com/blog/galleries/creative-navigation-menus/

http://www.wix.com/blog/2013/05/creative-website-navigation/

Design Inspiration:

40 Creative Design Layouts: Getting Out Of The Box

http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/

Smashingmagazine

http://www.smashingmagazine.com/

7
week.7

5.1 Test elements of website content across a number of different browsers and browser versions to ensure consistency of presentation and performance

Navigation design - part 3

http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/

http://www.creativebloq.com/web-design/website-navigation-4132549

 

Design Inspiration:

http://webdesignledger.com/category/inspiration


Activity

Use InDesign CS6 to develop webpage (1)

8
week 8
5.2 Test that website meets client requirements

Design Inspiration:

http://psdcollector.blogspot.com.au/2010/02/350-stunning-and-creative-navigation.html

 

Activity

Use InDesign CS6 to develop webpage (2)

9
week 9

Intro to responsive web design

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

 

Design Inspiration:

http://mashable.com/2012/12/11/responsive-web-design/

 

Activity:

Use InDesign CS6 to develop webpage (3)

10
week 10
Web design based on Flash (1) - http://www.thefwa.com

Design Inspiration:

http://teamtreehouse.com/

 

Activity:

Use InDesign CS6 to develop webpage (4)

11
week 11
Web design based on Flash (2) - http://www.thefwa.com

 

Activity:

Use InDesign CS6 to develop webpage (5)

12
week 12

Web design based on Augmented Reality Technology
- McLaren P1
- Cut the rope
- Swinburne Museum

Design Inspiration:

- McLaren P1
- Cut the rope
- Swinburne Museum

Activity:

Use InDesign CS6 to develop webpage (6)

13

Activities

Review, test and refine web design proposal (1)

14

Activities

Review, test and refine web design proposal (2)

15

Course Review and feedback


Activities

Design Proposal submission

9.     EMPLOYABILITY SKILLS





Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)