Teaching development through design

Over the past few months, my colleagues Chris Courtney of The Chicago Tribune and Yuri Victor of The Washington Post have traveled around the U.S. and Canada teaching designers to code.

It’s been a whirlwind tour and we’re only halfway there.

The SND Tablet Quick Courses have yielded fantastic turn outs with designers who are eager to extend their skills into the digital frontier and beyond. The task each class was given was simple. Build a responsive portfolio site with a focus on tablet design and touch. Well, maybe not that simple. But everyone completed the task.

Photo by Jean-Hugues Roy, École des médias, UQAM. Chris Courtney leads the SND Quick Course at the Université du Québec à Montréal (UQAM).

Photo by Jean-Hugues Roy, École des médias, UQAM.
Chris Courtney leads the SND Quick Course at the Université du Québec à Montréal (UQAM).

We started each class with a general overview of HTML, CSS and JavaScript along with best practices in designing for the responsive web, mainly the tablet web. We then provided a set of tools and a framework called Foundation to get everyone started. The sites each person built were absolutely amazing and the feedback we received has made all of the countless hours of travel and planning well worth it.

The next two Quick Courses will take place in San Francisco (Sept. 14-15) and Chicago (Oct. 18-19). Get more information and register here.

SND.org editor Katie Myrick caught up with us to see how the project was going.

Going into this project, what were you hoping to achieve? In the end, what are you hoping people will walk away with?

At first we thought it was going to be a straight “this is how you design for tablets” class. Then we realized that wouldn’t be as beneficial for people since they would be designing a fictional product. We decided to have attendees build a responsive site framed around tablet design, touch and the responsive web. We also wanted to teach people the basics of HTML, CSS and JavaScript, which we were able to do because we started with an out-of-the-box framework called Foundation.

I hope people will walk away with a feeling of excitement and accomplishment. We wanted everyone to have a functioning portfolio site when they were done. I think we’ve accomplished that with every class. But mainly I hope we’ve sparked people’s curiosity and they will want to keep learning about tablet design and how to build for all platforms.

How did you choose which skills to focus on? And how did you figure out how to boil those skills into two days?

HTML and CSS are really king for this sort of class and should be in every designer’s toolbox at any skill level. The involvement of JavaScript was more of a demo with follow-along practice. We knew starting with a framework was key; that way we didn’t have to start from scratch on how HTML and CSS works. We could just start building and teach along the way. Also, each class learns at a different pace and has different questions, so we constantly adapted the program but stuck to focusing on building.

It’s really tough to get to everything in two days so we definitely had to make some cuts along the way. I think each class got the core of what we were trying to teach, though. We wanted to break down the barrier to learning front end development, give people confidence and give people tools. All while learning the key elements of tablet design. Design is ultimately about functionality so we wanted people to see that the whole time.

What sort of students have you seen at these sessions?

It’s been quite a mix. We’ve had a few really experienced developers but mainly print designers and journalism students. About a third of each class at least had some introduction to HTML or CSS even if that meant just seeing it and knowing what it does. Age range has been all over the place, which is awesome as well.

The prospect of coding can be a very intimidating thought to some, especially for those who don’t have much digital experience. Have you found these courses to be a good outlet for designers, regardless of their skill level?

Absolutely. It’s amazing how we’ve seen people’s confidence grow throughout the class. We’ve had a lot of people simply say they are pumped to get back to work so they can talk to developers and build something cool. That alone is a win because even if they don’t program it they know how it should work. Knowing what interactions are possible and what interactions are expected is at the center of tablet and really all design. Building helps teach that more than just showing examples with a bunch of bullet points and best practices.

You still have a few courses to go. What would you say to someone who is on the fence about attending?

Knock that fence down and get awesome. We’ll be announcing more dates soon so stay tuned!

Here are a list of resources and links that we talked about and used in each one of the classes:

Resources

Foundation

SND Starter Package

Font Awesome

Web fonts

Presentations

Intro to Javascript

Human Interface guidelines

Talks

Dave Wright Jr.’s “Design Is How It Works”

Wilson Miner’s “When We Build”

Why the Washington Post uses WordPress

(Joey Marburger is Director of Digital Products and Design at the Washington Post.)