Get started with Penpot

What Penpot is

Penpot is a design program that runs in the browser. You draw what a site, an app or a poster should look like before anyone builds it, and you can click through the sketch as if it were finished. The program is free and open source. The free tier on penpot.app is more than enough for a company: up to eight editors and ten gigabytes of storage, with no time limit and no projects locked away. If you outgrow it there are paid tiers, but a small company rarely ends up there.

So it is not a drawing program for images. If you want to paint or edit photos, GIMP is the right tool. Penpot is about layout: boxes, text, buttons, colors and spacing, and about several people in the company working in the same file at the same time.

Installation on Windows and Linux Mint

There is nothing to install here, and that is not a simplification. Penpot is a web service. Go to penpot.app, create an account with the company's shared email address and log in. The same applies on Windows and on Linux Mint, and a Chromebook works too.

Use an updated Firefox or a Chromium-based browser, such as Chrome or Edge. By default, Penpot draws in the browser without the graphics card, but you can switch to a newer technology called WebGL for better speed with heavy files, in the settings. With or without WebGL, a really old computer or a browser that has not been updated for several years can become sluggish. If you notice this: update the browser first, then change computers.

Penpot can also run on your own server with Docker, and then you need a database and a few extra containers. That is a project of its own and nothing you need to get started. Run the cloud version until you know that you want to own the installation yourselves.

Three things to do first

1. Create a project with a name that has something to do with your idea, and a file in it. The project is the folder, the file is where you draw.
2. Draw a board in the right size before you draw anything else. A board is the screen you are designing for, and Penpot has ready-made dimensions for mobile and for desktop. If you choose the mobile size first, you avoid redoing everything when you discover that most visitors come from a phone.
3. Invite the rest of the company to the file and share the link to a view. Everyone sees the changes right away, and you can comment in the design instead of describing in the chat where the button was placed.

Decide on colors and fonts once

What makes a site look considered is rarely a nice detail, but that the same two colors and the same font recur everywhere. Penpot has a library where you save the colors and text styles you have decided on, and then you pick them from there instead of choosing a new shade every time.

Do it early. You will use the same colors in the logo, on the site, on the signs and in the presentation, and then it is worth a quarter of an hour to write them down as color codes instead of trying to remember which blue it was.

The most common trap

Mistaking the design for an image. A Penpot file is alive: text can be selected, colors can be changed, and anyone who opens the file sees exactly what you see. If you send a screenshot to the printer or to the person who will build the site, you have sent a photo of the work, not the work.

Export instead. Select what you want to export, choose export and take SVG if it will be scaled up without becoming blurry, PNG if it will go into a document or on social media. If someone is going to build the site from your design: give them access to the file, because that is where the measurements and color codes they actually need are.

If you need help choosing between Penpot and something else: get in touch, we would rather answer one time too many.