Kiyoshi Awazu: Booklet & Mobile Experience

My Design Hero Pt 2 | Communications Studio Spring 2021

We are to gather, curate and craft text, images, typography and several other
elements to create a booklet that tells the best story of your design hero and their work. Then we are to create a mobile experience as a complement to the booklet. This is the second part to the Design Hero Project. See Part I: Poster Here.

01. BOOKLET

Thumbnail Sketches

To start off the project, I made A LOT of thumbnail sketches to better understand the flow of my booklet, and to explore various compositions. This was actually extremely difficult because I felt like I was running out of ideas by my third flat plan. I felt restrained by the visual style of my posters—I didn’t want to copy the exact same style, but I also wanted to maintain a consistency in aesthetic. I also struggled thinking of ways to merge Awazu’s illustrative design style with consistent typography across my spreads.

You can definitely tell the decrease in quality of my thumbnails as I ran out of ideas because they start to look like random line squiggles and boxes.

Initial flat plans and sketches

Feedback from Brett

1. Have more fun in your compositions! No throwaway spreads.
2. Think of ways to create flow—maybe the cover to the first few spreads go together, and then there’s a break. Maybe all the visual chaos comes inward to the middle spread where it’s just suddenly calm.
3. Balance density—what is the story and where is the climax?

After the feedback session, I felt even more lost and discouraged—I didn’t like any of the flat plans I created, and designing seven spreads seemed more and more intimidating. Usually, I feel pretty confident during the exploration phase to try out different ideas, but this time, I felt paralyzed by overwhelm to even know where to start. I reached out to Hannah to hopefully get some more direction.

Hannah was really helpful and understanding during the meeting (some stress tears were shed) and advised that I start off by separating my essay onto the different pages on the InDesign file. I explained how I felt lost simplifying Awazu’s maximalist style into a digestible booklet. She said that not every page had to be overly-complex, and well-designed spreads can be simple compositionally as well.

Taking Hannah’s advice, I re-planned the flow of my booklet. If I had a more concrete idea of what each page would be about, I could think about what visual assets I needed to create and what images to look for.

Notes on flow of booklet

First Digital Explorations

Hannah’s advice of dividing the body text onto the Indesign file was helpful in getting me started creating my digital spreads for our class crit. I also tried out some ideas I had for my cover page; I wanted to emphasize the handcraftmanship of Awazu’s work by including ripped-paper textures and hand-drawn patterns.

Not sure why the colors exported so neon in the bottom two pictures…

Hand-drawn background textures

I sketched out these patterns inspired by Katsushika Hokusai (1760–1849), the genius ukiyo-e artist of the Edo Period. Awazu recomposed Hokusai’s black-and-white patterns and created a series of brightly colored woodcut prints. I traced over the patterns thinking they could be used as a background texture or motif throughout the booklet.

Iterations & Explorations 2

For this week’s check-in, I continued working through my spreads, but I was definitely not content with where my booklet was going—to me, it looks like a jumble of 1283941102 different styles across every spread with no consistency and cohesion.

I became more discouraged because it still looked like a big mess to me since I struggled to pinpoint one visual direction and aesthetic. I wanted to try out the ripped paper texture as well as continue the collage style, but my type is also quite digital (the page with the spots is also very digital). I also had masked shape cutouts which were different than my other spreads, but I wanted to take inspiration from Awazu’s own book designs in which he constantly uses simple masked shapes to showcase work.

Feedback from Hannah

1. There seems to be three styles going on: torn paper vs. clean edges vs. hand-drawn sketching.
2. The handwriting on the timeline feels very different from digital type (pick one style).
3. Hand-drawn textures feel out of place in Metabolism spread. The title of “metabolism” along the side also feels too much and out of place.
4. Try using colors for the background or paper textures.
5. Maybe a string element winds through all the spreads for unity? Adding more speech bubbles could also be a motif.
6. Add more structure into your text—keep text blocks consistent throughout.
7. Add torn edges to the masked shapes so the cover isn’t the only torn paper texture. Also explore larger images of his work.
8. Edit images so the saturation is the same.
9. Masked shapes seem too different from other spreads.

4 spreads with 4 different styles

Hannah gave me a lot of actionable and helpful feedback, and so I thought more about what motifs I could integrate throughout my booklet, such as circles, speech bubbles, and the winding string. I decided to stick to all digital type (similar to my poster) and also decided to go with the clean-edge collage style rather than torn paper.

Iteration 3

For this next deadline, we were required to have all pages of our booklet filled—no blank pages! It was going to be another long…night…:D

There were a lot of edits I had to make based on Hannah’s feedback, but I also needed to focus on getting content on all my spreads for tomorrow’s crit. I spent a lot of time crafting my center spread—a quote entangled throughout the intricate line work of one of Awazu’s posters. I was actually really satisfied with the result (although it took like 5 hours)! I also worked on my Table of Contents spread; before, I had the TOC as one page, but I decided to bleed the graphic into a spread because I loved the colors and hallucinogenic visuals. I also made edits to the Timeline spread—changing the handwritten dates and captions into digital.

The spread that continuously gives me a hard time is “Give Back our Sea,” a section dedicated to Awazu’s early work and career beginnings. I could not FOR THE LIFE OF ME think of an engaging way to integrate and showcase the Awazu’s early work as a spread—I couldn’t figure out a way to collage and cut pieces out of the posters because his early work is such a distinctly different style. At the same time, having these posters composed in a simple grid seemed too rigid and boring in comparison to the other more illustrative spreads. I also could not figure out how or where to integrate a title. I began to panic since it was getting late and I still had no ideas, so I scrapped together a quick experiment for the “Give Back our Sea” spread (shown below), but I’m not satisfied with it at all. It’s kinda ugly and doesn’t match anything, so I will definitely redo and revisit it before class on Thursday.

Revising and Redoing Spreads

With a better idea of the flow and contents of my booklet, I was really liking the direction my TOC, Timeline, and Center Spread was going, particularly the vibrant colors and playful typography. For class on Thursday, I focused on reworking the other spreads to the same level of fidelity and aesthetic style.

Give Back our Sea

Back to this annoying spread, I realized that maybe it didn’t have to be as illustrative as the other spreads. Because Awazu’s style is so chaotic, I found myself trying to replicate that energy in all of my compositions, but maybe I needed to pull back and incorporate more negative space and structure. For consistency, I also incorporated the title in the same weaving style as in my other spreads. Below are the new explorations for this spread.

Gallery of Work

For the spread showcasing Awazu’s breadth of work (the one with the masked shapes), I wanted to try out Hannah’s advice and get rid of the shape cutouts. To maintain playfulness, I tilted some of the images—I’m not really sure if I like this composition more than the original though.

Admittedly, I had been avoiding seeking feedback from Brett because I felt embarrassed of my booklet in that it wouldn’t meet his expectations. I felt that I had to get as many of my struggles and spreads resolved myself so that I could at least show Brett a half-decent booklet if we met. At this point of the assignment, however, our booklet was due in a week and I hadn’t met with Brett once since he last saw my flat plan sketches, and I needed confirmation if my booklet was going in a good direction.

Feedback from Brett

1. Gallery of Work: likes the masked shape composition a lot more than just having the images tilted. Don’t really like the weird bubbles in the background. But he likes the treatment of type more in the tilted images (split the text into two blocks).
2. TOC: make spots bigger, and get rid of the extra little elements (hands, people, feet, etc.). Also move the text down into the lower right corner.
3. Timeline: numbers are too big and horsey. Maybe the numbers can hide behind the shapes and integrate more into the illustration.
4. Metabolism: needs something else over it so it’s not just one image that takes up more than one page. Maybe there are other photos of his work?
5. Center Spread: Text block should be the same width as other boxes, also flip the text vertical. Love the colors!
6. Cover: Really really like the ripped cover. For back cover, make the “K” a little bit smaller.
7. Choose a consistent caption system throughout the whole book, and don’t forget credits!

The meeting with Brett went really really well, and it gave me the confidence boost that I desperately needed in my booklet. He said he had never seen anything like it (in a good way) and also asked if I’d ever done psychedelics…lollll…

I was feeling a lot more motivated and excited to work on my booklet now, and I had a better idea of how to improve upon each of my spreads. It was also encouraging to see my booklet starting to take shape towards its final iterations.

Feedback from Jaclyn

1. Maybe it can just say “Work” in a very subtle way, don’t try to force in a title.
2. Try bleeding some of the masked shapes off the pages (likes the chaotic design of this gallery page).
3. For Metabolism spread, try turning the title horizontal and placing it in the bottom right corner.
4. For Give Back our Sea spread, don’t tilt the images, or try masking the posters in shapes. Maybe a string weaves throughout the images?

Because it was getting late in the night, I couldn’t complete all of the edits before our next class, but I wanted to focus on redoing my last spread. I definitely have been neglecting it, but I had an idea for incorporating one of Awazu’s posters. I really like the splatter paint texture he uses in the background, and I wanted to try and integrate another quote in the same weaving effect. I also thought that the big circle illustration could be nice as a concluding graphic for the booklet.

Iteration 4

Feedback from Class

1. Give Back our Sea: Like the tilt of the images better than static placement.
2. Incorporate more speech bubbles throughout the booklet!
3. Last Spread: the circle is too centered, maybe place it in the lower right hand corner. Type can also be more organic, maybe they fly off the circle?
4. Move the little people so they’re not equidistant from each other.

Quick Feedback from Andrew & Brett

1. Where is Kiyoshi Awazu’s name? (lol….oops…) Put the name on the TOC page as a header—make it big and bold.
2. Make TOC shapes slightly bigger, but not the type size.

Iteration 5

For this iteration, I wanted to focus on reworking the dreaded Metabolism spread. Following Brett’s advice, I incorporated more examples of Awazu’s work on top of the Metabolism poster. I also placed the Metabolism title in the lower corner as Jaclyn suggested—this way, the title wouldn’t attract as much attention as before.

I added more speech bubble callouts throughout the book, as well as refined my caption system. For overall flow of the booklet, the center colored spread is symmetrically surrounded by two tan spreads, which then branch out to the black background spreads. I also refined my TOC, as well as the Gallery of Work, and worked on the Give Back our Sea spread. After days of frustration, stress, and crying, I was really excited because my booklet was finally coming together!

Feedback from Brett

1. Really smart color shift of backgrounds with two tan spreads.
2. Like the complexity of the Metabolism spread!
3. TOC: make the name even bigger (as big as the TOC text) maybe it sits on its own line.
4. Like that the body text is consistent throughout all spreads
5. Last spread: Twist the letters to make look more organic, crop down to the corner if you want
6. Captions: no dot after numbers, instead just bold the numbers. Caption numbers are also a little big; make smaller and bold! Also justify your caption numbers to the right, right now looks a little messy. Also take the “0” out.
7. Kern all number “1's” (especially “11”)
8. Booklet is “wonderfully weird!”

Iteration 6

For this iteration of the booklet, I focused on reworking my last spread. I re-cut the letters of the quote and added in a tilt, and placed the circle in the bottom right corner. I also collaged more planets into the composition to emphasize the outer space environment of the spread. I think the resulting spread is definitely a lot more dynamic, whimsical, and playful.

Feedback from Brett

1. Really really like the new last spread!
2. Bigger name on TOC page is also a lot better
3. Timeline: Kern all “1's” in the body text, kern “mid-1950s” as well.
4. Give Back our Sea: rag looks good! For the captions, don’t italicize the date

Feedback from Hannah

1. Timeline: take out the vertical line of the claw—it’s the strongest line in the organic composition
2. Give Back our Sea: lighten header because clashing with the image, maybe a different color for the caption numbers because similar to page numbers, make background patterns even lighter.
3. Center Spread: top right too empty compared to rest of spread
4. Gallery of Work: Color and style of captions is too similar to page numbers, rotate the rectangle image a little, also lighten the little doodles
5. Bold the numbers in the captions!
6. Metabolism: try no dark mode, still looks a little busy. Shift up the second column of images so the gap between image and text is the same for both columns. Also there is a small grey border on the top edge of the image
7. Last Spread: Extend the splatter background across the spread. Maybe add another chat bubble? Try rotating the people so it’s more dynamic!

I made some final adjustments for my captions and imagery based on Hannah and Brett’s suggestions, in particular the center and last spread. I was so so excited to finally print out my booklet (truly, I never thought this day would come) 🥳 🥳 🥳

Final Spreads

Reflection

This booklet was quite literally the hardest, most difficult, most mentally and emotionally demanding project ever (fine, I guess I’m being a little dramatic). I struggled so much in the beginning of the project because I didn’t have a clear vision or aesthetic for how I wanted my booklet to look, and so I felt paralyzed by fear and overwhelm to know where to even begin. I also felt extremely discouraged from the start because my first few spreads looked…kinda bad, and I felt lost in what style and story I was trying to convey. I knew that I could do better, and I wanted to meet my own expectations, but I didn’t know how or where to improve. In hindsight, I definitely should have reached out to Brett for help in the initial stages of my process, but I felt so ashamed of my work to talk about it.

The timing of this project was also through mid/late March, midterm season! I had so many other projects and responsibilities due, and the stress became so insanely overwhelming. One of the best decisions I made was dropping my extra class, as well as requesting a break from my internship.

I think another issue was my expectations for myself based on my Poster Project. The process for my poster went sooo smoothly because I had a very clear vision for how it would look from the beginning. Brett also loved the poster, and I felt that I could never live up to those expectations for my booklet. Going off of how well my poster went, I felt that I should not be struggling so hard on the booklet. This definitely resulted in my feelings of shame and self-disappointment which affected my motivation and productivity to work.

Despite how challenging this project was, I am still really happy, satisfied, and proud of how my final booklet turned out. I think it’s fun and whimsical, and showcases Awazu’s work in a quirky, chaotic, and magical way.

Poster and Booklet

02. MOBILE EXPERIENCE

Without catching a break from the traumatizing booklet, we moved into the next part of the project which was creating a complimentary mobile experience.

Site Map

Wireframes

Prototyping

FINAL MOBILE EXPERIENCE