Maddy Cha

Eden Weingart

Skills:
print design
interaction design
HTML/CSS


Spring 2018

 

Eden Weingart

For this project, I researched alumni from the Carnegie Mellon School of Design to represent their work in both a print and web piece. The alumni I chose to work with was Eden Weingart, with a focus on her work in Motion Design. Through research and interview questions, I was able to create content to work with and include on both of my pieces. I used this information to create a three-spread zine as well as an interactive web page describing and displaying Eden's work.

 

Research

I started by studying Eden's work and figuring out how I would best portray it through the two different mediums, print and web. Although I was unable to meet with Eden in person, I received an extensive list of survey answers from her that helped me to get a sense of her character. I also conversed with her through email to fill in some of the gaps in the narrative.

In terms of beginning the visual design process, I made a visual guide for myself showcasing Eden's work as well as the work of people she considered inspirations and used this information to create potential typographical styles and color palettes I might use.

 

I ended up using Brandon Grotesque for my zine and website, as I found that it gave off a similar vibe to Eden's work. I decided that because most of the colors on the zine and website would be from her work, I wouldn't need to define a separate color palette for the zine and website.

Thumbnails

From there, I went to working on creating potential thumbnails for the zines. With an idea of the written content and work I wanted to include, I experimented with different layouts I thought might be interesting.

 

Zine Iterations

Narrowing Down

I chose to use Eden's work from The Inquisitive Explorer's Guide for the cover of my zine, as Eden had mentioned that it was what she was most proud of creating during her time at Carnegie Mellon. For the back, I added a relationship diagram using information from my classmates about the alumni they were researching. This helped to tie in my zine with the collection created by the entire class.

After experimenting with type and style, I found that creating the website was much easier, as all of the content was already decided upon.

 

Initial Wire-framing

Once I had a set idea for the designs of my spread, I began to work on wire-framing the website. I used Adobe XD and began to digitize some sketches I had made on paper. While I did not end up using this idea, it ended up informing some decisions for my final design.

 

Although I kept the idea of a one-page scrolling website, I ditched the idea of a long graphic timeline in order to make the website more responsive. I decided to combine Javascript with my HTML/CSS in order to create and hide sections of information that the user could interact with. Below is a beginning prototype with all of the written content included.

I decided to use visual hierarchy in order to indicate that a user should click, and paired it with a highlight transition using the pink spot colors from the zine. I additionally coded a colored navigation bar on the bottom so that the user would not feel as though they would have to scroll up to see the rest of the content. I ended up using the same hover state for the speech bubbles so as to be consistent with my previous indications of interactivity.

Website Iterations

 

Reflection

Through this project, I was able to overcome the challenge of visually representing a designer with an already defined voice and style. Additionally, I was able to compare the constraints and affordances of the mediums of print and web while creating a consistent narrative throughout. Additionally, through my research on Eden, I was able to gain a better understanding of the journey from a design student to a motion graphics professional.