Overview

Learning to design and code for the responsive web

In this class, we will utilize the design processes you have been exposed to in all your foundation courses and learn the language of HTML and CSS through investigation and play.

As technology develops we must remain informed of their capabilities. For this class will focus on the presence of design process in media.

As designers, we apply our rigorous methods to each new endeavour. The goal for this class will not be to work toward a “professional” final website. Rather you will become familiar with this new language through systematic investigations. Working with code during the design process will help to understand limitations and possibilities and will allow for creative, unexpected solutions to the assignments.

The challenges will be to create fluid, responsive layouts that adapt to different screen sizes. Responsive Design is a must nowadays but designing without having a fixed format is likely something you've never been confronted with.

You will generate several variations and iterations for each assignment, design them first in Illustrator and then code one example per "step". Designs will be expanded and built upon (from simple to complex). This process will allow you to familiarize yourself with HTML and CSS step by step. It also reinforces the design process you learned about in the previous semester(s).

There will be two main assignments split up into smaller assignments/steps:
1. Responsive, fluid typography for the web.
2. Your portfolio website

Topics, Objectives & Goals

Design:

• Grid layout
• Design and code responsive web pages using HTML and CSS
• Focus is on design and coding equally.
• Understand and apply responsive web design (RWD)
• Design processes and methods.
• Information hierarchy, organization
• Composition dynamics (space, contrasts, relationships)
• Design exploration, variation and iteration

Coding:

• Coding with HTML and CSS, some JavaScript
• Understand the separation between content and design
• Build pages from scratch in order to have full control over design and behavior
• Knowing about limits and possibilities with coding can affect design positively.
• Work with code editors (Dreamweaver, for example)
• Learn web related terminology (Front End, Back End, CMS, RWD, Boiler Plate, Frame Works etc.)
• Prepare digital files for web-based publishing (file formats, file sizes...)
• Web publishing (domain name registration, hosting etc.)

Attendance Policy

Students who are actively engaged in class sessions are more likely to be successful. You are expected to attend each class session and to be on time. If you are sick, especially contagious, do not come to class. This is an excused absence.

If you cannot come to class or have to leave notify me before class. If you miss a class, please notify me with the reason for the absence. Students who accumulate 3 or more unexcused absences may be asked to withdraw from class and/or risk receiving a failing grade.

Assignment make-up/revision policy

If you miss a class, you are responsible for getting the class handouts and instructions from one of your classmates. You may notify a classmates to pick up materials and explain the instructions to you.

Grading

Grading is based on the aesthetic quality and craft of the work, as evidenced in the finished pieces; the course of research and/or process of design exploration pursued to achieve the finished pieces, as evidenced by your work in process; attendance and class participation. Grading percentages: Daily research/process/product (25%), mid-term review (25%), and final project (50%). All work must be handed in by the date set for finals in order to avoid a failing grade. Growth from class to class is based on concept, working process, problem solving, presentation, participation and motivation.

A = Work of exceptional quality and craft. Level of interest and quality of research exceeds expectations. Deep understanding of material and concepts presented. Active/enthusiastic class participation, perfect attendance.

B = Work of overall good quality and craft. Level of interest and quality of research meets expectations. Clear understanding of material and concepts presented. Attentive/ open class participation, good attendance.

C = work of average quality and craft. level of interest and quality of research is average. understanding of material and concepts presented is uncertain. class participation is minimal, inconsistent attendance

D = work of poor quality and craft. level of interest and quality of research is poor. lacks understanding of material and concepts presented. class participation is nonexistent weak attendance

F = work is incomplete or missing. no demonstrated interest or evidence of research. no understanding of material and concepts presented. class participation is nonexistent poor attendance.

If you have any concerns about the class or if you need to see me outside of class, e-mail to me to schedule an appointment.