Sommittelu

Mitä sommittelu on visuaalisessa designissa?

Sommittelu on elementtien järjestämistä kehyksen sisällä — miten asiat sijoitetaan suhteessa toisiinsa ja reunoihin. Hyvä sommitelma tuntuu väistämättömältä: mitään ei voisi siirtää ilman, että kokonaisuus heikkenee.

Jokainen tämän sivuston sivu on sommitelma. Hero-otsikko, osiot, jakajat, alatunniste — kaikki ovat sijoitettuja, eivät vain pinottuja. Vaihtele tyylejä ja katso, miten samat elementit järjestyvät uudelleen: keskitettynä Art Decossa, vasempaan tasattuna Swiss Internationalissa, koko leveydeltä Web-brutalismissa.

Miten symmetria luo muodollisuutta?

Symmetrinen sommitelma — elementtien peilaaminen keskiakselin yli — luo järjestyksen, auktoriteetin ja seremonian tunteita. Graafisessa suunnittelussa tiukka symmetria tuntuu usein muodolliselta, koska elementit on tarkoituksellisesti järjestetty keskiakselin ympärille.

Art Deco on tämän sivuston symmetrisin tyyli. Jokainen otsikko on keskitetty. Jokainen koriste peilaa itsensä. Sivulla on selkäranka — pystyakseli, josta kaikki riippuu.

Victorian saavuttaa muodollisuuden ilman keskitystä — raskaat reunat, koristeelliset kehykset ja tiheä kerrostus luovat seremoniallisen rakenteen vasempaan tasatussa asettelussa. Koristeen paino tarjoaa sen arvokkuuden, jonka Art Deco saavuttaa symmetrian kautta.

Rajoitus: tiukka symmetria voi tuntua staattiselta, koska katseella on vähemmän positiivista jännitettä joka vetäisi sitä sommitelman läpi. Dynaamisuus vaatii epäsymmetriaa.

Miten epäsymmetria luo dynaamisuutta?

Epäsymmetrinen sommitelma sijoittaa elementit pois keskeltä, luoden jännitettä ja liikettä. Katse vedetään sommitelman läpi sen sijaan, että se lepäisi keskellä.

Art Nouveau saavuttaa tasapainon epäsymmetrian kautta — kuin valoa kohti kallistuva kasvi. Elementtejä ei peilata vaan vastapainotetaan.

Swiss International käyttää epäsymmetrisiä gridejä — vasempaan tasattu teksti luo vahvan vasemman reunan samalla kun oikea reuna on rosoinen ja vapaa. Sommitelma on ankkuroitu toiselta puolelta ja avoin toiselta.

Memphis käyttää tarkoituksellista epätasapainoa — ei tasapainoista epäsymmetriaa vaan aktiivista epävakautta. Tämä luo maksimienergian rauhan kustannuksella.

Mitä visuaalinen paino on ja miten se vaikuttaa sommitelmaan?

Visuaalinen paino on se, kuinka 'raskaalta' elementti tuntuu — kuinka paljon huomiota se vaatii. Visuaaliseen painoon vaikuttavat koko, valööri, kontrasti, tekstuuri ja sijainti. Suuri elementti vetää usein enemmän huomiota kuin pieni; korkean kontrastin tai visuaalisesti tiheä elementti voi tuntua ympäristöään raskaammalta.

Sommittelussa raskaammat elementit vetävät katsetta. Pieni, tumma elementti voi tasapainottaa suurta, vaaleaa — kuin keinulauta jossa raskaampi lapsi istuu lähempänä keskustaa.

Dark Luxury on enimmäkseen 'kevyt' (ohut teksti, vähän elementtejä) yhdellä 'raskaalla' aksentilla (kulta tai ruusu). Aksentin raskautta vahvistaa sitä ympäröivä keveys.

Victorian on tasaisesti raskas — paksut reunat, lihava teksti, tiheä koriste. Kun kaikki on raskasta, hierarkian on tultava suhteellisesta painosta absoluuttisen painon sijaan.

Miten kehyksen reuna vaikuttaa sommitelmaan?

Kehys — näkymän tai säiliön reunat — ei ole neutraali. Reunan lähellä olevat elementit tuntevat jännitettä sen kanssa. Keskellä olevat elementit tuntevat vakautta. Sisällön ja reunan välinen suhde määrää sommitelman energian.

Leveät marginaalit (Art Deco, Dark Luxury) eristävät sisällön reunasta. Sisältö kelluu tilan ympäröimänä. Tämä luo fokuksen ja luksuksen.

Kapeat marginaalit (Victorian, Memphis) työntävät sisällön kohti reunoja. Sisällön ja kehyksen välinen jännite luo energian ja tiheyden.

Ei marginaaleja (Web-brutalismi) poistaa kehyksen kokonaan. Sisältö koskettaa reunaa — tai oikeammin, reunaa ei ole olemassa. Näkymä ei ole kehys; se on vain se, mihin sisältö sattuu loppumaan.

Sommittelu StyleShiftissä

Jokainen tyyli tällä sivustolla tekee perustavanlaatuisesti erilaisia sommittelupäätöksiä. Sama sisältö vie tilaa radikaalisti eri tavoin riippuen aktiivisesta designjärjestelmästä.

Swiss International — jäykkä gridi, leveä sisältöalue (1100px), kaksipalstainen rakenne. Tasaus on aina vasemmalle. Kaikki napsahtaa gridiin. Sommittelu viestii järjestystä ennen kaikkea.

Art Deco — kapea sisältöleveys (800px), keskitetty tasaus. Antelias vertikaalinen välistys luo seremoniaa osioiden välille. Sommittelu hengittää ylöspäin, kuin arkkitehtuuri.

Brutalist — meidän tulkinnassamme koko leveyden osiot ja tarkoituksellisen epäsäännöllinen välistys vähentävät visuaalista mukavuutta ja luovat konfrontatiivisemman sommitelman.

Nordic Minimal — maltillinen leveys (720px), vasemmalle tasattu, antelias tyhjä tila. Sommittelu katoaa, jättäen vain sisällön ja ilman.

Memphis — tiivis välistys, rohkeat osioiden katkot, leikkisä asymmetria. Sommittelulla on rytmi kuin musiikilla: kovaa, hiljaa, kovaa.

Victorian — kapea, tiivis, raskaasti kehystetty. Koristeeliset erottimet osioiden välissä. Sommittelu täyttää tilan koska tyhjä tila tuntuisi keskeneräiseltä.

Vaihda tyyliä nyt ja katso miten sama teksti järjestäytyy uudelleen sivulla. Sanat pysyvät; arkkitehtuuri muuttuu.

Mitä opimme rakentaessamme 18 sommittelujärjestelmää

18 eri layoutin rakentaminen samalle sisällölle opetti, ettei sommittelu ole koristelua joka lisätään kirjoittamisen jälkeen. Se on perustavanlaatuinen osa sitä, miten sisältö viestii.

Sisältöleveys on vahvempi signaali kuin odottaisi. Layouteissamme siirtyminen 1100px:stä 720px:iin muutti lukukokemusta selvästi: kapeammat layoutit tuntuivat keskittyneemmiltä ja intiimeimmiltä, kun taas leveämmät antoivat katseelle enemmän tilaa liikkua. Testasimme jokaista tyyliä useilla leveyksillä ennen päätöstä.

Symmetria on helppo toteuttaa, vaikea tehdä kiinnostavaksi. Keskitetyt, symmetriset layoutit näyttävät heti hyviltä mutta muuttuvat nopeasti ennustettaviksi. Havaitsimme, että kiinnostavimmat symmetriset tyylit (Art Deco, Dark Luxury) tukeutuvat raskaasti vertikaaliseen rytmiin kompensoidakseen.

Asymmetria vaatii enemmän visuaalisen painon päätöksiä. Kun poistut keskeltä, jokainen elementti tarvitsee syyn sijainnilleen. Swiss ja Brutalist toimivat koska gridi tarjoaa sen syyn. Ilman pohjalla olevaa rakennetta asymmetriset layoutimme muuttuivat nopeasti kaoottisiksi.

Osiovälistys viestii tempoa. Suuret välit osioiden välillä hidastavat lukijaa (Nordic, Art Deco). Tiukat välit luovat kiireellisyyttä (Memphis, Brutalist). Viritimme osiovälistyksen erikseen jokaiselle tyylille koska universaali arvo ei koskaan toiminut.

Kehys muuttaa kaiken. Reunat, erottimet ja koristeet puristavat sisältöä visuaalisesti. Victorian ja Art Nouveau käyttävät niitä runsaasti; niiden poistaminen kokonaan (kuten Nordicissa) saa saman sisällön tuntumaan huomattavasti tilavammalta.