Design Hero
C Studio, Spring 2022
First Thoughts
My personal goal for this project is to find some designers whose aesthetic and practice I want to incorporate into my own. I am still lost with my personal style as a designer and I am trying to accumulate new things into my style to help define it. Although part of this project is definitely going to be about merging your own tendencies with your design hero, I do want to pull from whoever I choose in a bit of a stronger way.
Choosing a Designer
To begin, I knew I wanted to look into one fashion designer, because I love fashion, but I also wanted to take the time to explore some 2D designers, because I really don’t know many (besides El Lissitzky, but I don’t want to be tied to Soviet Propaganda for the entire semester).
Jess Jones, my wonderful roommate, has a book of quotes by over 60 designers. Using this book, I went through every name in the index to try and find someone I liked. Out of these, my favorite is Emil Ruder. He plays with empty space and composition in a way that I really enjoy, and he has a slightly more expanded color range that I could stretch even more if I tried.
For my fashion designer, I decided to make a board for Iris van Herpen. Although I have many designers I love, van Herpen is almost wearable art to me, and I have never seen a line from her that I didn’t like. There’s this amazing way that she bridges something totally fantastical and sculptural into something wearable and chic. She’s also very inspired by natural forms, which is something I love as well.
Ultimately, I decided to pursue Emil Ruder. Something I’ve been searching for in my work is a sense of restraint without being boring, and I think that working with Emil will help to teach me that restraint. Also, somebody has worked with Iris van Herpen in the past and Emil gives me the opportunity to use some German. It’ll be a good time, I think.
Who IS Emil Ruder?
To gain a better sense of who Emil was, what he means to the field of design, what he believes about his work, and ect., I ventured to the internet. I found these pages, which I have used as reference in understanding Emil:
As one may have noticed, I did some of my research in German, particularly the last PDF. German was Emil’s native language, and I think there’s a certain amount of nuance that is left behind when you leave a person’s native language. I want to attempt to keep as much of that nuance as I can, so doing some of my research (and eventually most of my project) in German is very important to me. Besides, it would be nice that Emil would be able to view my project with the most amount of ease for him. In my mind, this is a project to honor Emil.
Also, I’ve been thinking about intentional inaccessibility in my work. I think that English monolinguals have had the entire world catered to them and it’s very easy to just view the world in English. But the world isn’t in English. It’s easy enough to translate something nowadays; you can just hold up the google translate app and it’ll do all the work for you. So why do we insist on making English the default when there are tools to help? I think that I will inevitably include English translations, but I want to keep the emphasis on the German speaking and writing.
My document with answering questions about Emil is here, and my final essay on him is here.
Creating the Poster
Sketches:
In my research, I have learned that Ruder favored a nine-part grid — so that’s what I used when initially creating some poster sketches.
Halfway through, I was able to take out Ruder’s book, Typographie, from the library, and discovered that Ruder has a whole section dedicated to suggested proportions. Using these, I added them onto my pre-existing grid and developed my next 5 ideas using some of these proportions.
Using these proportions, I feel like I was able to achieve a much nicer sense of composition and white space in my posters. In my second half of poster sketching, I also started to move away from displaying Ruder’s posters, and instead focusing on the type. There’s this cool part of Typographie where Ruder talks about not using gray tones and instead creating shades of “gray” using shape and type in varying arrangements. That’s inspired me to try and use some of Ruder’s type work as a graphic within the poster. If I use his experimental type, I will be able to showcase his work while still working within a white space-friendly composition.
Rough Iteration:
I decided to move ahead with the concept with the large-scale portrait, but I wasn’t really feeling any of my other sketches so I decided to experiment with a different layout for my second concept. I found this poster by Ruder that I really liked the proportions of, so I played with it a bit.
Going in to crit, I still really enjoyed the concept of the large portrait, but I feel like the execution isn’t quite what I want it to be yet. The purple text isn’t right, I’m not sure if the text should be purple at all, and the text is a bit too big when printed. This does mean that I have things to change in my next iteration. For my other poster, I feel it looks more finished. This is a double edged sword because I really like how it looks, but it’s hard for me to imagine what else I could do with it.
After crit, I decided I am going to pursue the portrait idea more, although the popular vote went to the circles poster. I think this is a good opportunity for me to push myself towards a more sophisticated look. Some changes I plan to make are:
- try making the head smaller/bigger
- make the text smaller
- change the scale and the overlap of Ruder’s typography
- fill in my dummy text
- play with the colors and the opacity of the text
- try different positions for the timeline
- play with the line extension of the tie
Iteration:
Firstly, I got rid of the gradient and moved the portrait up to bleed off the page. Looking back on my initial poster, the very slight gradient looked more like a misprint than something intentional, so taking it out cleaned up the poster immediately. Moving the head eliminated the tension in the whitespace above the head. It was a little too close before. Then, I explored a couple different scales at which to put the portrait and I explored some color-ways, just to push the direction I was taking, to see if I liked what I was doing. Also, I gave Ruder a shoulder; he was a bit wide.
From there, I began to collect more of Ruder’s type work, so that I could have a better sense of variety in the text in his head. It lets me have a more successful “gradient” made out of text too.
Using this work, I began to arrange it within Ruder’s silhouette. I tried to arrange his type to somewhat fit inside his head. To complement and inspired by this text, I also played with the arrangement of the quote. I wanted to create something that would move the viewer across the page more. I also added more points to the timeline, although I didn’t have time to space them out in a more consistent way.
For crit, I decided to go with the type-only poster. I was trying to go for a more Ruder-style philosophy on using the type, which is not to create a gray tone (in my case red) and to instead just use type.
I feel like this version of the poster was the result of working too late in studio and losing my good sense of design. In retrospect, the illustration style gets lost in the business of the pure typography and the eye doesn’t really get a good resting place anywhere in the poster.
Some of my friends don’t like his nose, or his smile line, or even his eyes. I tried the poster without them, but it felt like he lost all his personality when he lost his nose and smile line. Besides, I know that nose — as weird as that sounds. He has a very Central European nose; it’s the same nose that my grandfather, my mother, and my sister has. In a very odd way, I feel like the nose ties me to him. It makes him feel like a person I could really know.
Going forward, some changes I plan to make:
- Add back in red background
- Evenly space the timeline
- Change positioning of the paragraph
- Bleed the quote off the page
- Play with tones of red for the text
Brett had some advice to move the paragraph up, connect the K to the tie line, move the text to not fit within the head but travel across it, and move the timeline down to the bottom of the poster. Based on this, I played around with those positions, but ultimately it still didn’t feel right. My poster was feeling boring — often a consequence of minimalism that isn’t perfected.
So, I sought out the help of Dylan and my classmates. Dylan and Julia (a products student) suggested that I take a look at Ingo Offermann’s work (http://www.ingooffermanns.com/de) and, based on how he typically plays with his type, move the paragraph to the upper left of the poster. This was immediately better. Dylan also suggested that I increase the stroke of the lines for my illustration as, at the size they were at, seemed incongruent with the style of the rest of the poster and somewhat competed with the type in Ruder’s head. These suggestions helped a lot, but I was still struggling with my timeline. By a stroke of luck, Tara was walking around as I was talking (complaining) about my poster, and suggested I extend the n of nicht. This was totally a magic moment, it’s like she fixed all of my worries in one go. It connected everything together in such a nice way.
For final tweaks, I made the paragraph size smaller, finessed the type on the timeline, moved “design.” up, and typeset the type from the musica poster so that it was no longer image traced.
Final Poster:
I’m really happy with how my poster came out. It’s not exactly how I originally imagined it, but I think the way it came out is still nice. I think it reads minimalist, which is something I was worried that it wouldn’t do. I’m proud of all the different elements I was able to include without compromising my overall vision for the poster.
Just Kidding! Final Poster with Tweaks:
This poster is nearly the exact same as the version prior, with some additional lines surrounding the collar and the timeline existing on a diagonal, rather than perpendicular. Additionally, I changed some minor kerning and spacing issues. I’m really happy with how this poster turned out. I think it’s legible and interesting, and it fits into the system of the booklet, the animation, and the prototype. Plus, I like how I used space in this poster. I think the white space is what Ruder would call positive white space.
Creating the Booklet
Sketches:
The nine-part grid and the proportions are back. Like with the posters, I already have a pretty clear guideline to how to start I want arranging my pages and what typeface I want to use. I still need to define the exact colors I want to work with, but I know I’m going to be operating in black, white, and jewel tones.
Approaching the flat-lays, I didn’t really think of them as complete booklets as much as I used them as an opportunity to think about all the different kinds of spreads I could make, with the intention of mixing and matching later. For color in these, I really tried to stick to black and white, but I did place in some red where I thought it was necessary to communicate my idea.
Also out of crit for our flat-lays, Anthony had a brilliant thought to use the partial circles as page numbers, which is something I definitely think I’m going to pursue. I think it’s a really clever way to integrate progression without the traditional page numbers.
Little Books:
As a next step, I really wanted to test the flow of my booklet. The physical journey while reading the booklet is really important to me and I feel like just looking spreads on just a flat-lay doesn’t communicate the physical journey as well as flipping through something. So, how do I simulate the experience of a book? With, as it turns out, a book. I took my five flat-lay sketches, cut them out and taped them back together to form mini-books.
After going through my first five mini-books, as made from my five layouts, I decided that some of the things that I envisioned for my flip throughs didn’t really work out in practice. For example, I was very excited by the idea of “BERLIN” wrapping around a page flip; but when actually flipping through the book, the effect wasn’t very clear.
Having learned from the first five mini-books, I reprinted my flat-lays and cut out all the pages again. However, I took pages from different flat-lays and placed them into new books to test some potential combinations of the spreads — part of my initial plan with the flat lays. Arise: franken-books! My new franken-books went exceedingly well and I was able to determine a progression of spreads that I was really excited about pursuing.
Some things I enjoyed from my mini-book flip-throughs were, and decided to include:
- A very dark first spread (makes it feel as though you’re entering another world of the book)
- A circle motif
- A “Typographie” book spread across a page flip
I also decided that I want to do a half-pace fold out for the middle spread, to mimic opening Typographie, like a book within a book.
Iteration:
For my first full-size iteration of my booklet, I more or less followed the plan I gave myself with my favorite franken-mini-book (which was iteration 6/8).
This was a pretty good base. Of course, there was still a lot more I had to do, but I saw the purpose of this iteration as a way to get my assets and pages together on indesign, which I find to be the hardest step of every project. Moving into iteration 2, I focused on cleaning up this first version and making sure that everything I missed adding in version one was added in.
Specifically, I changed my cover concept, tweaked my table of contents and timeline, half-toned the portrait and integrated a quote, made page “numbers”, and cleaned up my final spread. These were good and necessary improvements. I thought that a large portion of my booklet was either too simple (boring) or too cluttered. So, the changes I made were in service of pursuing that sense of sophistication. Additionally, the red added into the covers helped to tie in the red in the middle of the booklet. I think that as I go more through the process of my booklet, I will gradually add in more color as I see fit. Right now, I suppose that color can always be added in, but once it’s there it’s somewhat hard to remove.
From this point on, it was really a labor of brute force than anything else. I wish I could say that I took time to intentionally step away from the booklet and think about the choices I was making, but where I was in the process just brought me to stare at the booklet for hours on end until I came up with something.
Fortunately, to aid my brute force approach, I did get some pretty excellent advice from Brett and Langston. They noted some things that I could bring into more pages, like the circle motif and the color red. It really helps sometimes to hear the things that, in retrospect, make you think “oh, of course!”. I often find while working on my design work, I tend to overthink my designs quite a bit. Some things that mean absolutely nothing to a viewer, even a designer-viewer, become quite negatively valanced when I internally critique it for too long. I like checking in with people for things like that (“Does this even matter?”).
The biggest changes to my booklet from the second to the third version, in my eyes, was the push for more lines and color. In my first few iterations, I was hoping that the circle motif would be enough to carry the reader through the booklet, but going forward after spring break I wasn’t so sure. So, I first decided to add in more lines to the various spreads, creating another motif to follow. Then, true to my hopes earlier in the project, I added more color in on top of that. I think all these three things together really made for a more cohesive booklet spread-to-spread.
This third iteration was my final for the initial due date of the booklet. When I turned it in, I was quite unhappy with it. In that sense, space was really good to me. When I came back to it later to make revisions for the final, I still didn’t feel good about it, but I did feel much more willing to approach it. When I put it down for the first deadline, it felt poisonous; I could barely stand to look at it. Coming back to it, however, I felt quite a bit more willing to work with it.
Final Booklet:
My final version, in the end, is not all that different from my third iteration. There’s a couple minor graphical tweaks as well as some rag-work, but nothing too major. I’m really proud of how it turned out. I think I accomplished all the things I wanted to with this booklet — a sense of sophistication with space, an engaging and logical physical journey while flipping through the booklet, and a sense of interest. I also have a newfound respect for print designers. This was hard. There’s a lot to think about when designing booklet that I’ve never really had to think about in any of my previous projects. Yet, for how hard it was (and the dramatics in the middle), I enjoyed doing it.
Creating the Prototype:
I have some experience with UI design previously; I work with ScottyLabs (a tech club on campus) as a UI tech lead along with Susan Ni, an environments student. Together, we’ve created the UI for this year’s Tartanhacks (the largest hackathon in Pittsburgh) app and website, as well as UI for a couple smaller tech projects within the club. This is all to say that for the prototype, I was thinking about how to apply the skills I’ve learned doing the ScottyLabs UIs and make the best UI I’ve made yet. I still have a lot to learn and this was a great opportunity to do some application.
I started off with a simple wireframe, documenting what pages I would need as a part of my prototype and how they would link together.
This wasn’t a perfect wireframe and as I went through creating my prototype I changed the experience a bit, but it was a good place to start.
I focused on all of the same motifs I established as a part of my booklet to build out my interaction — the red, the circles, and the lines. This was pretty easy for my homepage and also for moving onto my “Wer” (who) page. However, in staring at these two page sets, I wasn’t really feeling it. They felt predictable and boring. There wasn’t really anything about them that felt innovative. They were just another set of web pages.
What can I do about it? Well, I can turn it sideways. I was thinking about how I would interact with something in 3D, which is a perspective that I’ve been trying to really integrate into my work, and I thought that the first direction a person might spin something with their hand is along the horizontal plane, not the vertical plane. Based on this feeling, I decided to change my design into a horizontal format.
I am glad I did. It gives the prototype a much fresher feeling. From the change from vertical to horizontal, I actually had a pretty straight shot to finishing my prototype. Perhaps it’s my inexperience with the medium in comparison to the booklet and the poster, but I was able to gradually work on anything and, once finished, I didn’t see a lot to go back to.
I’m happy with my prototype. I think it’s cool and I like what I did with the interaction.
