Suunnittelulla voi olla vaikutusta. Se voi olla tyyli. Mutta ottaa nämä ei riitä.

Työskentelyn hyväksi mallissa on oltava elementtejä, jotka pelaavat toistensa vahvuuksia. Onneksi jokainen sisältö on luontaisia ​​ohjeita.

Asettelu tai web-sivun sisällön järjestely ovat ratkaisevan tärkeitä suunnittelun menestyksen kannalta. Muun muassa asettelun priorisoidaan sisältöä, joka johtaa ihmisiä elementistä toiseen.

Jos tehdään oikein, ihmiset ovat niin kiinnostuneita sisällöstä, että he eivät huomaa mitään muuta.

Lue lisää yksityiskohtia ja vinkkejä malliesi suunnitteluun.

Alla olevassa esimerkissä useimmat ihmiset huomaavat joko valokuvan tai otsikon, sitten tekstin ja lopuksi linkit.

He saattavat huomata, että otsikko, teksti ja malli kasvot asetetaan sivulle (kolmasosien sääntöjä kunnioittaen) kolmasosa ja kaksi kolmasosaa, tai että otsikko ja linkit on kirjoitettu mallin huulilta otetuissa väreissä tai että käyrä hänen olkapäänsä johtaa silmään kohti kehotuksia toimintaan.

Teksti, valokuva ja otsikko muodostavat sävellyksen. Jos jokin putoaa paikoiltaan, koko kappale ei onnistu.

sivun asettelua tekstin, valokuvan ja otsikon kanssa

Järjestely perustuu keskinäiseen kunnioitukseen

Missä me laitamme asioita? Kerro heille. Graafien, valokuvien ja tekstiryhmien nykimiset käyvät ilmi, kun he kohtaavat sivulle. Jotkut työskentelevät yhdessä paremmin kuin toiset, ja jotkut työskentelevät vain silloin, kun ne asetetaan tiettyyn tapaan. Esimerkiksi asettelumme toimii teknisesti kahdella tavalla:

sivun asettelukaaviot

Kuvassa 1 on esimerkki, jota käytetään yllä olevassa esimerkissämme. Harmaat lohkot edustavat otsikkoa, valokuvaa ja tekstiä.

Kuviossa 2 esitetään, kuinka samat periaatteet olisivat sen inversion suhteen: yksi suuri elementti tasapainotettu kahdella pienemmällä elementillä. Tämä kuva näyttää kuitenkin paremmalta oikealta.

sivun asettelut, käänteinen

Mallimme on vasemmalla. Kuvassa 1 hän tarkastelee tekstiä. Kuvassa 2 hän etsii poispäin tekstistä. Se olisi voinut toimia, jos hän katseli kameraa, mutta koska hän etsii pois, se menettää jonkin verran vaikutusta. Ei paljon, mutta riitä asiaan.

ohjeet sivun asettelussa

Malli vuorotellen osoittaa kiinnostusta tekstiin ja kääntää sitä sivuuttamatta. Elementtien järjestelyllä on joko positiivinen tai negatiivinen asenne.

Koordinointi perustuen maamerkkiin

Joskus elementti, joka tekee elementeistä toimivan tietyllä tavalla, antaa myös vihjeitä avaruudesta ja kohdistamisesta. Huomautimme, kuinka mallin silmät osoittavat vasemmalle, mutta kuva ja teksti sisältävät muita visuaalisia vihjeitä.

miten linjaus ja avaruus työskentelevät suunnittelussa

Tiivistetyissä linjoissa typografian maamerkkien ja tämän kokoonpanon runsaan kuvan välillä:

  • Mallin silmät ja huulet sekä nenän reunat täyttävät tekstin oikeanpuoleisen sarakkeen reunat.
  • Tekstin vasen sarake täyttää otsikon vasemman reunan. Se melkein saavuttaa mallin hiusten reunan, mutta se on lyhyt, jotta se pysyisi oikeassa sarakkeessa.
  • Mallin kasvot (erityisesti silmät ja suu) määrittelevät otsikon pystytilan.
  • Kuvan pohja on koostumuksen alaosa (kolmasosien sääntö).
  • Mallin silmät ovat kolmasosa koostumuksen yläosasta.
  • Mallin kasvojen keskipiste ja otsikon oikea reunus täyttävät kokoonpanon leveyden kolmasosa ja kaksi kolmasosaa pisteitä.

Jotkut maamerkit ovat enemmän valtaa kuin toiset. Suunnittelijat ja valokuvaajat voisivat keskustella esimerkiksi siitä, ovatko mallin silmät vaikuttavampia kuin siluetti. Mutta mihin tahansa maamerkkiin perustuva ulkoasu on parempi kuin ulkoasu, joka ei ota niitä huomioon.

Ominaisuuksien käyttäminen harmonian luomiseen

Muotoilijat, jotka yrittävät käsiään ulkoasussa, järjestävät joskus elementtejä sen mukaan, miten ne sopivat sivulle. Tilaa on kunnioitettava, mutta se ei aina johda parhaaseen suunnitteluun.

esimerkkejä ulkoasusta ennen ja jälkeen

Kuva 5 kohdistaa sivun tilan elementit ja perustaa kaiken kankaalle.

Kuva 6 kuitenkin perustaa sen asettelun kuvapisteisiin. Tuloksena on virtaviivaisempi ulkonäkö.

virtaussuunta asetteluissa

Kuva 5 on tehotonta, koska katsojat pyöräytyvät keskipisteiden välillä: otsikkoon asti kasvoihin tekstin yläpuolelle. Yksinkertaisin linja on suora. Näin ollen kuvio 6 ohjaa katsojan katseen helposti vasemmalta oikealle, elementistä toiseen. Toisen asettelun ydin on kapea nauha, joka kulkee päälinja-kasvoteksti-kohdistuksen suuntaisesti.

avaruus ja kohdistus toimivat paremmin yhteen

Näissä kuvissa lukijat piirretään mallin kasvot, otsikko ja teksti - yleensä siinä järjestyksessä. Siinä on kolme eri aluetta tarkastella. Suuntaaminen antaa asettelupainatuksen.

Oikea vastaus

Alla olevissa kolmessa ulkoasussa käytetään samoja otsikko-, kuva- ja tekstielementtejä:

vertaamalla kolmea asettelua

Ensimmäisessä asettelussa on eniten "hengähdyspaikka". Toinen kunnioittaa tekstiä. Kolmas ulkoasu käyttää kielteistä tilaa tasapainon saavuttamiseksi. Kaikki kolme käyttävät maamerkkejä mutta eri tavoin. Onko yksi paras?

Vastauksen metsästys voi sokaida meidät ilmeiseksi, että useat ratkaisut voivat olla yhtä päteviä, kun elementit toimivat yhdessä. Visuaaliset maamerkit ovat mahdollisuuksia, eivät sääntöjä. Tarkastele ensin ensimmäistä mallia.

tahallaan sääntöjen rikkominen

Mitä enemmän elementit ovat hiljaisten linjojen mukaisia, sitä enemmän ei-yhteensopiva elementti erottuu. Tässä suunnittelija katkaisee sanan "Maamerkit" toisesta tekstin pystysuuntaisesta kohdistuksesta, mikä korostaa avainsanaa.

Ei ole epäilystä siitä, mitä sivu edistää. Menestystä ei mitata siitä, kuinka tiukasti elementit ovat suunnittelun periaatteiden mukaisia, mutta kuinka hyvin sivu viestii viestinsä.


Kirjoitettu yksinomaan Ben Gremillionin Webdesigner Depotille. Ben on freelance-kirjailija ja suunnittelija joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.

Kuinka seuraat maamerkkejä malleissasi? Mikä toimii parhaiten sinulle ja mitä ei?