Web Design S19

Mark Sanders

Day 1

Syllabus

Course Description

This class introduces the concepts, technologies, and languages used to design and build modern interactive experiences. Students will learn key components of the interactive design process and design and production techniques. Students utilize and build on their typography, compositional, and systems design skills to realize their ideas.

Learning Outcomes

  • Utilize grid, typography and modularity to construct design frameworks across entire web sites.
  • Create interaction design concepts that respond to multiple device sizes.
  • Develop proficiency at manipulating HTML, CSS, and Javascript to realize design intentions.

Projects

This semester we will be learning to effectively prototype web sites via HTML and CSS. The first half of the semester will involve weekly explorations of concepts and tools related to the following: composition, measurement, typography, interaction, and responsiveness. We will be learning together through in-class exercises and weekly homework. Our goal is to be able to readily prototype, iterate, and test our ideas via markup.

The second half of the semester each student will define a project and the process for completing it. You will learn something new and devise a method for teaching it to others using the new techniques we have explored. This project will also benefit from UX/UI theory and specific communication design that promotes successful outcomes.

Requirements of Class

Work & Critique
  • If you are having difficulty understanding an assignment or completing your work, it is your responsibility to talk to me right away.
  • Be prepared for class every day that we meet. Please bring the necessary tools that will allow you to work in class, all sketches / layouts / studies / files that pertain to the development of your projects, any inspiration the class might benefit from seeing, and copies of any assigned reading for discussion.
  • You must meet all project deadlines. Late work will automatically lower your grade.
  • You are only to work on class projects during class sessions; no personal email, social networking, phone calls, texting or chat during critiques, demos or lectures. While I may not mention each time I observe you violating this policy, it will affect your final grade.
  • You will be given at least one break per hour. With that, please do not leave the classroom while the class is meeting without permission.
Attendance & Tardiness
  • Attendance and participation is mandatory. Arrive on time at the start of each class and after each break. Failure to return from break will be considered an absence. Students who have the equivalent of more than 3 absences are no longer eligible to earn credit for the course. If you are absent, it is your responsibility for gathering any material and completing any in-class assignments missed.
  • Tardiness also will not be tolerated. If you arrive 10 minutes past the scheduled class start time, this is considered tardy. 3 tardies will be counted as an absence. Arriving more than 30 minutes late will marked as an absence.
Documentation
  • Make it a habit to back up your work frequently. Organize and save all presentations, sketches, alternate solutions and research for all work completed.
  • You must provide a full archive of all print-ready digital files, digital archives and/or screen grabs completed during the semester to me by the last day of classes for the semester. Failure to submit final files will result in a reduction of 50% credit for the course.

Contact & Office Hours

You are encouraged to seek feedback in person during my office hours. Students must schedule an appointment for office hours. Appointments are 15 minutes.

Questions are also encouraged. You may do so via email, but note my response may take up to 24 hours. Email received over the weekend will receive a response on Monday.

Assessment

I will provide you with a midterm assessment of your work to date, and a final grade which takes into account all your work during the semester. Charettes / projects will not be individually graded. Your work in this class with be assessed based on the following criteria: Product, Process, and Professionalism.

Product (1/3)
  • Appropriateness of the solution as a response to the problem
  • Understanding of the user/audience for the problem
  • Inventiveness of the solution as a response to the problem
  • Craftsmanship
Process (1/3)
  • Research (quality/quantity)
  • Development of ideas across time (project & semester)
  • Articulation of the problem
  • Ability to convert research into idea generation
  • Ability to communicate ideas and research in visual form
  • Improvement of work across the semester
Professionalism (1/3)
  • Attendance
  • Deadlines
  • Participation in class critiques
  • Preparation and use of time in class
  • Written presentation skills
  • Verbal presentation skills

Resources

We will be working hard to make the technical side of building websites as painless as possible. There are many wonderful, publically available places to learn and find help. Please consult these resources and actively troubleshoot a bug (make a list of all that you have tried) before asking for help.

Academic Policy Statements

Academic Disability Accommodations

MICA makes reasonable academic accommodations for qualified students with disabilities. All academic accommodations must be approved through the Learning Resource Center (LRC). Students requesting accommodation should schedule an appointment at the LRC (410-225-2416 or e-mail LRC@mica.edu), located in Bunting 110. It is the student’s responsibility to make an accommodation request in a timely manner. Academic accommodations are not retroactive.

Environmental Health and Safety (EHS)

Students are responsible to follow health and safety guidelines relevant to their individual activities, processes, and to review MICA's Emergency Operations Plan and attend EHS training. Students are required to purchase personal protection equipment appropriate for their major or class. Those students who do not have the proper personal protection equipment will not be permitted to attend class until safe measures and personal protection are in place.

Plagiarism

Each discipline within the arts has specific and appropriate means for students to cite or acknowledge sources and the ideas and material of others used in their own work. Students have the responsibility to become familiar with such processes and to carefully follow their use in developing original work.

Policy

MICA will not tolerate plagiarism, which is defined as claiming authorship of, or using someone else's ideas or work without proper acknowledgement. Without proper attribution, a student may NOT replicate another's work, paraphrase another's ideas, or appropriate images in a manner that violates the specific rules against plagiarism in the student's department. In addition, students may not submit the same work for credit in more than one course without the explicit approval of all of the instructors of the courses involved.

Consequences

When an instructor has evidence that a student has plagiarized work submitted for course credit, the instructor will confront the student and impose penalties that may include failing the course. In the case of a serious violation or repeated infractions from the same student, the instructor will report the infractions to the department chair or program director. Depending on the circumstances of the case, the department chair or program director may then report the student to the appropriate dean or provost, who may choose to impose further penalties, including expulsion.

Appeal Process

Students who are penalized by an instructor or department for committing plagiarism have the right to appeal the charge and penalties that ensue. Within three weeks of institutional action, the student must submit a letter of appeal to the department chairperson or program director, or relevant dean or provost related to the course for which actions were taken. The academic officer will assign three members of the relevant department/division to serve on a review panel. The panel will meet with the student and the instructor of record and will review all relevant and available materials. The panel will determine whether or not to confirm the charge and penalties. The findings of the panel are final. The panel will notify the instructor, the chairperson, division, the student, and the Office of Academic Affairs of their findings and any recommendations for change in penalties.

Title IX Notification

Maryland Institute College of Art seeks to provide an educational environment based on mutual respect that is free from discrimination and harassment. If you have encountered sexual harassment/misconduct/assault, please know that there are multiple ways to report it and you are encouraged to do so (www.mica.edu/equal_opportunity). If you require academic adjustments due to an incident involving sexual harassment or discrimination, please contact Student Affairs at 410.225.2422 or Human Resources at 410.225.2363. Please be aware that in order to meet our commitments to equity and to comply with Title IX of the Education Amendments of 1972 and guidance from the Office for Civil Rights, faculty and staff members are required to report disclosures of gender based discrimination made to them by students. However, nothing in this policy shall abridge academic freedom or MICA’s educational mission. Prohibitions against discrimination and discriminatory harassment do not extend to actions, statements or written materials that are relevant and appropriately related to course subject matter or academic discussion.

Students with Extended Illness or Cause for Legitimate Absence

In the case of extended illness or other absences that may keep the student from attending a class for more than three meetings, undergraduate students must contact the Student Development Specialist in the Division of Student Affairs or have an official disability accommodation letter issued by the Learning Resource Center that specifically addresses class absences. For students who have not been approved for academic disability accommodations, the Student Development Specialist will work with the student to determine the cause and appropriateness of the absences and subsequently notify instructors as necessary. Graduate students must contact the instructor, program director, and the Office of Graduate Studies. Students in professional studies programs must contact the Associate Dean for Open Studies. The appropriate administrator will facilitate a conversation with relevant faculty to determine whether the student can achieve satisfactory academic progress, which is ultimately at the sole discretion of the faculty member.

Week 1

In-class Exercise

Remake the Web

Using the 'Inspect' tool in your browser, manipulate the CSS of the following page to alter the legibility of the text and composition of page. BE BOLD! Upload five (5) screen grabs that demonstrate your new design.

Week 2

In-class Exercise

CSS Grid Tutorial

Review the resources you all submitted that you have found useful for learning CSS grids. Collaboratively create a tutorial with text, images, and code snippets that allow a novice to begin using CSS grids.

In-class Exercise

Absolute vs. Relative

Create a CSS grid that uses fixed units, a CSS grid that uses relative units, and a CSS grid that uses a combination of fixed and relative units. Your grid must be composed of of at least 9 grid modules. Submit a separate HTML file for each grid, zipped into a single archive file.

Week 3

In-class Exercise

Re-grid

Select a homepage from a prominent news website. Using CSS grid, re-create the overall structure of that page in a fluid (relative units) layout, ignoring text and secondary, tertiary, etc. structural aspects.

Week 4

Week 5

In-class Exercise

Type Set

Using a palette of Google Fonts of your choice, typeset via CSS this text to promote maximum legibilty. Be sure to consider line length and white space.

Week 6

In-class Exercise

Specimen(s)

Select one (1) more Google Fonts type family. Using your original type specimen website as a prototype, develop an online specimen for the new type family. Utilize a single external style sheet for all specimens and simplify your CSS using selectors.

Week 7

In-class Exercise

5 Transitions

Create 5 links with 5 different interactions when hovered over. At least one of these interactions must include transitions for multiple elements.

Homework

Select one (1) final Google Fonts type family. Develop an online specimen for the new type family that in some way systematically relates to the other specimens you've created.

Develop a consistent navigation that allows users to visit each of your Google Fonts type specimens. This navigation / menu must have an interactive component.

Week 8

Homework

Responsive Calendar

Using the linked template, create a day at-a-glance calendar view for smartphone, week at-a-glance calendar view for tablet, and month at-a-glance calendar view for desktop via CSS media queries.

Week 9

Homework

Learn

Identify something new you would like to learn. Assemble a list of guides and/or tutorials that you will use to learn what you have identified. Complete at least three (3) tutorials from your list.

Create a single page website with links to all the resources you found useful. Consider how you represent your links (image, text, icon, other, combination) to provide a meaningful preview.

Week 10

In-class

Dialog

Review and discuss your topic and research with a classmate. Conceive meaningful and useful structure that demonstrates what you have learned and how you will teach it via your new site.

Homework

Prototype

Based on your conversation in-class, generate page and site architecture that is a summary of how you propose teaching what you've learned. Create coded wireframe prototype(s) of the page(s) that compose your site map / info architecture.

Week 11

Homework

Using your information architecture as a guide, create a prototype of your interface for learning your specific topic or skill. This prototype should include navigation, interaction, and content as needed to demonstrate your design intent.

Week 12

Week 13

In-class Exercise

User Testing

Evaluate the usefulness of the content and interface of your classmates' sites by answering the following questions:

  • What is the tone of the site?
  • What did I learn through using the site?
  • Who is the audience for the site?
  • What do I want to learn more about after using the site?
  • Why should I care about the site content?
  • Did I get lost while interacting with the site? Where?
  • What will I remember about the site?

Homework

Prepare a final version of your learning site that incorporates the comments you received from user testing. All content, media, and pages must be included.

Homework

Add mobile portrait-orientation responsiveness to your learning site via media queries in your existing CSS.

Week 14