How to design a homepage in 5 really difficult steps

I am not a designer.

Great homepage design is really hard. I’ve been studying the work of great designers for over a decade and the more I learn, the more I realize how little I know or am great at. Or even merely good at.

Well-written copy, tasteful aesthetics, a deep understanding of your audience and the psychological tricks to connect to them—all of these play into achieving great design. Attaining perfection requires excellence on all of those fronts and many more.

It’s crazy hard.

Every entrepreneur’s goal is to build a team of amazing rockstar ninja designers but until you have recognition, money, or really great luck you’ve gotta do the best you can with what you’ve got.

What I’ve got is the responsibility of building our marketing homepage for Clubhouse and a passable grasp of some of those aforementioned design competencies.

This month I created, from scratch, a marketing homepage for our soon-to-launch community platform, Clubhouse. As of this writing I’m proud of that page for the first time since launching my initial draft.

I’m not a designer, but I thought I would share how I produced this for folks who are struggling with similar challenges.

Step 1: Write the copy

Coming to understand the nature of your product’s relationship to other people is a long journey; I’m not even sure it has a destination.

People, how their minds work, what’s important to them, and how your product or service might fit into their lives are things you should always be seeking to understand more deeply.

Humans are pretty whacky on the whole. We all have our own idiosyncrasies, priorities, and mental models of what’s going on in this world and to create great stuff you need to appreciate and build for that. I’m surprised every day by how people use and think about our product.

All of this is to say my first step in designing our homepage was to write the actual copy. This is a thought exercise that forces you to deeply consider what it is you’re selling and how you want to communicate it.

It took a lot of drafts to get this to the screen-shot state. As I thought through the story I wanted to tell about our product, a natural structure emerged and is represented in this ‘final’ draft. It’s not perfect, but I felt like it was good enough to start laying out.

Step 2: Write the HTML

This is the part I get to cheat on. My super-hero power is being able to actually build this stuff so my next step is to jump right into coding it out.

Honestly, that’s the only way I know how to do it. I think if I took the time to learn how to use Illustrator or whatever it is designers actually use to do their jobs, I might be able to produce better results. But I can’t, so I start writing code and iterating on the page from there.

Step 3: Iterate

I added some color, revised some copy, broke the page up a bit. My process at this point is basically to sit at my desk and anxiously stare at a rendering of the page for hours, occasionally make changes, then obsess over whether they’re improvements.

This version is better. It would definitely benefit from imagery and general aesthetic polish. Everyone I showed it to said as much but at this stage of the process I was still obsessed with getting the message right.

Step 4: Iterate

This a better masthead than the previous version. Nobody wants to read long paragraphs to get the gist of your product. It’s much better to immediately get the point across with a bold headline like “Easily create mobile community apps” and a screenshot slideshow of what those look like.

This is the point where I started to feel good about what we had. Again, this version isn’t going to win any design awards, but awards aren’t the point of this page.

This is supposed to be an educational resource first, and something pleasant looking second.

Great design does both well. If you have to choose one or the other, get the message right.

I think most marketing design today gets those priorities out of order and suffers for it. If you start the process by picking an existing template from a theme market, or by doing wireframes, or selecting stock photos, or basically anything aesthetic; it has a way of stunting the message before you’ve fully developed it.

In other words, start with the message and add aesthetics to that. Don’t come up with a pretty design and wedge the message into it.

Step 5: Iterate

For a marketing page designed by a non-designer this is, I think, decent.

As I finished staring at this page for hours today, it occurred to me that this at least does not suck.

To introduce some polish, I added a trendy blurred crowd-shot from some concert to the masthead. Also, now community imagery is the backdrop to to our elevator pitch about our community software. Makes sense.

I’m proud of the copy on this page. Every word, every character, was considered. I don’t know if Jason Fried would high-five me over the writing, but I believe it clearly communicates what we do and that’s the goal.

Conclusion

This page, and every piece of UI in Clubhouse, will always be a work in progress. Chances are if you visit our homepage after reading this it’ll be different than what’s featured in Step 5. Good design evolves and matures.

At the time, I honestly felt good about the version I launched in Step 2. That may highlight why I’m primarily an engineer, but the point is it can always be better. It’s okay to launch stuff that’s not fully baked, especially if doing so lights a fire under your ass to always be iterating.

PS, we’re building Clubhouse in Los Angeles. We’re looking for great designers and engineers to help us elevate the quality of our products. Send an email to jobs@clubhouse.cc if you’d like to get involved in what we’re doing, it’s pretty rad.