This weekend we launched a redesign of 37signals.com.
We try to redesign 37signals.com at least once or twice a year. It’s not a stated goal, but it’s something we just like to do to keep things fresh — especially since our designs are often copied pretty quickly after we launch anything new.
This time around we wanted to go back to our roots. Our roots included simple, sparse, mostly text-based black and white designs. Our original site, which is now the 37signals Manifesto is the best example of this style. This design from 2002 is another example. Strong opinionated writing was also part of these early designs. It was time to return to that era.
Our previous home page design looked like this:
It was a bold departure from our earlier designs. Full of color, shapes, and pretty dense newspaper-like columns of text. I still like the design, and it served us quite well, but in some ways just didn’t feel like 37signals.
The goal for this redesign was to get back to being absolutely clear about what we do, what we offer, and what we believe in. A big part of that would be the straightforward presentation. Black, white, red, centered, big text, great writing, color for naturally colorful things like product icons instead of color for shape.
We also wanted to bring a bit of the manifesto back to the 37signals home page. Our strong opinions and vision for software and business are a key part of our company. We wanted to make sure some of these ideas were front and center.
A couple of weeks ago we began exploring some new designs for 37signals.com. We’ll share those iterations in a future post. We’ll also be sharing some of the copywriting process for the headlines and paragraphs that ended up on the home page.
The new design
The final design we came up with was a simple, straightforward approach. Big centered headlines, clear blocked sections (one for the products, one for our customers, one for our ideas, one for REWORK, etc). Tight copy, clear lists, and a few small visual flares to highlight key points we want to make. We used color to make a point, not to make a statement.
The only thing that’s a bit fancy on the page is revealing a more detailed description of a product when you hover over the product’s icon. On hover we switch out the main headline on the page with the product-specific headline. We also add a red arrow to make sure the connection between new headline and product is absolutely clear.
We hope you like the new design. Thanks for listening.