I hope to make this project mobile responsive in the near future, but currently it can only be viewed on a wider screen. Please expand your window or visit the site on a laptop or desktop.

Thanks/sorry!
—Nick

Strategy + Specifications

Strategy

Brief Chosen

Part of a Pattern is my response to ISTD 2022 Brief #2: Agenda for Sustainability. Because all of the Sustainable Development Goals are so closely intertwined, Part of a Pattern explores two goals through systems thinking — SDG 10 Reduced Inequality and SDG 13 Climate Action.

Research shows that despite widespread awareness, climate anxiety and inequality are continuing to rise. Individuals feel a responsibility to act but are often paralyzed due to the scale and enormity of the problems. Part of a Pattern suggests a change in the way we view our role in solving these problems. Rather than suggesting direct actions that can add up to saving the world, it suggests we look at the systems that are driving inequality and the climate crisis and explores how individual members contribute to a system and where the leverage points are for systemic change.

Audience

The audience for this project is quite broad, but specifically targets individuals who are already aware of the climate crisis and rise in inequality. It addresses individuals who are aware of the lack of progress toward sustainable development goals. By suggesting a new perspective and approach to addressing these problems, Part of a Pattern hopes to reenergize and galvanize the groups seeking to
make change.

Approach

Through this lens, Part of a Pattern has been developed as a webpage for its low cost of production and ease of accessibility by its target audience. Because this project aims to suggest a paradigm shift, it requires an incredibly broad reach to be effective. Strategically, production costs and friction of distribution must be kept to a minimum.

It ties together quotes and texts from various sources to suggest a change in perspective towards addressing the systems that contribute to inequality and the climate crisis.

The web page itself is made up of randomized modules from a set graphic language. Every time the page is refreshed, a different version of the webpage is delivered. Even though each page view is unique, the content, structure, and message remain the same. This pulls the concept of the project through to its execution at a macro scale and speaks to the difference between the individual unit and the
system itself.

At a lower level, the webpage features interactive elements and animating modules and letterforms within text. This continues to demonstrate the differences between individual nodes and larger systems. It questions how many elements must change before the system as a whole becomes something new.

Specifications

Typography

Type MVB Fantabular by Akemi Aoki was chosen as the family of typefaces for this project. Using a monospaced font was important to suggest the interchangeability of units in a larger structure. Because it takes inspiration from old typewriter fonts, it maintains a humanist appearance that aligns with the messaging of the content.

All units are specified in rem, which has been set to 18px. This allows for grids, layouts, and line heights to work in units of 9px using whole and half rems.

h1

font-family: Fantabular
color: #003333
font-weight: 400
font-style: italic
font-size: 3.55555rem
line-height: 4.5rem

Part of a Pattern

h2

font-family: Fantabular
color: #003333
font-weight: 400
font-style: italic
font-size: 1.7777rem
line-height: 3rem

Global inequality and
the climate crisis are big issues.

h3

font-family: Fantabular
color: #003333
font-weight: 800
font-size: 1.125rem
line-height: 1.55rem
text-transform: uppercase
letter-spacing: 2px

Reducing Inequality

Pull Quotes

font-family: Fantabular
font-style: italic / none
font-weight: 800
font-size: 1.333rem
line-height: 2.5rem
color: #ff6633 / #003333

Therefore, we have to ask, ‘What is it about the structure of our institutions that is leading us in this direction?’

—Noam Chomsky

Body Copy Callouts

font-family: Fantabular Sans
color: #ff6633
font-weight: 500
font-size: .8888rem
line-height: 1.5rem

Climate change images can evoke powerful feelings of issue salience but these do not necessarily make participants feel able to do anything about it; in fact, it may do the reverse.

Body Copy
Expanded Text

font-family: Fantabular Sans
color: #003333
font-weight: 400
font-size: .8888rem
line-height: 1.5rem

Behind the scenes, many agents of change — at all organizational levels and in regions all over the world — are struggling. At the same time, we are far from meeting the social and environmental challenges of our day; we need to unlock more collaboration and more innovation. Finding ways to address the personal challenges change makers face is therefore important not only because it matters in and of itself, but also because it has the potential to drive more effective social change.

Body Copy Quote Callouts

font-family: Fantabular
color: #ff6633
font-weight: 500
font-style: italic
font-size: .8888rem
line-height: 1.5rem

It ignores the distribution of incomes and net worth. So that we have — when GDP goes up, people cheer — 2%, 3%, wow, 4%, and they think, ‘Great.’ But it is accompanied by vast increases in pollution, chronic underinvestment in public goods, the depletion of irreplaceable natural resources, and the worst inequality crisis we’ve seen in more than 100 years

Body Copy Quote Expanded Text

font-family: Fantabular
color: #003333
font-weight: 400
font-style: italic
font-size: .8888rem
line-height: 1.5rem

“Institutions place tight constraints on what can happen. The CEO of ExxonMobil surely knows as much about global warming as you or I do, probably a lot more, at least if he reads the materials that come to him from his own scientists and engineers, and they’ve known it for 50 years… Suppose a different individual CEO came in and said, ‘Let’s tell the population the truth. Let’s tell them that we are destroying the prospects for organized human life on earth. Let’s tell them that we are going to stop doing it. We’re going to move to renewable energy, because we care about your grandchildren and ours.’ He would be out in five minutes.”

Grid

grid

The modular grid is constructed from 24 2rem columns with a 1rem gap. Rows are also 2rem tall with 1rem gap to keep modules square. At times, these modules are halved to create a 48-column grid. This structure reinforces the concept of the content and provides enough flexibility to arrange content.