I design and build nifty web­sites, apps, icons and more.

Side Projects That Ship at Refresh Portland: Slides and more

I had a great time speaking at Refresh Portland last evening! The presentation I gave differed ever so slightly from the one I gave in May, so here’s a fresh set of slides (plus accompanying notes and citations). You can also check out @RefreshPDX on Twitter, which diligently tweeted much of the proceedings.

Sources, links and credits

  1. Title slide is a stylized version of Detective Comics No. 38 (credited to Bob Kane).
  2. Image created by Mark Jensen based on a photograph by Matt Biddulph.
  3. Still of Bill Lumbergh from the now-classic Office Space.
  4. My source for this quote is Lifehacker.
  5. I don’t actually know which Call of Duty game this is a screenshot of.
  6. Still from Empire Strikes Back.
  7. You may recognize this rabbit from my second game.
  8. Quote taken from a 2009 interview with Drew on The Dropbox Blog.
  9. The quote is from Indie Game: The Movie, the artwork is from Super Meat Boy.
  10. The backdrop is from the website for the wonderful little Perch CMS, the quote is from Perch co-creator Rachel Andrew’s equally wonderful book.
  11. From Adam Savage’s talk, My 10 Commandments for Makers (via Lifehacker)
  12. Getting Things Done by David Allen, The Pomodoro Technique by Frencesco Cirillo.
  13. This photo of Rachel is used in a lot of places, but the high-res version was found in this event description.
  14. Links to image sources: Sarah Parmenter, Massimo Vignelli, Matias Corea and David Gardner.
  15. Jack Kirby quote is from another Lifehacker article, photo by Suzy Skaar is from Wikimedia Commons.
  16. J.K. Rowling said this as part of her Harvard commencement address. Photo found on Wikimedia Commons, taken by Daniel Ogren.
  17. Screenshot of my We Draw Comics profile.
  18. Still from My Neighbor Totoro, quote from Fast Company.
  19. Hooray for memes in HD!
  20. I hope I don’t have to tell you who these four are.
  21. Photo taken by Kent Derek.
  22. This quote is from A Man Without a Country, the illustration is Vonnegut’s rather famous signature.
  23. Closing slide is a stylized version of Star Spangled Comics No. 65. As near as I can tell, the cover art is credited to Win Mortimer.

(Iconography and typefaces are the same as they were at WebVisions.)

The original Mario Maker (sort of)

 As part of yesterday’s E3 festivities, Nintendo showed off a new Wii U game called Mario Maker that will let players craft their own unique Super Mario Bros. levels out of all the basic ingredients from the 1985 original. Watching the trailer brought a smile to my face… not just for how fun it looked, but for reminding me of a little “web app” I made with a friend for a school project.

Peter Wooley and I were sophomores in college, taking a JavaScript class called “Web Scripting II.” Our final project was to break into pairs to make some sort of webpage demonstrating the manipulation of CSS properties with — you guessed it — JavaScript.

Somehow, Peter and I decided to make the Mario Scene Editor, a simple picture-maker using sprites from SMB. Here’s what it looked like in action:

Mario Scene Editor in Firefox 1.5 (vintage!)

It may seem quaint now (those crummy “glass” textures certainly don’t help), but this was quite an undertaking in the days before jQuery… especially for a couple of snot-nosed underclassmen! The tricks we used at the time haven’t aged very well in modern browsers… but surprisingly, much of it still works. You can try it yourself if you’re feeling courageous.

There was a time when the Mario Scene Editor was second only to Ramps as my highest-traffic project. We even entertained the idea of making a new version for fun a few years back (I hinted at this in my very first Dribbble shot). But now, there’s no need! I can enjoy our little app for what it is… a souvenir from my formative years of designerly pursuits, and a fun memory with a good friend.

I guess this means I should buy a Wii U soon…

Tanooki Mario Redux

Sketch Dailies are daily prompts for artists to sketch a variety of subjects. Last Thursday’s prompt was “Mario,” which I couldn’t resist joining in on:

Imagine my surprise when Theodore Taylor let me know that my silly drawing was featured amongst a bunch of amazing Mario sketches on Kotaku!

Just for fun, I made a couple of tweaks to the sketch, adding a containing shape to the otherwise plain sky and a bit of grain to break up the monotony of the flat colors:

Most artists I know could tweak their work forever, but I usually resist the urge. I guess the added attention made me succumb to the temptation this time around!

More Side Projects That Ship at Refresh Portland, June 18

 If you missed my presentation at WebVisions this year, you’re in luck! I’ll be talking about side projects again at ISITE Design on Wednesday, June 18 as part of Refresh Portland. That’s less than two weeks away!

I hope you’ll join me for this free event, and (optionally) food and drinks right after (sponsored by nGen Works). I’d love to hear about your passion project!

Register now   or get more info

(Fun fact: I gave my second talk ever at the very first Refresh Portland event back in 2008. How time flies!)

Side Projects That Ship

Photo by nancyr10Thanks to everyone who came to my session on Friday and the fine folks at WebVisions for having me! I was nervous to give my first brand-new talk since 2011 (!!), but judging from the kind responses I’ve heard from attendees, I probably could have fretted just a little less.

My slides are on Speaker Deck (embedded below) and I’ve included some additional linkage and notes in this very post.

If you missed me at WebVisions, fear not! I’m scheduled to speak at Refresh Portland next month. I’ll post more details about that soon.

Sources, links and credits

  1. Title slide is a stylized version of Detective Comics No. 38 (credited to Bob Kane).
  2. Image created by Mark Jensen based on a photograph by Matt Biddulph.
  3. Still of Bill Lumbergh from the now-classic Office Space.
  4. My source for this quote is Lifehacker.
  5. I don’t actually know which Call of Duty game this is a screenshot of.
  6. Still from Empire Strikes Back.
  7. You may recognize this rabbit from my second game.
  8. Quote taken from a 2009 interview with Drew on The Dropbox Blog.
  9. The quote is from Indie Game: The Movie, the artwork is from Super Meat Boy.
  10. The backdrop is from the website for the wonderful little Perch CMS, the quote is from Perch co-creator Rachel Andrew’s equally wonderful book.
  11. Getting Things Done by David Allen, The Pomodoro Technique by Frencesco Cirillo.
  12. Links to image sources: Sarah Parmenter, Massimo Vignelli, Matias Corea and David Gardner.
  13. This photo of Rachel is used in a lot of places, but the high-res version was found in this event description.
  14. Jack Kirby quote is from another Lifehacker article, photo by Suzy Skaar is from Wikimedia Commons.
  15. J.K. Rowling said this as part of her Harvard commencement address. Photo found on Wikimedia Commons, taken by Daniel Ogren.
  16. Screenshot of my We Draw Comics profile.
  17. Hooray for memes in HD!
  18. I hope I don’t have to tell you who these four are.
  19. Photo taken by Kent Derek.
  20. This quote is from A Man Without a Country, the illustration is Vonnegut’s rather famous signature.
  21. Closing slide is a stylized version of Star Spangled Comics No. 65. As near as I can tell, the cover art is credited to Win Mortimer.

I’m grateful for these lovely icons from The Noun Project, available for free under a Creative Commons Attribution license:

Typefaces used are the same as my website, Depot New Condensed and Source Sans Pro. Occasional bits of cartoony text are in Comicraft’s Scott McCloud face.