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

Bebop and Rocksteady

Last week was all-TMNT for Sketch Dailies topics, so I whipped up this Bebop and Rocksteady artwork for Friday’s theme. It was one of several sketches featured by Sketch Dailies and ended up getting a surprising amount of love on the Twitters compared to other stuff I’ve shared.

I also shared a WIP version earlier that day:

With these drawings I was trying to think less about the accepted design of either character and more the aspects of them relative to one another that stood out to me in terms of defining shapes and personality. I’ve been inspired a lot lately by Robert Iza’s process for breaking a character down into a set of building blocks you can rearrange at will. This has helped me learn to be more adventurous with character design in general. In this case, it allowed me to reduce Bebop’s overall size in order to contrast a bit better with Rocksteady.

This is also the first time I’ve used a fantastic new Photoshop brush, the “inking master” from Marco Caradonna’s “Essentials” brushset. Once I round out its shape a little, it’s the closest I’ve come to the feel of my trusty Speedball B6 pen nib on smooth bristol. Though my inking is still a bit crude (on a good day I might call it “honest”), I think it feels much more confident than in other recent drawings of mine.

Marvel (Mostly) Unlimited

I’ve been an ardent comic book reader my entire life, but only recently did I begin to shift my monthly comic book habit from print publications to digital. Several factors influenced that decision, among them the availability of the Marvel Unlimited app for iPad.

 My taste in comics is somewhat eclectic, but I’ve been a Marvel fan since the 60s… or at least, it feels that way! Used paperbacks of early Fantastic Four and Spider-Man adventures were my first exposure to superheroes, and it would be years before I realized those stories were decades old. I remember being surprised and disheartened to discover the enormity of each character’s expansive saga. It seemed an impossible task to collect — let alone read — any of these series in their entirety.

Fast-forward to today, and I’ve got affordable, unfettered access to thousands of Marvel Comics on a device about the same size and weight as a trade paperback. How great is that?!

And it is great! But it could be even better. So I thought I’d share some of my ideas for how the “House of Ideas” could improve the experience.

Here’s the thing, though: I tend to find unsolicited redesigns kind of obnoxious. Many of them offer a barrage of static mockups that throw whole nurseries out with the bathwater, accompanied by condescending text that berates the original designers for their supposed lack of vision, expertise or insight. As Khoi Vinh so aptly put it a few years ago:

…it helps no one — least of all the author of the redesign — to assume the worst about the original source and the people who work hard to maintain and improve it, even though those efforts may seem imperfect from the outside.

The truth is that I really dig this app. I’ve used it to read hundreds of terrific comics. My goal in writing this post is to celebrate the app by critiquing the parts I think could be better. The modest mockups I’ve chosen to include are meant to visualize those ideas succinctly and practically. I encourage you to try the app yourself to see how they compare to the product they’re based on.

So face front, true believers! It’s suggestion time…

13,000 needles in a haystack

The greatest strength of Marvel Unlimited — its size and scope — is also what makes it difficult to traverse. Whether you’re an old-school fanboy or new to comics, you’ll probably have some trouble navigating 75 years’ worth of mostly pre-digital publications.

To help guide otherwise directionless readers, the app’s Home tab features a carousel (a la the App Store or iTunes) with a handful of promotional features:

  1. “Enhanced Features,” which showcases comics with audio and/or video extras. I love geeking out over special features, but they’re rarely my primary reason for reading or watching something.

  2. “Editors’ Picks,” which is easily the weakest of the three. While it currently houses a fine selection of Mark Waid Fantastic Four books, there’s never an explanation as to why. Who is this mysterious editor? Why were these books chosen?

  3. And finally the “Marvel Unlimited Reading Club,” a tie-in with a Marvel podcast and thusly the most helpful and justifiable of the three carousel features. The theme it presents is clear, consistent and usually character-driven. This feature clearly presents both the “what” and the “why.”

Marvel’s franchies are so darn popular these days, there should be plenty of opportunities to connect newfound interest in classic characters to the books (and creators) responsible for their inception. Some hypothetical features I’d devour without hesitation:

I’m sure every fan reading this just thought of a dozen more examples. There’s even a regular Comics Alliance column that attempts to fill this need. But with Marvel’s rich history of Bullpen Bulletins and roster of outspoken and articulate creators, who better to direct and inform?

Flipping through the longbox

Discovery doesn’t end at the home screen. The app’s browsing interface also presents some challenges for the user. You can browse by a few different attributes, you can search (which is more of a filter or dynamic search) the current result set, and you can re-order those results by publication date. Sometimes, this works fine. But often, it’s kind of a headache.

The first challenge is differentiating multiple volumes of the same book. Every comic book fan has that friend or relative who claims they once owned a “Number One” of Spider-Man, not understanding that the most popular series often have multiple volumes (and most of those “first issues” are probably worthless). But who can blame them? It’s confusing!

Marvel Unlimited helps the reader navigate by listing not only the title, but also the publication dates. While this information is helpful, it would benefit greatly from visuals. ComiXology shows thumbnails representative of the general artistic vision for the volume, which helps out a lot while browsing. DRM-free comic readers like YACReader and Comic Zeal leverage cover artwork to achieve the same goal, sidestepping the need for a designer to prepare thumbnails for each and every series. This imagery makes it way easier to differentiate similarly named series:

Once you find the volume you’re looking for, finding the oldest or most recent issue is pretty straightforward. But if you’re interested in something mid-run, like Walter Simonson’s Thor (which begins at issue 337), it’s kind of a slog. You can filter by character, creator or release date, but there’s no easy way to jump to a particular issue. Eventually, you’ll just have to squint at issue numbers as you scroll.

A dedicated search interface could allow me to search for “Thor 337.” Maintaining the filter search field while browsing a series could also help. Another option might be to let users hop between large spans of issues with a tap:

Indulging your inner Taneleer Tivan

My favorite aspect of Marvel Unlimited is that I can “binge-read” comics the same way I might binge-watch a series on Netflix. I can read an issue, then immediately read the next (or save it for later). That’s not just convenient, it’s magical! It changes the way I read comics.

But when I stop reading, those stories fall back to the catalog like grains of sand to the shore. Unlike other iOS comic readers, Marvel Unlimited does not save your progress or reading history (at least not visibly). This makes it difficult to tell where you left off, especially for multi-issue stories.

Slightly altering the appearance of comics you’ve already started or finished would greatly streamline the act of browsing:

Functional benefits aside, these improvements might also give the reader a more tangible sense of accomplishment for completing books, runs or entire series. We could even get a little silly by awarding No-Prizes accordingly, further encouraging exploration of the catalog:

Of all the app’s interfaces, the Library would benefit from visual progress indicators the most. This is the reader’s Netflix-style comics queue, and also where they manage books they’ve downloaded for offline reading (which comes in handy on the train).

Managing the Library can be tricky. While Netflix groups TV shows by season and series, the Library shows all issues individually in a flat list or grid. “Offline” books are shown twice (once in their own section, and once in the main list). To keep track of what you’ve read or to find things quickly, you must manually delete saved issues frequently (or forego the library altogether).

By embracing the aforementioned progress indicators, grouping saved issues by series and eliminating redundancy between online and offline books, the Library could be easier to navigate while requiring far less management on the part of the user:

Never miss an issue

One of the biggest recurring criticisms of Marvel Unlimited are occasional mid-series gaps (understandable, given the sheer size of the catalog). Part of the problem is that these gaps aren’t obvious at first glance. It is far more frustrating to discover them mid-story than it is before you’ve stared reading.

We could sidestep some of this discouragement by highlighting series gaps (in this case clearly the work of Hydra), ideally with the option of being notified when they’re filled:

Notifications would also be a welcome compliment to a series subscription feature. Even as a frequent user and recipient of the service’s weekly email newsletter, I still seem to miss new additions to my favorite series on occasion. I’d love for subscribed series to populate my library automatically.

In a similar vein, it seems odd that I can only jump to the Marvel Comics app by ComiXology to buy à la carte issues when they’re already available to read for free. Why not promote upcoming issues for those series that are just too good to wait for?

Friendly neighborhood designer-man

The most enduringly popular superheroes are those that gracefully endure reinvention while maintaining the core concepts that made them successful in the first place. I’d argue that no one was better or more prolific at creating those sorts of characters than the team of Stan (The Man) Lee and Jack (King) Kirby in their heyday at Marvel. To have instant, affordable access to so much of their oeuvre, and the expansive universe they inspired, is truly astonishing.

But I’m a passionate, opinionated guy who happens to design interfaces for a living. So I can’t help but notice when the reading experience isn’t quite as nice as ComiXology (at least pre-Amazon), Dark Horse Digital or YACReader. This ends up coloring my recommendation of the service in spite of my enthusiasm for its content. I’d love to eighty-six those caveats in the near future.

Whether my suggestions prove to be prophetic or completely off-target, I’m excited to see where the team at Marvel takes the service next. Make Mine Marvel!

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!