Material Design ohjeisto näyttää graafisen suunnan tuleville web-sivustoille

Onnistunut verkkosivusto vuosimallia 2015 on ulkoiselta olemukseltaan minimalistinen, näyttää graafisesti litteältä, siinä on pelkistetty kirjaimisto ja se käyttää isoja taustakuvia. Käyttäjäkokemus (UX) on noussut etusijalle, mikä merkitsee esimerkiksi sitä että sivusto hyödyntää pitkää tai rajatonta alaspäin rullaavaa sivua tai yhden sivun layout-ratkaisua. Pelkistetty kirjaimisto tarkoittaa kirjasinleikkauksia kuten Futura, Arial ja Helvetica.

Mobiililaitteiden valtaisa vyöry on merkinnyt responsiivisen suunnittelun läpimurtoa. Responsiivisella suunnittelulla verkkosivu saadaan näyttämään helposti luettavalta minkä kokoisella näytöllä tahansa ilman että sivua tarvitsee tarpeettomasti suurentaa tai pienentää. Kehitystä vie eteenpäin verkkosivujen sisältö, jonka löytäminen ja saattaminen helposti omaksuttavaksi vauhdittaa sivujen esteettömän käytön, mukautuvuuden ja käytettävyyden suunnittelua.

Responsiivinen suunnittelu on yksi tekijä, joka yhtenäistää verkkosivujen graafista ilmettä jatkossa. Jo muutama vuosi sitten Microsoftin Windows 8:aan ja muihin laitteisiin kuten XBoxiin uudistama graafinen ohjeistus vauhditti litteiden ja pelkistettyjen käyttöliittymien suunnittelua. Apple on iOS laitteissaan myös mennyt yhä litteämpään ja pelkistetympään 2D-käyttöliittymään. Verkkosivusto suunnitellaan responsiiviseksi, siis yhtenäisellä visuaalisella kertaratkaisulla kaikissa päätelaitteissa toimivaksi. Kun yli puolet internet-selainkäytöstä tehdään nykyisin älypuhelimilla ja tableteilla, vaikuttaa etenkin niiden Appseja varten suunniteltu käyttöliittymäkieli kaikkiin verkkosovelluksiin ja -palveluihin.

Esimerkki Android-puhelimen
Material Design -liittymästä.
Maailman älypuhelimista Android-laitteiden markkinaosuus on 80 prosentin tuntumassa, voimme odottaa Androidin kehittäjän Googlen uuden Material Design suunnitteluohjeiston vaikuttavan merkittävästi tulevien verkkosivujen ilmeeseen. Sama pätee muihinkin verkkopohjaisiin liittymiin kuten sovellusohjelmiin, lomakkeisiin ja raportteihin. Esimerkiksi Google Apps for Work ohjelmisto, joka on selainpohjainen, noudattaa uutta Material Design ohjeistusta.

Kun harkitset, minkälaisen ulkoasun ja käyttäjäkokemuksen valitset yrityksenne uudelle tai uudistettavalle verkkopalvelulle, kiinnitä huomiota seuraaviin seikkoihin:
  • Suunnittelussa korostuvat minimalismi, rajattu väripaletti, avaruus eli runsas tyhjän tilan käyttö, pelkistetty ja joskus liioiteltu typografia. Typografiassa suositaan sveitsiläistä eli kansainvälistä tyyliä, jossa kirjasimet ovat lähes aina pääteviivattomia (groteskeja).
  • Kolmiulotteisuus on palannut käyttöliittymiin, mutta sitä sovelletaan Googlen ohjeissa äärimmäisen kurinalaisesti. Käyttöliittymän osat ovat litteitä, mutta ne ovat toistensa päällä ja heittävät etäisyyden mukaisen varjon alla oleviin osiin.
  • Animaatio yleistyy muissakin kuin älypuhelinten käyttöliittymissä - valikot näyttävät toimivan fyysisemmin kuten reaalimaailman painonapit ja kytkimet.
  • Käyttöliittymän suunnittelussa hyödynnettävien web-osien mallit ja ohjeet löytyvät Googlen Material Design periaatteita konkretisoivalta Polymer-projektin sivustolta. Sivustolta voi ladata "Paperiosat, paper-elements" oman suunnittelutyön avuksi. Ohjelmisto on maksutta hyödynnettävissä, sillä sitä jaetaan BSD-lisenssillä.
  • Luovuutta Material Design rajoittaa verkkosivuston suunnittelussa lopultakin aika vähän, sen sijaan käyttäjän navigointi ja verkkopalvelun yleinen käytettävyys kuten luettavuus paranevat oleellisesti, kun useimmat uudet palvelut noudattavat samoja käytäntöjä.
Vaativat verkkokaupat ja verkkosivustot toteutetaan usein Drupal-julkaisujärjestelmällä, jota blogin kirjoittajan yritys Hypermedia Oy käyttää yleisesti edellä mainituissa hankkeissa. Drupaliin on saatavilla valmiita työkaluja, joilla käyttöliittymä ja verkkopalvelu yleensäkin pystytään graafisesti suunnittelemaan ja ohjelmallisesti toteuttamaan kustannustehokkaasti uuden Material Design -ohjeistuksen mukaiseksi. Eräs tällainen kehittäjille tarkoitettu työkalu on Materialize-teemaohjelmisto.

Verkkosivustoissa tullaan aivan varmasti vielä jatkossakin yhdistelemään suositeltuja käyttöliittymätekniikoita ja ratkaisuja, joissa suosituksista ei niin piitata. Tällaisiin tarkoituksiin Drupaliin on saatavissa erillisiä moduuleita, joilla esimerkiksi valikot toteutetaan uuden Material Design -ohjeistuksen mukaisesti - muuten voidaan mennä ihan vapaasti. Näistä teknisistä ratkaisuista esimerkkinä mainittakoon valikkotyökalu Navbar Awesome.