Taught by Gabriel Drozdov {gdrozdov@risd.edu}
Location: Design Center 407
Time: Fridays, 8:00AM – 1:00PM
Office Hours: By appointment (Wednesdays preferred!)
At their core, websites are boxes within boxes within boxes of information. But, what are websites actually made of, and what can they do? This four-week workshop explores programming as a dynamic digital material, giving rise to unique design languages and possibilities. Students start as programming novices, reading and writing HTML, CSS, and JavaScript to build up foundational skills in web design and development. Alongside hands-on assignments, weekly lectures expose the field of web programming, including topics in computer science, digital design tools and systems (e.g. Figma, Material Design), and professional web development tools (e.g. Webflow, WordPress, Bootstrap, React). Students emerge with portfolio projects and the ability to effectively collaborate with other web developers.
Major elective; Graphic Design majors only.
Open to non-majors with permission by the Department.
Section 01: 9/9/2022 – 9/30/2022
Section 02: 10/7/2022 – 10/28/2022
Section 03: 11/4/2022 – 12/3/2022
Rhode Island School of Design is built on what is now called College Hill, part of the ancestral homelands of the Narragansett Nation. Indigenous people from many nations — near and far — live, study and work in Providence today. The amplification of Native voices and histories is crucial to rectifying the many violent legacies of colonialism, and we gratefully acknowledge the ongoing critical contributions of Indigenous people across our state, region and nation.
Suggested reading: “Decolonization is not a metaphor” by Eve Tuck and K. Wayne Yang.
Rhode Island School of Design is committed to providing equal opportunity for all students. If you are a student that may require accommodations to complete the requirements of this class, I encourage you to discuss your learning needs with me during the first week of the term. Once an approval letter from the Office of Disability Support Services is submitted, accommodations will be provided. For more information on how to receive accommodations, please contact Disability Support Services.
My hope is to make this class a space in which all aspects of personal identity — gender, sexual orientation, abilities, age, body type, socioeconomic circumstances, ethnicity, race, and culture — are accepted, valued, and allowed to influence the work, opinions, language, and learning styles of every student. I have worked, and am working, to show examples and share resources that reflect a diversity of voices; to structure learning activities that allow for a variety of modes of engagement and participation; and to encourage a class culture of respect. These efforts are always a work in progress, and I sincerely welcome any suggestions you might have as I continue to work on them.
If you ever experience a situation in which you are made uncomfortable or feel discriminated against for any reason, please don’t hesitate to reach out to RISD’s Institutional Discrimation team or Title IX department. Additional resources are also available here for your reference.
Other resources:
“Red Hat” is a family of typefaces produced in 2 optical sizes and a monospace style, in a range of weights with italics. The fonts were originally commissioned by Paula Scher, Pentagram and designed by Jeremy Mickel, MCKL for the new Red Hat identity.
This syllabus is inspired by (and borrows from) both John Caserta’s Web Programming and Marie Otsuka’s Web Type courses.
You don’t need to know everything to start programming for the web. Actually, you don’t need to know most things to code. We won’t dwell too long on any specific subject so that you can keep exploring the web world without getting hung up on technicalities.
My coding background is based in computer science. Designers don’t need all that, but I hope to expose the most relevant parts of the computer science world. In the professional world, designers usually hand off schematics for programmers to implement. This isn’t a great process — it prevents productive discussion between designers and developers, and can result in products that neither party is fully happy with. With even just a surface-level understanding of how code works, designers can make design decisions based on sound logic and effectively communicate with developers throughout the whole process.
This course consists of lectures, tutorials, workshops (+ demos), and assignments. For a full rundown of the topics we’ll cover each week, check out the schedule.
Weekly research and analysis is due at every class except the first. This is an extremely light (no more than 5 minutes) research task that aims to get you thinking critically about web design and development.
Project 1 is assigned the first week and due the second week. This assignment is an initiation into the world of web programming.
Project 2 is assigned the second week and due the third week. This assignment builds on Project 1 and provides opportunities to utilize new concepts.
The final project is assigned the third week and due one week after the section ends. This assignment is more open and allows students to use their full toolset to explore topics they are interested in.
The cost of this course is *$0*! All you need is your laptop (Mac or PC; I'll be using a Mac) and the following apps:
Our critiques will be *casual*. This course is meant to be supplementary to your other classes, so it’s my hope to make our projects cause as little stress as possible.
The purpose of our critiques is to analyze the code you’ve written, see if there are ways you can improve it, and share your creative and technical ideas with the rest of the group.
If you’ve never been in a critique before, or are uncomfortable with them, here are some helpful guiding questions:
This course expects no prior knowledge of websites or programming. Some design experience is helpful but not required.
Students are likely to have different experiences in understanding the course material. I have laid out the projects to accommodate all comfort levels, giving additional opportunities to those who want to go further.
This course is either pass/fail or graded.
Students who opt for pass/fail will pass if they attend all class meetings and complete all assignments.
Students who opt to take the course graded will be evaluated based on their personal experience and improvement. An “A” student shows growth across the assignments, pays attention to class lectures, and participates when it makes sense to do so. A “B” student is someone who doesn’t meet the challenge of the assignments, or doesn’t communicate ahead of time that they are struggling. Any student who receives a grade below a “B” will be informed ahead of time, as this indicates more serious infractions like incomplete assignments.
We’ve only got 4 weeks together, so one unexcused absence fails the class. Please check in with me if you are expecting to miss a weekly meeting so that we can make sure you can catch up.
Participation means following along with lectures, tutorials, workshops, and critiques. Everyone participates in their own way, so the expectation is just to stay actively engaged according to your own comfort level.
Plagiarism for code is a tricky subject. You’ll likely be copying code from a variety of online sources, but that doesn’t necessarily mean you’re plagiarizing (unless you’re doing so in lieu of actually engaging with the design challenges at hand).
Here are a few things you should be wary of:
If you are struggling with writing your own code and have to rely on other sources, please don’t hesitate to reach out to me for additional help or make an appointment during my office hours.
See also: John Caserta’s essay “It’s probably not plagiarism” and RISD’s Academic Code of Conduct.
You can always reach me at gdrozdov@risd.edu with questions or to schedule an appointment during my weekly office hours.
If you have any feedback, I have set up an anonymous form that you can fill out at any time. You’ll need to be signed-in to your RISD Gmail account, but your information isn’t collected. Please don’t hesitate to leave comments, positive or negative!
Fall in Love with Websites
WEBSITES ARE SO COOL. If you don’t believe that yet, it’s time to convince you.
Each week, bring in a website you think is COOL (or interesting). This can be for any reason — its design, code, topic, whatever.
In class, we’ll look at the site’s guts (i.e. its source code) to see what it’s doing.
There are no restrictions on what site you choose. If you’re struggling, check out the inspiration section for ideas.
Share your site-of-the-week to this Google Doc before class. Don’t spend longer than five minutes per week on this!
Type and Color
WIKIPEDIA LOOKS A CERTAIN WAY. Why? How does it’s look and layout affect the way you read it? How do these things affect the way you understand the information on the website?
For this project, redesign a Wikipedia page to better match its content. Pick a page about something you don’t know — try out the random article button! (You can use any language, but English is probably the easiest to work with for now.) The page you pick should have at least one image, a couple of sections, and a few subsections. This article is a good minimum size. If you’re feeling comfortable (or bored), use a longer page with more elements (e.g. tables, lists, maps, etc. — something like this article) as your starting point.
While making your redesign, consider the following design and code decisions:
To submit your project, push it to your GitHub repo.
Layout and Structure
WEBSITES ARE HARD TO MAKE. They don’t like to work in the same way as print mediums, and you probably know that now.
Now that you have more tools at your disposal, rethink your website’s layout from Project 1. How can you restructure what you’ve got? How can you make this website actually work for screens?
For this project, either redesign your article from Project 1 or select a new one. Your new website should incorporate the following elements at least once each:
To submit your project, push it to your GitHub repo.
Microsites and Landing Pages
Landing pages are all the rage in web design. They’re basically the posters of the digital world — flashy, attention-grabbing, easy to understand at a glance — but they can do things posters can’t, like resize to fit different screens, reveal information over time, or prompt a user to interact with something.
For this project, you’ll pick a topic of your own choosing. This could be a product, a company, a service, an idea, an artist, a typeface, a marketplace, an initiative, a school — whatever. It can be real or imaginary. Just make sure it’s something you’re actually interested in.
Make a landing page for your topic. To start, design and develop what you see right as the page loads. This could be the navigation, a hero image with text and call-to-action (CTA) buttons, or anything you see fit. Once you have that, expand your site to include more information about your topic. And, make sure your site is responsive! This means you need to use media queries/breakpoints!!
Go as far as you want with this landing page/microsite — you’ll be evaluated based on your growth through the course, and your attention to detail. You don’t need to incorporate every lesson into this site, but try to include a diversity of elements such as flexbox, grid, images/SVGs, links, navigation, etc.
To submit your project, push it to your GitHub repo. If you choose to make this project in Webflow, add a link to your project on your GitHub Pages website. You’ll have two weeks to finish this assignment.