Hoppa till innehåll
Praktisk guide

Kom igång med Penpot

Designa sajten eller appen innan någon bygger den, i webbläsaren och tillsammans med resten av företaget.

Vad Penpot är

Penpot är ett designprogram som körs i webbläsaren. Ni ritar hur en sajt, en app eller en affisch ska se ut innan någon bygger den, och ni kan klicka er igenom skissen som om den vore färdig. Programmet är gratis och öppen källkod. Den fria nivån på penpot.app räcker gott för ett företag: upp till åtta som redigerar och tio gigabyte lagring, utan tidsgräns och utan att projekt spärras. Växer ni ur det finns betalda nivåer, men ett litet företag hamnar sällan där.

Det är alltså inte ett ritprogram för bilder. Ska ni måla eller redigera foton är GIMP rätt verktyg. Penpot handlar om layout: rutor, text, knappar, färger och avstånd, och om att flera i företaget arbetar i samma fil samtidigt.

Installation på Windows och Linux Mint

Här finns inget att installera, och det är inte en förenkling. Penpot är en webbtjänst. Gå till penpot.app, skapa ett konto med företagets gemensamma mejladress och logga in. Samma sak gäller på Windows och på Linux Mint, och en Chromebook fungerar också.

Använd en uppdaterad Firefox eller en Chromebaserad webbläsare, till exempel Chrome eller Edge. Penpot ritar som standard i webbläsaren utan grafikkortet, men går att ställa om till en nyare teknik som heter WebGL för bättre fart i tunga filer, i inställningarna. Med eller utan WebGL kan en riktigt gammal dator eller en webbläsare som inte uppdaterats på flera år bli hackig. Märker ni det: uppdatera webbläsaren först, byt dator sedan.

Penpot går även att köra på en egen server med Docker, och då behövs en databas och några containrar till. Det är ett eget projekt och inget ni behöver för att komma igång. Kör molnversionen tills ni vet att ni vill äga installationen själva.

Tre saker att göra först

  1. Skapa ett projekt som heter något med er idé, och en fil i det. Projektet är mappen, filen är där ni ritar.
  2. Rita ett board i rätt storlek innan ni ritar något annat. Board är själva skärmen ni designar för, och Penpot har färdiga mått för mobil och för desktop. Väljer ni mobilstorleken först slipper ni göra om allt när ni upptäcker att de flesta besökare kommer från telefonen.
  3. Bjud in resten av företaget till filen och dela länken till en vy. Alla ser ändringarna direkt, och ni kan kommentera i designen i stället för att beskriva i chatten var knappen satt.

Bestäm färger och typsnitt en gång

Det som gör att en sajt ser genomtänkt ut är sällan en snygg detalj, utan att samma två färger och samma typsnitt återkommer överallt. Penpot har ett bibliotek där ni sparar färgerna och textstilarna ni bestämt er för, och sedan plockar ni dem därifrån i stället för att välja ny nyans varje gång.

Gör det tidigt. Ni kommer att använda samma färger i logotypen, på sajten, på skyltarna och i presentationen, och då är det värt en kvart att skriva ner dem som färgkoder i stället för att försöka minnas vilken blå det var.

Den vanligaste fällan

Att förväxla designen med en bild. En Penpot-fil är levande: text går att markera, färger går att byta, och den som öppnar filen ser exakt vad ni ser. Skickar ni en skärmdump till tryckeriet eller till den som ska bygga sajten har ni skickat ett foto av arbetet, inte arbetet.

Exportera i stället. Markera det ni vill ut med, välj export och ta SVG om det ska skalas upp utan att bli suddigt, PNG om det ska in i ett dokument eller på sociala medier. Ska någon bygga sajten efter er design: ge dem åtkomst till filen, för där står måtten och färgkoderna som de faktiskt behöver.

Behöver ni hjälp att välja mellan Penpot och något annat: hör av er, vi svarar hellre en gång för mycket.