Queens College
DESN 214
Website Design 1
Fall 2023
Thursday, 2:00 pm – 5:50 pm
Online Class
Slack Channel
3:30 PM – 5:30 PM optional One-on-One Zoom: Schedule a time here
No Class
November 23 (Thanksgiving Break)
Course Description
When designing in general, and especially when it comes to web or interaction design, these four steps are key when it comes to developing a website from start to finish: Discover, Define, Design and Develop. Over the next few months in this class we will go over the four D’s in detail. ”Discover” really focuses on the research that must not be overlooked when starting to design for a website, whether it is competitive audits, current client brand understanding or market research. You must “define” the user experience and figure out the structure of the website by creating sitemaps and wireframes. Then comes the “design” process, which includes static designs based on the wireframes that have already been created. These designs are normally created in Photoshop. Finally comes website “development” which is usually created using front-end programming languages like HTML, CSS and JavaScript. Occasionally designers will also program templates for a content management system (CMS) like Drupal, WordPress or any other common CMS platforms but this requires more advanced programming skills like PHP, Python and Ruby. (We will not have time to cover these languages in this class.)
Course Objectives
The first half of the semester will be entirely focused on the discover, define and design stages. Discovery will consist of the research need to determine who we are designing the website for, what are our competitors already in the space, how can we differentiate from those competitors. Define will take the research to help design our sitemaps and wireframes which are the underlying architecture for the website. To build these sitemaps and wireframes we will be using Adobe Illustrator. Design is focusing on the look and feel of the website looking at color, typography, layout, etc. We will be using tools like Adobe Photoshop and Sketch App to create our designs.
The second half of the semester will be focusing entirely on develop. We will take our static designs and build them out using HTML and CSS. Each week will be focusing on a different aspect of HTML and CSS like layout, typography, color, etc. and applying what we learn to our website builds. We will be using Glitch.com as a programming environment and hosting provider.
At the end of the semester each student will have a complete website built using HTML, CSS and maybe some JavaScript which will be hosted online at Glitch.com.
Learning Outcomes
Students will learn the basics of user experience design and user interface design when it comes to designing a website. They will become comfortable using such platforms like Adobe Illustrator, Adobe Photoshop and potentially Sketch App and Figma. They will also have a solid understanding on how to program a website using HTML and CSS as well as some JavaScript.
Textbook
HTML & CSS by Jon Duckett
Suggested Reading
JavaScript & jQuery by Jon Duckett
Course Requirements
Class participation is mandatory. You are expected to be present; to participate in a positive, constructive manner; and to produce work that is full of energy and completed and presented to the best of your ability.
It is your responsibility to turn in work on time, to make up any missed assignments, and to catch up with the class in the event of an absence. Late work is unacceptable; however, this work turned in for partial credit. If you know you are going to be absent, contact the professor by email in advance. For the most up-to-date information (including what is due next class) visit the class website: http://webdesign.dannewoo.com
This is a hands-on course, and regular attendance is necessary for participation. You will be graded on in-class participation. If you know you are going to be absent, contact the professor by email in advance. Students who miss numerous classes will find it difficult to pass the course. Visual assignments and projects will be graded based on: one for technical merit, concept and your demonstrated ability to understand the material. Your final grades will be calculated by the following: 80% project, 20% participation. You are expected to spend as much time working outside the classroom as you work inside the classroom. Schedule your time accordingly.
You will need to have a notebook or sketchbook that you will be expected to bring to every class, as well as a 4gb or larger thumbdrive to transfer digital files, and earphones for listening to video tutorials in class.Frequently visit http://webdesign.dannewoo.com for the most up-to-date information regarding this class and what is due.
Professor Information
Name: Danne Woo
Email: [email protected]
URL: dannewoo.com
Twitter: @dannewoo
Office Hours: calendly.com/dannewoo/office-hours
Grading
Attendance
Two (unexcused) absences result in grade drop and four absences result in a failing grade. Late or early departure from class (15 minutes) is the equivalent of ½ absence.
To earn an A
All class work and homework is excellent. Projects have been completed when assigned. The work shows a development and understanding of the principles discussed in class. It is presented immaculately. There is regular and prompt attendance and participation during critiques and an enthusiasm toward the material being presented throughout the semester. This is exceptional work.
To earn a B
All assigned work completed in a thorough manner. An understanding of the principles and lessons covered in class is evident. The student comes to class regularly and on time and participates in critiques and discussions. This is better than average work.
To earn a C
Most class assignments and homework have been completed. Regular attendance but minimal or negative class participation. There is understanding of most of what’s being presented in class. This student shows some interest in the course content. This is average work.
To earn a D
Most class assignments and homework have not been completed. Marginal effort made to understand the course objectives and very little or negative participation on behalf of the student. Spotty attendance. This means below average work.
To earn an F
Student has not completed 1⁄3 of the course work and has missed too many classes. This student doesn’t participate or has a bad attitude and shows no interest. It means not enough work, attendance, and/or effort to pass the class.