Suunnittelun periaatteita
Hyvä artikkeli suunnittelun periaatteista: Principles of Design
Eheys, (unity), kutsutaan myös läheisyydeksi (proximity)
- sisältö ryhmitellään loogisesti siten, että lukija tai käyttäjä voi helposti erottua designissa
- vrt. hahmolait: miten ihminen hahmottaa visuaaliset rakenteet?
- keinoja: elementtien sijoittaminen lähelle toisiaan, marginaalit, tyhjä tila, otsikot
Ks. myös: Hahmolait ja Gestalt-teoria
...
Nähdään "visuaalisena painona" sivulla - tuntuuko, että sivu kallistuu johonkin suuntaan?
...
1. Symmetria
...
...
2. Epäsymmetria eli off-balance - tasapainoton sommittelu
...
- kun haetaan liikettä ja dynamiikkaa, sopii tunteiden ilmaisuun (ilo, jännitys jne)
...
3. Säteittäinen tasapaino (radial balance)
...
...
4. Kiteinen tasapaino (crystallographic balance)
...
Painotus (tai painopiste, emphasis) tai dominanssi
= mihin suunnittelussa keskitytään? Mikä halutaan nostaa esiin?
- pahimpia virheitä on se, että halutaan nostaa kaikki mahdollinen esiin -> layout on epäkiinnostava
- tavoitteena luoda visuaalinen hierarkia suunnittelussa: otsikot, kuvat, miten silmä liikkuu kuvassa?
Toisto (Rytmi)
- mahdollistaa sen, että designissa on sisäinen yhtenäisyys, jota lukija voi ymmärtää helpommin
- kun aivot tunnistavat kuvion eli patternin, ne voivat "rentoutua" ja keskittyä sisältöön
- tuo järjestyksen tuntua
- webissä lähes kaikki on toistettavissa, esim taustakuva tai kuvituskuva. Myös muodot ja viivat.
Layout / Gridit
- gridit ovat tapa järjestää sisältöä sivulle
- koostuvat marginaaleista, riveistä ja kolumneista
- samaa gridiä käytetään usein läpi koko projektin, jotta saavutettaisiin yhdenmukainen lopputulos
- gridi ei näy lopullisessa tuotteessa
Hyötyjä:
- yhdenmukainen lopputulos
- nopeuttaa suunnittelutyötä - auttaa elementtien sijoittelussa
- eivät rajoita - gridi voi ja kannattaa rikkoa sopivissa kohdin!
- samassa työssä voi käyttää useampaakin gridiä
Taittotyylit
- dynaaminen taitto (jutut ja kuvat sivulla epäsymmetrisesti hajallaan ja sivun ulkoasu vaihtelee päivittäin)
- juoksutaitto (jutut juoksutetaan palstoille peräkkäin, otsikot yleensä vain yksipalstaisia)
- lohkotaitto (jutut ja kuvat lohkon muodossa),
- sirkustaitto (useita erilaisia kirjaintyylejä ja -kokoja ja kuvia samalla sivulla tarkoituksellisessa epäjärjestyksessä),
- focus-taitto (jokaisella sivulla on jokin erityinen huomiopiste),
- symmetrinen taitto (jutut ja kuvat sivulla symmetrisesti toisiinsa nähden),
- staattinen taitto (aineisto sivulla jäykän kaavamaisesti päivästä toiseen),
- horisonttitaitto (sivun leveyssuuntaisuutta korostava taitto)
- vertikaalitaitto (layout, jonka ulottuvuus on suurempi korkeus- kuin leveyssuunnassa)
- pyramiditaitto (isot ilmoitukset sijoitetaan sivun alalaitaan ja toimituksellinen aineisto sivun yläosaan))
Riviin sijoittelu (alignment) (ei ole käyty vielä läpi tunnilla)
Tekstien ja grafiikan sijoittelua siten, että ne asettuvat riviin sivulle
- horizontal
- vertical
- center
Sitä voidaan käyttää
- järjestyksen luomiseen
- sivun elementtien järjestämiseen
- ryhmittelyyn
- visuaalisten yhteyksien luomiseen
...
Hyvä sijoittelu on näkymätöntä
...
Jos sijoittelua ei käytetä, ulkoasu näyttää huolimattomalta
...