COMD 2450 Web Design I
| Day & Time: | Saturdays, 12:30pm-3:00pm |
| Instructor: | Jerron Smith |
| Email: | thepixelsmith@gmail.com |
| Website: | https://openlab.citytech.cuny.edu/smithcomd3551sp2015 |
Course Description
A required course for all Advertising Design and Graphic Arts students. Topics include creative user interface design and best workflow practice. Students will design a website using an XHTML template, and will develop design, typography and web programming skills. Website Design using the HTML and CSS languages will be taught in this class.
Over the semester, you will:
- Design and build an effective personal portfolio web site
- Gain a solid foundation in current web markup languages (HTML & CSS)
- Explore industry standards in layout design and functionality
- Upload a fully operational site to a personal URL
Student Learning Outcomes:
A student passes this course when she/he:
- Displays working knowledge of HTML and CSS and how it functions. Also has learned how the internet generally operates and can use this knowledge to better strategize in designing.
- Is able to code rudimentary web pages: links, styles, images & meta tags
- Has created and purchased relevant URL and is able to ftp to it using Dreamweaver
- Understands image optimization for the web
- Understands and can compose CSS (style sheets)
- Has successfully created a gallery using Lightbox or an equivalent technology
- Has created and published a working contact form
- Has published a fully operational portfolio site.
Attendance (college) and Lateness (department) policies:
A class roster roll will be taken at the beginning of each class. Only two absences may be allowed. After two absences, a student may be withdrawn because of unsatisfactory attendance (code WU). Students arriving after the roll is taken will be marked “late.” Students may be notified at the earliest opportunity in class after they have been absent or late. After being absent two times or equivalent (2 lateness = 1 absence), a student may be asked to withdraw from the class (code W before the College drop deadline) or may be withdrawn from the class (code WU).
Academic Integrity Standards
Students and all others who work with information, ideas, texts, images, music, inventions, and other intellectual property owe their audience and sources accuracy and honesty in using, crediting, and citing sources. As a community of intellectual and professional workers, the College recognizes its responsibility for providing instruction in information literacy and academic integrity, offering models of good practice, and responding vigilantly and appropriately to infractions of academic integrity. Accordingly, academic dishonesty is prohibited in The City University of New York and at New York City College of Technology and is punishable by penalties, including failing grades, suspension, and expulsion.
Recommended Texts & Web Sites
1: HTML, XHTML, and CSS: Visual QuickStart Guide (6th Edition) by Elizabeth Castro
2: www.w3schools.com (Web Technology Tutorials)
3: www.webmonkey.com (Web Technology Blog)
4: www.w3c.org (World Wide Web Consortium)
Description of Assignments
1: Single Page Site: Resume Site
2: Website supporting materials
Before you can begin a website and as you work through the development process you will create the supporting materials that you will use during the site creation process. Creating and gathering site maps, wireframes, mockups, color schemes, mood boards, competitor samples are all necessary to the successful creation of a personal web site.
3: Midterm Exam: Written Exam
4: Final Portfolio site
Creation of a personal/portfolio web-site to include the following pages: Home/Start Page, About Me/Bio, Portfolio and Contact. There is another optional page: Resume.
5: Final Exam: Practical Exam
Grading formula
| Grade | Quality Points | Meaning of Grade |
| A (Excellent) | 4.0 | Represents exemplary work. Work consistently exceeds expectations of professional craft and quality. |
| B+ | 3.5 | |
| B (Good) | 3.0 | Work meets basic expectations of professional craft and quality. |
| C+ | 2.5 | |
| C (Satisfactory) | 2.0 | Work does not meet professional expectations of craft and quality. |
| D (Unsatisfactory) | 1.0 |
Grading Criteria
The final grade for this course will be determined by the grades each student earns on the following projects and assignments. The grading is done using a numerical point system with each gradable assignment worth a certain maximum number of points. The maximum numerical value that is possible exceeds 100, allowing a student to make up for a weak showing in one area with a stronger final project.
| Project/Assignment | Maximum Value |
| Project 1: Single Page Site-Resume | 10 pts. |
| Project 1: Website Supporting Materials | 10 pts. |
| Project 2: Final Project-Personal Website | 25 pts. |
| Midterm Exam: Written | 30 pts. |
| Final Exam: Practicum | 25 pts. |
| Attendance & Participation | 10 pts. |
| Total | 110 pts |
The numerical grades are then converted to alphabetical grades based on the following conversion chart:
| Range in % | Letter Grade | Range in % | Letter Grade |
| 95-100 | A | 72-77 | C |
| 90-94 | A- | 70-71 | C- |
| 88-89 | B+ | 68-69 | D+ |
| 82-87 | B | 62-67 | D |
| 80-81 | B- | 60-61 | D- |
| 78-79 | C+ | 0-59 | F |
Each Project is judged based on a rubric like the one below (this is just a sample):
| Criteria | Available Pts |
| Technical Execution | 5 |
| Coherence | Information Architecture | 10 |
| Originally | Creativity | 5 |
| Quality of Assets Used | 5 |
| Delivery | 5 |
| Total: | 30 |
Required:
1: A domain name (ex. google.com, amazon.com, thepixelsmith.com)
2: A web hosting provider
| WEEK 1
Welcome to the class, go over class policies | How does the internet work? | What is a URL? | What languages are used on the Web? | Designing for the Web (the good and bad) | Introduction to HTML & CSS | Research an available and relevant URL | Research web hosting providers |
||
| WEEK 2
Understanding Web Hosting | Understanding HTML & CSS | Create a basic web page | Adding Text, images and links | Understanding Block Level vs Inline Elements Site development: Research portfolio websites to assess current trends and standards: www.coolhomepages.com, www.bestwebgallery.com |
||
| WEEK 3
Stages of Web Design | Mapping & Wireframing | Information Architecture | Creating a Site Mockup | Understanding Pages and Navigation | Understand Images & Color on the Web Site development: Create wireframes of site | Start to organize projects for portfolio section. |
||
| WEEK 4
Understanding & Using CSS | The CSS Box Model | Inheritance & Cascading Site development: Mockup several color schemes for your site: www.colorschemedesigner.com |
||
| WEEK 5
Working with CSS Positioning | Float & Clear | Working with Page Based Navigation | Button vs List based Navigation Site development: Add placeholder pages to site |
||
| WEEK 6
Working with CSS Positioning | Float & Clear | Working with Page Based Navigation | Button vs List based Navigation Site development: Create/Update Site Navigation Homework: Two-Week Assignment-Single Page Site: Resume |
||
| WEEK 7
Navigation Building Techniques | CSS Rollovers & Sprites Site development: Add and fill in your gallery Continue applying styles to site from files Homework: Two-Week Assignment-Single Page Site: Resume |
||
| WEEK 8
MIDTERM–Written Exam |
||
| WEEK 9
Introduction to Interactive Web Languages | Javascript & JQuery | Create a Portfolio Gallery | What is JQuery? Site development: Add a contact form to your site |
||
| WEEK 10
Creating Forms | Using a Contact Forms generator Site development: Add and fill in your gallery | Refine Site Styling |
||
| WEEK 11
Rich Media on the Web | Animation | Video & Audio | Keywords, Descriptions & Alt Tags |
||
| WEEK 12
Lab Time: Testing Your Site WEB SITES DUE (85% – 90% complete) |
||
| WEEK 13
Group Critique–FINAL PRESENTATION |
||
| WEEK 14
FINAL EXAM |
