Suunnittelun periaatteita
Eheys, (unity), kutsutaan myös läheisyydeksi (proximity)
- sisältö ryhmitellään loogisesti siten, että lukija tai käyttäjä voi helposti erottua designissa
- vert. hahmolait: miten ihminen hahmottaa visuaaliset rakenteet?
- keinoja: elementtien sijoittaminen lähelle toisiaan, marginaalit, tyhjä tila, otsikot
Tasapaino
Nähdään "visuaalisena painona" sivulla - tuntuuko, että sivu kallistuu johonkin suuntaan?
1. symmetria / epä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)
Tekstien ja grafiikan sijoittelua siten, että ne asettuvat riviin sivulle
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
- Horizontal alignment
- oikea ja vasen reuna ova
- vertical