Joka ammatissa on sellainen ”jos sais toivoo” -elementti. Minun tehtäväni on muuttaa leiska käyttöliittymäksi, joten suurimmat ”jos sais toivoo” -hetket koskevat verkkopalvelujen ulkoasusuunnitelmia. Tässä fronttikehittäjän salainen toivelista, vaikka vielä ei olekaan joulu.

Elementit gridin mukaisesti

Jostain syystä ilmeisesti ajatellaan, että elementit voivat sijaita verkkosivulla ihan missä vaan. Ei ne voi. Tai voi ne, mutta mitä villimpi leiska on, sitä enemmän sen koodaaminen vaatii aikaa, sitä omituisemmin se toimii eri näyttökoossa ja sitä vaikeampi sitä on muokata, ylläpitää ja kehittää. Se on siis todennäköisesti rikki vartissa.

Kun käytetään gridiä, lopputulos on järkevämpi. Olettaen, että gridit ja gutterit on hahmotettu oikein. Joskus näkee leiskoja, joissa näin ei ole. On muuten villiä sekin. Photoshopissa on ominaisuus, joka näyttää gridit suunnittelun tueksi ja myös Sketchin käyttöä suosittelen vahvasti!

Katse kuviin ja fontteihin päin

Ihan ekaksi tarkkana taustakuvien kanssa. Jos on koko sivun taustakuva ja elementit on aseteltu pikselilleen oikeaan kohtaan AD:n ruudulla, jo heti seuraavassa näyttökoossa se on vinksallaan. Kaikkien taustakuvien pitää kestää sitä, että elementit sen päällä liukuvat ja asettuvat uusiksi, kun näytön koko muuttuu.

Fonttien suhteen täytyy olla varma, että kyseisestä fontista on saatavilla webfont-vaihtoehto. Jos ottaa vain jonkun nätin kiekurafontin, mennään aika tuurilla, että toimiiko siinä verkkoon laitettuna esimerkiksi ääkköset tai yhtään mikään. Eri käyttöjärjestelmät ja laitteet tukevat fontteja eri tavalla ja siksi yhdestä fontista tarvitaan noin neljä-viisi eri fonttityyppiä, että kaikki vaihtoehdot on katettu. Suosittelen katsomaan ensimmäisenä Google-fontteja tai investoimaan Adoben Typekitiin.

Sitten vielä kaikista suurin toive: kun leiska on valmis, se tulisi toimittaa työtiedostona (psd, sketch) eikä jpg- tai png- kuvatiedostona. Itse kuvista fronttikehittäjä kaipaa raakakuvien sijaan valmiiksi oikeaan kokoon editoidut versiot. Näin jos olisi, niin joulu olisi joka päivä.

Aucor Tommi Sipiläinen leiska sunnittelu

Lopuksi sananen toiminnallisuuksista

Nämä eivät yleensä ole pelkästään ulkoasusuunnittelijan hartioilla, mutta kuuluvat olennaisesti ”jos sais toivoo” -osastolle. Jos sais toivoo, niin animaatioiden käyttö olisi hillittyä. Animaatio on mainio tehokeino ja huomionherättäjä. Ne vinkkaavat, että täällä on jotain merkittävää, katso tänne. Mutta ne on helppo vetää överiksi ja raja on melko ohut.

Sama juttu ponnahdusikkunoiden kanssa. Kahdessa ponnahdusikkunassa on toinen liikaa. Kun lukee pitkää tekstiä, sen päälle pamahtava modal-ikkuna lähinnä ärsyttää ja lukukokemus katkeaa. Jos ponnahdusikkuna tulee yllättäen, se on tunnetusti huono juttu. Kun kerran on jonkun sulkenut, ei sitä pitäisi joutua sulkemaan toista kertaa. (Okei, nämä on vähän myös ”jos Tommi verkkopalveluiden käyttäjänä sais toivoo” -listalta.)

Lopuksi: nettisivuilla ei pitäisi olla automaattisesti mitään ääntä. Automaattinen video on ok, kunhan se on äänetön. Myös kaikenlaiset huomionherättäjäksi tarkoitetut kilahtelut ja pingahtelut ja pongahtelut ovat tarpeettomia, jos käyttöliittymä on muuten suunniteltu intuitiviseksi ja ohjaavaksi.

Unohdinkohan jotain? Mitä sun toivelistalla on?