Design af link i bio-side: en landingsside til din profil

Godt design af en link i bio-side er en kort mobil landingsside: dit navn, én linje om hvad du laver, tre til fem knapper i rækkefølge efter vigtighed og en baggrund, der matcher dit feed, så besøget føles sammenhængende. Næsten alle kommer fra en telefon, direkte fra din profil, med få sekunders opmærksomhed. Hvert valg nedenfor udspringer af det.

Hvad en link i bio-side skal have, i rækkefølge

Læs siden oppefra og ned, som en besøgende gør. De vil bekræfte, at de er det rigtige sted, se hvad de kan gøre, og gøre det. Alt, der bremser de tre trin, kan fjernes.

Skriv knapper som handlinger. Book et bord slår Reservationer; Læs det nye nummer slår Nyhedsbrev. De samme principper gælder for al kort tekst på sociale medier, som tekstforfatning til sociale medier dækker mere indgående.

Design af baggrunden

Baggrunden er det meste af det, en besøgende ser, og det er der, en side enten ligner dig eller ligner alle andre gratis skabeloner. Design den til en telefonskærm først. Et lodret format på 1080×1920, det samme som en story, er en fornuftig arbejdsstørrelse til billedet, og en ensfarvet baggrund bag det dækker højere skærme og desktop.

Hold den travleste, lyseste del af baggrunden væk fra der, hvor knapperne står, som regel mod toppen eller et hjørne. Knapper kræver en rolig, jævn flade bag sig, ellers begynder deres tekst at konkurrere med farven.

Knapper, der ser ud til at kunne trykkes på

En udfyldt knap i din accentfarve, med de andre i en blødere tone af grunden, giver øjet et oplagt første tryk. Tjek, at hver knaptekst har nok kontrast mod sin egen udfyldning, ikke mod siden: farvekontrast og tilgængelighed har forholdene.

Byg din egen link i bio-side

Link i bio-tjenester er hurtige, men en side på dit eget domæne er let at bygge og holder de besøgende på dit site. Her er en komplet, minimal version: en gradientbaggrund i fuld højde, en centreret kolonne og én hovedknap. Sæt dine egne farver og links ind.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio Nine</title>
  <meta property="og:image" content="https://example.com/og.png">
  <style>
    html { background: #0b0a1a; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, sans-serif;
      color: #f5f3ff;
      background: linear-gradient(180deg, #2b1055 0%, #4c1d95 30%, #1e1b4b 65%, #0b0a1a 100%);
    }
    main { max-width: 26rem; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
    img { width: 96px; height: 96px; border-radius: 50%; }
    p { opacity: 0.85; margin: 0.5rem 0 2rem; }
    a {
      display: block;
      padding: 1rem;
      margin: 0 0 0.75rem;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
    }
    a.main { background: #fbbf24; color: #1c1917; }
  </style>
</head>
<body>
  <main>
    <img src="logo.png" alt="Studio Nine">
    <h1>Studio Nine</h1>
    <p>Handmade ceramics and weekend classes in Bristol.</p>
    <a class="main" href="/classes">Book a class</a>
    <a href="/shop">Shop the new pots</a>
    <a href="/visit">Visit the studio</a>
  </main>
</body>
</html>

Foretrækker du en rigere knap, viser CSS til gradientknapper, hvordan du giver hovedknappen lidt dybde uden at få den til at råbe.

Få siden til at matche dit feed

Trykket fra profil til side skal føles som at åbne en dør i den samme bygning. Brug de farver, skrifttyper og den baggrund, du bruger i dine opslag, så den besøgende aldrig er i tvivl om, hvorvidt de har forladt dig. Ensartet branding på sociale medier dækker det bredere system.

Det er her, en baggrund, du ejer, betaler sig. En Gradiently Mark er en levende gradient, der gengives i alle de størrelser, du designer i, så dine opslag, stories og sidens baggrund alle kan have præcis det samme udtryk, og ingen andre kan eksportere med den, når du har sikret dig den. Eksportér Marken i 1080×1920 med Pro, som holder den i fuld størrelse uden vandmærke, så matcher siden dit feed fra starten.

Forhåndsvisningen, folk ser, når du deler linket

Når nogen sender dit link i en besked, viser apps et forhåndsvisningskort bygget ud fra sidens Open Graph-billede. En tom eller tilfældig forhåndsvisning ødelægger arbejdet ovenfor. Design et på 1200×630 med dit navn og løftet på den samme baggrund. Detaljerne står i størrelse på OG-billeder.

1. 1

   Tjek den i telefonbredde

   Åbn siden på din egen telefon fra din profil, som de besøgende gør, ikke i en desktopbrowser.

2. 2

   Omrokér knapperne hver uge

   Flyt det, der betyder noget nu, til toppen, og fjern det, der er slut.

3. 3

   Test forhåndsvisningen

   Send linket til dig selv i en beskedapp, og se på det kort, det laver.