Transforming a small blog into a powerful platform.

Because academia deserves better.

Society+Space approached us with two very simple challenges. Fix broken functionality that had built up over years of evolving a pre-built template. Secondly, create an experience that looked and felt more editorial – something to compliment the intellect of their content.

From our research, the most evident thing about academia is the lack of attention to design thinking or aesthetics. Whether its a printed publication or a website we found it difficult to find many examples of good design.

That's when we realized that the bigger opportunity wasn't simply to fix a few bugs and make a good-looking website. Instead, it was to create a site that set the bar for academic journals.

Flexible & Connected

Their website's biggest issue was that the Wordpress template they were using was functionally limited. While they had individual articles, collections of articles, and groups of collections, their template had only one layout to support them all. This forced them to apply work-arounds that over time created an organizational nightmare.

The fundamental purpose of a companion website is to engage a new audience – one that doesn't have access to content trapped behind a pay-wall. But even when your content is free, people need to be able to discover it, otherwise what's the point?

So our approach was to create a design system that gave them the flexibility to display content in a variety of ways, and to encourage discovery by creating an architecture that connected relevant content throughout the experience.

Examples of different layouts for an article header. No image, medium image, large image, x-large image.

The Grid

Rather than using the conventional 12-column grid (combining both third and quarter compositions) we chose to go with a 6-column grid, adhering strictly to compositions of thirds.

Main content would sit in the right two-thirds, while supplementary content would be in the first third (which could either be hidden or stacked on mobile.) This allowed us to create  compositions that made reading long-form copy easy, but also allowed us to maintain interesting compositions.

Atomic Design

Rather than design entire pages, our approach was to design a series of "components" that could be rearranged in an infinite number of layouts, providing more flexibility and speed when developing content.

"After 8 years of pouring my blood, sweat, and tears into this project, I almost cried when I saw the new designs."

Natalie Oswin

Editor in Chief, Society+Space

What we did

From a brand perspective, we gave them a new set of fonts, as well as an extended color palette. From a digital perspective, we created a whole new site architecture, a flexible design system, and tied it all to a much more powerful content management system.

Society+Space is a free digital magazine and subscription based journal that helps people stay informed on interdisciplinary debates related to pressing social, political, and environmental issues.

Components for page headers.
Components for featured articles.
Components for lists of content.
Fixed-width for x-large resolutions.
Fluid–width for semi-large (laptop) resolutions.
Fluid–width for tablets.
Fluid–width for mobile.

Society+Space is a free digital magazine and subscription based journal that helps people stay informed on interdisciplinary debates related to pressing social, political, and environmental issues.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a caption

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

What’s a Rich Text element?

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Static and dynamic content editing

Heading

Heading

Heading

Heading

Heading

Heading

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a caption

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

What’s a Rich Text element?

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Static and dynamic content editing

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.