Web Design

Asst. Prof. Andy Deck
Wednesday 11:00am-1:45pm
U of M - Flint Fall 2019
ART 335.M1
+ 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]
• Participate in the design of a civic spirited website [homework, guest lecturers]
• 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 the University's academic integrity policy, which can be found via Google. Members of the U of M 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 University of Michigan Flint, and is punishable by failing grades, suspension and expulsion.

Students with Disabilities

If you need accommodations because of a documented disability, notify the instructor.

Readings

• Recommended: HTML5 in easy steps, Author: Mike McGrath, Publisher: Computer Step, Edition: 2, Year Published: 2017, Price: $10.11
• Required: HTML and CSS: Design and Build Websites, Author: Jon Duckett, Publisher: Wiley, Edition: 1, Year Published: 2011, Price: $17.00
• Specific reading recommendations 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 civic engagement websites)
• Final project (personal online portfolio)

Final Grade

Your final grade will be based on:

15% Attendance and class participation
10% Interactive HTML/CSS/Responsive Design tutorials OR quizes
40% Six homework assignments (main index, principles, review, paintings, font pairs, diy)
10% Scrolling bio website about a historical figure (mid-term)
15% Civic engagement website
10% Personal portfolio

Grading

 E  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

Week 1   9/4

In Class
Course overview. Discussion of HTML basics.
Homework for next class:
1. Get the Duckett book (PDF) and read the first two chapters. 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/11.

Week 2   9/11

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 10/2). 4. Read chapter 5 of Duckett.

Week 3   9/18

In Class
Styling with CSS (continued). Using absolute positioning.
Homework for next class:
1. Read from Duckett chapters 4 and 10.  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. Pure Red Color, Pure Blue Color, Pure Yellow Color (1921) by Alexandr Rodchenko
b. Negativo-positivo (1995) by Bruno Munari
c. Acrylic No. 9 (1970) by Fanny Sanín
d. Méditerranée (1952) by Ellsworth Kelly
e. Untitled acrylic (1953) by Bruno Munari
f. For Pearl (1970) by Brice Marden
g. Composition XXII (1922) by Theo von Doesburg
h. Cadmium Red & Cobalt Blue (1988) by Carmen Herrera

Week 4   9/25

In Class
Intro to grid systems. Typographic techniques for the Web.
Homework for next class:
1. See grid CSS example https://thimbleprojects.org/noisefactor/707750.  2. Emulate this example and use the folder name '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 Duckett chapters 11 and 12.

Week 5   10/2

In Class
Web graphics, SVG, scaling & resolution issues. QUIZ if tutorials Learn HTML & Learn CSS aren't done.
Homework for next class:
1. Begin working on the required [Responsive design tutorial on Udacity.com] (must be done by 11/6).  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 grid CSS layout techniques covered in class to make the images fill half the width with text in the other half. We will adapt this layout for mobile phones using @media queries.

Week 6   10/9

In Class
Scroll navigation for vertical layouts.
Homework for next class:
1. Begin HTML/CSS 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.   2. Produce a mock-up of each section (PNG format).  3. Develop original content (written and graphical). 

Week 7   10/16

In Class
Layout, image tricks, figures.
Homework for next class:
1. Name the project folder 'bio' and upload your bio website to the server.  2. Continue work on the HTML/CSS/imagery of your four section scrolling website.  3. Produce a final version for the 10/23 (mid-term critique).

Week 8   10/23

In Class
Mid-term critique
Homework for next class:
1. Begin assembling assets for a personal portfolio website.  2. Finish Responsive Design tutorial. 

Week 9   10/30

In Class
Civic engagement project introduction
Brainstorming and concept development
Homework for next class:
1. Make sketches for Shelter logotype ideas. 2. Imagine users. 

Week 10   11/6

In Class

QUIZ if Responsive Design tutorial isn't done.
Civic engagement project guest speaker, logo feedback
Homework for next class:
1. Watch bootstrapstudio.io tutorial (cake).  2. Sketch layout possibilities and think about design elements like color, texture, pictures, compositions, etc. 3. Make a mock up image of the front page of the Shelter website.

Week 11   11/13

In Class
Introduction to Bootstrap framework, grid system, Bootstrapstudio.io
Homework for next class:
1. Coordinate design guidelines for further independent work on Shelter website.  2. Complete work on final project civic engagement website.  3. Add folder 'civic' and upload to the server. 

Week 12   11/20

In Class
BootstrapStudio (cont.), responsive design, basic "parallax scrolling" effects
Homework for next class:
1. Develop your 'portfolio' website.  2. Incorporate features like lightbox or slideshow for imagery.

Week 13   12/4

In Class
Portfolio design concepts and techniques.
Homework for next class:
1. Continue work on portfolio.  2. Establish responsive alternatives for landscape and portrait view modes. 

Week 14   12/11

In Class
Final critique
Portfolio critique and Shelter website discussion
Required:
All homework, projects, and revisions must be complete by 12/14 @ noon. Update your index page to reflect (link) all your coursework!

Student work