A PHYSICAL PORTFOLIO

Class: Web Design II (DES 117)
Project Length: 3 weeks
Team: Solo
Professor: John Driscoll
Key Role: Design, IT, API research, Code(HTML, CSS, Jquery)

I was talking with a friend about portfolios, and suddenly GTA came up. Beware, my friends and I like games. We're the type of people who would play Grand Theft Auto to listen to the in-game radio. Yes, we would steal virtual cars to listen to fake radio dialogue. The designers of GTA did a magical job. They created a world complete with maps, dialogue and most importantly, exploration. When thinking about my portfolio, the goals seemed to overlap.

I spent a class assignment building a map-based portfolio. I like to call it Grand Designer Auto. The iteration I made doesn't completely relate anatomically to GTA, it still illustrates 3 core tenants of game experience.

  • Introduction. People like to be introduced. An introductory experience should be like trying food. The first taste you get should be handed to you on a toothpick. Then, the user has the perfect tool to sample the rest of the experience.
  • Wayfinding. Give people a meaningful way to get around. Especially on a portfolio! I sought to make my site an interactive autobiography. The content progresses like a narrative, jumping from chapter to chapter. The user can see that my presence was felt around campus. 
  • Animation. Animation is the glue that holds games together. I employed it in every button, so that every click would be an engaging interaction. 
map-portfolio-screenshot

You can visit the website here

Message

 I see myself more as an active story than a portfolio of complete work. I used 3D maps to convey the progression of work from place to place in Davis. The navigation is in sync with the story of my career. People go from my humble start at Cruess(our design hall) to my talk at Mondavi. 

Medium

 Maps. By binding the work to the map, it showed that my designs were actually realized in real life. Banner pictures suggested what the design experience was like from the ground floor. 

Method

 I used Google Maps amazing api. There's a lot you can do in 500 lines of jQuery. Specifically you can transition from monochrome to textured maps, also from 2D to 3D maps. It's awesome. If there's anything I learned, it's that you can trust Google. When it comes to maps, they have an enormous reference manual and community. I found several map style libraries that helped me through the process.