CONNECTING HISTORY
Eden Weingart
Survey Questions & Answers
Why did you decided to study design?
When I was young I always drew a lot, and eventually gravitated to using the computer to make art. I was amazed by animation and attempted to make my own, but was discouraged by how difficult it was. Once I got to high school, I took more art classes and I gravitated toward assignments where there was a lot of structure or a particular objective. There was also a graphic arts class at my high school and through that I made posters for the high school plays and bake sales. I really enjoyed being creative within constraints, and decided I’d pursue that interest in college.
What year did you graduate from CMU?
2014
What were a few of your most memorable moments at CMU (courses, people, etc.) and why?
Most of my memorable moments are of spending time and making things with my fellow design students. Having a dedicated place that we could all feel comfortable, work and collaborate played a huge part in my experience at CMU. I learned how to seek advice and critique, and gained a lot from watching how my friends worked through their problems.
Our sophomore studio with Dan was a pivotal moment for me, when for our final project we were assigned to do a motion piece on a famous designer. I was given Wolfgang Weingart (Dan thought it would be a good fit since we have the same last name) and really felt a connection to his work, and to motion as a medium of communication. The fascination I had with animation as a kid resurfaced, as I realized there were now tools available to me that made animation accessible. This changed the course of my studies at CMU and what I would pursue after graduating.
Dylan’s Pieces class senior year was also a memorable experience. After being overwhelmed by the very open brief, I had a lot of trouble cracking what I was actually going to make. But in the end I made something that combined all of my interests: motion, interactivity, and illustration. This is the project that got me my first job and one of the projects I was most proud of at CMU.
What have you done professionally from the time you left CMU until now? (Please include a general timeline.)
After graduating from CMU in 2014, I took a full-time position as a Designer at Wieden + Kennedy New York, an advertising agency in New York City. I had previously interned at W+K as a motion designer in their in-house production studio. This time, I was hired to bring motion skills to their Design team. While at W+K I worked on a variety of motion, branding, print, and illustration projects for clients like Delta, Sprite, Spotify, Lyft and Nike. In April 2017, I left W+K for an opportunity to work with the New Design team at the New York Times. I’m currently working on exploring what the Times looks like on other platforms, and how motion can strengthen and broaden the Times’ brand of storytelling. I have also done editorial illustration for different sections around the newsroom, and will occasionally take on other motion and illustration projects on the side.
Who/What has inspired/impacted you/your work throughout your career and in what way?
I think the mentors I’ve found wherever I am have had biggest impact on my career. After the mentors I had in school, my design director at Wieden + Kennedy, showed me how to make meaningful, clever design and have a really good time doing it. Working with him at W+K helped me discover my style and what I really enjoy about design.
I am constantly inspired and humbled by the designers and illustrators who work with the New York Times. Illustrators like Tim Lahan, Geoff McFetridge, Chris Delorenzo and my friends Cari Vander Yacht and Braulio Amado. Design-wise I’ve always found inspiration in the work of Wolfgang Weingart, Saul Bass, Max Bill, and Olle Eksell.
What do you enjoy most and least about the work that you do and why?
As with any job, there are moments when work feels repetitive and it can feel like there are no fresh ideas. That is when I can lose sight of the mission and why I do what I do. What I love about motion work (and design in general) is that it is sort of like solving a puzzle. You develop a hypothesis of what you think will capture the gesture or idea you have in your head then you test it and see if it works. If it doesn’t, you go back and fix it. Once it clicks it’s a very gratifying feeling. I love the sense of purpose I feel with the work I’m doing right now, and really enjoy developing ideas and working through stories and problems with a team of very smart people.
What are your design aspirations for the future? What do you hope to do in the coming years?
I’m still very much at the beginning of my career, and I look forward to continuing to find people who I admire and am completely intimidated by to learn from and work with. I plan on pursuing more motion projects and branching out at The New York Times and see where this path in the news world can make me. I also want to pursue more illustration opportunities, because I’ve found I really love that sort of problem solving.
What piques your curiosity relative to design?
I am interested in how design can get people engaged with the world around them, and how motion can add to and enhance storytelling.
What do you wish you knew and/or had done when you were a student in the School of Design?
I wish I knew that it was OK to relax a little bit and not take everything so seriously. Design school is really the only place where you are given a lot of time and attention toward making work that is all about your own ideas. I definitely made the most of my time at CMU, but I wish I had pushed things a little further and been less wary of failure. I also wish I had delved deeper into design history.
What advice would you give a student pursuing a career in design?
I’d advise a design student to find the parts of design that feel easy and natural, and see where those things can take you. It’s important to find your weaknesses and improve, but also pay attention to what comes easy to you and makes the time fly by.
Also, don’t look at tumblr and instagram and other inspiration so much. Reference is great but it can cripple your own personal style. Look to other places and mediums for inspiration. If you want to do illustration or type design or branding, look to something different: nature, real life, painting, sculpture; not just contemporary people trying to do the same thing. That way you won’t fall into what is just trendy at this moment in time.
What do you see as potentially exciting opportunities for designers in the next several years?
I’m really excited about new ways of telling stories, and getting information out to people. Right now, technology is opening up, with VR, AI, the web and other digital experiences becoming a lot more expressive through code and motion. I think designing for these environments, and figuring out what sort of stories and experiences best suit each medium, is really exciting.
What do you see as important roles/responsibilities for designers to take in the coming years?
It’s important for designers to think about the ideas, people, companies and interests their work is supporting. In that same way, we have to be aware of what sort of behavior we are encouraging in the people for whom we are designing. As we’ve seen, designed experiences that people use everyday can change how we act and interact with each other, and I think it’s important to think of the echo effects before putting something out into the world.
What is your favorite typeface and why?
Maison Neue by the foundry Millieu Grotesque. I love sans serifs that manage to have a bit of character and personality in them.
What is your favorite color and why?
Coral. I’m not sure why.
What is your favorite design book and why?
I really love Olle Eskell’s book of his design and illustration work. I feel like he sets a great example of how to be both a designer and illustrator, and have the same sense of energy and fun conveyed in both types of work. The book I have is in Japanese so all you have to do is look at the pictures.
Do you have any fun facts about yourself and/or design that you’d like to share with the students? If so, please jot them down.
I worked at the School of Design office for all four years at CMU, where one of my responsibilities was filing my classmates report cards. Great job in Type II, Tim! ( just kidding :) ) I do pottery at a studio in Manhattan, and have been making ceramics there for three years. This has been a wonderful way to be creative without looking at a computer screen more than I already do.
Are there resources that the students can utilize to learn more about you and your work? If so, please list them (websites, books, etc.).
www.edenweingart.com
instagram.com/edenweingart.jpg
instagram.com/snackbreaknyc (for the ceramics)
About Page
Eden is a communication and motion designer raised in Georgia, USA now living and working in New York, NY. She is currently working atThe New York Times.
Eden studied Communication Design at Carnegie Mellon University’s School of Design in Pittsburgh, PA. Her work is rooted in the idea that design can be meaningful, impactful, and enjoyable.
Very interested in working with non-profit, environmental, and education groups. Feel free to get in touch with any collaborative or creative opportunities.
Time
- 2010–2014: Carnegie Mellon University with a BFA in Communication Design
- June 2013-Aug 2013: motion designer intern for Wieden + Kennedy
- Jan 2014-May 2014: teaching assistant for CMU class Typography II
- July 2014-March 2017: designer at Wieden + Kennedy
- April 2017-present: motion designer for the New York Times
looping .gifs
2.16.18 | VISUAL EXAMPLES
In preparation for the next class, I began by emailing Eden asking different questions that I did not feel I had enough information for from just the survey answers. I asked about whether or not she took other courses outside of design, how she was able to balance her design work with her motion graphics work, and what her current work environment at the New York Times is like.
From there, I decided to go forward with collecting visuals for next class. I started with compiling a bit of Eden’s work from her website. Even though most of her work has to do with motion graphics, the .gifs I chose translated well to stills.
I then followed with the works of different designers that she listed as inspiration/influences. I found that there were definitely traces of influence in terms of the simple illustrative and geometrical style as well as the vibrant color choices.
2.20.18 | Sequence Visualization
After figuring out the different kinds of visuals I wanted to include, I laid them out on a visual “timeline” (not in just a chronological sense). I decided that I wanted to section off my narrative into an introduction, a pre-CMU section, and CMU section, and a career section. From there, I took the examples of Eden’s work as well as the people who she listed as influences and placed them where I thought they would fit on my timeline.
In addition to this, I also listed my various reasonings for most of my decisions on the timeline, as well as a few semantic differentials that I wanted to dictate the voice of my spread. Because I had so many different visuals, I felt as though I didn’t need to use too much text to define my decisions.
I found this exercise to be helpful in figuring out a general idea for my spreads as well as my website as it forced me to look into different visuals to include early on in the process, so I would be able to design based on them. Additionally, it made it so that I had a narrative structure that I could follow, without worrying about an inconsistent use of visuals per section.
2.23.18 | Biography
With the help of my visual timeline, it was easy enough to begin writing the biography using the information that Eden provided in the survey, through her emails, as well as miscellaneous pieces of information I found through researching.
I ended up straying a bit from my original plans I had listed on my timeline, as outlining and writing the actual narrative turned out a lot differently than I expected, especially in terms of the flow of information.
Rather than have a whole section on Eden’s influences and inspirations, I decided to sprinkle it throughout the whole essay. As the way I categorized information was chronological, it seemed to make more sense to talk about her different inspirations throughout the different phases of her life. My main sections were Eden’s experiences during her time at Carnegie Mellon as well as her work after (as she had graduated very recently).
2.27.18 | Type Spec Sheets
After creating a draft of my content, I started looking into different font families and styles that I wanted to include in my spread/website. I was unsure of whether or not I wanted to have them differ, so I just created two different drafts just in case. Each of these were based on my previous research and style sheets I had started to draft while I was looking for visual examples of work.
I must admit, I ended up spending a lot more time than I wanted on the type procrastination resources available. I ended up having a lot of fun exploring different typefaces and styles and combinations, but I realized I had to get to work on creating my actual type sheets.
As Eden mostly uses sans serif fonts in her work, I decided that I wanted to parallel this, at least with my header. I was interested in using Maison Neue, as it is her favorite font and the only font used on her website. Unfortunately, I did not have this font available to me, and decided to try Brandon Grotesque and Proxima Nova as the main sans serifs I wanted to include.
For my first sheet, I decided that I wanted to limit myself to the different weights in Brandon Grotesque. I found that the different weights worked well together without appearing too similar or repetitive. I actually ended up preferring this version, but I felt that using all styles of the same family was a bit of a cop-out (even though realistically it isn’t).
I decided that I wanted to try using a sans serif with a serif font, so I looked into different fonts with similar x-heights.
I ended up choosing Proxima Nova and Georgia. I thought that Proxima Nova gave off a more playful vibe, which I thought matched Eden, both as a designer as well as a person. While I still wasn’t completely sold on Georgia, I thought that it worked well with Proxima Nova especially as body text.
2.28.2018 | Thumbnailing
As the next step, I started creating thumbnails for my potential spreads. In order to have the correct ratio, I took an 8.5 x 11" sheet of paper and cut it in half. I took these halves and folded them down the middle to create these mini spreads that I could brainstorm with.
It was hard to portray Eden’s voice with mere boxes and lines representing text, as it seemed so drab in comparison to her vibrant works. I debated how I wanted to portray her motion work, although I believe that having a timeline or series of stills from her projects may be the best way to do so. This would at least create a large difference between the spreads and website in terms of display, without having to alter the visual hierarchy too much.
With each spread, I tried to take inspiration from the way that she presents her work on her website, which is often very orderly and clean. I wanted to have a clear grid structure with very defined columns, although I wasn’t sure if that would be against the playful nature of her work.
However, since her work already portrays that well, I thought that an orderly structure would be a good pair/contrast and allow her work to speak more for itself.
3.1.2018 | In-class Discussion
We began class by pinning up our layout thumbnails as well as our type spec sheets from the last class.
As we had not really talked about the font choices we made as a group, we started the critique by analyzing each spec sheet and commented on how a few of them could be improved. One thing a lot of us missed was choosing leading for each font style based on a common denominator (3+). Another issue we noticed was that a few font choices were a bit difficult to read, leading us into a clarification between book and display typefaces.
Another thing we talked about was the idea of manually tracking all-capital words/sentences as typefaces are not designed to be used as all-caps (unless there is a small-caps option available).
3.2.18 | Refining Type Sheet
After discussing in class, I quickly went back to my type sheet in order to edit the leading so as to adhere to the baseline grid. Rather than have all of the leading share a common denominator of 2, I upped it to 3. Additionally, I altered the color of the caption to be gray (#444444), so as to stand out a little bit more from the body text.
Additionally, I ended up revising my content based on suggestions by my peers.
3.4.18 | Experimentation
I decided that I wanted to experiment with the main title, as I wanted it to draw the viewer in. I decided that I wanted to use the pink from Eden’s work with AIGA and attempted to capture the playful nature of her work as well as the style of her animations.
I used Illustrator to create layers of the font (one with no stroke and one with no fill) to pop out more to the viewer. At first, I only played around with the stroke weight, but I decided that I wanted to also try using Brandon Grotesque Black instead of only Brandon Grotesque Bold.
The one I ended up using for my spread drafts was Brandon Grotesque Black with a 1.5 black stroke.
3.5.18 | Grid Introduction
Transitioning from paper wireframes of the content to digital drafts was difficult, and I realized I overestimated how much content I had at my disposal. I started the process by figuring out how I wanted to divide up my information. Rather than go with the sections I had originally planned, I decided to split my content into four groups: Eden’s CMU experience, her professional work, Q+A, and my personal take. From there, I figured out how I wanted to structure the page.
I started with one inch margins on all sides and a six column grid. Originally, I had a 1p0 margin, but I ended up bumping it up to 1p6 as I thought that the spaces between the content were a little too tight.
I also made sure to alter the baseline grid based on my body text leading settings and forced all of the text boxes to adhere to it. This allowed for consistency in terms of the y-axis position.
As the way Eden displays her work on her website is structured, I decided that I wanted to parallel this with how I laid out the visuals on my spread. I thought that contrasting the playfulness of the content with a consistent and structured display would be effective.
In the end, I divided up her work by the time that she worked on it and phase of her life so as to give viewers a more visual representation of the work described in the text. I decided to start and end with Eden’s AIGA work, as a sort of introduction and conclusion.
3.7.18| Continued Explorations
After talking with Stacie and Christie, I realized that I needed to find a way to show motion in my spread without being able to display .gifs. From our conversations, I decided to try to use my visuals in order to display motion. My first idea was to bleed images off of the spread, which is what I ended up exploring in each of these drafts.
After creating my spreads, I decided that I wanted to continue exploring with different visuals, especially on the first page.
I decided to make the titles smaller and add different images. Even though I had them bleed off of the page, I realized that I still wanted to keep some sort of structured look. Because of this, I kept them all on the same grid line and had them stay the same size.
Additionally, I experimented with simply using pictures of Eden’s work rather than have a picture of her on the spread. I tried making the layout of the looping images a little more playful, which led me to experimenting with using them across both pages of the spread.
Additionally, I practiced with altering the visual hierarchy of the Q+A section so that it would stand out better compared to the rest of the sections. I had a few issues at first, but decided that I wanted to continue with using my pink spot color.
3.7.18 | Wireframing
After that, I started to attempt to create wireframes for my website. I had originally planned to have multiple pages that corresponded to each of the sections on my spread, but I did not think it would be interesting enough in terms of Eden’s personal style.
In order to continue with the theme of being playful, I tried out a more unconventional design (utilizing Illustrator for the line) and created a mock design in XD. Luckily, as my website will be able to display .gif files, I would not have to have as much focus trying to show movement through my piece.
I tried to focus on sticking to a grid structure even though the placement of the images may seem random. As I was following the grid quite heavily on my spread, I wanted my website to also reflect that.
3.20.18 | Critique & Discussion
As a class, we went over a list of issues found through a majority of the spreads developed by the class. Stacie had listed out the main problems and things to look out for on the white boards and we discussed possible solutions to each of these problems.
Out of what was pointed out on the whiteboard, the ones that most related to the issues I was having was tracking the paragraphs so as to avoid awkward line lengths as well as making the spreads as a whole more interesting together.
Although they were pointed out through individual critiques by Stacie (pictured below), it was easy to figure out with issues also applied to my own spreads. After talking out some ideas with Stacie and Christie, I had a solid understanding of how to move forward with my spreads.
3.20.18 | Continued Explorations
In talking with Stacie, I was able to figure out what aspects of Eden I wanted to showcase using the design of my spreads. I wanted each spread to seem playful yet organized mainly, as well as being smartly designed. Another aspect I still had to work on was adding hints of movement within my piece, which I touched upon by having images and text bleed off of the pages.
I decided to work on the question & answer section of my spread as it was the one that I was the most unsatisfied with. As I had identified the themes I wanted to portray in my spread, it was not as hard to come up with a “smart” solution to the problem.
I decided to use rounded speech bubbles to portray the information, as if it were happening as a conversation. I thought that this method would be more indicative of Eden’s style and personality rather than have the section be very plain text (as I originally had it).
I then brought back the same visual hierarchy as her name for the section title, and repeated it as if to represent motion. I kept the question+answer pairs together on the same horizontal line in another way to imply a passage of time through the spread. Unfortunately, I was unsure of how I wanted to fill the space on the bottom left, so I left it as is.
3.21.18 | Website Explorations
Even though I had a rough idea of how I wanted my website to look, I decided to practice and get a sense of how my style would translate into HTML/CSS by designing a simple navigation bar.
From there, I decided to start seriously coding my website.
One of the problems I ran into was that I did not account for the tablet and mobile views through wireframing. I had just planned on moving the bar off the to side, but I realized that it would alter the placement of my text and images as well.
I decided that rather than working on resolving these issues, I wanted to spend more time preparing wireframes and figuring out other solutions that would even better portray Eden’s line of work.
Once I figured out the basics of how I wanted my spread, I created a short .gif to show my iterations throughout the process. From here, I realized that I still needed to give some sort of indication to the user that the objects are interactive, as well as mess with the type and placement (as I had not put much work into the more specific details). I also needed to showcase more of Eden’s work.
3.21.18 | Responsive Ideas
As I had planned how I wanted to make my site responsive, it was easier to figure out how to translate my ideas into HTML/CSS. I had decided to shrink the four column structure I had to a 2x2 column for the tablet view and a 1x4 column for the mobile view.
However, I had not accounted for how I wanted the interaction to alter between screens, and I had to rethink my ideas a bit.
I decided that I might want to keep the 2x2 column structure for the mobile view as well.
3.22.18 | Adding Movement
After going through critique in class through small groups, I realized that I had still not captured movement in my spreads.
I ended up experimenting with showing multiple frames of different animations as well as having elements on my spread extend through multiple pages. While I was still not 100% satisfied with it, I was happy with the progress I was making with my spreads.
I still need to work on altering my titles so that they are more interesting, but I was still having trouble with what I wanted them to say. I decided that I wanted to work a little bit more with the overall layout of my spreads before dealing with them.
3.22.16 | Website Landing Page Animations
From there, I decided to tackle one of the main issues I was having with my website. There was not an obvious indication that the user should click on the first image in order to reveal more information on the website. In order to combat this, I created a simple animation in After Effects using my Illustrator text file so that it would seem more inviting for the user to interact with.
3.24.18 | Continuation of Coding
From my last iterations, I included the new landing page animation in replacement of the earlier logo, and worked on the margins and column width of my text.
I still need to work on finding a way to incorporate Eden’s other work within the sections, as well as iron out a few bugs with the javascript code.
3.26.18 | Refining Spreads
3.28.2018 | Coding Refinement
As I had a general idea of different elements I still wanted to include on the website, I began to work on those.
Unfortunately, I was still unable to resolve how I wanted Eden’s work to appear. I had the idea of having text with project names in a different visual setting so that users would feel inclined to interact with it. I decided to work more on creating a visual style that would make sense with my theme while standing out enough from the paragraph. In the future, I plan on using Javascript in order to having images based on the specific projects appear on the page.
Additionally, I included the colors used for the navigation on the top to the bottom, so users would not have to scroll up. I have it so that the navigation only appears after the user has clicked on an icon the first time, so it would not interfere with the graphics on top.
I also plan on restricting the users’ ability to scroll up after going through the first layer of navigation, so there would not be an unnatural amount of space on the top of the page.
Another element of the website I worked on was the question and answer section. For some reason, I had trouble with the ShowDiv functions I had been using for the icons, but I managed to figure it out.
I had originally had all of the questions laid out horizontally, but the text was extremely difficult to read at that size. In order to fix this, I ended up having the questions and answers spanning vertically instead.
I messed with decreasing the margins and increasing the percentage width of each question and answer for the tablet and mobile sizes, so that the section would be responsive in the sense that the text would still be legible despite the skinnier screen size.
I ended up using visibility rather than display so that there would not be a strange jump in the page when information appeared.
Additionally, I figured out where to position my sections vertically on the page for the tablet and mobile view. Previously, the text overlapped the icons in an unattractive way, which made it harder to interact with the elements. I also focused on making sure that the navigation on the bottom bar would stay at the bottom, regardless of screen size.
3.29.18 | Website Edits
I decided that rather than have the two columns of text I had been sticking with, it would be easier to display the images if the text took up less of the page. I used the hoverlink class in order to create mock links that would show pieces of Eden’s work relating to the text in question.
I coded it in a way that actually used two different versions of each picture, one above and one below the paragraph. That way, the “desktop” images would float at the top of each paragraph, but the images would show up after the paragraphs on “mobile” view.
3.30.18 | Website Edits
On issue I was having was that the mobile and desktop views of the images would show up if I had the showPigeon() and showExplorers() functions occur, despite my addition of display:none in the media queries. I realized that I was unable to fix this issue through CSS, so I used a new function in my script.js file in order to get rid of the desktop positioned images.
From there, I worked on the responsiveness of my website, and formatting all of the images and links on each page.
I also moved the Sprite Corner project .gifs down to be under the paragraph, so that it would be more consistent with the previous page of information.
3.31.18 | Spread Refinement
I started off with looking at the different critiques that Stacie had given me on my submitted spreads. One of the suggestions had to do with including a timeline of frames from different .gifs that Eden had created in order to show motion earlier, but I had issues when I had tried that earlier. Despite this, I decided to try again by splitting some .gifs into different frames that I thought conveyed the loop well. However, I felt as though these squares interfered with the images on the right spread. I worked with this concept for a while, but then decided to scrap it after I found that it wasn’t working.
From there, I worked on rag issues by increasing the tracking of a few lines of my biography. In some cases, I had to alter the content slightly so that it would look more balanced.
On the second spread, I messed around with the placement of the text on the left page as it was not aligned to anything prior. I ended up aligning it with the images that bled off of the previous spread so as to continue with the horizontal movement from the last spread.
Finally, I began to figure out my relationship diagram. While I was originally planning on listing different visual interests alumni had outside of design, I decided that I wanted to do something more location based. I first experimented with creating a diagram of New York and listing the alumni working there. However, as most of them were working in Manhattan, I decided to decrease my scope in order to more closely highlight where people worked specifically. I used the sticky note wall to inform my decisions, although there was not a specific question asking where people worked currently.
In order to accurately complete my diagram, I found all the alumni that worked in New York and researched whether or not they still worked there (and if so, where). I then used this information to place alumni on a diagram of Manhattan.
An issue I was having was that some of the alumni worked near the edges of New York, and I had displayed them in a way that their names ended up on both the pink and white parts of the map.
In order to resolve this issue, I decided to use dotted lines in order to bridge the names to the location without having the text be over both the pink and white backgrounds.
3.31.18 | Final Spreads
4.2.18 | Web Piece Refinement
For my final designs, I ended up altering the tablet view mostly. Rather than keeping it as two columns, I decided it was too hard to read the text when it was in such small lines. In order to combat this, I used the css for the mobile view so that the images and text would all be in the same column.
Additionally, I added a new image to the first section so that the information would look more balanced.
4.3.18 | Final Web Piece
4.4.18 | Edits
I realized I had not added captions for my images or credit. Unfortunately, the way that I had coded all of my images, I had to translate them to being figures (which ended up taking longer than if I had considered captions in the beginning). In the end, I had it so that the desktop and mobile displays both had captions, and I added a courtesy note at the end of the site.
