Jump to:

Basics

Description

Do designers really need to know how to code? In a word…yes. In this course you will learn to create mobile-ready, web prototypes in HTML and CSS. You will understand the overarching structure of web applications and interfaces, and develop the vocabulary necessary to effectively communicate your designs to developers. The class will culminate in creating a prototype of your own design.

Saturdays 9:30am-12:30pm, 2/21-5/4
Room 505

Lara Schenck
lara@notlaura.com

Email list:
uipic-spring15@googlegroups.com

This site:
All information lives on this website. The links page has a ton of resources (though barely scratches the surface!) and I hope to answer most questions about the course itself on this page.

Each week I will post details about the coming class in the Classes section. You’ll notice that future classes aren’t completely laid out yet - I like to plan as we go so that we can account for any new concepts or trends that come up as the course progresses. That being said, if you would ever like to work ahead, let me know and I can provide some guidance.

Class Format

Flipped Classroom

A “flipped classroom” means that technical and linear content is learned outside of class time via tutorials and videos. Learning code itself is easily accomplished on your own, and I want our in-class time to be as valuable as possible, and will be spent discussing concepts and solving problems together.

With that in mind, missing a class is critical. Try not to if you can help it, though the class post will be there for your reference.

Pair Programming

When coding in class, we’ll primarily be pair programming. As the wise Wikipedia states:

Pair programming (sometimes referred to as peer programming) is an agile software development technique in which two programmers work as a pair together on one workstation. One, the driver, writes code while the other, the observer, pointer or navigator, reviews each line of code as it is typed in.

Since our class is somewhat big, when we do code in class, you will pair with someone. Your coding ability doesn’t matter here, but be ready to teach or learn from your partner.

Code Reviews and Q & A

Though the majority of code learning will happen outside of class via tutorials, we will, as a class, work through a specific problem or question or give feedback on a piece of code. I might ask one of you to explain the solution or lead the review.

Course Work

Tutorials and Assignments

As mentioned above, tutorials will be assigned to guide your coding education througout the course. I will also give you “Assignments”, or checklists of coding tasks to make sure you have comprehended the tutorials. These will be graded on completion.

Click-holes

This translates to research, or a “rabbit hole of clicking”, if you will. A huge part of being a good designer and developer is being excited and knowledgeable about what’s happening in the industry. Here’s how to go into a click-hole:

  1. Via Panda (listed below) or some other site, find an interesting article. Read it.
  2. When you see a link embedded in the article, open it in a new tab, but keep reading the article (if you want).
  3. Look at those other links, and open their embedded links.
  4. You’ll probably start researching a specific topic, and learning about prominent industry names and websites.

Each class someone will present a “click-hole” from the week.

Go to a Meetup

Go to at least one Meetup or other industry gathering during the course and report back. See the relevant Links section for suggestions.

Final Project

Create an HTML/CSS prototype ready to be tested by users on all types of devices. You will be evaluated on use of:

  • A grid and layout system
  • Not making it pretty (it should be gray and white with boxes)
  • Content (even though it’s a prototype, real, or apparently real, content is important)
  • Does it work?

The prototype can be for any type of interactive application, be it an app, website, or even a game. The goal is to have something testable that accurately represents the content needed and provides a lovely foundation for visual design. A few ideas:

  • Do you have an idea for an app or website? Prototype it.
  • An unsolicited redesign. Is there a company you would love to work for, and think you could improve their product? Well, do it! “How to get the Work you Want” by Dan Mall, has some great advice.
  • Pick a prompt from briefbox.me.

You should start thinking about this immediately - make it something you are proud of! And utilize any of the skills you are learning in the other UI/UX courses.

Grading

Grading is simply based on attendence and completion. Code quality certainly plays a role, but everyone learns at their own pace and the most important part is your participation.

For full credit, you must:

  • Miss no more than 1 class
  • Complete all Assignments by the end of the course
  • Have gone to a meetup
  • Participated in Click-hole presentations and Code Reviews
  • Completed your final project as described above

Materials

Computers

If you have a laptop, bring it. Though you are free to use the lab computers, I highly recommend that you BYO so that it is set up for your work outside of class time.

If you don’t have a laptop, you will need to bring a hard drive (USB drive is fine, at least 5GB) to store your files and the required software.

Required Software

All of the following are available for free.

Sublime Text 3

This is the industry standard for text editors. The lab computers do not have it (but will soon), so if you are using them you will need to install it on your thumb drive by downloading the application and dragging it onto the drive.

Google Chrome

Chrome is the most popular browser used by web developers. While other browsers do have similar capabilities, we will be using Chrome in class.

Panda Chrome Extension

Panda is a Chrome extension that turns your opening tab into a news feed of popular web design, development, and user experience blogs. Staying up to date with the latest and greatest is essential for this material, and Panda provides a nice, easy way to do so.

Spectacle

Spectacle is an app for window management. While it is not critical to development, it is essential that you develop an efficient workflow, and window management is a key component of that.