Graphic Design Portfolio » Web Sites

Nrityagram Project Site

admin — Sun, 20 Jun 2010 08:06:22 +0000

Home page to promote documentary

Close-up of header

The Recession Project

admin — Thu, 24 Sep 2009 07:05:59 +0000

Mock-ups depict how the site will look when it goes live
Design uses few images, and is almost entirely CSS-based

See how this site was created: Design Process

Design Process: Web Design

admin — Thu, 24 Sep 2009 06:58:10 +0000

Building a website has multiple steps. The first step is information gathering, which will be discussed in another article. Here, I’m going to display the many revisions the design itself can go through.

The Recession Project is an internet start-up that will be based off a user community. They knew what they wanted to appear. They just weren’t sure how to display it.

I began by creating a mock-up, based on knowledge of the client’s preferences. The front page needed to immediately inform users what the site did. This lead to placing snippets of content on the front page.

On the left is a visual display, using clip-art, screenshots, and dummy text to simulate the look of a finished page. On the right is a “wireframe,” where the page is broken into defined areas and labeled.

After re-evaluating their timeline, the client asked to see a simpler layout that could be employed more quickly.This design was based on a paper mounted inside a black presentation folder. Again, the wireframe breaks down the elements shown in the mock-up.

Unsatisfied with this hastily put together design, I put some more thought into an idea that had been brewing in the back of my mind and produced this:

The client loved it, and this became the working model. The front page became a compilation of links designed to help users ‘dive in’ to the content, rather than trying to display all the content at once.

I then worked with the client to alter the color scheme. The grays and silvers above felt flat, so we tried adding color. Unfortunately, most colors clashed with the bright red of the new logo, or made it difficult to read. After much trial and error, we agreed that darker was better, and settled on a rich ink blue.

This final color scheme and layout was readable, pleasing to the eye, and unique. It requires few images to run, and is based almost solely on CSS coding, making it extremely flexible. The design is being adapted for the Drupal environment.

TheNewCampus E-Mail Newsletter

admin — Wed, 23 Sep 2009 01:31:15 +0000

E-Newsletter for distribution to members of TheNewCampus.org

HTML, CSS, and images render across multiple email platforms
Directs users to take action
Users enter the site through direct links, increasing participation

PowerUP! Central NJ

admin — Tue, 22 Sep 2009 23:28:03 +0000

Designed to facilitate group networking
Integrated with Google Groups and Google Calendar
Graphics derived from Creative Commons images listed on Flickr

The Legionnaire's Lament

admin — Tue, 22 Sep 2009 22:25:17 +0000

Photo collage from multiple sources
Built for Blogger
Inspired by The Legionnaire’s Lament by The Decemberists

Penname: Lady Lye

admin — Tue, 22 Sep 2009 22:12:22 +0000

Graphics derived from artwork by Naoko Takeuchi
Content enclosed in iframe

She Had Not Yet Decided…

admin — Tue, 22 Sep 2009 22:06:40 +0000

Graphics derived from image by Anne Taintor
Employs script/feed from 43 Things

The New School Free Press

admin — Tue, 22 Sep 2009 04:21:20 +0000

Live: http://thenewcampus.org/nsfp

Joomla
Modified template
Supports The New School’s student newspaper
Simple upload process, enabling students to quickly learn and maintain the site

52 Butterflies

admin — Mon, 21 Sep 2009 08:06:36 +0000

Imagery derived from classical painting
Chapter links, character pages, and About the Author
Made for Google’s Blogger.com