Blog
Designing OpenTF: A Sprint to Craft an Open-Source Identity
Visual
Web
5
min read

Designing OpenTF: A Sprint to Craft an Open-Source Identity

Published on
Sep 20, 2023
Blog
Designing OpenTF: A Sprint to Craft an Open-Source Identity
Visual
Web
5
min read

Designing OpenTF: A Sprint to Craft an Open-Source Identity

Published on
Sep 20, 2023

Contributors

Eilat Arbel Dahan
Visual Design Team Lead
Omer Hoffman
Web Design Team Lead
Yulia Goldfeder
Visual Designer
Nati Sela
Web Designer
Liad Nimni
Visual Designer

When Terraform—an open-source tool that many companies, including our client env0, have built their products around—announced a shift in their licensing, it sent shockwaves throughout the tech world.

The Catalyst for Uncommon Collaboration

The situation was so dire that it ignited an extraordinary response: OpenTF. This alliance is remarkable not just for its mission to keep Terraform open-source but also for its participants. Business competitors, who traditionally kept a safe distance, suddenly found themselves sharing a table and a common cause. As one of the founding members in this alliance, env0 reached out to us at Polar Hedgehog to help shape OpenTF's visual and digital identity, setting us off on a sprint that put our skills and teamwork to the test.

The Marathon: Logo Design in Record Time

In ordinary circumstances, we'd have the luxury of time to explore and refine, but with OpenTF, the clock was ticking loudly in the background. We were briefed with the project's name, OpenTF, and with guiding principles—'community,' 'cooperation,' and a subtle homage to Terraform. We knew from the get-go that this wouldn't just be a sprint but a full-blown marathon, one that demanded agility, creativity, and an extraordinary level of coordination among team members.

Our approach was uniquely collaborative. We pooled our collective expertise across visual and web design teams to brainstorm and sketch initial concepts. Late-night meetings became the norm, and the team's commitment was evident in these sessions where we critique each other's drafts, offering constructive feedback and new ideas. This process was so dynamic that often a logo started by one designer in the morning would undergo transformations by others throughout the day, culminating in a version that was a true testament to collective effort.

Version of a logo more closely resembling Terraform's aesthetic (top), along with version symbolizing collaboration (bottom)

The balance we had to strike was delicate: the logo had to resonate with Terraform's aesthetic without directly imitating it. After an intense 48 hours of iterative designing, we landed on six distinct logos. These ranged from options that stayed closely aligned with Terraform’s original design to others that took a bold departure, offering a fresh perspective. We scrutinized every element—from color palettes to typography to isometric designs—to ensure that they conveyed the messages of unity, collaboration, and open-source ethos that OpenTF stands for.

By the end of this period, we exceeded the brief’s requirements, displaying a range of options that gave OpenTF's stakeholders plenty to consider. All of this was done while grappling with an ambitious timeline that would usually intimidate even the most seasoned designers.

Version of a logo symbolizing construction and innovation (top), along with version featuring custom typography (bottom)

Web Design for Open Source: Balancing Minimalism and Information

In the open-source landscape, striking the right balance between minimalism and comprehensive information in web design can be a tall order. Given that the essence of OpenTF is built on community cooperation and transparency, we knew the web design had to mirror these core values. What's fascinating about many open-source websites is that they often serve a dual function: they're both a platform for articulating the values and goals of the foundation and a go-to documentation resource for developers. We took our inspiration from standouts in the open-source community like the Mozilla Foundation. Our aim was more than just elevating OpenTF's online presence; we aspired to provide a robust and impactful starting point that could truly embody the mission and vision of this newly formed foundation.

Initially, we were navigating uncharted waters, armed with almost no dedicated content to lay the foundation of the wireframe. But fate was on our side: the OpenTF consortium soon released a manifesto that was rich in ethos and intent. This became the bedrock on which we built our wireframe, focusing on key messages like OpenTF's commitment to being truly open-source, community-driven, impartial, layered, and modular. At the same time, we knew that the project was making waves quickly—garnering 35,000 GitHub stars at the time of writing this post—so we designed a 'Latest News' section to keep the community up-to-date with rapid developments.

To boost user engagement, we took a not-so-captivating FAQ section from the manifesto and transformed it into an interactive accordion feature. We also knew that recognition matters in a community-driven project, so we designed a visually pleasing 'Supporters' section that not only lists but also links to each contributing company and individual. And for the call-to-action at the bottom of the page, we crafted it to be as unobtrusive as possible, steering clear of overt marketing tones while still offering clear instructions on how to support OpenTF.

Wireframe of OpenTF's Header Section

Finishing Touches: Translating Wireframe to Reality

Once a logo was selected, which was not one of ours, we pivoted to focus on the finer aspects of the design. The objective was to maintain a modern, minimalistic look, infusing the selected logo's purple hue to create a subtle nod to Terraform. Texture inspired by the logo's shape and a gentle purple gradient breathed life into the hero and Call-to-Action (CTA) sections, producing a captivating glass effect. We also developed minimalistic icons for OpenTF's goals, earning praise from all participating companies.

Unique Challenges, Team Triumphs

What sets this project apart was the remarkable speed at which we were able to produce a stellar design. And it wasn't just about pleasing one client; this was a collaborative effort scrutinized by multiple companies, all invested in OpenTF. The accolades we received speak volumes about Polar’s ability to deliver quality under pressure.

Conclusion: Future Forward

We're incredibly proud of what we achieved with OpenTF. This project reaffirmed that when our clients need us most, we at Polar Hedgehog can deliver extraordinary results as a team, even in far from ideal circumstances. We're excited to see how OpenTF evolves and how our designs contribute to its promising future.

Contributors

Eilat Arbel Dahan
Visual Design Team Lead
Omer Hoffman
Web Design Team Lead
Yulia Goldfeder
Visual Designer
Nati Sela
Web Designer
Liad Nimni
Visual Designer
Visual
5
min read

Product Animation: Beyond Basic Screen Recording

Web
Tips
3
min read

AVIF vs WebP: The Right Image Format for Your Webflow Site

Web
Guides
3
min read

Enhance Webflow Sliders with Splide.js

Web
Guides
4
min read

Country Codes in Webflow Form: A Step-by-Step Guide

Web
Guides
6
min read

Syntax Code Blocks in Webflow CMS: A Step-by-Step Guide

Web
6
min read

Rive vs Interactive Lottie: Choosing Your Web Animation Tool