| 4/25/2024 1:10:02 AM |
| New Course (First Version) |
| CATALOG INFORMATION
|
| Discipline and Nbr:
CS 50.21 | Title:
WEB DESIGN 1 |
|
| Full Title:
Web Design 1 |
| Last Reviewed:3/10/2014 |
| 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 | 6 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:
Untitled document
Create engaging, user-friendly websites to market goods, services, and people. This web design course addresses image treatment and inter-activity, user interface, responsive design, wire-framing, visual mock-ups and logo design. Bootstrap, Wordpress and hand coding in HTML, CSS and JavaScript tools are used to produce dynamic sites for an e-folio.
Prerequisites/Corequisites:
Course Completion of CS 50B
Recommended Preparation:
Eligibility for ENGL 1A or equivalent and Course Completion of CS 70.11A and Concurrent Enrollment in GD 72
Limits on Enrollment:
Schedule of Classes Information
Description:
Untitled document
Create engaging, user-friendly websites to market goods, services, and people. This web design course addresses image treatment and inter-activity, user interface, responsive design, wire-framing, visual mock-ups and logo design. Bootstrap, Wordpress and hand coding in HTML, CSS and JavaScript tools are used to produce dynamic sites for an e-folio.
(Grade or P/NP)
Prerequisites:Course Completion of CS 50B
Recommended:Eligibility for ENGL 1A or equivalent and Course Completion of CS 70.11A and Concurrent Enrollment in GD 72
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: | Transferable | Effective: | Fall 2014 | Inactive: | Fall 2017 |
| |
| UC Transfer: | | Effective: | | Inactive: | |
| |
| C-ID: |
Certificate/Major Applicable:
Certificate Applicable Course
COURSE CONTENT
Outcomes and Objectives:
At the conclusion of this course, the student should be able to:
Untitled document
Upon completion of the course, the student will be able to:
1. Download and utilize the files required to work within the Bootstrap and WordPress environment.
2. Develop a file / folder structure on your local computer and on web servers that reflects the Bootstap and Wordpress environment.
3. Design engaging websites by incorporating user friendly navigation, responsive design, interactive elements, a consistent visual layout, and effective branding.
4. Analyze Bootstrap and WordPress CSS code and modify it to meet client's design needs.
5. Compare and contrast the strengths of the JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), and PNG (Portable Network Graphics) formats.
6. Choose the appropriate graphic file type for specific applications.
7. Work with a color palette and images provided by a "mock" client to produce a website.
8. Understand the web design cycle.
9. Create logos and modify the design as the logo size decreases.
10. Work within a design team to offer and receive feedback regarding your design, software, and technical decisions and challenges.
11. Make use of web resources for current information on web design and web graphics.
Topics and Scope
Untitled document
1. Software requirements for web design
a. Web browsers
b. Chrome Property Inspector
c. Graphics programs
d. FTP (File Transfer Protocol) software - "Fugu" or "SSH Client" (Secure SHell)
e. HTML editor (Text Wrangler, Notepad ++, DreamWeaver)
2. Creating a Bootstrap development environment
a. Download files
b. Class file / folder structure
c. Upload files to student server
3. Graphics formats and compression
a. Images as JPEG vs PNG vs GIF
b. Clip art as JPEG vs PNG vs GIF
c. Transparency
4. Bootstrap / hand coded - image treatment
a. Image / icon samplers
b. Carousels / slideshows
c. Thumbnail galleries
d. Hover effects
e. Product display
f. Image treatment samples
5. Bootstrap navigation
a. Nav bar, buttons, tabs and pills
b. Breadcrumbs / Pagination
c. Using image and color transparency in navigation
d. Navigation samples
6. Visual mock-up to webpage
a. Analyze structure of visual mock-up
b. Bootstrap classes / hand coding to create a shell
c. Adding carousel, images, and navigation
d. Modifying design to reflect student's design aesthetic
7. Client needs analysis
a. Client "favorite" sites
b. Client assets
c. Client content
8. Building a wire-frame
a. Exploring wire-frame software
b. Developing wireframes
c. Saving and exporting wire-frames
d. Working in a design team
e. Accepting and offering feedback on wireframes
9. Converting the wire-frame to a visual mock up
a. Graphics software review and overview
b. Developing a color scheme
c. Using images
d. Layout principles
e. Navigation
f. Branding
g. Site consistency
h. Accepting and offering feedback on visual mock up
10. Converting a visual mock up to a functional website
a. Using bootstrap and hand coding to create the site shell
b. Adding color
c. Using images
d. Develop navigation
e. Incorporating interactive elements (carousel, galleries etc)
f. Site consistency
g. Accepting and offering feedback on finished web site.
11. Creating a WordPress development environment
a. Log in / using WordPress Dashboard / FTP to WordPress
b. Managing themes
c. Dowloading and installing a new theme
12. Developing a WordPress Site
a. Making pages
b. Controlling navigation
c. Adding images and video
d. Displaying a Microsoft Word file
e. Adding images and video
f. Incorporating a widget or plug-in
13. Creating a child theme
a. Upload unique theme
b. Create child theme CSS and snapshot
c. Upload files to WordPress
d. Install child theme
e. Modify theme CSS
14. Developing Logos
a. Logo elements
b. Principles of logo design
c. Logo techniques
d. Modifying and simplifying a logo for display at a small size
Assignments:
Untitled document
Read 30-50 pages per week.
4-8 quizzes
Website design assignments:
1. Upload bootstrap files / folders onto the Web server.
2. Save a photo and clip art file at various levels of the PNG and JPEG format.
3. Create a transparent PNG.
4. Create image samplers that display carousels, thumbnail galleries, image hover effects, product displays, and other interactive image treatments selected by students. Use bootstrap classes and hand coding to produce samples.
5. Create navigation samplers that utilize bootstrap navigation classes, incorporate transparency and multiple backgrounds, and are modeled after web navigation selected by students. Use bootstrap classes and hand coding to produce samples.
6. Given a visual mock-up develop HTML, CSS, and Javascript to translate an image into a web page. Make a copy of the site and redesign the page to reflect your design aesthetic. Utilize bootstrap and hand coding to produce web pages.
7. Given client "favorite" sites, develop wire-frames that reflect those sites.
8. Translate a wire-frame into a visual mock-up.
9. Using bootstrap and hand coding build a website from the visual mock-up.
10. Build a WordPress site.
11. Build a WordPress Child Theme.
12. Create logos.
13. Evaluate classmate's work regarding color, line, layout, navigation and graphics.
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
55 - 70% |
| Website design assignments | |
| Skill Demonstrations: All skill-based and physical demonstrations used for assessment purposes including skill performance exams. | Skill Demonstrations
0 - 0% |
| None | |
| Exams: All forms of formal testing, other than skill performance exams. | Exams
20 - 35% |
| Quizzes | |
| Other: Includes any assessment tools that do not logically fit into the above categories. | Other Category
0 - 10% |
| Attendance and participation | |
Representative Textbooks and Materials:
Untitled document
The Principles of Beautiful Web Design (2nd). Beaird, Jason. SiteFront: 2010
Above the Fold: Understanding the Principles of Successful Web Site Design. Miller, Brian. HOW: 2011
Print PDF
