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.

The goal of this course is to introduce you to design for the web. This is not a class to teach you code or the full process of creating a website. We will approach web design through the lens of the graphic designer, and discuss how to design with code, technology, and trends in mind. You will be exposed to code through a series of code writing workshops but the focus is on design for the web.

Topics

• Components (websites, single page sites, apps & services, ecommerce)
• Web Typography
• Grids and Layout
• Responsive Design
• Introductions to HTML5 / CSS3
• 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.

Visiting Lecturer — Code Workshops

We will be having a guest lecturer conducting the code workshops, covering HTML and CSS. The lecturer will be Evan Warner. Evan is a Senior Developer at Arnold Worldwide. Evan has also worked as a designer and is a graduate of Rhode Island School of Design.

“It’s sometimes hard for me to decide whether I’m a designer or a developer at heart, because at any given moment I can look at the world through either pair of glasses. At times I find myself inspecting the code of random websites to see if the markup is semantically correct, and sometimes I’ll browse the aisles of liquor stores just to admire the shapes of bottles. Refactoring code and optimizing website performance brings great satisfaction to a particular part of my brain, and I notice and vocalize (with contempt) the overabundance of Papyrus in the world. I cannot imagine being one without the other, though, and my passion lies in the merging of the two disciplines. Imagining, strategizing, planning, designing, implementing, testing, populating, analyzing and maintaining a living, evolving website takes a broad range of unique but related skills that I’ve refined in the nearly 15 years since I first wrote a table tag.”

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.

Project 02 — Medium

Individual · six screens

What does it mean to read content on the web. We are reading on devices of all shapes and sizes that the content will adapt and change to fit. How can these experiences be the same, or how can they be different. For years written content on the web has been burdened with conventions of print and crippled with the constraints of the web. However, with the rise of responsive design, high resolution screens, nearly limitless typographic choices and more powerful code we are able to imagine new experiences that fit their intended medium.

For this project, you should take a piece of long form written content from medium.com and explore the design of this written content. You must use the text in its entirety, as well as included imagery. You may however add images to supplement the text if it doesn’t contain any imagery.

In addition to the individual text, you must design a front page, or entry page. What does a page of many articles or writings for you to choose from look like?

Requirements: For the single writing page and the front page of multiple, you must create 3 versions: 1 for the largest scale resolution or desktop computer, 1 for a tablet view and 1 for mobile view. In total you will have 6 screens.

Considerations: Font choice — choose something available and accessible via web technologies · Images · Responsiveness · Commenting, sharing, saving or other interactivity.

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-ins and Final Review

We will also be having 1 midterm check-in meeting, October 16, 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. 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.

Evaluation: Learning Objectives

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

Books

• Duckett, Jon. HTML and CSS: Design and Build Websites.
• 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: CodePen (web-based, with live preview); TextWrangler (free and fully capable); Coda (recommended full-featured software, built-in FTP). 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. You all will have access to our Basecamp site after the first class; this will act as a central portal for class discussion outside of class as well as a digital library of class resources, such as this syllabus, project briefs, certain readings as well as our class calendar.