Screenshot of the new Dark Florist website

Revamping the Dark Florist Website: A Decentralized Design Journey

Introduction

When Dark Florist finally decided to update their website, I was immediately hooked. The team’s mission, championing decentralization and preserving privacy in web3, resonated deeply with me as a developer. The existing site didn’t reflect the innovation or trustworthiness that’s core to the brand so I knew this project would be more than a facelift; it was a chance to build a digital home for some of the hardest working guys in the crypto space.

The Challenge

The old Dark Florist site was functional, but it lacked the clarity, performance, and accessibility needed for a modern web3 audience. My goals were simple:

  • Make the site fast and accessible for everyone, everywhere.
  • Communicate the value of decentralization in every interaction.
  • Ensure the design and codebase are robust and that they are built to last.

Approach & Tech Stack

I started by extracting information from the old site and identifying pain points in UX and developer experience (DX). From there, we’ve decided to rebuild the site with little to no dependencies. Yes, Plain ol’ HTML, CSS, and JavaScript—beauty, simplicity, and security.

Ok, I cheated a little. The project was actually built with Vite, LightningCSS, and TypeScript, which were eventually stripped to the slimmest pieces, until there wasn’t even the need for any dependencies. This eliminates any potential attack vectors.

It was then hosted and pinned via IPFS through Cloudflare IPFS gateway after the domain was transferred from the old host.

Refreshing Figma Roots

Before diving into code, I sketched out a few designs in Figma. Let’s just say the original visualization was… ambitious. Imagine a Picasso painting, but with fewer straight lines and more “what if we put this here?” moments. It was a masterpiece of chaos, but it gave me a clear direction: anywhere but this.

Real-World Insights

A few things stood out during the process:

  • Decentralization isn’t just backend: The frontend must communicate trust and transparency. We made sure the visuals exuded the same message.
  • Challenges in IPFS hosting: Hosting on IPFS introduced unique challenges, such as ensuring reliable pinning and addressing performance issues for users accessing the site from different nodes.
  • Accessible by default: Semantic HTML, keyboard navigation, and color contrast checks were non-negotiable.
  • Plain HTML, CSS, and JavaScript is actually hard!: Without frameworks, I had to go back to the roots; browser quirks, native dom, and rendering. Surprisingly, it was super easy to get used to.

Collaboration with Dark Florist

Working with the Dark Florist team was a highlight. The developers were incredibly helpful and patient, guiding me through the nuances of web3. Their passion for decentralization and user empowerment was contagious, inspiring me to push boundaries and think beyond just web to further my journey as a software engineer.

Conclusion

Revamping the Dark Florist website was more than just a technical challenge—it was a journey into the heart of decentralization and the passion of its advocates. The experience deepened my appreciation for the web3 ethos and the importance of thoughtful, user-centered design. The new site stands as a testament to collaboration, creativity, and the power of simplicity in a complex digital world.

Hats off to the incredible team at Dark Florist for their vision and dedication. Parting ways with this project feels bittersweet—if the opportunity arose, I wouldn’t hesitate to dive back in and contribute to their inspiring mission in a heartbeat.

Visit the Dark Florist Website to explore their mission and see the revamped site in action.


Want to chat about web3, design, or open source? Send me a line