A Developer Does Design

For a few months, Resonance did not have a proper homepage. The first attempt was heavy on images of guitars and live concerts. Resonance is an important concept in music. On top of that, if you have a favorite band, you know how music can resonate. We wanted to showcase that connection, but the site was telling the wrong story.

The next iteration of our site was very minimalistic. Since we are in our early days, we tried creating a bit of mystery about our product. The site was a single page with our logo, our name, and a form where you could sign up to learn more. Oh, and the logo was animated using some cool SVG stroke animations. Again, we weren‘t telling the right story. Actually, we were‘t telling a story at all.

Before we proceed, it is important to be clear that I am not a designer. I appreciate good design, but I do not have experience with the tools of the trade. I do, however, have a lot of experience building websites and web applications using HTML and CSS. Those are the tools I chose to use as we built the next iteration of our homepage.

HTML and CSS are the tools I chose to use to design and build our homepage

While art has the privilege of being novel, strange, and difficult to understand, design does not. Especially the design of a SaaS company‘s homepage. Design needs to be easy to understand and easy to recognize. It should not look like every other design, but it should look like the category. A chair should look like a chair; where and how to sit on it should be obvious. So, I researched other SaaS homepages and followed their lead.

One of the first problems I ran into was all of the visuals. Images and videos abound. No one wants to stare at a wall of text, so I understand the appeal of all of the visuals. I also know that good visuals take time, talent, and tools. As a bootstrapped startup, we don‘t have all three. But bootstrapping is all about being scrappy, so we found a way.

I realized a few things about the visuals I was seeing on other SaaS sites. First, I only saw screenshots on the sites of B2C SaaS companies, and mature ones at that. We are not either of those things. Since we have a working product, that would have been an easy way to add some visuals to our site, but we decided against it. The Resonance Portal is still regularly being tweaked and improved, so screenshots could be outdated in a few weeks.

The next thing I noticed is that the sites I liked the best did not have stock photos. Another option easy option for visuals, but I wanted our site to be more engaging that that.

One other thing I noticed is that none of the sites used AI-generated visuals. I don‘t know if that will be the case for long, but I won‘t be the trendsetter here.

For our homepage, I wanted visuals that were clean and simple, but could still tell the right story. I realized quickly that we needed animations. Resonance takes something that feels impossible and makes it simple. That‘s the story I wanted the animations to tell. I looked briefly at some animation software, and even started building an animation in Canva, but it wasn‘t coming out right. Canva is not the right tool for me. Then, I remembered reading about a tool for making videos using React. Enter Remotion.

To some, the idea of making videos programatically may seem like a complete nightmare. I get that, but HTML and CSS are the tools I know best for building visuals. So, instead of learning to use an expensive animation tool, I used the skills I have been building over many years and the amazing, free Remotion tool. I learned to use Remotion and built the visuals for our homepage in a few hours.

When you are founder doing all the jobs, often you have to learn something completely new, but sometimes you need to lean hard into the skills you already have. Again, I am not a designer, but I am really happy with how our homepage turned out. Check it out at https://www.resonance.run/.