Portfolio

Mashable

CSS / WordPress Integration

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.

The Grey King

Book Cover: Layout / Illustration

The Grey King is the fourth novel in Susan Cooper’s five-volume fantasy saga The Dark Is Rising. Set in the Welsh countryside, the story follows 13-year old Will Stanton in his quest against the evil Grey King, lord of the Dark. Student work.

As a winner of the Newberry Award, this book is a classic, so I chose iconic imagery that would stand the test of time.

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

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.

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

View App on Facebook

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

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.

Render Plus Systems

Identity & Logo Design

Render Plus Systems develops computer-aided design and graphics software. Their primary products are tools and plug-ins for Google SketchUp, a 3-D modeling application for architects and civil engineers. The identity uses basic flat shapes that represent the building blocks of 3-D modeling. Concept work.