This class is based on a series of lessons at the beginning of each section. Each lesson will explore a new concept.
The purpose of the lessons is to develop skills and new intuition for ways to address problems you may have already seen before or issues you will soon encounter.
Code can be very dry but it is my hope that the class will develop many of these technical ideas in a sort of logical progression, so we can spend less time coding and more time developing intuition for how to solve technical issues.
Web design is about the visual presentation of content on the web. This means that web design is fundamentally a visual/aesthetic pursuit.
I mean sketch in two ways: every once and a while, we'll work on a series of thumbnail sketches for either design, interaction, organization, etc. These let you think about more important decisions while ignoring details that you could obsess over for days.
While it is easy to spend a lot of time making a web page, you should strive to work as quickly as possible in this class. Be thoughtful in your design, but quick in your execution.
The point of projects, in this course, is to get your feet wet and to apply the technical and aesthetic parts of the class that we've been addressing.
Do as best as you can, but don't obsess over minute details unless you have a surplus of time. It is more important to publish and fix in hindsight than to get held up on 2px alignment issues.
Also in projects, it's good to be able to manage your time effectively. I know you don't have all the time in the world. Every project is about addressing these practical trade-offs and finding a solution you can be happy with.
There are three things that affect your potential grade for this class. Because it is wintersession, these are all pretty straightforward.
The first is attendance. RISD's policy (and mine) is to automatically fail anyone after two unexcused absences. If you'll be gone or late let me know before I fail you.
Second is participation, which includes not only talking during class, but also being (relatively) alert (i.e. not asleep) and also prepared (i.e. with laptop, power supply, etc).
This also includes submitting your assignments on time! The last thing you want during wintersession is scrambling to finish an assignment on time.
Third is craft. This is measured in this course by the neatness of your code, your attention to detail and the care you place in making everything look as good as possible.
Finally, I may award extra credit based on the inventiveness of your solutions or approaches. Take a risk, try something crazy, it will probably pay off. This is a great way to boost your grade if you are typically averse to public participation (i.e. incredibly shy).
You are encouraged to collaborate with each other while working on projects, although you must all hand in your own projects. If you do collaborate, put the names of your collaborators on your assignments (usually in a comment in the head).
This doesn't mean that you can copy and paste each other's stuff, it just means that you're encouraged to work together to solve problems.
Credit will be assigned, roughly, as follows:
Participation is pretty broad, but it will also include more than just answering questions. Being an active participant in class, (online) crits, and so forth will make the class more interesting and will also make the entire experience easier, on the whole.
History of HTML and the web and also a discussion of the tools used for making websites and a review of commonly used language: server, url, directory/folder, sftp, browser, protocol, http, html, upload, download, bandwidth, index.html, etc.
Also, today i'll take a photo of you, and set you up with an account on the class server. You'll upload your work here during the course of the class.
Your assignment for the first day is to put up a webpage on the internet with content to be handed out in class.
The only other requirement is that it is publicly accessible. You must bring in a url that everyone will be able to access.
The vast majority of HTML is made up of about ten or fifteen tags. Today, we will establish how to use them and how to extend them so that we can make the most of what they offer.
Today's class is mostly about attributes and tag names. Although we discussed these last class, they will also make up a good portion of what we talk about today. We'll talk about how to use them more effectively and also how to manipulate them to your ends.
Think about five different kinds of websites you see from day to day (most blogs fall under the same category, sorry). Think about what sorts of hierarchies exist in these pages and sketch these out. Think about your own information, if you had a webpage of your own, what are all the sorts of things you might include in your site.
After doing that, think about how these map to tags. Which elements on a webpage don't have good tags to go along with them and which do. What sort of metadata would you need to use one tag for another purpose?
Make a page in your web directory called index.html that links to all your assignments. Make the code look as good as possible.
There are four kinds of layout in CSS: static, absolute, relative and fixed. The meanings of these words will be the topic of today's lecture.
Layout, in general, is one of the cornerstones of most Graphic Design. Generally speaking, these layout tools will be one of the most valuable and reused techniques in web design. It is unlikely you will be able to get away from them.
Ignoring details of implementation, make 20 thumbnail sketches for home pages. Under each, state who the webpage is for, what the approximate content is and what the limitations of the site are.
Sketch out five of your favorite thumbnail sketches in code. This means that whatever layout you have picked, you should then try to implement only the layout using elements that you've given a width:height, and x-y position to.
Two of the sketches should use absolute positioning.
Two should use static positioning (margins and floats).
One should use both relative positioning and absolute positioning.
After you have made five pages, link to them from your homepage.
The first thing you can do to snazz up a webpage is to address it typographically. For the longest time this was an impossibility, but now we can do these things with reasonable success.
The first part of this lecture be an introduction to typography and how this language fits in with css and what we know about the web, about attributes and all sorts of fun things.
404 is an HTTP error that a webserver spits out whenever you try to visit a webpage that doesn't actually exist. You've probably seen these before, but today your goal is to rethink their design.
In class, sketch up twenty 404 pages. These have become so default that we don't think about them, but they pose a good typographic challenge. How do you make the page look awesome, how do you keep it from being confused with actual site content?
Bring in something (an object) next class and be prepared to talk about it, why you think it's awesome and how it relates to what you like about (web) design or your own work.
It can be a book, a small sculpture, a piece of candy, a recipe for roast chicken — anything, as long as you can talk about it and why you think it's special.
Why did it take so long to do this? I always forget myself, in the heat of the moment, but then i hit some snag and i need to figure out how to debug what i've been working on because all of a sudden, it stopped working.
So today we're going to address the many ways you can fix problems that may have crept up, we'll do a review of css selectors, and we'll even try to get more clever and clean up (refactor) our css, which, by now, may start looking like a rats nest.
Also today, we'll talk more about what exactly the cascade really implies. I.e. We'll see how it is that you can minimize the amount of css you write and best practices for writing good css.
Return to yesterday's 404 page sketches and implement five of them in html/css. Your goal is to make your css as clean as possible.
Whenever we move through a website, we navigate through a series of steps to get to our goal. Because we do this so often, we don't think of the various stages required to go through this.
With a partner, sketch out the interaction of a site where you buy plane tickets, music, clothes, sign up for a social network, find an author at a library, etc.
When doing this think about what works, what doesn't, why things take two steps while others take ten, etc.
This is our final project, and i'm announcing it right now because i think that it helps to have a grasp on what you're doing early on.
Today in class, i'll be introducing the iTunesLP format as our final project.
What this means is that you will be responsible for making a mixtape for sharing with the entire class. The mixtape should be about 30 to 45 minutes long and should feature the music of more than one artist.
Programming is one of the most liberating things you can do as a web designer because it allows your preëxisting laziness to manifest itself as a more socially acceptable quality: exploitation.
Today, we'll handle two different things: making clicking do something. By something, we'll talk about simple animations. We won't do anything fancier, the whole purpose is to teach you how to use these animation properties to become comfortable with javascript.
We will do all these things with the jquery library
The reason we use jquery is because it allows us to think about javascript in terms of css selectors and simple functions that do what we usually want nine times out of ten.
A well designed page will use animation not excessively, but will harness its subtlety for good (never evil). However doing this is tricky. Think of a page where animation can be especially good or unexpected (think of the Google homepage!)
Your goal is to think of more of these. At least ten more.
This is a one day project: for tomorrow, play around with the animations and either make a bunch of pages to show them off or make a single page that has a bunch of triggers to activate them. Consider the following things:
What makes animation annoying? What makes it awesome? Where is it good to use animation, where is it a bit over the top?
Today, we're going to address some questions that may be lingering
And like salt and pepper, if you can taste them, then you've done too much, but if you can't, then you're probably ok.
Webkit allows us to do CSS Animations which are like JQuery animations, except they're all in css and make a bit more sense (and require less code). We'll be playing around with these today
Part of this crit is also homework, that is, you should spend some time looking at everyone's mix online and from there, you should be prepared to talk about what works and what doesn't about peoples' sites.
Today's class, we'll be going over everyone's mixes and talking about the presentation, code, things that worked and things that didn't.
Today's class should be fun!