Dieter Rams Booklet + Mobile Experience
Design Hero Part 2
Prompt: Design a booklet for someone who knows nothing about your design hero. 16 pages of 8.25 by 10.5 inches; saddle-stitched
Aside from what was given in the instructions, I made a list of things I wanted to include:
- 10 principles of good design
- Big text “What makes a design good?” — what Rams asked himself when he made his 10 principles
- products in their environment (accented with colored callouts) — this is to show how well they blend into the background, adhering to what Rams advocates as “unobtrusiveness”
- Dieter’s home (his Japanese garden and inside the house)—to show his design philosophy is also a way of living
- Table of contents using his signature dial element
I also organized my essay into sections to help me brainstorm the content of my spreads. I gave each section a subtitle to help readers navigate through the whole thing.
Flat Plans Sketches
Things to consider:
- What story do I want to tell? How to weave a cohesive narrative?
- How do I want to tell the story? Do I start off loud or quiet?
- How does the reader move through the pages? What is the pacing?
Rough Layouts
I decided to focus on Rams’ design philosophy and how he arrived at them. I wanted to play around with different ways of telling the story, starting off quietly versus loudly.
Layouts
Putting in images, text, and quotes.
A starts off and ends quietly.
B is more of a dramatic journey, hitting the viewer with a lot of eye candy right off the bat. Both of these has the text “What makes design good?” on their center spreads, because this is basically the central idea of my story, and a major point in Ram’s career.
In C layouts, I experimented with what I wanted to put on the center spread. Instead of the question “What makes design good?” being the hero of the story, it is a long quote by Rams:
“[The] reduction and unobtrusiveness generate space. The orderliness is not restrictive but liberating. In a world that is filling up at a disconcerting pace, that is destructively loud and visually confusing, design has the task in my view to be quiet, to help generate a level of calm that allows people to return to themselves.”
This, I thought was a really good explanation of Rams’ philosophy “less, but better” and further explains his motives in drafting his 10 principles of good design.
I wanted to contrast a chaotic spread with the above quote on a dark background and an orderly spread with light background. I don’t know if this is too much drama. In C2, the chaotic spread goes into an orderly timeline of Rams’ products, to show how he applies his own philosophy through his works.
In C3, I put the chaotic spread in the very beginning as a hook to the whole booklet.
Cover Explorations
Having “less, but better” as the title because this the booklet’s central idea. I put “weniger, aber besser”— German of the phrase on the back.
***
Digital Layouts
I moved into Indesign and started translating my sketches into digital spreads. I ended up with a few spreads I didn’t plan, but just wanted to try out. So some of these are variations of the same spread.
For the chaotic spread, I was collaging a lot of busy city scenes together. I toned it down a bit in the last one because I thought it was getting a bit too overwhelming, but that was also the point I was trying to communicate.
Feedback for the last one:
- Background can be more intense. Feels a bit flat
- Try doing it without Rams’ portrait. Make it purely typographic
- Feels like an outlier spread. How to tie in with the rest of the content? Maybe have other people’s products in there?
I’ve always been inspired by this Braun catalog design, but didn’t get to try it out in the poster project. It’s influenced by De Stijl, which uses a lot of primary colors that Rams also likes to use (for highlighting things).
“Proponents of De Stijl advocated pure abstraction and universality by a reduction to the essentials of form and color”—Wikipedia
I think it ties into Dieter Rams’ ideals nicely of returning to essentials.
I tried using this Piet Mondrian painting as a basic grid and overlaying images and text on top. This allowed me to explore scale and composition in an interesting way.
I also did this spread as a reaction to De Stijl and to talk about Dieter’s restrained approach to color.
I think I might combine these two spreads to talk about color and have put in more examples of his work.
***
Digital Layouts II
The whole thing needs to be a story. And the story needs a beginning and ending. Right now my beginning and ending aren’t working.
Things to consider:
- “breath” vs “density” between spreads. Where these are located throughout. How do they affect pacing?
- how to say goodbye on the last spread?
- how to have consistency throughout? With the usage of grid, type, and color.
Other thoughts:
- since I have one too many spreads, maybe combine chaotic spread with the table of contents (which is nice but uses a lot of real estate)
- be nice to have Dieter’s photo looking back at the reader on the first page (“designer behind the work”)
Covers:
- Is the type “less but better” necessary or redundant? Does the cover already show this principle?
- The title typeface doesn’t show up anywhere else in the book. Mimics the Braun typeface. Feels a bit gimmicky.
- Consider using grids on the cover
Close-up spread:
The curvy line element is nice. Would be nice to let it show up on another page, and become an element that flows through.
Color spread:
These are two variations of the same spread talking about Dieter’s use of color. I spent more time editing the left one. But when I put it into the flat plan, I feel like the right one fits better with overall pacing. But I won’t know for sure until I have all the spreads to a higher fidelity and finalize my beginning and ending.
End spread:
I wanted the end spread to be quiet and hopeful. But I don’t really know how to achieve this without making it boring. I started trying stuff but it became too loud and started looking like a brochure.
More things I could try out:
- tree shadows?
- big photo that floods the whole page?
Digital Layout III
End spread:
I’m picking between these two for the end spread. Based on feedback, I’m choosing the left spread because it draws people in with the photo. Also, it continues the motif of the numbers from 10 principles of good design flowing through the photo. Maybe I should consider flipping the image and the text so the image flows through the end page?
Ending is what you want the reader to take with them when they go, so it’s arguably the most important spread. It should be memorable.
Other notes:
- Go through the flat plan while verbally telling its story. Does the placement of spreads justify the story? Does the pacing work?
- Don’t put page numbers on inside covers
Color spread:
I added in details on Dieter’s products as examples to his color philosophy. I’m not sure if the flowing line element is there yet though. The captions I placed both horizontally and vertically along the images as a response to the “de stijl” look, but I don’t know if it’s too unorganized.
Final Booklet:
Reflection:
As with the poster, I learned how to design a visual system that adheres to Rams’ philosophy “less, but better” yet conveys a lot of information. I understood that “less, but better” does not mean have less things, but that the design should appear simple and understandable, even though it contains a lot of complex information.
Much of the booklet design was finding out what story I wanted to tell. The flat plan stage was the most important to me because it allowed me to explore narrative, pacing, loud vs quiet, breath vs density.
Mobile Experience
Sitemap
I created a sitemap to get a sense of how many pages I want and what the overall experience will be like. I knew I wanted less of a guided tour and more of a choice-based experience, so all of these pages can be accessed from the home screen instead of one leading to the next. This is because people are interested in different things one they first learn something new. A visual-learner might want to see the works first, while someone interested in people and stories might click on “about” first.
Wireframes
Then I started sketching out ideas for each screen. I explored many ideas through quick and dirty sketches first, then picked one to bring to a higher-fidelity in Figma.
Prototyping
It was really fun to animate these interactions in Figma, because they made the experience come to life. It was also interesting to consider user experience, in terms of what is legible, readable, clickable, scrollable etc. It was a lot of thinking about how to get the user to do a certain thing through visual cues or animation.
