Context

An assignment in Georgia Tech's Visual Culture + Design course. The goals were to demonstrate knowledge in design grids, typography, and HTML/CSS by choosing an Atlanta neighborhood and detailing it in an online guide.

The project included the research and collection of information regarding the neighborhood, the visual design of the guide, and its implementation in HTML using CSS. The visual design focused on typography, typographic hierarchy, and grid.

Approach

Characterizing a Neighborhood

Having recently moved to the Virginia Highland neighborhood, also referred to as The Highlands, I had a sense of pride and desire to explore my new space. This assignment provided me with an excuse to investigate, analyze, and characterize The Highlands while learning how to convey this through design.

In retrospect, being a part of the culture I was depicting certainly influenced my depiction. Just as Andrew Blauvelt suggested that Ian Anderson's trip to Japan corrupted his naivete of Japanese culture, I had let my knowledge of this space influence my depiction. I was too familiar with it to take only the obvious characteristics; in my case, I was able to ignore those and use what I wanted. It could be argued that I misidentified the culture in this neighborhood by making it an extension of my own personality. By choosing my own living space for this project, I was in fact portraying myself and what I saw myself to be. This became clear in conversation with an Atlantan that had described The Highlands as a modern environment populated by pretentious wealthy twenty-somethings and not the historical, easy going, green neighborhood I wanted it to be.

Defining an aesthetic

Being my first attempt at final design, (as opposed to early design such as content design, layout, and structure) I began by examining my favorite web designs. I have always been fond of how NYTimes.com is styled but could never place the reasons; that is, until I learned the fundamentals of grid, heirarchy, and type. I was able to appreciate a very well designed grid and proper alignment and the prodigious amount of information effectively displayed is something I began to admire.

Richard Buchanan defines successful attributes of good design as usefulness, usability, and desirability. Visual style plays a large part in the second two, however a beautiful website that doesn't serve some utility won't be visited; a balance of all three qualities must be achieved. In this project, I wanted the content to become a utility for visitors and current residents of the neighborhood. To approach this, I included an embedded Google Street View map and also adopted The New York Times 36 Hours theme for travelers. My version lists an entire day of activities for different visitors such as college students.

Process

I began by researching demographics, historic details, and images of the neighborhood. Combining this content into a grid with limited color produced a sterile design. In the second iteration, I broke the grid and began to explore color schemes that were professional and natural.

I view The Highlands as a relaxed community of young professionals and I wanted to choose a layout that subtly displayed this. The grid can be seen in all pages and has been broken in places to relax it slightly. I also took the same approach with the type used for the header. Anivers is a sans-serif typeface that has a sturdy feeling, however is flexible and even funky in some ways.

View the Site

Context

This visualization was created by myself and Jesse Cook in the Visual Analytics course at SIUE. The goals were to find a dataset and create a visualization that would lead to the discovery of interesting findings.

The constraints of the assignment were to use Processing and utilize visualization techniques covered throughout the course.

Approach

Finding Data and Inspiration

The dataset we chose was compiled by Ruut Veenhoven at Erasmus University in Rotterdam. This set had been collected for 20 years and contains data on measured happiness in 14 nations with over 10 comparable datapoints. These datapoints include information such as average happiness, inequality of happiness, and life expectancy. This data has been used in many different contexts attempts to identify trends of happiness in nations and explain the changes of happiness over time.

We proposed a visualization of a subset of this set that would provide animated visualization over time as well as filtering options. We wanted to users to be able to identify interesting trends over time while also finding the interface enjoyable. Our inspiration had come from a Ted Talk on Gapminder by Hans Rosling.

Implementation Details

The application reads from a CSV file containing information on average happiness ratings for 10 countries along with their Gross Domestic Product per capita and average life expectancy.

Users can play, pause, reset as well as filter which information is most visible by clicking the circles in the legend or on the graph. The name of the country is displayed when the datapoint is hovered over and the time is mapped by a status bar at the bottom.

Download

Context

The inspiration for this prototype emerged during discussions of academic and design articles in the Principles of Interaction Design course. As a class, we are asked to read a number of articles - some of which contain very abstract and complex concepts. My peers and I came to find that many of us had very different views on the articles which yielded fascinating discussions during class time. However, I felt that if we had been able to see each others' comments before class, we would be able to debate much more effectively.

Approach

Finding Data and Inspiration

My goal was to take our group discussions to a richer level by encouraging collaboration. If students could read from the same article and see each others' notes, they could begin thinking about other interpretations before the in-class discussion takes place. It also would allow the instructor to facilitate discussions more effectively after knowing what the students are taking from the article.

Implementation Details

The prototype was developed with Adobe Flash and it displays and stores comments created while a reader scrolls through images of book content. Other media such as mockups and presentations could be exported as images and uploaded as well.

Next Steps

With open licensing of classic literature, this application would be ideal for virtual book clubs. Comments could be stored from other readers, academics, or friends and family; with this tool, reading would certainly be enhanced through this digital medium.