Portfolio

Oracle Now iPhone App

Visual Design

View app details

I delivered the visuals for Oracle's flagship iPhone app. This was an awesome project to produce designs working with a huge brand.
The iPhone 4 was announced just a couple weeks before I started on visual design. Knowing that these comps would have to work on a Retina display, I created all designs with resolution independence in mind. Any image can scale up to whatever size you wanted. You could print a movie poster with these comps!

BeerCamp at SXSW 2010

HTML / CSS / Wufoo API

Behold sxsw.beercamp.com

The nclud gang was throwing a killer party at SXSW 2010, and we needed a event page to help spread the word. As the conference and this party is about the interactive community, the page was designed just with web designers in mind. I wanted a page that would delight my peers, so I designed the entire site using HTML elements in lieu of images. The response was incredible. This silly little site was mentioned in several panels at the conference, which led to a tremendous turnout at the event.
The faux 3D block lettering effect seen here is rendered entirely with text-shadow.
Leveraging Typekit, I was able to deliver a rich typographic experience. Working solely with the FF Enzo Web typeface, I mixed weights and styles to give the site a personality that couldn’t otherwise be achieved with standard webfonts.
This illustration — every window, door, and panel — is rendered purely with HTML elements, no images involved.
To create a dynamic list of the teams participating in the beerpong tournament, I implemented a simple sign-up form with Wufoo, that pulled in Twitter avatars.

Mashable

CSS / WordPress Integration

Visit mashable.com

When Pete Cashmore and the Mashable team turned to nclud as strategic partners for their upcoming redesign, I was responsible for realizing the new visual treatment for mashable.com. Collaborating with my peers at nclud, we sought to make an attractive, accessible design that could easily be scanned and read by the massive Mashable readership. Given the great amount of content produced by Mashable writers, I paid keen attention to the visual hierarchy of the articles and features.
As Mashable is on the forefront of social media, I wanted the user interface to be just as forward thinking. CSS transitions are employed here in these navigation elements, as well in other numerous places.
With the variety of sizes of and styles of content types, these various elements are all aligned to a grid, thus establishing visual cohesion.

welovemariokart

HTML5 / CSS3 / jQuery / PHP

View demo

At nclud, we love our Mario Kart. To the viewer, welovemariokart is a simple website that visualizes the results of races. To me, this project provided the environment to experiment with new features of HTML5 and CSS3. Personal side-projects like these are the ideal playgrounds to innovate.
Player results are animated and sorted with jQuery.
Bezier curves are rendered with the HTML5 canvas element.
Selecting settings is done with a drag & drop user interface, using jQuery UI. CSS3 box-shadows are leveraged to indicate UI states.
These buttons are rendered purely with CSS, no images involved. The shading is achieved using a combination of inline box-shadow and CSS gradients.

Curtis CSS Typeface

Typographic HTML & CSS Experiment

View experiment

All of the shapes that make up these letter forms were rendered exclusively with CSS. While this experiment in typography does not have any practical application, it does exemplify that CSS is not just limited to boxes and styling.

GDZLLA

Illustration / jQuery Fun 404 page

View live site

Once we branded the nclud Tweetie/Flickr script as GDZLLA, it was obvious that we needed an adorable mascot to give the product some personality.
Just like the application of GDZLLA itself, the illustration was created organically rapidly. Given a tight deadline, I relied on simple shapes as the foundational forms that make up Smash the mascot. His head, body, and all the parts of his eyes are comprised of circles.

Read more about the illustrative process behind Smash.
Smash takes center stage on the GDZLLA 404 page. Infusing the illustration with jQuery animation brought the mascot to life.

jQuery Masonry

jQuery Plugin / Documentation

View plugin resource

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Gmail Vitamin

CSS Userstyle

Download userstyle

Although Gmail is incredibly popular, it has enough visual quirks to ensure no one is happy with its appearance. Userstyles enable web users to load their own custom CSS on top any site. With this empowerment, I took it upon myself to touch up the interface and make it a more appealing visual experience.

Read more about my design process.
Removing the static underline for links reduces visual complexity, while adding functionality so they can be turned back on for hover states.

These links also use a larger font size, to help establish visual hierarchy.
I brought in the suggestions made by Khoi Vihn, adding padding around all visual elements making the interface more legible.
Buttons now use a softer gradient and proper CSS rounded corners.

Textpattern.org

HTML / CSS / Information Architecture

View demo site

This proposal project was a visual design and information architecture migration for Textpattern Resources, a community run site that catelogs all plugins for the Textpattern CMS. The demo site was completed as part of my coursework at CDIA. Progress on the actual site is tentative.
One of the primary goals for this redesign was to condense the content structure. Whereas the site had six different content types, moving forward, Textpattern Resources would be focused only on cataloging plugins. The main navigation is now just the primary filters that organize the plugins.

Older content and sections of lesser importance can still be access through the secondary nav on the top left.
To reflect the minimal and lightweight nature of Textpattern, I avoided using heavy amounts of imagery and instead focused on the typography. As this site’s primary purpose to organize and present plugins, by keeping it simple, users can better scan and consume the content of each page.
Focusing on usability, a large portion of this project was aimed at simplifying functionality and removing excess content areas. The home page reflects this paradigm, offering a simple welcome blurb that directs new users to jump right in.
The typical tag cloud is actually counter-productive. By making the most popular tags visually larger, it over-emphasizes the content that is already popular. In the case of a library or directory like Textpattern.org, the less popular tags deserve just as much attention. To visualize the popularity of each tag, a simple bar graph is employed.

Craigslist Clean-up

CSS Userstyle

Download userstyle

Poor ol’ Craigslist. Everyone picks on it for being ugly, but no one is willing to get their hands dirty cleaning it up. That is, until I discovered it could be done with userstyles.
Look familiar? The userstyle adheres to the current Craigslist visual brand (or lack there of). My goal was not to completely overhaul the interface, but to enhance and address every detail in order to provide a more legible and aesthetically pleasing website.
By setting the total width of the content fairly thin, lines of text are kept to appropriate length, thus improving legibility.

Textpattern Forum

CSS

Visit the forum

Too often, forums aren’t given the proper attention they deserve. Consider how many forums you might have stumbled upon. Being an active member in the Textpattern community, I took the initiative to contribute to the cause and re-style the community forum.
Once you are a member of the forum, you can set this style as a preference. Go to Profile > Display and select tabula as your preferred style.
Blockquotes like this one are integral to the communicative nature of the forum. By utilizing border radius, the shape of the quote points right to the speaker.

Mobile Fuel

Facebook Application: Visual Design

Mobile Fuel is a Facebook application for AT&T mobile phone customers. Mobile Fuel users receive exclusive offers, including free ringtones, free mobile games and more.

In addition to touching up the aesthetics of the app, I was charged with aligning the visual brand of Mobile Fuel closer to its parent company AT&T.

Textpattern Admin Themes

CSS / PHP

View demo and download themes

Textpattern is a flexible, elegant and easy-to-use CMS. I love the product and it’s my go-to CMS of choice. Like other designers, I saw plenty of areas of improvement in its user interface. These themes were developed in CSS for the administration back-end. Read more about my design process in Textpattern Interface Case Study.
Prior to version 4.2.0 there was no accessible way to implement custom themes. So in addition to the CSS themes, I developed a plugin to allow users to select and edit the admin themes from within the Textpattern back-end.
Images like the gradients in these buttons were inserted directly into CSS through data URI encoding. This allowed me to use simple imagery in the CSS without having to link to an external resource. In turn, users only have to worry about the CSS file, no fussing with images.
So many flavors to chose from! In attempting to create the ideal one-to-rule-them-all theme, I pursue several different directions. The result was 11 distinct themes, each with its own personality.