Design for Programmers

In the week leading up to the TartanHacks at Carnegie Mellon, I delivered this presentation introducing web design concepts to an audience of hackathon participants, primarily computer science students.

Both the visuals and the content of the presentation were made from scratch and reflect some of the important lessons I've learned in the past years as I've explored the world of design.

Tripi

Tripi was my Yahoo! Hack U 2011 project. In 24 hours, three other students and I devised and built this travel itinerary planner. I worked all around the project on front-end and back-end development, logo and user interface design, project vision, and team management.

Centered around simplicity and automation, Tripi provides useful metadata for destinations and suggesting relevant nearby places as the user completes their itinerary.

Technologies

  • JavaScript
  • Node.js
  • MongoDB
  • HTML
  • CSS
  • Illustrator
Tripi

Coursel →

Calculating GPA is a common task for students, but it can be surprisingly painful even though all it requires is simple arithmetic. Coursel's built to automate this process. It's a "scratch my own itch" kind of thing.

It's fully client-side and uses some interesting technologies, which you can explore on GitHub.

Technologies

  • Backbone.js
  • localStorage
  • jQuery
  • HTML
  • CSS
Coursel

Grapevin

Grapevin was a project to allow people to express themselves through the music they enjoy. It allowed users to easily create an interactive playlist of their favorite songs to share with their friends. After the rise of other social music services like Spotify and Rdio, I decided to cease development of Grapevin.

You can read a little interview about my vision for Grapevin here.

Technologies

  • Ruby on Rails
  • jQuery
  • HTML
  • CSS
Grapevin

Stik.com →

Over summer 2010, I interned at Stik.com, a tiny San Francisco startup using the Facebook network to facilitate business connections.

Leveraging my experience in both design and development, I completely overhauled the design of the site and implemented major functionality.

Technologies

  • PHP
  • MySQL
  • jQuery
  • MooTools
  • HTML
  • CSS
  • Photoshop
  • Illustrator
Stik

Asian Christian Fellowship →

Suffice it to say that I believe in Jesus Christ as the God of heaven and earth and the necessary salvation of the human race. This site was designed and built for a college Christian fellowship.

It uses CSS3 and web fonts to a great degree, with minimal images. With the exception of some minor polishing, the entire design and code process took a day. I constructed a Tumblr blog theme for the announcements page to match the static content.

Technologies

  • HTML
  • CSS
Asian Christian Fellowship

Kittygram! →

Everyone loves cat photos. Don't you love cat photos?

Kittygram! is a simple, fun way to view live cat photos from Instagram users around the world.

And it's open source. You can check out the source code on GitHub.

Technologies

  • Ruby & Sinatra
  • Redis
  • jQuery
  • HTML
  • CSS
Kittygram!

Easy Legal Billing

The creators of this online billing application sought me out for a visual refresh of their landing page.

Technologies

  • Photoshop
Easy Legal Billing

Fire Emblem:
Immortal Sword →

I designed and coded the website for a fan-made spinoff of a popular video game series.

Technologies

  • HTML
  • CSS
  • Photoshop
  • Illustrator
Fire Emblem: Immortal Sword

Symphony

For Yahoo!'s annual Hack U competition, I developed this music recommendation web application in less than a full day. The simple grid of recommendations displays a large number of recommendations concisely and attractively.

Technologies

  • jQuery
  • HTML
  • CSS
Symphony