Skip to main content

Painotus Web Design -periaatteena

Beginning Graphic Design: Layout & Composition (Kesäkuu 2026)

Beginning Graphic Design: Layout & Composition (Kesäkuu 2026)
Anonim

Verkkosivun painopisteessä luodaan alue tai kohde, joka on sivun keskipiste. Se on tapa tehdä yksi elementti erottumaan suunnittelussa. Polttopiste voi olla suurempi kuin muut suunnittelun elementit tai kirkkaasti värjätyt - molemmat piirtävät silmää. Kun suunnittelet verkkosivun, voit lisätä painotusta valitsemalla sana tai lause ja antamalla sille värin, fontin tai koon, joka tekee siitä erottuvan, mutta suunnittelussa on paljon muita tapoja käyttää painotusta.

Korostus suunnittelussa

Yksi suurimmista virheistä web-suunnittelijoiden voi tehdä on yrittää tehdä kaiken suunnittelussa erottuvat. Kun kaikki on yhtä painotettu, muotoilu näyttää kiireiseltä ja sekavalta tai pahemalta - tylsää ja epäröivä. Luodaksesi yhteyspisteen verkkosuunnitteluun, älä unohda:

  • linjat: Luo painotusta vastakohtana. Jos useat elementit ovat vaakatasossa, yksi pystysuora elementti tulee keskipiste.
  • Väri: Jos useimmat suunnittelun elementit ovat pimeitä tai mykistyneitä, kaikki värilliset kohteet houkuttelevat silmää.
  • Muodot: Kun useimmat muodot ovat epäsäännöllisiä, geometrinen muoto erottuu.
  • Läheisyys: Kun useat kohteet on ryhmitelty, ja toinen on erillään ryhmästä, silmä siirtyy yksittäiseen kohteeseen.
  • sijoittelu: Vaikka poikkeuksia onkin, mallin keskelle sijoitettu elementti tavallisesti kiinnittää silmän.
  • Paino: Raskas elementti houkuttelee katsojan huomiota.
  • Toisto: Kun yksinkertainen graafinen tyypin elementti toistetaan, silmä seuraa toistuvaa elementtiä polttopisteeseen.
  • Kontrasti: Värin ja viivojen luomien kontrastien lisäksi kontrasti voi syntyä koon, tekstuurin tai kirjasimen muutosten mukaan. Muutos aiheuttaa fokusoivan elementin tai painotuksen erottumaan.
  • Valkoinen tila: Elementti, jota ympäröi valkoinen (tai tyhjä) tila, tulee keskipiste.

Hierarkia Web-suunnittelussa

Hierarkia on muotoilun elementtien visuaalinen järjestely, joka osoittaa merkityksen koon mukaan. Suurin osa on tärkein; vähemmän tärkeät tekijät ovat pienemmät. Keskity visuaalisen hierarkian luomiseen web-malleissasi. Jos olet työskennellyt luomalla semanttinen virtaus HTML-merkintään, tämä on helppoa, koska verkkosivustossasi on jo hierarkia. Kaikkien suunnittelusi tarvitsee korostaa oikeaa elementtiä - kuten H1-otsikkoa - eniten painopisteenä.

Merkkikohdan hierarkian lisäksi tunnistat, että kävijän silmä katsoo verkkosivun Z-kuvassa, joka alkaa näytön vasemmasta yläkulmasta. Tämä tekee sivun vasemman yläkulman hyvän paikan tärkeälle kohteelle, kuten yrityksen logolle. Oikea yläkulma on toiseksi paras sijoituspaikka tärkeille tiedoille.

Kuinka sisällyttää korostukset Web-suunnitteluihin

Verkkosivujen painopiste voi olla monin tavoin toteutettavissa:

  • Käytä semanttista merkintää antamaan painotus myös ilman tyylejä.
  • Muuta fonttien tai kuvien kokoa korostaaksesi tai heikentämättä niitä suunnittelussa.
  • Käytä kontrastisia värejä korostaaksemme.
  • Koko laskee. Suuri sana sivussa tai näytöllä saa välitöntä huomiota.
  • Keskitä polttopiste valkoisella tilalla.
  • Toista sana tai kuva kiinnittääksesi huomiota.

Missä alistuminen sopii?

Alisteisuus tapahtuu, kun sävyttää muita elementtejä suunnitelussa, jotta keskipiste pop. Yksi esimerkki on kirkkaanvärinen grafiikka, joka on sijoitettu mustavalkoiseen taustakuvaan. Sama vaikutus ilmenee, kun käytät vaimeita värejä tai värejä, jotka sekoittuvat keskipisteen taustalla ja aiheuttavat sen erottuvan.