Linkkisivun suunnittelu Instagram-profiiliisi

Hyvä linkkisivun suunnittelu tarkoittaa lyhyttä mobiililaskeutumissivua: nimesi, yksi lause toiminnastasi, kolmesta viiteen painiketta tärkeysjärjestyksessä ja syötteeseesi sopiva tausta, joka jatkaa vierailua luontevasti. Lähes kaikki tulevat puhelimella suoraan profiilistasi ja antavat sinulle muutaman sekunnin huomiota. Jokainen alla oleva valinta seuraa tästä.

Linkkisivun tarvittavat osat järjestyksessä

Lue sivu ylhäältä alas kuten kävijä. Hän haluaa varmistaa olevansa oikeassa paikassa, nähdä mahdolliset toimet ja toimia. Kaikki näitä kolmea vaihetta hidastava voi lähteä.

Kirjoita painikkeet toimiksi. Varaa pöytä toimii paremmin kuin Varaukset. Lue uusi numero toimii paremmin kuin Uutiskirje. Samat periaatteet koskevat kaikkia lyhyitä sometekstejä. Tekstin kirjoittaminen somekuviin käsittelee niitä tarkemmin.

Taustan suunnittelu

Tausta on suurin osa kävijän näkemästä. Se ratkaisee, näyttääkö sivu sinulta vai kaikilta ilmaisilta pohjilta. Suunnittele se ensin puhelimen näytölle. Tarinan kokoinen 1080×1920-pystykuva on järkevä työskentelykoko, ja sen takana oleva yksivärinen pohja kattaa korkeammat näytöt ja tietokoneet.

Pidä taustan vilkkain ja kirkkain kohta poissa painikkeiden takaa, yleensä yläosassa tai kulmassa. Painikkeet tarvitsevat rauhallisen ja tasaisen pinnan, muuten niiden teksti alkaa kilpailla värin kanssa.

Napautettavilta näyttävät painikkeet

Korostusvärillä täytetty pääpainike ja muut pohjan pehmeämmässä sävyssä antavat silmälle selvän ensimmäisen napautuksen. Tarkista jokaisen painiketekstin kontrasti sen omaa täyttöä vasten, ei sivua vasten. Värikontrasti ja saavutettavuus kertoo suhdeluvut.

Oman linkkisivun rakentaminen

Linkkisivupalvelut ovat nopeita, mutta omalle verkkotunnukselle on helppo rakentaa sivu, joka pitää kävijät sivustollasi. Tämä on valmis pelkistetty versio: koko näytön korkuinen liukuväritausta, keskitetty palsta ja yksi pääpainike. Vaihda omat värit ja linkit.

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

Jos haluat runsaamman painikkeen, CSS-liukuväripainike näyttää, miten pääpainikkeeseen saa hieman syvyyttä ilman huutavaa ilmettä.

Sivun sovittaminen syötteeseen

Profiilista sivulle siirtymisen pitäisi tuntua saman rakennuksen oven avaamiselta. Käytä julkaisujesi värejä, fontteja ja taustaa, niin kävijä ei mieti, lähtikö hän pois. Yhtenäinen brändäys somekanavissa käsittelee laajempaa järjestelmää.

Tässä oma tausta maksaa vaivan takaisin. Gradientlyn Mark on elävä liukuväri, joka piirtyy kaikissa suunnittelemissasi ko’oissa. Julkaisut, tarinat ja sivun tausta voivat jakaa täsmälleen saman ilmeen, eikä kukaan muu voi viedä sillä tehtyjä töitä lunastuksen jälkeen. Vie Mark Prolla koossa 1080×1920 ilman vesileimaa ja täydellä tarkkuudella, niin sivu vastaa syötettäsi rakenteensa ansiosta.

Esikatselukuva linkkiä jaettaessa

Kun joku lähettää linkkisi viestissä, sovellus näyttää sivun Open Graph -kuvasta tehdyn esikatselukortin. Tyhjä tai satunnainen esikatselu kumoaa edellisen työn. Suunnittele 1200×630-kuva nimelläsi ja lupauksellasi käyttäen samaa taustaa. Yksityiskohdat löytyvät oppaasta OG-kuvan koko.

1. 1

   Tarkista puhelimen leveydessä

   Avaa sivu omalla puhelimellasi profiilistasi kuten kävijät, älä tietokoneen selaimessa.

2. 2

   Järjestä painikkeet viikoittain

   Nosta tämän hetken tärkein asia ylimmäksi ja poista päättyneet.

3. 3

   Testaa esikatselu

   Lähetä linkki itsellesi viestisovelluksessa ja katso syntyvää korttia.