Web Design

Web design no longer means just designing a website. At one time a website was actually just called a webpage, but when it grew up it became a series of pages. A website is not a singular thing and when designing and building something for the web, what you make and what it is called is largely dependent on your needs.

As designers, shaping content for life on the web we now need to be considering a whole range of topics, whether we are coding or working with a developer. We will cover these topics over the course of this class.

Topics

• Components (websites, single page sites, apps & services, ecommerce)
• Web fonts
• Grids
• HTML5 / CSS3
• Responsive Design
• Content Management Systems
• Browsers

Class Rules

1. This class is a lot of work,
2. so work hard.
3. and be respectful. Yes to me, but also to your peers.
4. Make sure you show up,
5. and show up on time.
6. Work harder.
7. Part of this class is to do something you have probably never done, take chances.
8. Questions. Ask them. Often. Questions are ALWAYS beneficial to the entire class, not just the person asking.
9. Experiment. It’s ok to break things. It can be fixed.
10. Collaborate.
11. Dish it out and take it.
12. Laugh. Don’t Cry.
13. Be opinionated. Debate. Ask more questions.
14. Don’t take it personally.

Communication

It is expected that you as a class will help and support each other throughout this course and others for that matter. That said, I am of course fully accessible in class, at my office, and via email: nickrock@bu.edu. Please do not use any other email address to contact me. All communication should go through my BU email address or via Basecamp.

Project 01 — Autobiographical Representation

Individual · single-page site

You need a website. Not a portfolio site or a blog necessarily, but a website about you.

Our first project will be to design a single page, vertically scrolling, autobiographical site. This is not a typical biography, or documentation of your life. Choose a brief story to tell about yourself. Interesting facts, a hobby, a tv show obsession, a trip you went on, a story about an event that happened to you … the content is up to you, but it should be autobiographical in some way.

Just like your resume tells an abbreviated story about you, so should this page. The beautiful thing about designing this for web instead of print is that your page can be as long as you need it to be. It can be full color. It can use photos and videos. It can also change to fit the screen you are viewing it on.

Telling a story on the web is very different than telling a story in print, particularly on a single page. You need to consider the fact that you move vertically through the content and not horizontally. You can never see the entire page at once. Experience with the content is always through a distinct size and proportion viewport.

Getting started: Write out your story, gather your content in one place. Gather visual inspiration. Create rough wireframes (we will discuss this in more detail). Begin design and layout of the page.

Topics we will cover with this assignment: Single Page Web Design · Wireframes · Grids · Web Fonts · Responsive Design.

Constraints: You must use a 12-column grid. Your design should be between 1140–1280 px wide.

Your grade in this class will be based primarily on the body of work you produce over the course of the class. In addition, the following specific points will be factored into your final grade for the course:

• Attendance. Attendance at each class is mandatory. This class moves quickly and only meets once a week. Class discussion and critique are not things that are easily made up and happen regularly. You must contact me in advance if you need to miss a class. Any unexcused absence will reduce your final letter grade. I reserve the right to determine what an unexcused absence is. If you are late, or absent you must follow up with me, as you will still be responsible for the work. I will not chase you down to catch you up. You should be scheduling appointments around your classes since you know your class schedule, and not the other way around.
• Class Participation. Part of the job as a designer is communicating effectively, on a design team, in a studio environment or with clients. You will be expected to be an active member of the class, particularly during critiques as all feedback is important. Discussion is an important part of the design process. If you are not participating regularly in the discussion you will be asked for your opinion.

You will not be graded on your projects individually. While we will have final critiques for each project, you may continue to work on an individual project and re-present the work at the semester final review.

Check-in and Final Review

We will also be having 1 midterm check-in meeting, March 20, in which we will discuss your status in the class, to ensure that you all know where you stand and that we are all on the same page.

We will have a final review of work for the class. It will take place during our final class. I suggest that you also show your work as part of your semester end final reviews (except seniors and 2nd year grads). After the class final review you will receive a letter grade based upon the following criteria:

• A — You demonstrate an advanced understanding of concepts presented and are able to complete work above and beyond suggested parameters.
• B — You exhibit a more than competent understanding of concepts presented and utilize these concepts in an articulate and noteworthy manner.
• C — You demonstrate a basic understanding of the information studied and apply this information to assigned problems meeting basic expectations but not going beyond suggested parameters.
• D — You exhibit limited understanding of the concepts and complete work below the level required for satisfactory performance.
• F — You demonstrate little or no understanding of course material, show little desire or motivation to complete the work or turn in incomplete projects.

This class requires a certain toolset to adequately participate in and complete assignments.

Books

• HTML and CSS: Visual QuickStart Guide, 8th edition.
• Keith, Jeremy. HTML5 for Web Designers. A Book Apart.
• Cederholm, Dan. CSS3 for Web Designers. A Book Apart.

Services

You will need a Dropbox account (the free version should be fine).

Software

It goes without saying that you will need to have access to Adobe Creative Suite if you don’t already. I don’t expect this to be an issue, but wanted to be sure.

• For code: TextWrangler (free and fully capable); Coda (recommended). Others: TextMate, BBEdit, Espresso.
• For FTP (not necessary if you have Coda, Espresso, BBEdit): Fetch, Transmit.

Courseware

We will be using Basecamp again to consolidate class communications, as a central portal for class discussion outside of class and a digital library of class resources.