I made Untitled Publisher’s site as part of their company and brand announcement. Based on brand work by Kyle McKernan and Chris Dwyer, I built a responsive site with pages for each game and a user-friendly backend. I like the way the key art reveals a short video loop on hover/touch, and then plays a trailer on click/tap.
Responsive promotional site for Bravery Network Online by Gloam Collective. Gloam provided the art and basic layout as a Photoshop file, which I re-implemented and expanded as a responsive site. In addition to small animations throughout the site, I coded the dialog interaction that gives a little of the flavor of the game on the way to a newsletter signup.
Responsive promotional site for Superhypercube by Polytron. I based the UI on the game’s aesthetic, working with Phil Fish to meet their needs. There’s a pseudo-3D CSS animation, perspective shifting based on mouse position or device tilt, and a lot of sleight of hand to achieve the glowing, film grain aesthetic in a performant way.
Responsive promotional site for Mineko's Night Market by Meowza Games and Kukubee. Meowza provided the art and layout as a Photoshop file, which I re-implemented as a responsive site. I animated various elements, including parallax scrolling on the header, squishy buttons, and wiggling stars.
Responsive promotional site for Caves of Qud by Freehold Games. They had installed a basic Wordpress template, which I re-designed to match the game's aesthetic. I also worked with the Freehold team to help determine what content to display, and how.
I'm particularly pleased with the scanline effect, which is just made of CSS styles, and the Roadmap page, which needed to display a lot of information in a concise format.
Responsive web application for OOTU, inc. I developed this application in vue.js to work with OOTU's database backend via JSON APIs. xray.games is a tool for finding video games you'll enjoy by defining and exploring unorthodox connections between them. The application shows information about games and their Traits, allows you to explore the database through multiple avenues, and add Trait-to-game relationships. Emphasis on smooth animation, response time, and user experience.
Responsive site based on Action Button Entertainment's game VIDEOBALL. Working under director Tim Rogers, I assembled this site in just a couple of weeks. I created the GIF for the title bar, and re-created many aspects of the game's UI in HAML/SCSS.
As of May 2015, I've replaced most of the graphics with SVG, and am adding additional dynamic content.
I used ScrollMagic to create the effect of the red and blue circles coming together at the bottom of the page. There's a ScrollTrigger-based CSS animation for the sticky header. CSS animations create other effects throughout the site, including the mobile menu, SVG mobile menu button, and other touches.
All site content is editable by the client through a customized Kirby backend.
Responsive personal site for video game producer Felix Kramer. Built on the excellent Kirby CMS, which I chose for its flat-file system and ease of client upkeep. Easily-maintained blog, portfolio, and other pages. Used Barba.js to progressively enhance page transitions, and anime.js to create subtle mood animations.
Art by David Hoskins. I laid out the full vinyl packaging for Double Ferrari's self-titled debut album, including sleeve, liner notes, and side labels. Then I took the cover art, separated it into layers of color, and made a promotional website at doubleferrari.com that moves in relation to mouse movement or device tilt. I'm so proud of this project!
Worked with Jace Bartet from the band to design this shirt. His request was, "Like a NASA shirt from the 80s, but even more rock and roll." I think we nailed it, and the first printing sold out almost immediately.
Responsive promotional site for Dim Bulb's upcoming game Where the Water Tastes Like Wine, directed by Johnnemann Nordhagen of Gone Home. Used ScrollMagic to create a scrolling reveal at the top of the page. December 2015.
Multilingual, responsive site for Japanese-based publisher DANGEN Entertainment. The backend allows the client to add and maintain game pages, blog posts, and other information in English, Japanese, and additional languages. I worked with DANGEN to design something that would express their values of traditional respect and dignity as applied to the modern realm of video games.
I also helped DANGEN find another company to help develop their branding.
Responsive promotional site for middle grade author Caleb Zane Huett. We worked together to implement his vision of a site that he hoped would be a modern version of the "classically-bad website." The goal was to communicate his humor and warmth as succinctly as possible, while generating interest in his forthcoming book Top Elf. (I've read early drafts; it's funny!) I used modern web animation techniques to evoke the sort of brokenness associated with late-90s personal sites. If it looks broken, we did it on purpose! There are things that happen when you click, text you can reveal by highlighting, and various other silly things. We laughed a lot while making this!
Back-end content and distribution was provided skillfully by Mike Huffman at OOTU.
My friend Caleb Zane Huett and I do a podcast about Sonic the Hedgehog (mostly). I made this album art in Photoshop, and I record/edit the podcast in Reason. There's technically a web site, but it's just a Podcast Generator template, because hey: I make web sites all day for work. When I'm at home, I just want to podcast.
In less than a week, I made this site and accompanying flyer for the annual Athens Game Jam. The coordinator of the Jam, Stephen Borden, gave me a week to make it. I said I would do it, but only if he gave me a prompt. The prompt he gave me was "floating islands."
In the jam spirit, I tried out a bunch of new stuff. I'd never done anything with ASCII art or CSS Animation prior to this project. I was generously given access to the alpha version of Monodraw, an app for drawing ASCII art, which I put through its paces. Then I copied groups of characters into Photoshop, arranged and colored them, and then arranged those elements into a flyer and this site.
When you scroll the page, it doesn't move down, it moves things around. My favorite part of the site is that, if you leave the page up for a couple of minutes, the elements begin to glitch out, which is all accomplished with CSS Animation and Transformations.
Hot Corner Hip Hop / Lingua Franca EP Release Flyer
Illustration by Erin Stacer. I designed and laid out the flyer for printing.
Real-Time Comments in React Exercise
Responsive application test built in React. I coded this in a few days, with the goal of emulating Medium's highlighting & commenting system. Far from perfect, but I started out knowing nothing about React, and learned a lot along the way. Highlight some text and add comments in real-time. I'm not moderating the comments very often, so apologies if anyone posts something rude! December 2015.
Proposal of a logo for a local business that I made with Brent Blalock. I'm not supposed to discuss the product itself, since it hasn't been made yet. We did several variations with background colors and type treatments, but this is the basic idea.
I started with a reference photo of a woodpecker and a thumbnail sketch by Brent. Then I worked between Photoshop and Illustrator to create this silhouette, finding the iconic balance between abstraction and realism.
Avid Bookshop - "An Evening With Mark Z. Danielewski" Ticket
Illustrator & Photoshop.
On May 18, 2015, Avid Bookshop hosted author Mark Z. Danielewski at the incredible Stan Mullins Art Studio. We sold tickets to the event, and wanted something special. I replicated elements from The Familiar's cover and interior to create a ticket aesthetically consistent with the book. It also includes a few visual references to Danielewski's earlier books. The ticket was a big hit with attendees, many of whom said it would be a keepsake for their scrapbooks
Avid Bookshop - "She Is Fierce" T-Shirt
In one afternoon, I iterated on a basic idea by the designers at Satisfactory to design this shirt for Avid Bookshop's limited edition Independent Bookstore Day 2015 T-shirt.
Action Button Entertainment Logo
Illustrator + Photoshop
Collaboration with director Tim Rogers and artist Brent Porter, we've developed this logo and branding for Action Button Entertainment in Oakland, CA. This logo was painstakingly calibrated in Illustrator for precision measurements and kerning.
Athens Game Jam 2015 Flyer
Photoshop + Monodraw
This is the flyer made to promote the Athens Game Jam in the event of an electromagnetic pulse.
Or in the event of a wall.
Bugspeed Collider Box Art
Part of the Bugspeed Collider project for Skelefactor Games. Illustrated and inked by Brent Blalock, I did the colors, text, and final design.
Bugspeed Collider itch.io Page
Photoshop + Web
I think it's usually best to focus on designing something so that it is clear and identifiable in a single color. Even if a logo is printed in black and white, in must be legible. Then, perhaps, you can play with more complex color ideas.
This is my first major foray into customizing letter shapes. I started with Gill Sans, did the basic arrangement of the letters, and then converted everything into vectors. By adjusting the points of the letters a bit at a time, I was pleased to be able to make things fit together in interesting and unique ways.
Avid Bookshop Event Card
Each month, I design a small double-sided card with information about Avid Bookshop's upcoming events. These are printed at Bel-Jean, and given to customers at checkout.
Apartment Finder Ads - Green Properties
Illustrator + Photoshop
When I worked at Green Properties as Property Manager, I designed all the marketing materials. These are half-page-width ads for Apartment Finder magazine. Each would sit next to the AF boilerplate bullet points and general information.
I designed these ads to both match the overall brand, and to stand out amongst the pages of cluttered, muddy ads that fill the Apartment Finder. Simple colors, erring on the side of being less informative in order to provide a sense of spaciousness, organization, and unusual attention to detail.
These ads were very successful, and our referrals from Apartment Finder increased substantially after running these.
One of the first things I did for Green Properties was to create a new brand identity for the company and its properties. The parent company owns and manages two properties (Cross Creek Apartments and Surrey Square Town Homes).
I started with the Green Properties logo, including the 3-rectangle emblem, inspired partly by Lincoln Logs roof shingle blocks, and intended to show a company that is well-organized and precise. It was an intuitive, simple design, but one that lent itself well to a variety of interesting marketing materials based on the same angled blocks.
I then developed the property-specific logos as variations on the theme, with a recognizably consistent type, but their own overall shapes. We wanted people to understand that these properties belonged together, but to maintain separate identities and ensure recognition of the signs from the street.
This brand has been in use for over 4 years, and has been well-suited to the business and properties.
One of many designs based on customer needs. One of the most frequent requests from potential renters is for detailed measurements of their rooms, so that they can plan for furniture. Based on an old, low-resolution sketch of the basic floor plans, I took detailed measurements of each wall segment, re-drew the layouts in Illustrator, and labeled everything as clearly and usefully as possible. The drawings include light touches of fun, which were often pointed out by the college-age residents of the apartments as something they appreciated.
I put a lot of effort into anticipating and pre-emptively providing for residents' needs during my tenure at Green Properties, and this was just one small part of that ongoing work.
I've been hand-drawing and photographing little bits of text for the last couple of years, and then posting them to Instagram and Tumblr using the iPhone app Oggl. (That's a lot of tech words all at once.)
I do them all very quickly, based on things I'm reading, or on little phrases that occur to me. This is something Jacques Derrida wrote.
Gel Pen on Paper + Oggl + iPhone
Another hand-drawn picture-poem. Also based on the works of Jacques Derrida. Photographed, edited, and published with my iPhone.