C Studio II: Project 2—Connecting History

Assignment: investigate a communication design alumna/alumnus from the School of Design at Carnegie Mellon in depth and then collaboratively map your discoveries in connection with those studied by classmates. Then design a print piece (a three-spread zine) and a digital piece (an interactive website) that share these discoveries.

Before the start of the project, Stacie Rohrbach sent out a survey to some alumni of the communication design program. We were given a list of those alumni to choose from for this project, and after reading through some of the responses I decided to focus on Reina Takahashi.

(answers removed for privacy reasons)

organizing information— 13 feb

some of the information the class started organizing

The project started with the entire class coming up with a list of what they would want to know from alumni. We then grouped those questions into broader categories and, using the responses from the survey, we began mapping answers to those questions on the wall using sticky notes.

As we populated the wall with more information, we also began to organize each sub-category or question. We looked for relationships between the information from all the alumni and reorganized the sticky notes to clarify those relationships, adding notes or further questions where necessary.

I was then able to use this high-level view of what information we had or didn’t have to guide what further questions I could possibly ask my alum to aid the project.

beginning the narrative — 20 feb

rough draft of narrative

In class, we started to consider the overall narrative of our pieces and how we wanted to present the research we had gathered with the aid of rough timelines. I was initially confused as to how I would want to present my narrative — I honestly hadn’t considered any other way than presenting the information I had learned in some combination of chronological or categorical order, and I struggled a little when writing down what parts of my narrative I wanted to happen when.

I did start to figure out some of what I wanted to happen in my overall narrative. I wasn’t really able to find any design projects that my alum had worked on, and I realized that most of my imagery would skew towards her paper art & the second half of the narrative (if I were to continue chronologically). It might be interesting to play to that shift in the design of the zine or website.

refining visual narrative — 21 feb

a digitized and slightly reordered version of my original draft

Some thoughts:

  • possibly approach the narrative as two threads — reflecting design & paper art/ illustration/ side project journeys (would also probably play into the ratio of imagery)
  • consider how to portray threads vs an abrupt shift (as in previous draft of narrative)
  • also bring in more educational work & things like the Chicago Design Museum

As I also worked more on writing the content itself, I found I was struggling with turning a series of answers into a structured, cohesive narrative. Though I originally tried to follow the narrative structures I had planned, as I went back through and re-read the answers I realized that there was a lot of information I had overlooked. Again, I think I had been very set on biography patterns I was used to — simple chronological lists of facts — when trying to go about planning a narrative structure, when there was a lot of other information that said more about my alum as a person.

second version of visual narrative & type exploration — 26 feb

I ended moving away from the two-threads narrative and just breaking down my narrative into four sections by theme, with information within each section loosely arranged chronologically. Because of what visuals were available to me, the section on Reina’s paper art would have the most imagery & visual focus, with some more visuals extending into the question & answer section. I still wasn’t sure whether I should reflect this shift (both within the career narrative and with the amount of imagery) in the design of my pieces, but it could be something interesting to consider.

I then took a preliminary look at type. I wanted the feel of my design to match the feel of Reina’s work, and I tried to look at typefaces that reflected playful/ warm/ friendly/ geometric qualities. Because of the nature of her work I also wanted to consider possibly hand-lettering some of my content (like headings), but I felt I would need to consider the overall layout of my pieces first.

some type options I collected
beginning attempts at type spec sheets — two print ideas & one possibility for web (rightmost)

grids & type — 27 feb

In class we covered a few different kinds of grids (manuscript, modular, columnar, and compound), and went over how to set up a baseline grid, along with using mathematical relationships to determine type sizes and linespacing. I really hadn’t considered relationships between sizes when making my previous spec sheets, so this was something I could refine. We also were introduced to ways to set up grids in HTML/CSS, to consider how we might set up our digital pieces.

initial sketches & more type — 28 feb

some rough sketches for both zine layouts & the beginnings of ideas for web layout — the zine spread sketches are grouped together in rows; each row is a possible new sequence

I started sketching some ideas for spreads, trying to think about how they work together overall & what story I wanted to tell through my zine. I referenced both my biography draft & the visual narrative I had constructed for this. I also didn’t think too much about possible grid structures yet, as I wanted to just get down any ideas I might have.

I wanted the layout to reflect the overall journey of Reina’s career (or at least how playful her current work was): the first spread would be most “safe” and simple, and the next two spread would get progressively less rigid. I also started to consider how that could be reflected in a digital environment.

Notes for further layout exploration — consider what path a user would take through the spreads, using the ideas in Kevin Lynch’s The Image of the City as a reference point:

  • nodes: a hub that draws the user’s attention; users can enter into a node
    examples include headers and titles
  • districts: areas based on similarities that are grouped together
    examples include typographic and compositional similarities
  • landmarks: draws a users attention; users cannot enter into a landmark
    examples include graphic elements
  • paths: direction based, show a user where to go
    examples include navigational elements, position, and hierarchy
  • edges: a border, separates districts
    examples include whitespace
second draft of type specimens — print (left) and digital (right)

I redid my type specimens, switching to a typeface that I felt better conveyed the playfulness of Reina’s work. I also tried to consider proportional relationships of linespacing and type size.

layout drafts & refining type — 5 mar

more type explorations, paying more attention to a baseline grid

I refined my type choices more to work better with a baseline grid, and then started working more on possible layouts. To get a better feel of how much content I would be working with, I used the actual text of the biography I had written to play around with positioning and scale. As I did so, I realized that some of my type choices wouldn’t work so well due to limitations on the page — particularly the point size I had chosen for the question & answer components, as I had a lot of text in that section.

refined type spec sheet, to better reflect how the content might fit on a page

print & web layouts — 8 mar

next draft of spreads

For the next few iterations, I added all the content I wanted to use in the final draft — here it was mostly images. I found that seeing what options were actually available to me helped me get a better understanding of the spreads as a whole. I also found that this helped me refer back to my narrative timeline more easily, and I tried to reflect the what I had planned there in my spreads.

In-class crit

We reviewed each others spreads in small groups. Some notes:

  • Should the images be more purposefully organized? I hadn’t considered captions yet and this might make more sense moving forward
  • Related to that, since I only had images of Reina’s paper art to work with I had originally planned a gradual buildup of imagery in my timeline to reflect her career shift. This didn’t really come across as strongly in my spreads, which just seemed chaotic
  • The question & answer section needs a lot of refinement; explore some other ways of presenting the information

I was also able to see the paper we were going to be printing the final zine on. It turned out to be a similar color to what I had colored the background of my spreads, so I wouldn’t necessarily need to use a background color in my future spreads.

web layout

I also mocked-up a potential web layout for the digital portion of the assignment, based on my earlier sketches. I felt a single-page, scrolling site would better reflect the flow of my narrative better, especially based on the layout of the spreads I had already designed. I also tried to consider how I could design the digital piece to compliment/ reflect the design of the physical piece.

Some of the same considerations for imagery as the zine apply to this layout, and I’ll need to think about how I treat captions (or sources) in a digital format. The layout I have for the images currently also seems like it would either require an extremely sophisticated grid or some other workaround to implement in HTML/ CSS. I should probably think about other ways to present the images that still fit the overall narrative but might be more feasible to code.

exploration & iteration — 21 mar

very rough initial tests for paper cutouts; exploring incorporating cut-out headings/ text into the page

I wanted to explore how I could convey the spirit of Reina’s work in my design, and decided to try to incorporate cut-paper into my layout. After playing around with some cut-outs and scanning paper, I narrowed this down further to using cut-paper letters for headings and incorporating layered sheets of paper into the overall layout.

thinking about layering paper & content and how that effect could translate to the digital piece
another iteration of the spreads, as a mockup for a potential paper cut-out layout

integrating paper cutouts — 27 mar

in the process of cutting out the letters (I’m planning on using the letters to create headings for the web component) & an example of the finished cut-out

I then worked on actually creating the cut-outs, transferring the typeset headings onto cardstock and then cutting out each one, including letters for the cover of my zine. I then scanned in each cut-out and replaced the appropriate colored blocks in my layout with the scanned-in paper and cutouts. I also experimented with how the cover of my zine might look, incorporating both the information block designed by Stacie and overlaying some of my paper letters on some of Reina’s work.

spreads and the beginning idea for a cover, with cut-paper integrated (the colors in these and the rest of the examples aren’t correct/ duller than they’re supposed to be due to Medium re-saving the images)

After getting some feedback on the cover, I decided to play around with using more color. I experimented with scanning in different arrangements of paper, and ultimately decided to go with one of these arrangements in combination with the paper letters of Reina’s name.

variations of the cover; the version I decided to go with for this iteration is the bottom right one

I then worked on a relationship diagram for the back of my zine that showed the relationship between Reina and some other alumni, referring back to the information we had gathered and organized on the walls. I originally was interested in which of the other alumni had either freelanced or started their own studios, and decided to narrow that down to only those who were currently doing either of those. For my first diagram draft, I showed how soon after graduation the person had started freelancing or working for themselves.

relevant area in the sticky-note wall, a first draft of that diagram

I also tried a different diagram that explored alumni’s favorite colors, as I felt the tone of the question better matched the overall tone of the zine. As I kept experimenting with the design of the diagram, though, it actually felt more and more disparate from the overall design of my zine, and I ended up going back to my original idea.

refinement — apr 2

progression of the diagram

I refined my relationship diagram to try to better convey hierarchy of information, as well as feel more coherent with the rest of the zine. I didn’t change much more of the overall layout of the spreads (partially because of the work I had done on the scanned & cut-paper aspects), but I did spend time refining typographic & layout details overall.

Final Layouts

back (diagram) & front covers
interior spreads