NickSchaden

General Assembly is one of the most well known and established development and UX design education providers in the country. In 2012 through 2013 I worked at GA as a part time instructor for their ten week front end web development course aimed at developers, designers and entrepreneurs. It was a great experience which inspired me to create a class of my own in 2014. It’s a day-long introductory responsive web design workshop, with only basic HTML and CSS coding knowledge as a prerequisite. I created everything from scratch: curriculum, exercises, training materials, and the slide deck.

Responsive web design has been one of my primary focuses for years at work, and has reinvented how I approach web design and development. So my goal was to cover the evolution of the web, why RWD is important, some basic coding practices along with some good examples of RWD dispersed throughout.

I started with a basic class outline, which I then fleshed out with progressively more detail until I was at the point where I could create a rough Keynote slide deck with little styling.

That lead to a loose, flowing set of “speaking notes” where I fleshed out everything I’d want to cover. At this point, class content was well defined, and I shifted from writing and speaking to coding. I created seven independent exercises where students would apply core RWD concepts. Topics included media queries, adjusting existing fixed designs to a responsive layout, and responsive grid frameworks. Most were brief, no more than twenty to thirty minutes of a student’s time to reinforce an existing concept.

For my final step, I crafted a consistent visual design for the slides. I took my time here; based on my previous teaching experience at GA, having a consistent, distinctive look can keep students engaged. After playing with various colors in Photoshop, I settled on a simple color palette: monochrome text on deep blues and purples to maximize readability with occasional orange highlights for warmth. Proxima Nova was an obvious choice for slide text; highly readable yet versatile. For accent text I used Adobe Calson italic, a older classic to contrast against Proxima. Finally, to keep things fresh and inject personality, I added a movie still to accompany every major section of the class in the background. The stills riffed subtly on the section’s themes and were heavily blurred on content slides to avoid becoming a distraction.