Minimalism: The Elephant in the Room
COURSE: INFORMATION AND GRID DESIGN
BACKGROUND
My task was to use interaction and visual design within a multi-column grid system with the aim of reducing selective exposure, thereby inviting users to read articles that don’t just support each other — but contradict and challenge the other. Selective exposure refers to the phenomenon in which individuals tend to favor information that affirm their pre-existing views, avoiding conflicting information — however the danger in this lies in the lack of productive discourse and within society. By presenting articles in such a way that they deliberately conflict with one another, my prototype can help encourage diversity of thought and open mindedness.
MULTI-COLUMN GRID SYSTEM
Previously, we had explored how a manuscript grid could bolster the usability and readability of a single article, a single perspective. Indeed, the single margin offered by the manuscript grid provides the opportunity to focus the design fully on a single work of text. However, a column grid presents a different kind of opportunity — it allows us to place various elements within the columns that have relationships with each other, such as supporting, challenging, or contradicting each other. This multi-column structure adds more complexity to design, empowering readers to encounter many different perspectives. Because of this, the multi-column grid is ideal for banishing selective exposure.
DESIGN
Muted, neutral tones mimic the topic of minimalism, immersing the reader in a sensory experience. Pops of green shows up sporadically throughout, demonstrating the restraint minimalism has. In terms of readability, these colors help declutter and simplify the main screen, which has six articles and risks being too overwhelming to the reader.
To support deep exploration, I chose two main images that act as the primary spaces for this topic — the top-left image is used for the Home Screen, while the bottom-left image is used for the Articles Screen. These images not only visually exhibit the concept of minimalism, their contents structurally support article exploration: The first image, with its generous margins, draws the eye towards its center. The second image, with its objects situated against the wall, provides an intuitive way to group pairs of articles.
INTERACTIONS
Transition Between Home Page and Articles Page
Due to the complexity and breadth of content within the second screen, I didn’t want to immediately present options to the reader, but rather empower them to begin exploring. By starting off first with the title, encouraging them to dive deeper, I reduce the likelihood of readers feeling overwhelmed. I also prime them on what to expect, so they will be more able to enter the following space with the intention of learning about minimalism.
Icon Interaction
I have included a feature that allows user to hover over circular icons and view the titles. I chose this method because the Articles room itself is its own artifact of the piece, and I want to let the users decide whether they process minimalism visually or textually. I also don’t want to cause apprehension by showing sprawls of text, but rather entice readers into articles — and the titles are enough for that.
Animated Zoom In
When users do decide to read an article and they click on the title, the piece performs a zoom-in animation. This keeps the reader contained with the same screen, making it easier for them to navigate across different articles. It also prevents the transition from being too disruptive, which would have occurred if I shifted to a different page.
A Shadow Biosphere
COURSE: INFORMATION AND GRID DESIGN
BACKGROUND
For this project, my task was to consider ways of using a manuscript grid to engage college students with an article they found arduous to read. During my explorations, I identified the most salient features of the text that could be emphasized with the redesign, places where user interaction could bring more life to the content, and micro-breaks that could prevent content fatigue.
DESIGN
I focused on finding ways to break the long text into manageable chunks for the reader, preventing content fatigue. Specifically, I searched for ways that interactions and micro-breaks could do this. I also focused on how to breathe life to the meaning of the text in a way that the original text didn’t — experimenting with different color palettes, typography, and visual aids.
The color palette, as shown above, are the core colors of my layout, which are used in varying saturations and opacities throughout. Their darker, earthy tones match the air of mystery of the text, while also making it feel more relaxing and atmospheric for the students.
Since the author touches on many aspects of the origins of life, I collected real life images from NASA and USGS that depict the diverse, plentiful, and vibrant biosphere of Earth — glaciers, phytoplankton, the Moon, and even Mars, which was hypothesized to be the source of the shadow biosphere. The images are stark but colorful, adding context without distracting the reader. The content of each image is able to be seen and digested quickly, so it acts as a component to the text.
INTERACTIONS
Section Transitions
A glaring issue in the original text was how static it felt. There was no opportunity to actually engage with the text, beyond just reading words off of the page. I added a feature that fades smoothly into another image as readers scroll down the reading, as well as a section marker to keep track of progress. Moreover, at the end of each section, there is an arrow inviting the reader to keep going.
Image Interaction
Because these images come from well-reputed organizations, I added a feature that lets users click the image in order to view more information about what its depicting, how it was taken, and its relevance. This will elevate the images to be more than a visual aide, but another medium of science for students to explore.
Automatic Scrollup
Due to the long length of the text, providing the ability to scroll to the beginning of each section automatically reduces the need for users to manually scroll, especially if they want to reread the text. Doing this also makes the text feel more manageable, and therefore less overwhelming.
Falooda
BIG STRAW MAGAZINE
DESIGN
With the images already provided to me, I wanted the design to enhance and bolster the pictures of Falooda — making it seem as natural as possible, so that it didn’t appear as though the images were created before the layout. To do this, I created a layout with a minimalistic design using bright, eye-catching colors. The square shapes and the block quotes made the article more digestible to the reader. The quote curving across the pages added a sense of motion, breaking up the rigidity of the square shapes. The layout depicted the fresh, youthful theme of the article.
FEEDBACK
Because of all the layering happening within the layout, my peers and I figured out small adjustment to make the overlapping shapes appear clean and not overwhelming. I realized that I hadn’t paid much attention to the design of the body copy itself, not thinking it an important feature — however, it was actually a core aspect. I edited the text — un-indenting the first sentence of a column, aligning the quotes to the text — so that the corners were as sharp and the blocks were as rectangular as possible. Doing this pulled the rest of the layout together, achieving that modern, sharp look I was going for.
Baker Porter
BIG STRAW MAGAZINE
DESIGN
This layout was an exercise in accompanying the vague nature of poetry with a design that was not too specific or explicit so as to disrupt the experience, but provocative enough to engage readers. Previous layouts had been for articles with established topics; here, the meaning was what the reader made of it. I strove to create a design the supported the sensory experience of the poem but gave no clear answers.
I took most of my inspiration from the title, Baker-Porter Hall, which is the humanities and social sciences building at Carnegie Mellon. It is also the oldest building, and when I wandered through it, I could sense its age and mystery: The stairs were winding and burgundy; the lighting dim and warm; the windows framed by dark wooden beams. I translated this essence into the design, with decadent, warm hues and structured grids to embody the physical building.
Within grid cells, I slotted in imagery taken from the poem — a bird, a feather, a stack of books, a telegraph. I kept them simple, only the sillhouettes, to again let the reader make their own interpretations.
FEEDBACK
One of my concerns was that the layout was an off-white color, which could contrast jarringly with the rest of the layouts being pure white. My club members acknowledged this concern when it came down to design consistency. However, they pointed out that our magazine, first and foremost, was a creative publication — it was about experimenting with design, taking risks. They loved the off-white and felt it captured the tone better than pure white did, and so we agreed to keep it this way. To offset any jarring effect, we stuck this layout right in the middle of the magazine to treat it as a special featured addition.
The Body and Self in Burning
BIG STRAW MAGAZINE
DESIGN
This article analyzes a haunting, atmospheric film with motifs of fire and invisibility. To mirror this tone, I created a layout reminiscent of newspapers and old-school movie theaters, which brought to mind the same poignancy. I used a contrast between dark colors and stark red hues, aiming to incorporate flaming patterns throughout. For instance, the gradient red of “BURNING” in the title imitates the effect of fire, as if burned by the embers coming from the woman. On the last page, the silhouette of the woman is a lighter red, as if she is in the process of disappearing. Each element of the layout, I hoped, would tell the story of the film it represented.
FEEDBACK
Because this style was so new to me, I was unsure about my design and whether it conveyed what I meant it to. I had also experimented with several effects this time, from the gradients to the feathering of the quote at the end, and I wanted input as to whether it distracted the reader too much. During feedback sessions, however, my peers thoroughly enjoyed my work and provided helpful suggestions — like minimizing the silhouettes of the two men to the bottom-right corner to make the text easier to read.
Contact me
phyllis.feng2003@gmail.com
Work
Other projects
About