Design av lenkeside i bio: en landingsside for profilen

Godt design av lenkeside i bio er en kort landingsside for mobil: navnet ditt, én linje om hva du gjør, tre til fem knapper etter viktighet og en bakgrunn som matcher feeden, så besøket føles sammenhengende. Nesten alle kommer fra en mobil, rett fra profilen din, med bare noen sekunders oppmerksomhet. Alle valgene nedenfor følger av det.

Hva en lenkeside i bio trenger, i rekkefølge

Les siden ovenfra og ned slik en besøkende gjør. De vil bekrefte at de er på rett sted, se hva de kan gjøre og gjøre det. Alt som forsinker disse tre stegene, kan fjernes.

Skriv knapper som handlinger. Bestill bord er bedre enn Reservasjoner; Les den nye utgaven er bedre enn Nyhetsbrev. Samme prinsipper gjelder all kort tekst i sosiale medier, som tekst til sosiale medier går nærmere inn på.

Design av bakgrunnen

Bakgrunnen utgjør det meste av det besøkende ser, og avgjør om siden ligner deg eller alle andre gratis maler. Design den først for en mobilskjerm. Et vertikalt format på 1080×1920, som en story, er en fornuftig arbeidsstørrelse for bildet, med en ensfarget bunn som dekker høyere skjermer og datamaskiner.

Hold den mest urolige og lyseste delen av bakgrunnen unna knappene, vanligvis nær toppen eller i et hjørne. Knapper trenger en rolig, jevn overflate bak seg, ellers begynner etikettene å konkurrere med fargen.

Knapper som ser trykkbare ut

En fylt knapp i aksentfargen din, med de andre i en mykere variant av bunnfargen, gir øyet et tydelig første trykk. Sjekk at hver etikett har nok kontrast mot knappens eget fyll, ikke mot siden: fargekontrast og tilgjengelighet har forholdstallene.

Bygg din egen lenkeside i bio

Tjenester for lenkesider i bio er raske, men en side på ditt eget domene er enkel å bygge og holder besøkende på nettstedet ditt. Dette er en komplett, minimal versjon: gradientbakgrunn i full høyde, en midtstilt kolonne og én hovedknapp. Bytt inn dine farger og lenker.

<!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>

Hvis du ønsker en mer detaljert knapp, viser CSS for gradientknapper hvordan hovedknappen kan få litt dybde uten å rope.

La siden matche feeden

Trykket fra profil til side bør føles som å åpne en dør i samme bygning. Bruk fargene, skriftene og bakgrunnen fra innleggene dine, så lurer besøkende aldri på om de har forlatt deg. Konsekvent merkevare i sosiale medier tar for seg det større systemet.

Her lønner det seg å eie en bakgrunn. En Mark fra Gradiently er en levende gradient som rendres i alle størrelser du designer, så innlegg, stories og sidebakgrunnen kan ha nøyaktig samme uttrykk, og ingen andre kan eksportere med den når du har sikret deg den. Eksporter Marken på 1080×1920 med Pro, som gir full størrelse uten vannmerke, så matcher siden feeden fra starten av.

Forhåndsvisningsbildet folk ser når du deler lenken

Når noen sender lenken din i en melding, viser apper et forhåndsvisningskort laget fra sidens Open Graph-bilde. En tom eller tilfeldig forhåndsvisning svekker arbeidet over. Design et bilde på 1200×630 med navnet og løftet ditt, på samme bakgrunn. Detaljene finner du i størrelse på OG-bilder.

1. 1

   Sjekk i mobilbredde

   Åpne siden på din egen mobil fra profilen, slik besøkende gjør, ikke i en nettleser på datamaskinen.

2. 2

   Endre knappenes rekkefølge ukentlig

   Flytt det som er viktig nå til toppen, og fjern det som er avsluttet.

3. 3

   Test forhåndsvisningen

   Send lenken til deg selv i en meldingsapp og se på kortet den lager.