Learning to design and code for the responsive web

The goal for this class will not be to work toward a “professional” final website. Rather you will become familiar with a new design language through systematic investigations. Working with HTML and CSS will show the possibilities and limitations of web-based applications. This will be a chance to embrace new technology that might spark further discovery within your own design journey.

To start, we will focus strictly on hand coding. You will generate several iterations for each assignment, 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 will also reinforce the design process you have learned about in the previous semester(s).

One of the main challenges will be to create fluid, responsive layouts that adapt to different screen sizes. Responsive Design (RWD) is a must nowadays; and designing without having a fixed format is likely something you've never been confronted with. Let this be an opportunity to explore and experiment with technology.

To remember: we are approaching this class as designers first! CSS and HTML will be new tools in your design toolbox. Embrace mistakes!

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 and 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

Code:

• Coding with HTML and CSS
• 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
• Learn web related terminology
• 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.

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.