9/7/2024 7:04:16 AM	GD 72 Course Outline as of Fall 2020	Inactive Course
CATALOG INFORMATION
Discipline and Nbr:  GD 72	Title:  PRINCIPLES SCREEN DESIGN
Full Title:  Principles of Screen Design
Last Reviewed:1/26/2015

Units		Course Hours per Week			Nbr of Weeks	Course Hours Total
Maximum	3.00	Lecture Scheduled	3.00		17.5 max.	Lecture Scheduled	52.50
Minimum	3.00	Lab Scheduled	0		8 min.	Lab Scheduled	0
		Contact DHR	0			Contact DHR	0
		Contact Total	3.00			Contact Total	52.50
		Non-contact DHR	0			Non-contact DHR Total	0

Total Out of Class Hours:  105.00

Total Student Learning Hours: 157.50

Title 5 Category:  AA Degree Applicable
Grading:  Grade or P/NP
Repeatability:  00 - Two Repeats if Grade was D, F, NC, or NP
Also Listed As: 
Formerly: 

Catalog Description:

The course teaches students how to design effective screen layouts for multiple display sizes by applying established graphic design principles and techniques. Students will explore website planning, development and design from a graphic design perspective. Topics include: design principles, color theory and application, screen and motion typography, flexible grid layouts and responsive design, techniques for incorporating imagery, navigation and interface design, and accessibility considerations.

Prerequisites/Corequisites:
Course Completion of CS 70.11A

Recommended Preparation:

Limits on Enrollment:

Schedule of Classes Information
Description:

The course teaches students how to design effective screen layouts for multiple display sizes by applying established graphic design principles and techniques. Students will explore website planning, development and design from a graphic design perspective. Topics include: design principles, color theory and application, screen and motion typography, flexible grid layouts and responsive design, techniques for incorporating imagery, navigation and interface design, and accessibility considerations.

(Grade or P/NP)
Prerequisites:Course Completion of CS 70.11A
Recommended:
Limits on Enrollment:
Transfer Credit:
Repeatability:00 - Two Repeats if Grade was D, F, NC, or NP

ARTICULATION, MAJOR, and CERTIFICATION INFORMATION

Associate Degree:		Effective:		Inactive:
Area:
CSU GE:	Transfer Area			Effective:	Inactive:
IGETC:	Transfer Area			Effective:	Inactive:
CSU Transfer:		Effective:		Inactive:
UC Transfer:		Effective:		Inactive:
C-ID:

Certificate/Major Applicable: Certificate Applicable Course

COURSE CONTENT

Student Learning Outcomes:
At the conclusion of this course, the student should be able to:

1.  Demonstrate how basic guidelines for typography, color imagery, layout and design can be applied to create attractive and functional web designs.

2.  Determine the best solutions for planning, designing, and building responsive web layouts.

3.  Create effective user-centered designs that demonstrate an understanding of interface development and accessibility needs.

 

Objectives:

Upon successful completion of this course the student will be able to:

1.   Describe key steps in brainstorming and planning web designs.

2.   Explain web technology considerations in designing websites including: devices, screen sizes, responsive layouts,  

      and browsers.

3.   Describe the pros and cons of various web development tools including Bootstrap, Dreamweaver, free website tools, and CMS's such as Wordpress.

4.   Analyze various types of websites and their design/interface needs.

5.   Apply the guidelines for usability and interface to create user-centered web layouts.

6.   Demonstrate effective use of graphic design principles (including contrast, alignment, repetition, proximity, negative space, focal point etc.) in web designs.

7.   Use design and fine art techniques including shape, line, value, and texture.

8.   Use grid systems to organize onscreen content.

9.   Apply the basic rules of typography (readability and legibility) and select appropriate fonts for a design.

10. Apply the rules of color theory to color selection and developing a palette.

11. Include creative approaches to the use of photos and graphics in web sites.

12. Describe accessibility issues in web design.

Topics and Scope

1. Overview of web technology and environment: devices, access, browsers, and apps

2. Overview of web development tools: Bootstrap, Dreamweaver, free web development, tools and CMS (Content Management System), including Joomla, Drupal, and Wordpress

3. Introduction to various types of sites and their needs (e-commerce, news, entertainment, informational etc.)

4. User- and device- centered design: introduction to usability and interface design including responsive design, methods of interface (mouse click vs. touch screen, swipe), display sizes, and site architecture

5. The design process:

       a.  Planning steps (creative briefs, content assessment)

      b.  Client interaction: client interviews, concept communication (mood board and site design samplers)

       c.  Layout process: sketching and wireframing (techniques and tools), idea presentation (mockups)

6. Introduction to basic design principles:

      a. Shape, line, value

       b. Contrast, alignment, repetition and proximity

      c. Focal point, negative space, hierarchy, balance, simplicity, consistency, unity

      d. Texture, rhythm, gestalt

7. Layout: using grids to develop a design

8. Typography: basic principles (readability and legibility), selecting and mixing, web fonts (free fonts)

9.  Design principles for type in motion (animated sites, digital video etc.)

10. Color: basic color theory, creating a color palette, picking the right colors, color palette generators (Kuler)

11. Imagery (photos and graphics): consistency, creative treatment, finding (free), image rights (copyright), cropping, resolution

12. Site graphics: directional graphics, separators (lines, ornaments), sidebars and colored panels

13. Forms: how to design an attractive form

14. Accessibility: regulations, color

15. Creative and innovative web design overview

Assignments:

1. 8-10 weekly assignments such as website critique and analysis and development of website graphics

2. Projects:

   a. Develop a creative brief for a project and a supporting mood/sample design board for client communication

   b. Redesign an assigned webpage or CMS theme to meet a client's needs in Photoshop by applying design principles of contrast, alignment, proximity and repetition

   c. Find a web site layout based on a grid system and research Bootstrap or Wordpress templates to locate one that might duplicate the layout

   d. Design a 3-page website layout in Photoshop that demonstrates design principles, attractive graphics and imagery, clear navigation, readable typography and consideration for accessibility

3. 8-10 quizzes

4. Read a minimum of 25 pages per week from textbook

5. Participation in online discussion forums

Methods of Evaluation/Basis of Grade.

Writing: Assessment tools that demonstrate writing skill and/or require students to select, organize and explain ideas in writing.		Writing 0 - 0%
None
This is a degree applicable course but assessment tools based on writing are not included because problem solving assessments are more appropriate for this course.
Problem solving: Assessment tools, other than exams, that demonstrate competence in computational or non-computational problem solving skills.		Problem Solving 25 - 50%
Weekly assignments such as website critique and analysis and development of website graphics.
Skill Demonstrations: All skill-based and physical demonstrations used for assessment purposes including skill performance exams.		Skill Demonstrations 25 - 50%
Projects
Exams: All forms of formal testing, other than skill performance exams.		Exams 10 - 20%
8-10 quizzes
Other: Includes any assessment tools that do not logically fit into the above categories.		Other Category 5 - 10%
Participate in class online discussion forums

Representative Textbooks and Materials:

The Principles of Beautiful Web Design (3rd). Beaird, Jason. SitePoint: 2014

Print PDF