COMD 2450 – E212 WEB DESIGN I
| Day & Time: | Wednesdays, 6pm—9:20pm |
| Instructor: | Jerron Smith |
| Email: | thepixelsmith@gmail.com |
| Website: | https://openlab.citytech.cuny.edu/smithcomd2450sp2018/ |
COURSE DESCRIPTION
A required course for all students in the Communication Design major, . 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
| 1. 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. | 2. Is able to code rudimentary web pages: links, styles, images & meta tags |
| 3. Has created and purchased relevant URL and is able to ftp to it using Dreamweaver | 4. Understands image optimization for the web |
| 5. Understands and can compose CSS (style sheets) | 6. Has successfully created a gallery using Lightbox or an equivalent technology |
| 7. Has created and published a working contact form | 8. Has published a fully operational portfolio site. |
ATTENDANCE (COLLEGE) AND LATENESS (DEPARTMENT) POLICIES:
Attendance is taken and is important to success in this class. Both absences and arrival more than 15 minutes after the start of class will be marked. If excessive, the instructor will alert the student that he or she may be in danger of not meeting the course objectives and participation expectations, which could lead to a lower grade.
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: www.w3schools.com (Web Technology Tutorials) | 3: www.alistapart.com ( for people who make websites) |
| 2: 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 sections:
a: Home/Start Page
b: About Me/Bio/Resume
c: Portfolio
d: Contact
More likely than not, the About Me and Portfolio sections will be split into multiple pages.
5: Final Exam: Practical Exam — In class coding assignment
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 | 20 pts. |
| Project 2: Final Project — Personal Website | 35 pts. |
| Midterm Exam: Written | 15 pts. |
| Final Exam: Practicum — In class coding | 15 pts. |
| Attendance & Participation | 10 pts. |
| Total | 105 pts |
GRADING FORMULA
| Grade | 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 |
| 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 |
SAMPLE RUBRIC
| Criteria | Available Pts |
| Technical Execution | 5 |
| Coherence | Information Architecture | 10 |
| Originally | Creativity | 5 |
| Quality of Assets Used | 5 |
| Delivery | 5 |
| Total: | 30 |
REQUIRED MATERIALS
- A domain name (ex. google.com, amazon.com, thepixelsmith.com)
- A web hosting provider
- FLASH DRIVE: or other portable storage device. This will be used to transfer your work from home and class.
- SKETCHBOOK/NOTEBOOK: For taking notes during technical demonstrations, brainstorming sessions, and for sketching ideas for projects. YOU WILL HAVE TO PUT PENCIL TO PAPER AND DRAW. I highly recommend you use a squared sketchbook.
- INDEX CARDS & STICKY NOTES, ASSORTED PENS, PENCILS, MARKERS: They have a million uses.
PROJECT BREAKDOWN
There will be a single main project completed during this semester. This project will be divided into multiple deliverable parts. These include: sketches, wireframes, mock-ups, and a final coded site.
Project Description:
The student will create a portfolio website based on a template provided to them. In addition to the final live portfolio site, students will be required to present preliminary material used in the design and development of the portfolio site
TOPICAL OUTLINE
| 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 |
||
| WEEK 2
Understanding Web Hosting | Understanding HTML & CSS | Create a basic web page | Understanding Block Level vs Inline Elements |
||
| WEEK 3
Stages of the Web Design Workflow | Mapping & Wireframing | Information Architecture | Creating a Site Mockup | Understanding Pages and Navigation | Understand Images & Color on the Web | Understanding Typography on the Web Site development: Research competitor sites, products, services |
||
| WEEK 4
Understanding & Using CSS | The CSS Box Model | Inheritance & Cascading Site development: Develop an understanding of your users: Who will be looking at your site? |
||
| WEEK 5
Working with CSS Positioning |Using Flexbox | Working with Page Based Navigation | Button vs List based Navigation Site development: Develop goals for your site: What do you want you site to do for you? |
||
| WEEK 6
Working with CSS Positioning | Float & Clear | Working with Page Based Navigation | Button vs List based Navigation Site development: Visual Development — Create a Mood Board and Style Tile Homework: Two-Week Assignment-Single Page Site: Resume |
||
| WEEK 7
MIDTERM–Written Exam |
||
| WEEK 8
Navigation Building Strategies Site development: Mockup site pages Homework: Two-Week Assignment-Single Page Site: Resume |
||
| WEEK 9
Introduction to Interactive Web Languages | Javascript & JQuery | Create a Portfolio Gallery | What is JQuery? | Using Widgets |
||
| WEEK 10
Creating Forms | Using a Contact Forms generator Site development: Site development: Add a contact form to your site |
||
| 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 |
