Designing posthog.com

Last updated:

The Website & Docs Team is responsible for everything you see on posthog.com. We treat our website & docs as a product, which means we're constantly iterating on it and improving it.

Because our website has a well-defined aesthetic, we often skip the hifi design process and jump straight from wireframes into code. Having a designer who can code means we can reach the desired level of polish without always having to produce hifi designs, thus leading to huge time savings.

Usually Eli will build 90% of a page and Cory will follow along (in code) with the final 10% of finishing touches.

Step 1: Wireframes [Balsamiq]

We often produce hi-fidelity wireframes because this allows us to closely envision a design which in turn helps us skip the hi-fi Figma process.

Our Balsamiq project contains many page iterations. Typically we share the most up-to-date versions in the relevant GitHub issue. (We sometimes use Balsamiq to prototype complex flows.)

Note: Balsamiq uses its own Comic Sans-style font. Don't get hung up on this!

image

Step 2: Hi-fi designs [Figma]

Designs live in the posthog.com Figma file. If there are multiple iterations of a single page, we typically work left to right.

Any mocks in pages that appear to be faded out are considered old and out of date and can be ignored, as there is a better replacement nearby. (We sometimes want to keep them around for easy reference (and to leave a comment trail), but they're easily identifiable because their artboards are set to 50% opacity.)

Even with this loosely-documented process, things move quickly and we don't always follow this process. If you're looking for something in particular, it's worth pinging in the #team-website-and-docs channel.

Questions?

Was this page useful?

Next article

Overview

Marketing & Content exists to drive organic, word-of-mouth growth by: Producing world-class top-of-funnel content for our ICP Ensuring the information users need is easy to find and maintained to a high standard Marketing is the newsroom of PostHog. This means: A small, talented team of in-house content creators with strong editorial capability – our default is to keep writing in-house, not farm it out to a network of freelancers. Building a reputation for high-quality, trustworthy content…

Read next article