- ART130 Graphic Design I
- ART131 Digital Imaging
- ART137 Computer Illustration
- ART140 Graphic Design II
- or permission of Chairperson
Meets in Room G169 on:
Mondays 6:25pm – 9:15 pm
Wednesdays 6:25pm – 7:45pm
This course will investigate the application of interactive design, composition and narrative for the purpose of creating websites. Students will conceptualize and produce web pages using HTML, CSS, and popular web authoring software. Emphasis will be on the integration of various visual and narrative elements into a rich user experience. Average cost of supplies: $100. Laboratory fee applies.
Textbook and Materials
You must have these items for this course:
with a section devoted to this class only. Your notes must be presented when you seek assistance regarding any topics in this course.
External Hard Drive or Thumb Drive
16 Gb or greater
Two Dual-Pocket Folders
As indicated in the image below (other types will not be accepted):
A Sketch Pad with Dot Grid
Suggested: Rhodia N°18 Dot Pad, 8.3" x 11.7" (Sketches on blank paper or small grid paper will not be accepted). $10 at Michael’s Rhodia No18 8.3 x 11.7:
There is no specific textbook required.
Students are responsible for backing up their work on multiple devices – No Excuses.
Learning Outcomes and Objectives
This course will provide the student with knowledge of interactive web design. The course will reinforce and encourage the use of basic art and design principles. Students will increase their experience with web design projects. Throughout the course, the student will practice file management and cross-platform considerations.
Develop critical thinking skills pertaining to web design and digital media.
- Identify, define, and analyze the conceptual and aesthetic components of web design.
- Evaluate the context of web design considering history, culture, and society.
- Demonstrate an understanding of ethics, copyright law and definition of plagiarism.
- Be competent in 2D design, typography & grid structure.
- Identify and communicate meaningful techniques.
- Identify artistic elements and principles that shape their aesthetic responses to graphic design and digital media and be able to communicate that information using relevant vocabulary.
- Demonstrate understanding of how elements connect to disciplines.
- Understand how interpretive and aesthetic elements may be connected to, informed by, and/or distinct from other disciplines.
- Students will create expressive works.
- Create graphic design and digital media projects that demonstrate understanding of the basic principles of graphic design and digital media.
- Use of software tools and interface.
- Manipulate and effectively use the appropriate tools and interface involved in web design.
- Students will demonstrate understanding of the production pipeline. Resolution, vector, color modes, uploading to server.
- Murach’s HTML5 and CSS3
- Adobe Dreamweaver Classroom in a Book
- Dreamweaver Visual Quickstart Guide
- Universal Principles of Design by William Lidwell
- Geometry of Design by Kimberly Elam
- Grid Systems by Kimberly Elam
- Typographic Systems by Kimberly Elam
- Making and Breaking the Grid by Timothy Samara
- Principles of Form and Design by Wucius Wong
- The Elements of Color by Johannes Itten
- The Elements of Design by Poppy Evans & Mark Thomas
- Basics of Design: Typography and Layout by Lisa Graham
- Designing with Type by James Craig & William Bevington
- Color Basics by Stephen Pentak & Richard Roth
- Meggs’ History of Graphic Design by Philip B. Meggs and Alston W. Purvis
- Color Design Workbook by Noreen Morioka, Terry Stone & Sean Adams
- Thinking with Type by Ellen Lupton
(If you would like more information on a specific topic, ask for additional resources)
All students are required to have in their possession an NCC ID card with a current validation sticker while on campus. Your ID card must be presented upon request.
Students are expected to attend all class sessions. Plan on being on-time to every class. THREE absences (excused or unexcused) are allowed. Each absence after three will lower your final grade by one-half letter grade. Six absences or above will result in failure.
Two occurrences of lateness count as ONE absence. (A student is considered late if they come in after attendance is taken.) If a student arrives late, it is the STUDENT'S RESPONSIBILITY to make sure they have been marked present in order to receive credit for the class. Leaving class early or coming back late from a class break counts as one late mark.
Missing more than 25% of any class will count as a full absence (20 minutes of a 1:20 class or 42 minutes in a 2:50 class).
*** If you miss an exam or quiz you will have ONE WEEK from the date given to make it up. If you do not schedule the makeup within one week or miss the scheduled makeup date you will receive a grade of 0. Ten (10) points will be deducted unless a doctor’s note is provided.
Students are responsible for all lecture topics and materials, notes, and assignments for any class unattended. You must get any missed information from a fellow student or, if posted, online.
You can contact me with any questions once you have caught yourself up.
Practice & Notes
Dedication, Notes, Self-Critique, Revision, and Practice are all vital to your success in this course!
Students will need to spend a minimum of 6–9 hours/week outside of class to study, practice, complete projects and learn theory & techniques.
All students are required to maintain notes on class instruction.
A final full website, multiple presentations, and homework assignments are expected.
Assignments will only be accepted if they are handed in at the start of the class it is due (or before) and, for assignments that are required to be handed in, will not be accepted if they are not in a Dual-Pocket Folder as described in the Materials section above.
If you cannot attend the class a project is due, you must email the assignment to me prior to the start of that class for it to be accepted.
LATE PROJECTS ARE NOT ACCEPTED.
You will receive a 0 (zero) for any project not handed in on time. Projects are not to be worked on in class unless time has been designated for that purpose.
NOTHING WILL BE ACCEPTED AFTER THE LAST SCHEDULED CLASS.
(subject to change)
- The midterm exam is scheduled for Monday, October 22nd.
- The final exam is scheduled for Monday, December 3rd.
See availability outside Lab room GC50.
- 5% = Participation & Progress
- 45% = Projects, Presentations, Quizzes
- 10% = Midterm Practical
- 10% = Final Practical
- 30% = Final Web Site
- Attendance Extra Credits: +1 for each unused absence (3 points max)
- 90 - 100 = A
- 85 - 89 = B+
- 80 - 84 = B
- 75 - 79 = C+
- 70 - 74 = C
- 65 - 69 = D+
- 60 - 64 = D
- 0 - 59 = F
A: The student planned carefully showing multiple original concepts and sketches before selecting one. Shows awareness of the elements and principles of design; chose color scheme carefully; and used space effectively. Excellent problem-solving skills. The student took pride in going far beyond what was required to complete the project; The artwork is portfolio quality and patiently done.
B: The artwork shows that the student applied the principles of design while using elements effectively; showed an awareness of filling space adequately. The student tried a few original ideas before selecting one and solved problems in a logical way. The student worked hard and completed the project, but with more effort, it could have been portfolio quality, lacks the finishing touches.
C: The student did the assignment adequately, yet it shows lack of planning and little evidence that an overall composition was planned. The student tried a concept, but it lacks originality. It is a finished project, but could have been improved with more effort; adequate interpretation of the assignment; chose an easy path and did it indifferently, a bit careless. The student showed average craftsmanship.
D: The assignment was completed and turned in, but shows little evidence of understanding of the elements and principles of design; little to no evidence of proper planning, minimal effort. The student showed below average craftsmanship, lack of pride in finished work.
F: The student did not achieve the minimum requirements, the artwork was not complete; weak concepts and execution. No evidence of original thought. The student showed poor craftsmanship; evidence of laziness or lack of understanding.
Withdrawals / Incompletes
I do not give incomplete grades. (If you have a situation that requires special attention, please let me know and we will discuss your options.)
You will not be allowed to remain in the class once I have signed a withdrawal form.
Classroom Etiquette & Consideration
It is illegal to record class content, whether audio or video, without the instructor’s permission.
All cell phones, music, and any other potential distractions must be put away and off during class. Laptops, Tablets, Text Messaging, Headphones & Music Players are NOT allowed.
FOOD and/or DRINK ARE NOT ALLOWED IN THE COMPUTER CLASSROOMS OR LAB.
IMPORTANT: Any student doing non-class work (such as web browsing, texting, other assignments, etc.), disrupting the class, or possessing food or drink will be asked to leave AND be marked absent for that day.
All Computer Graphics students are allotted 100 print credits at the start of the semester for printing in the Computer Graphics labs. A student may actually be entitled to more or fewer credits based upon the individual Computer Graphics courses the student is taking that semester. See the per-course print credit allotment at http://art.ncc.edu/cgprint.
The printers in the labs are for printing Computer Graphics work only.
If you believe your course load entitles you to more than the allotted 100 print credits, see Mike Gallo in GC60 with a copy of your course schedule. If you have used all of your print credits and are not entitled to an increase, you will need to find alternate means of printing. Proof your work before printing and print wisely.
A print credit tracker appears at the bottom left of your screen when logged into a Computer Graphics computer.
Important Note Students should keep copies of all artwork created in their NCC classes for possible use in their portfolio. Students are required to present as many as forty (40) original pieces created at NCC for critique in ART 240 Portfolio Workshop. All artwork included in your print portfolio and website must be original. Any artwork that is not original (internet images, images scanned from a magazine, etc.) cannot be used.
Available for Loan
- (requires Student ID)
- cables (firewire, USB, video)
- memory card reader
- rotary trimmer
- X-Acto knife
- cutting mat
- Wacom tablets
- slide/film tray for Epson 4490 scanner
- analog-digital video converter
- Pantone color guides
- a digital still camera
- handheld digital video camera
- professional digital video camera (requires two people [2 IDs])
- Students are responsible to return all items in the same condition as received.
All projects MUST include research, concept development, and multiple hand-drawn sketched concepts before computer work begins - points will be deducted for any assignment handed in without sketches and moodboards.
Assignments will be considered late if they are not handed in at the beginning of the class they are due (or before) and will not be accepted if they are not in a Pocket Folder when required.
- Web Site Research Presentation
- Sketched Concepts for Web Development Presentation
- Web Site Interface Presentation
- Full Web Site Presentation
Create, design, and produce a functional business website.
Please discuss ideas with the professor prior to execution of the assignment. The final project should be a complete, functional and well-designed website. Prepare to be graded on a weekly basis.
The website must be online using a web host that has no banners for full credit.
- A logo and accompanying text
- Main navigation [secondary navigation if necessary]
- Two or three level Interface screen design
- HTML pages
- Research & planning
- Wireframe (selecting & categorizing work, content development)
- Sitemap (site structure/flow chart)
- Interface design
- Production & troubleshooting
- FTP & Publishing
You need to submit:
- Creative statement (objective, goal, and design direction)
- Interface screen design
- Final working files (HTML, CSS, images, scripts, etc.)
- Live web site link
Canvas dimension: Approximately 1366 px x 768 px (we will discuss this more in detail)
Art Department Policy: Academic Dishonesty
“Plagiarize: to steal and pass off (the ideas or words of another) as one’s own: to use (a created production) without crediting the source - vi: to commit literary theft: present as new and original an idea or product derived from an existing source.” Webster's Ninth New Collegiate Dictionary, 1990.
“Dishonesty, such as cheating or plagiarism, or any form of academic dishonesty”... is considered a serious breach of the Student Code of Conduct. The Art Department has therefore established the following disciplinary procedures to deal with academic dishonesty in art classes:
A student who submits someone else’s artwork, research paper, report or test answers as their own work or shares test information with students who have yet to take an exam will receive a grade of F or 0 (zero), without the possibility of making that individual grade up. In addition, the student’s final grade will drop a minimum of one whole letter grade, i.e. from an A to a B, in that course. There also exists the possibility of referral of this serious breach to the Dean of Students for further disciplinary action.
The Art Department will establish a Code of Conduct Committee. This committee will, when called upon, review individual cases of academic dishonesty in art classes. Students and instructors will have the option to address the Committee as needed. Furthermore, the Chairperson of the Art Department shall be notified of the name of any art student who has violated NCC’s Student Code of Conduct by engaging in academic dishonesty in an art class.
All source material for assignments and designs must be your own original work (you must be the copyright holder). Students may not use any materials or copy designs found on the Internet or elsewhere unless the class as a group is specifically instructed to do so. The only exception is fonts for typography, which should not be your design, but enhance it. Students are encouraged to use any legal copies of fonts in your work. Other items such as presets, custom image brushes, textures, or patterns included in the software used to produce your assignments will not be deemed an allowable exception unless approved by me prior to handing in the assignment. If you think your work warrants exception to the original work only rule, you must present me with a very specific proposal for my approval prior to handing in the assignment and turn in a signed copy of that proposal with your assignment. Submitting assignments using source material or designs that were not created by you without my written consent will be considered plagiarism. Any forms of academic dishonesty such as plagiarism or cheating will result in failing the project or exam without the possibility of doing it over and receiving a one letter grade reduction in your final grade.
If you have a physical, psychological, medical, or learning disability that may impact your ability to carry out assigned course work, I urge that you contact the Center for Students with Disabilities(CSD), Building U.(516 572-7241). The counselors at CSD will review your concerns and determine reasonable accommodations you are entitled to by the Americans with Disabilities Act and Section 504 of the Rehabilitation Act of 1973. All information and documentation of disability remain confidential.
Rights of Students
At the first class meeting instructors must indicate the description of the course, its content, requirements, number of papers, projects and tests, cost of supplies, outside of class time commitment, attendance policy in relation to grades, and grading evaluation system.
Instructors will provide students with an ongoing evaluation and assessment of their performance throughout the semester. Students should receive a letter grade upon completion of each class project and/or report.
Reminder: At mid-semester instructors will meet with students on an individual basis for a detailed assessment of their performance as well as a letter grade which reflects that performance. Students who feel that their rights are not respected are encouraged to speak with the Art Department Chairperson.
- Syllabus Review
- Web terminology
- GIF/JPG/PNG/SVG, transparency, antialias
- Photoshop Export procedures
- Illustrator Export procedures/Snap to Pixel
- Content (Structure, HTML)
- Basic HTML structure & head elements
<html>, <head>, <title>, <body>
- HTML Tags & attributes (open/close)
- First Hand-written Code all lowercase, no spaces or special characters/numbers, tabbing
- CSS Syntax: <style> Selector, Declaration (Property:Value;)
- Box model
- Wireframe & Site Map
- Root Folder: file management
- Dreamweaver Interface & Workspace
- Insert Panel
- Properties Inspector
- Dreamweaver Preferences recommendations, code size, shortcuts, etc.
- Site Definition
- Overview: document window, objects palette, property inspector, etc.
- index (or default) .html
- Sign Up for an Adobe ID
- Sign up for Dropbox
- Intro to CSS
- External CSS (new CSS sources)
- CSS selectors
- CSS: Text Properties
- CSS: Layout Properties
- CSS: Margins vs. Padding
- CSS: Border Properties
- CSS: Background Properties
- CSS: Gradients
- Web colors – hex, rgba, etc.
- RGB and Indexed colors
- CSS: Reset Stylesheets
- Previewing in a Browser
- IDs vs. Classes
- Sematic Tags
- View Options (DW Code, Live, Design, Split (Horizontal/Vertical), Browser)
- First layout / box structure
- Using <body> or <div> wrapper/container
- Semantic tags, <div>, id, class implementation
- Floats & Clears
- Applying Multiple Classes
- Centering a Site
- Zero Set & Snippets
- Using % instead of px value
- Commenting (<!-- --> and /* */)
- Columns via Classes
- Inserting images
- First full page Layout with images
- Photoshop Slicing
- Dreamweaver integration with Photoshop
- <img> text wrap (float)
- Image Rollovers
- CSS Rollovers & pseudo-classes
- Display properties (Block, Inline, etc.)
- CSS Image Rollovers
- Photoshop: Animate GIFs
- Text columns attribute & Span
- Pasting text from other sources
- Line breaks vs. paragraph breaks
- Adding special characters
- Link basics
- Relative & Absolute links
- Setting site linking preferences
- ID Link targets on page (formerly anchors) and Smooth Scrolling
- Linking HTML pages
- Find/Replace code
- Email link (warning about bots)
- Extract Palette (Creatives Web Tutorial)
- Lists (ul, ol, definition)
- Full Background graphics (Cover)
- Positioning (static, absolute, relative, and fixed)
- parent-child relationships
- Web Fonts (AdobeEdge, Google, etc.)
- ems vs. rems vs. px
- Midterm Exam
- Wireframing with InVision
- Pasting text from other sources
- Line breaks vs. paragraph breaks
- Adding special characters
- Export/Import Site Data
- Creating web account
- Getting web host (and domain name)
- (Uploading/downloading files to web server)
- Entering remote information
- Synchronizing sites
- Updating and publishing files
- Checking for broken links
- Validating markup
- Behaviors: Swap Image
- Behaviors: Show/Hide
- Visibility: Hidden
- Working with video
- I-frames (if there is time)
- Creating image maps (if there is time)
- Media Queries/Responsive Design
- Grid systems for responsive design
- Forms (Email/Contact)
- Thank you or redirect pages
- Other Behavior overview
- (Spry, jQuery)
- HTML5 overview of components (geolocation, canvas, drag and drop, svg, web storage, etc.)
- Final Exam
- Browser compatibility
- In-class work
- In-class presentations