DD2-background-full.jpg
DD2-background-full.jpg

DrunkDuck.com


SCROLL DOWN

DrunkDuck.com


DRUNKDUCK.COM

Working as an Art Director at WOWIO, an e-book publisher and distributor with larger media aspirations, redesigning a site called DrunkDuck.com, one of the largest webcomics-hosting sites (about 100,000 users, about 25,000 comics). They were reprogramming the site from the ground up in Python, and wanted a design overhaul to go with it. During the redesign they decided to re-brand to "The Duck Webcomics" in order to appeal to larger audiences.

The original DrunkDuck, built before they acquired it, had been clattering along for a few years on a patched-together code base, in the grand tradition of seat-of-your-pants development. The old site needed to be rebuilt with new code, new database structure, etc., to modernize it and improve performance and scalability for the long term.

I did a lot of work on this project, from redesigning the original Drunk Duck logo to completely overhauling the site design from the ground up (as lead designer and art director, with other people doing the actual coding, just to be clear about that – I'm no programmer but I did dabble in my youth, so I interface pretty well with developers).

I answered to a creative director, but I was the lead designer, my responsibilities included logo design (two, in fact), graphic design, art direction of original spokes-cartoons, icons and badges – really every pixel of design on every button and headline – saved out and delivered as assets to the dev team for implementation. Quite a project.

 The Front Page, with login module, Twitter feed, a Featured Comic slider, Top Comics, a site blog, and nav to the major sections.

The Front Page, with login module, Twitter feed, a Featured Comic slider, Top Comics, a site blog, and nav to the major sections.

 Interior pages. A video collection wall; a comics browser with tag filters; a podcast page; a comic reader interface (the white page); a forum section with two page views.

Interior pages. A video collection wall; a comics browser with tag filters; a podcast page; a comic reader interface (the white page); a forum section with two page views.

 A series of badges designed for DrunkDuck.com, to serve as branding for the various content sections of the site.

A series of badges designed for DrunkDuck.com, to serve as branding for the various content sections of the site.

BELOW: Design sequence, from low-fi wires to hi-fidelity mockups, asset output and handing everything over to the in-house developers.

 Early, rough wireframes.

Early, rough wireframes.

 Content wires, working out exact sizing and spacing.

Content wires, working out exact sizing and spacing.

 Tightening up with typesetting and actual graphics.

Tightening up with typesetting and actual graphics.

 Sequence with hi-fi mockup and guide notes for the devs. 

Sequence with hi-fi mockup and guide notes for the devs.