Design de página de link na bio: uma landing page para o teu perfil

O bom design de página de link na bio é uma landing page curta para telemóvel: o teu nome, uma linha sobre o que fazes, três a cinco botões por ordem de importância e um fundo igual ao do teu feed, para a visita parecer contínua. Quase toda a gente chega de um telemóvel, diretamente do teu perfil, com poucos segundos de atenção. Cada escolha abaixo decorre disso.

O que uma página de link na bio precisa, por ordem

Lê a página de cima para baixo como o faz um visitante. Quer confirmar que está no sítio certo, ver o que pode fazer e fazê-lo. Tudo o que atrase estes três passos pode sair.

Escreve os botões como ações. Reservar uma mesa é melhor do que Reservas; Ler a nova edição é melhor do que Newsletter. Os mesmos princípios valem para todos os textos curtos nas redes sociais, que a escrita de texto para redes sociais trata com mais profundidade.

Desenhar o fundo

O fundo é quase tudo o que um visitante vê, e é onde uma página ou se parece contigo ou se parece com todos os outros modelos gratuitos. Desenha-o primeiro para o ecrã de um telemóvel. Uma moldura vertical de 1080×1920, igual à de um story, é um tamanho de trabalho sensato para a imagem, e uma cor sólida por trás cobre os ecrãs mais altos e o computador.

Mantém a parte mais carregada e mais viva do fundo longe de onde ficam os botões, normalmente para o topo ou para um canto. Os botões precisam de uma superfície calma e uniforme por trás, ou as suas legendas começam a competir com a cor.

Botões que parecem tocáveis

Um botão preenchido na tua cor de destaque, com os outros num tom mais suave do fundo, dá ao olho um primeiro toque óbvio. Confirma que cada legenda cumpre o contraste contra o seu próprio preenchimento, não contra a página: o contraste de cor e acessibilidade traz as razões.

Construir a tua própria página de link na bio

Os serviços de link na bio são rápidos, mas uma página no teu próprio domínio é fácil de construir e mantém os visitantes no teu site. Esta é uma versão completa e mínima: um fundo em gradiente com altura total, uma coluna centrada e um botão principal. Troca pelas tuas cores e ligações.

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

Se preferires um botão mais rico, o CSS de botão com gradiente mostra como dar ao principal um pouco de profundidade sem que grite.

Combinar a página com o teu feed

O toque do perfil para a página deve parecer abrir uma porta no mesmo edifício. Usa as cores, os tipos de letra e o fundo que usas nas publicações, e o visitante nunca se pergunta se saiu de lá. A identidade consistente nas redes sociais trata do sistema mais amplo.

É aqui que um fundo só teu compensa. Um Mark do Gradiently é um gradiente vivo que se renderiza em todos os tamanhos que desenhas, por isso as tuas publicações, os stories e o fundo da página podem vestir exatamente o mesmo visual, e mais ninguém pode exportar com ele depois de o reservares. Exporta o Mark a 1080×1920 com o Pro, que o mantém em tamanho completo e sem marca de água, e a página combina com o teu feed por construção.

A imagem de pré-visualização que as pessoas veem quando partilhas o link

Quando alguém envia o teu link numa mensagem, as aplicações mostram um cartão de pré-visualização construído a partir da imagem Open Graph da página. Uma pré-visualização vazia ou aleatória desfaz o trabalho acima. Desenha uma a 1200×630 com o teu nome e a promessa, no mesmo fundo. Os detalhes estão no tamanho da imagem OG.

1. 1

   Verifica-a na largura de um telemóvel

   Abre a página no teu telemóvel a partir do teu perfil, como fazem os visitantes, não num navegador de computador.

2. 2

   Reordena os botões todas as semanas

   Passa para o topo o que importa agora e retira o que já terminou.

3. 3

   Testa a pré-visualização

   Envia o link a ti próprio numa aplicação de mensagens e vê o cartão que faz.