Olen seurannut sivusta graafisten suunnittelijoiden siirtymistä muista medioista kotisivujen suunnitteluun. Monilla on haasteita hahmottaa uusi canvas, eli tietokoneen ja mobiililaitteiden selain. Erityisesti printtimaailmasta tulevilla graafikoilla on sisäänrakennettuja ajatusmalleja, jotka täytyy ensin rikkoa, jotta visuaalinen osaaminen saadaan valjastettua web-suunnitteluun. 

Kotisivut eivät ole vain tietokoneen näkymä, vaan laitteita ja selaimia on eri kokoisia. Suurin osa ihmisistä käyttää nettiä nykyään kännykällä eli mobiiliversio on vähintään yhtä tärkeä kuin tietokoneella selattava näkymä. 

Avasin tähän blogiin web-suunnittelun termistöä hyödyllisten esimerkkien kautta. Näin vältät sudenkuopat ja suunnittelet kaikissa laitteissa upeilta näyttäviä ja toimivia sivustoja.

Tyhjän tilan käyttö – Älä ahda sivua täyteen!

Printtigraafikolle kalliin palstamillimetrin täyttäminen tulee selkärangasta. Printissä alue on rajattu, mutta webissä on monia keinoja saada lisää tilaa: 

• Sivu voi kasvaa pituutta periaatteessa loputtomasti

• Sisällön voi jakaa usealle eri sivulle

• Voit käyttää laajennettavia sisältöalueita kuten karusellielementtejä, jotka erityisesti mobiilissa tarjoavat käyttäjälle lisää sisältöä kasvattamatta sivun pituutta

Tyhjän tilan termit web-suunnittelussa ovat padding, jota voisi kutsua sisäiseksi marginaaliksi ja margin eli ulkoinen marginaali. Padding on oikea ratkaisu, jos alueelle halutaan esimerkiksi taustaväri, jonka sisällä on tyhjää tilaa ennen sisältöä kuten tekstiä.

MARGINPADDING

Hyvä esimerkki tyhjän tilan käytöstä on Googlen hakusivu. “White space” tekee sananmukaisesti Googlen sivusta miellyttävän katsoa ja käyttää.

Kolmanneksen sääntö

Kolmanneksen sääntö, jossa alue jaetaan yhdeksään yhtä suureen osaan, toimii web-suunnittelussa erinomaisesti. Soveltaminen tosin poikkeaa hieman totutusta sivustojen mukautuvuuden eli responsiivisuuden takia. Kuva-alueena voidaan ajatella laitteen näyttöä tai yksittäistä elementtiä.

Alla olevissa kuvissa nähdään kolmanneksen säännön hyödyntäminen sivun pääelementissä eli hero bannerissa. Ideana on tasata sisältöelementit tai niiden reunat kolmanneksien sisään, reunoille tai linjojen päälle. Näin sommittelu toimii lähes aina.

Verkkosivulla kolmanneksen sääntöä voi hyödyntää myös kolmeen palstaan sijoittuvilla nostoilla.

Typografia ja tekstin käyttö

Verkossa fontteja käytetään ja yhdistellään samaan tapaan kuin graafisessa suunnittelussa yleisesti. Dynamiikkaa voi luoda yhdistämällä eri tyyppisiä, hyvin yhteensopivia kirjasimia. Rajoituksena on, että netissä käytetään yleensä yhtä leipätekstityyppiä (= paragraph text) ja enintään kuutta otsikkokirjasinta H1-H6.

Kaikki kirjasimet toimivat verkossa OTF- tai TTF-tiedostotyypillä. Monet maksulliset fontit tosin edellyttävät toisen lisenssin verkkokäyttöön. Jos projektiin ei ole määritelty tiettyä kirjasinta, suosittelen tutustumaan maksuttomiin ja hyvin toimiviin Google Fontteihin ja valitsemaan ilmeeseen sopivan vaihtoehdon.

Responsiivisuus saattaa aiheuttaa joillekin harmaita hiuksia. Printissä määritellään tarkkaan rivitykset, mutta verkossa rivien tulisi elää omaa elämäänsä. Kun laitekoko pienenee tulee rivejä lisää. Pakotetut rivinvaihdot saattavat kuulostaa hyvältä ajatukselta yhden kokoisella näytöllä, mutta sama rivinvaihto ei toimikaan toisella näytöllä.

Tekstin välistys (= line height)

Tekstin välistys, joka kulkee verkossa nimellä line-height, mahdollistaa kauniiden typograafisten elementtien suunnittelun. Yhdistämällä tyhjän tilan käytön tekstialueen leveyden ja rivin välistyksen kanssa, kappaleet alkavat näyttämään graafisilta design-elementeiltä. Line height arvo säädetään tyypillisesti per kirjasintyyppi, mutta toki poikkeuksiakin voi tehdä esimerkiksi yhden kappaleen korostamiseen.

Tasaukset

Tasausten täsmällisyys tai niiden puute vaikuttaa sivuston ammattimaiseen ilmeeseen. Yleensä sivun elementtien padding- ja margin-arvoilla luodaan linjat, jotka tasaantuvat keskenään. Tasaukset joutuu miettimään erikseen tietokoneversioon ja mobiiliin.

RGBA

Unohda CMYK! Kaikki web-grafiikat tulisi olla tallennettu RGB-väreillä, jotta kuvat toistuvat oikein. Värit määritellään tyypillisesti HEX-muodossa tai RGBA-muodossa. Jälkimmäisessä A-kirjain tarkoittaa alpha channelia, jolla määritellään värin läpikuultavuus. Nolla on täysin läpinäkyvä ja arvolla yksi ei ole yhtään läpinäkuultavuutta.

Koolla on merkitystä

Joku on saattanut tuhahtaa tämän blogin kuvien huonolle laadulle. Kerron salaisuuden. Tallensin kuvat jopa vähän normaalia paremmalla resoluutiolla yleisöäni varten. Suuren tarkkuuden kuvat toki näyttävät hyvältä, mutta kuvan koko vaikuttaa myös sivun latausnopeuteen. Nopea latausnopeus taasen parantaa käyttökokemusta ja Googlen arvostusta. 

Kuvan laadun ja tiedoston koon väliltä tulee löytää sopiva kompromissi. Itse tallensin tämän blogin kuvat Photoshopin Save for Web-toiminnolla laatuun 80% kuvan leveydellä 1500-2000 pikseliä. Mobiilissa luotan järjestelmän omaan kuvien pienentämisominaisuuteen, joka tekee kuvista 500 pikseliä leveitä. Photoshopin Save for Web-toiminto myös nimeää kuvat verkkokäyttöön sopiviksi.

Yhteenveto

Siinä tärkeimmät vinkit web-suunnittelun aloittamiseen graafikon taustalla. Vietämme kasvavasti aikaamme verkossa, josta on tullut kuin olohuone nykyihmisille. Sisustamme olohuoneet silmää miellyttäviksi, miksei myös virtuaalinen olohuoneemme voisi olla kaunis ja käytönnöllinen?

Kaikki mainitut tekniikat ovat helposti kokeiltavissa suunnittelijoiden tarpeet huomioonottavalla LiquidBlox-kotisivutyökalulla.

Lue lisää ammattimaisesta kotisivujen suunnittelusta täältä.