SRJC Course Outlines

11/20/2018 6:01:07 PMGD 72 Course Outline as of Fall 2015

Changed Course
CATALOG INFORMATION

Discipline and Nbr:  GD 72Title:  PRINCIPLES SCREEN DESIGN  
Full Title:  Principles of Screen Design
Last Reviewed:1/26/2015

UnitsCourse Hours per Week Nbr of WeeksCourse Hours Total
Maximum3.00Lecture Scheduled3.0017.5 max.Lecture Scheduled52.50
Minimum3.00Lab Scheduled08 min.Lab Scheduled0
 Contact DHR0 Contact DHR0
 Contact Total3.00 Contact Total52.50
 
 Non-contact DHR0 Non-contact DHR Total0

 Total Out of Class Hours:  0Total Student Learning Hours: 0 

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:
Untitled document
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: Untitled document
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:CSU;
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:TransferableEffective:Fall 2014Inactive:
 
UC Transfer:Effective:Inactive:
 
C-ID:

Certificate/Major Applicable: Certificate Applicable Course



COURSE CONTENT

Student Learning Outcomes:
Untitled document
Students will 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: Untitled document
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
Untitled document
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:
Untitled document
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:
Untitled document
The Principles of Beautiful Web Design (3rd). Beaird, Jason. SitePoint: 2014

Print PDF