Design for the Web 1

Asst. Prof. Andy Deck
Tuesday 9:00-11:50am
Office hours: Mon. & Tue. 12:20-1:50pm, Room 131-CG
City College, Fall 2018
ART 39540-2PR
+ Course Info

About

This course will enable students to approach real-world design problems using the Web as a medium and create solutions that are functional and engaging, and that apply industry-standard technologies, including CSS and HTML. Students will undertake a series of exercises, culminating in the creation of working web sites. Topics will include pre-planning, information architecture, visual and interface design, effective use of images and text, adapting code from outside sources, and other topics that may arise during the semester. Significant work is required in the computer lab outside of class meetings. Students will be expected to do independent assignments in order to learn a range of dynamic web technologies and to advance their design concepts and strategies. Class time will include lectures, technical demonstrations, guided lab time and time for critique of student work.

Goals

Write HTML5/CSS3; use the language of web design (terminology); design and develop sites from scratch; strengthen analytical skills and think critically; understand and use technologies associated with web design.

Preparation & Participation

During each class, you are expected to contribute to objectives of the course. Ask questions, discuss and critique student work, and help your peers if you can. Please turn off your cell phones and refrain from sending emails, texts or messaging friends during class. USING ANY FORM OF SOCIAL MEDIA DURING CLASS IS CONSIDERED NOT PARTICIPATING. Please be prompt, and return from breaks on time. You are expected to read and conduct relevant research each week. You don't need to understand each and every word, but you should come to class having done the reading, and prepared to discuss it meaningfully.

Learning Outcomes

Students will:
• Create websites with HTML/CSS3 [homework, readings, projects]
• Gain an understanding of contemporary web design [readings, homework, discussions]
• Recognize and learn best practices used by web designers [research]
• Critically analyze web sites [discussion, homework]
Demonstrate what is learned in class [discussion, homework]

Attendance

Attendance and class participation are an essential element of this course. Each class gives unique and valuable information not available in the readings. As such, any missed class will affect your grade. Missing three classes, will result in failure of the course. If you miss a class, you are still responsible for handing in the assignment and completing the readings. Refer to the companion web site for the class, and contact your peers or me before the next class to get caught up. Please refer to campus info sources for school closings.

Communication

The email address you give on the first day of class will be used to communicate with you about all course-related matters. Please check it regularly.

Academic Integrity

Students are expected to read and understand CUNY's academic integrity policy, which can be found via Google. Members of the CUNY community are expected to be honest and forthright in their academic endeavors. Students who violate this policy will be referred to the Office of the Provost. If you cheat or plagiarize by using someone else's work or ideas, you defeat the purpose of your education. In addition, academic dishonesty is prohibited in the City University of New York, and is punishable by failing grades, suspension and expulsion.

Students with Disabilities

If you need accommodations because of a documented disability, notify the instructor. The AccessAbility Center/Student Disability Services ensures equal access and full participation to all of City College's programs, services, and activities by coordinating and implementing appropriate accommodations. If you are a student with a disability who requires accommodations and services, please visit the office in NAC 1/218, or contact AAC/SDS via email (disabilityservices@ccny.cuny.edu), or phone (212-650-5913 or TTY/TTD 212-650-8441).

Readings

• Required: HTML5 in easy steps, Author: Mike McGrath, Publisher: Computer Step, Edition: 2, Year Published: 2017, Price: $14.00
• Recommended: HTML and CSS: Design and Build Websites, Author: Jon Duckett, Publisher: Wiley, Edition: 1, Year Published: 2011, Price: $17.00
• Reading expectations are mentioned in the schedule below

Materials

• Portable (USB) storage media. Use it and make back-ups of your work. USB3 recommended.
• Pencil / pens and sketchbook are still a professional starting point.

Requirements

• Reading and research
• 3 interactive tutorials
• Weekly homework assignments
• 2 major assignments (historical bio and portfolio websites)
• Final project (responsive social issue website)

Final Grade

Your final grade will be based on:

15% Attendance and class participation
10% Interactive HTML/CSS/Responsive Design tutorials OR quizes
40% Eight homework assignments (main index, principles, review, paintings, font pairs, diy, fixed, acme)
10% Scrolling bio website about a historical figure (mid-term)
10% Portfolio with interactive imagery
15% Final project (social issue of choice)

Grading

 F  00-59   Failing. Doesn't meet minimum standards. No technical competence. Lacks any concept or idea.

 D  60-69   Barely acceptable. Many technical errors. Project is incomplete. No original thought.

 C  70-79   Below average but meets expectations. More technical errors than expected. Doesn't use full range of tools. Doesn't address concepts in a meaningful way.

 B  80-89    Above average. Exceeds expectations. Few technical errors. Uses a variety of tools. Demonstrates awareness of theoretical concepts.

 A- 90-94   Very good. Minor technical problems. Demonstrates awareness and thorough exploration of theoretical concepts.

 A  95-100   Outstanding. No technical errors. Uses tools at a professional level. Demonstrates understanding and exploration of theoretical concepts. Highly original thoughts.

Incomplete grades are given only in the case of family emergency or documented illness which interferes with your completion of the course. You must submit the required paperwork to me according to the college's deadline. You must also submit to me a written list of work which is missing, and a timetable of when the work will be completed.

Schedule

Class 1   8/28

In Class
Course overview. Discussion of HTML basics.
Homework for next class:
1. Get the McGrath book and read the first chapter. 2. Download an FTP client, like CyberDuck, at home. 3. Download a text editor, like SublimeText. 4. Use the text editor to practice formatting text with basic HTML. Continue formatting the [web design principles] text used in class. 5. Find and *briefly* review five websites you admire, make URL hyperlinks, and format your review text. These HTML exercises (parts 4 and 5) will be uploaded to your server space in class on 9/4.

Class 2   9/4

In Class
Discussion of accounts, uploading to the server. HTML/CSS continued.
Homework for next class:
1. Make 'reviews' and 'principles' folders on the server.  2. Upload those documents from week one and develop them further with CSS.  3. Begin working on the required [Learn HTML] and [Learn CSS] tutorials on [codecademy.com] (must be done by 9/25). 4. Read chapter 2 of McGrath.

Class 3   9/25

In Class
Styling with CSS (continued). Using absolute positioning. QUIZ if tutorials Learn HTML & Learn CSS aren't done.
Homework for next class:
1. Read from McGrath chapters 3 and 4.  2. Make a folder named 'paintings'.  3. Create an html file recreating at least five of these paintings using divs and CSS.  4. Link the folder to your top level index page (navigation buttons appreciated):
a. Rectilinear Series No. 48, Untitled by Christopher Coram
b. Series 8 (ca. 1970), by Ilya Bolotowsky
c. Acrylic No. 13 (1970) by Fanny Sanin
d. Grace Kelly (1990) by Imi Knoebel
e. Serigrafia (1975) by Luiz Sacilotto
f. Untitled (undated) by Hermelindo Fiaminghi
g. Untitled (2013) by Carmen Herrera
h. Green, Blue, Red (1963) by Ellsworth Kelly

Class 4   10/2

In Class
Intro to grid systems. Typographic techniques for the Web.
Homework for next class:
1. Download Skeleton framework from getskeleton.com.  2. Unzip and rename the folder to 'fontpairs'.  3. Place any .otf font files you intend to use in the css/ folder.  4. Add a <link> line in the <head> section as detailed by Google Fonts (to load any additional fonts). 5. Establish five font pairs using a two-column layout, with one row dedicated to each font pair.  6. Read from McGrath chapter 5.

Class 5   10/9

In Class
Web graphics, SVG, scaling & resolution issues.
Homework for next class:
1. Begin working on the required [Responsive design tutorial on codecademy.com] (must be done by November).  2. Make a folder 'diy'.  3. Photograph a process that you know about in at least six steps.  4. Code the image tags.  5. Add text that narrates the steps.  6. Make it responsive. You may use the Skeleton framework or roll your own using display: and width: style rules, and @media queries, to make the images fill half the width in wider views, and all of the width on mobile (narrow) views.

Class 6   10/16

In Class
Scroll navigation for vertical layouts.
Homework for next class:
1. Make a folder named 'bioProto'.  2. Begin work on a four section, vertical scrolling website about a historical person whom you admire, with four visually coherent background images, text overlays on each section and at least two foreground images.   3. Produce a mock-up of each section (PNG format).  4. Develop original content (written and graphical).  5. Read McGrath chapter 7.

Class 7   10/23

In Class
Layout, image tricks, figures.
Homework for next class:
1. Make a folder named 'bio' and put bioProto inside it.  2. Continue work on the HTML/CSS of your four section scrolling website.  3. Produce a final version for the 10/30 (mid-term critique).

Class 8   10/30

In Class
Mid-term critique
Homework for next class:
1. Make folder 'fixed'.  2. Follow hand-out model to produce a single scrolling page with a fixed header. Content below the header is a time-line (topic your choice).  3. Use a width="100%" scaled SVGs as the src content of <img> tags in the header and one (tall) div. Use Illustrator to make SVGs. 

Class 9   11/6

In Class
Portfolio design concepts and techniques. QUIZ if Responsive Design tutorial isn't done.
Homework for next class:
1. Make a folder named 'portfolio' and begin work on a built-from-scratch portfolio.  2. Prepare image assets to incorporate strategies like lightbox or slideshow.

Class 10   11/13

In Class
jQuery intro
Homework for next class:
1. Continue work on portfolio.  2. Establish responsive alternatives for landscape and portrait view modes.  3. Read jQuery handout.

Class 11   11/20

In Class
jQuery (cont.) with templates
PHP and templates: basic server-side scripting demo
Homework for next class:
1. Make a folder 'acme'.  2. Produce a very basic page layout template.  3. Add jQuery to the document.  4. Enable jQuery linking from several buttons that 'injects' new content into the center of the layout.

Class 12   11/27

In Class
Introduction to Bootstrap framework, grid system, Bootstrapstudio.io
Homework for next class:
1. Develop a plan and do research for your final project.  2. Imagine users.  3. Sketch layout possibilities and think about design elements like color, texture, pictures, compositions, etc.

Class 13   12/4

In Class
BootstrapStudio (cont.), responsive design, basic "parallax scrolling" effects
Homework for next class:
1. Continue work on final project social issue website.  2. Add folder 'issue' and continue work on site there.  3. Add folder 'issueProto' inside of folder 'issue'and place any developmental wireframes, experiments, mockups there.

Class 14   12/11

In Class
Open lab for work on final project
Homework for next class:
1. Continue work on final site. 2. Update your index page to reflect (link) all your coursework!

Class 15   12/18

In Class
Final critique
Required:
All homework and projects must be complete by 12/21.

Student work