Last updated:

|Edit this page

The Website & Docs Team is responsible for everything you see on 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!


Step 2: Hi-fi designs [Figma]

Designs live in the 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.


Was this page useful?

Next article

Developing the website

You can contribute to the PostHog documentation, handbook, and blog in two ways: You can create a pull request in GitHub for any page that has an Edit this page link on it. In this situation you must edit the page using the GitHub web editor interface. This method is suitable for text-only edits and basic file manipulation, such as renaming. You can run the website locally and make changes there by creating a branch of the master codebase, committing changes to that branch and…

Read next article