Veebitrendid 2017. aastal

Veebidisaini mõiste on muutunud suuremaks

Veebidisainerid ei tee ammu enam veebisaitidele lihtsalt ilusat väljanägemist, vaid lahendavad ka kasutajakogemuse probleeme. Selle teadvustamine suuremalt kogub alles hoogu. Vanasti ei olnud brauserid nii võimsad, ka kasutajaid oli kordades vähem kui tänapäeval. Peamine funktsioon oli praktiline ja disaineri ülesanne oli seda lihtsalt ilusamaks muuta. Veebidisain ei olnud muud, kui tehnoloogia visuaalne pool, mis pidi publikule hea välja nägema.

Veel hiljuti keskendusid veebidisainerid peamiselt esteetikale, jättes kasutajakogemuse tahaplaanile. Viimaste aastate jooksul on veebidisain muutunud mitmekülgsemaks. Praegused veebidisainerid vastutavad lisaks ilusale visuaalile ka kogemuste kujunemise eest. Veebidisainerid nimetavad end nüüd teadlikult UX (user experience) disaineriteks.

Mobile-first ehk veebidisain lähtub telefoni-kasutajatest

Mobiilsete seadmete kasutamine liigub endiselt tõusvas joones ja ületab kindlalt lauaarvuti/läptopi kasutamist. Termin responsive design on ilmselt jõudnud iga kasvõi kodulehe tegemisega kokku puutunud inimeseni. Veebilehe kohandumine erinevatele seadmetele tähendab liikumist suuremast ekraanist väiksemani.

Mobile-first, nagu nimigi ütleb, liigub veebilehe loomisel vastupidises suunas. Resposive disaini puhul jäetakse mobiilivaates teatud objektid lihtsalt kuvamata, kuna need ei mahu ekraanile. Need on küll olemas, kuid mobiiliga kasutajale lihtsalt peidetud. Mobile-first tähendab esmalt sisu. Igasugu animatsioonid, sliderid ja muud vidinad lisatakse alles hiljem, kui sisu on põhjalikult välja töötatud ja paigas. Mobile-first on oluline eelkõige planeerimise ja sisuloome, aga ka arenduse seisukohalt (layoudi kohandumine eri seadmetes, laadimisaeg, koodi optimeerimine jms).

Tegemist pole uudse lähenemisega, kuid üha enam kohtame kodulehti, millel on rohkem läbimõeldud mobiilne vaade, mis lisaks heale väljanägemisele on kasutajale ka lihtne ja mugav kasutada. Hea kasutajakogemus toob kliente veebilehele tagasi ning suurendab külastajate arvu. mobiForge on avaldanud mitmeid artikleid sellest, kui oluline on mobiilne vaade ja toonud välja fakti, et igapäevaselt kasutab veebilehti mobiilselt 1,2 miljardit inimest.

Disaineri uued töövahendid ja kiire prototüüpimine

Ajalukku vaadates võib pisut liialdades nentida, et lausa aastakümneid on veebi kujundatud Adobe Photoshopiga. Mis on tegelikult fototöötluse tööriist ning sellisena responsive ja pisi-animatsioonidega moodsa veebi kujundamiseks täiesti sobimatu tööriist. Nii oli, sest paremat polnud mobiili-eelses maailmas isegi võibolla vaja.

Algselt äppide tegemiseks loodud vektorgraafika-põhine Sketch maandus ühtäkki komeedina umbsesse tiiki ja kogu maastik muutus. Siis tuli paljulubav Macaw, mis soovis eemaldada kujundamise ja arendamise vahelise lõhe. Aga selle tegijad osteti kahjuks konkurent InVisioni poolt kiiresti üles. Nüüd, mõned aastad hiljem, on meil ühe kohmaka Adobe tehasest tulnud buldooseri asemel terve müriaad väiksemaid ja nutikamaid kiiret täppistööd võimaldavaid vahendeid, igaühel oma visioon, kuidas veebi kujundamine ja UX-töö käima peaks.

See on ilmselt üks kasulikumaid läbimurdeid veebidisaini maailmas viimase paari aasta jooksul. Sellised rakendused võimaldavad luua kiiresti ja lihtsalt lõpptoote sarnaseid prototüüpe, et hinnata nende kasutatavust ja visuaali. Need on visuaalsed tööriistad, kus pole enamasti vaja kirjutada ridagi koodi.

Selle põhiline eelis on, et kavandid toimivad näiliselt nagu valmis toode, ilma et peaks arendajate väärt tööaega kulutama. Samuti ei pea enam kliendile üksikasjalikult seletama iga liikumist või põhjust, miks miski just nii tehtud sai – klient saab ise kõike näha ja proovida. Saab kiirelt testida ja vajadusel muudatused kiirelt sisse viia. Hoiame kokku tööaega ja jäävad ära arusaamatused seletuste tõlgendamisel.

Lisaks saab osadest tööriistadest vaevata kätte arendajale vajalikud graafikafailid ja koodiread.

Selliseid tööriistu on tõsiselt palju, mõni laiema ampluaaga, mõni spetsiifilisem. Näitena turuliider, pisut nagu ülehinnatud InVision, vanameister Marvel, äsja uue versioonini jõudnud ägedad Figma ja UXPin, teistel sabas sörkiv Adobe XD, UI-animatsioonile keskendunud Framer, Flinto ja Facebooki Origami Studio, vaikselt toimetav ja hetkel vist kõige mitmekülgsem Atomic ja väga paljud teised, mis on ambitsioonikamad, kui wireframe’imisele pühendunud Balsamiq, Axure jms.

Arengud selles vallas käivad ja päris ideaalsed lahendused on ehk aasta-paari jooksul valmimas. Kui kunagi käis veebi kujundamine igal pool üsna sarnaselt, sest töövahendid olid kõigil samad, siis hetkel on töötegemine mitme vahendi vahel pihustunud. Vähemalt tekitab see ehk ka rohkem erinevaid lahendusi?

Visuaalile rohkem rõhku

Inimesed tahavad visuaalselt selgitavat veebidisaini. Tähelepanu peab võitma esimestel sekunditel. Kui seda ei juhtu, võib võimalik klient suunduda konkurendi poole. Pilku köidavad suured pildid, animeeritud graafikud (tõusev trend), isikupärased illustratsioonid ja eelnevatel aastatel populaarseks saanud cinemagraph. Näiteks Redwalli loodud Moderan Solutions veebi päises illustreerib lakooniline animatsioon pakutavat teenust.

Originaalsed fotod ja illustratsioonid

Illustratsioonid lisavad minimalistlikule stiilile, mida kohtab endiselt ka 2017. aasta veebidisainis, mängulisust ja isikupära. Trend ei seisne niivõrd nende olemasolus kui originaalsuses. Pildipangafotod on asendunud originaalsete piltidega, mis kajastavad ettevõtte päris õhustikku.

Kinnisvaraarendusveebidel on oluline eristuda. Eesmärk on kliendile tutvustada lisaks ehitisele ka ümbritsevat keskkonda, mida illustreerivad kõige paremini fotod. Õhtukaare veebilehel rõhutatakse asukoha eeliseid ja näidatakse elukeskkonda.

Illustratsioonid on kooskõlas ettevõtte stiili ja värvitoonidega, loodud spetsiaalselt veebi tarbeks. Selline suund kasvab jõudsasti, kuna mõjub kodulehe külastajale ehedamalt.

Asümmeetria, modulaarne disain ja ebatavaline layout

Asümmeetriline disain toob kujundusse julged lahendused, milles elemendid loovad harmoonia ning täiendavad üksteist. Ilus ja toimiv asümmeetria nõuab läbimõeldud kujundust ja struktuuri, et visuaal ei mõjuks kaootilise ja tasakaalustamatuna.

Taasavastatud on modulaarne disain, kus elemendid on üles ehitatud ristkülikukujuliste moodulitena. Selle abil saab vaatajani tuua erinevate lehtede sisu üheaegselt.

Selleks aastaks on ennustatud suuri arenguid nii asümmeetria kui ka ebatavalise broken layouti kasutuses. Broken layout/grid on tavaliselt lähenemisviis, kus eiratakse traditsioonilist jäika, läbivalt ühetaolist veerulaotust. Disaineritele tähendab see rohkem vabadust ja loomingulisemat lähenemist. Nad saavad kasutada kattuvaid tekste, pilte, sisu ning luua põnevaid paigutusi, mis juhivad tähelepanu ja tekitavad huvi. Veintidós Grados veebilehel on kasutusel nii asümmeetria kui ka broken layout.

Tüpograafiat kasutatakse julgemalt

2016. aastal nägime tüpograafias väga loomingulisi lähenemisi, see kestab siiani. Tõusvaks trendiks on overlapping tekst, kus osa tekstist jookseb pildi peale või kastist välja. Ka Redwall kasutas Hausersi kodulehe veebikujunduses sellist võtet.

Uut mõõdet antakse ka teksti vertikaalse kasutamisega ja oversized ehk muust tekstist tavaliselt ühe tähe oluliselt suuremaks muutmisega. Suured pealkirjad, lühikesed tekstid on endiselt trendikas. Kui üldine disain on kaasaegselt minimalistlik ja puhas, lisavad tüpograafilised elemendid üllatavat aktsenti. Plokk-kirjade kõrval kasutakse üha enam ka seriifidega kirju, kuna ekraanid on piisavalt tihedad, et peeneid detaile kvaliteetselt kuvada. Tüpograafia-artikleid avaldab ja trende jälgib Typewolf.

Material Designi liigne kasutamine

2014. aastal loodud Google Material Design ja Material Design Lite võidutsevad endiselt. Kõige hea juures võime olla kriitilised selle liigse kasutamise osas, mis muudab veebilehed liiga sarnasteks. Material Design on loodud pigem põhimõtteid tutvustavaks kui et disaini stiili näitamiseks. Twitteri loodud Bootstrap pole oma visuaaliga massidesse läinud ja on jäänud arendajate tõhusaks abivahendiks, milleks see ka loodi.

Julge värvikasutus

Viimastel aastatel näeme veebimaailmas külluslikku värvikasutust ja gradient‘e ehk värviüleminekuid. Avangard (IK Blue) ja psühhedeelia on salamisi murdnud disaini peavoolu. Seda hüperaktiivse Z-põlvkonnaga, kes pole enam mitte ainult ihaldusväärne tarbijagrupp, vaid vaikselt juba muutumas kogu “muusika” tellijaks. Umbes kümmekond aastat tagasi tipus olnud Apple’i minimalism taandub ilmselt vaikselt koos pensionieelikutega, kui groteskselt üldistada. Oleneb muidugi ka valdkonnast, peamiselt noori sihtivates muusika ja telekomi teemades saab vabalt lõbutseda ja värvi pritsida.

Julgemate värvide kasutamine aitab köita kasutajate pilke ja tõmbab tähelepanu, seda edukamalt kui varasemad rahulikud ja toon-toonis paletid. Eeskujuks võib tuua Spotify brändi värskenduse, kus liiguti mugavast rohelisest värvist tuduvamalt erksama poole. Kuigi Pantone teatas, et aasta värviks on roheline, mis sümboliseerib värskust ja uut algust, ei kohta veebidisainis seda tooni ülemäära palju. Inspiratsiooni erinevatest värvipalettidest saab ammutada uiGradients, Adobe Color ja Coolorsi lehtedelt.

Duotone pildid

Duotone on pilt, mis kasutab kaht värvi. Massidesse tõi selle stiili Spotify juba paar aastat tagasi. Nüüdseks on stiil hoo tiibadesse saanud ja leiab kasutust laialdasemalt. Addison Partners kasutab läbivalt duotone stiili ja on saavutanud efektse ning julge kodulehe.

Veebileht ja selle tulevik – või hoopis minevik?

Digimaailmas on käimas suured muutused. Ootamatult kiired edusammud tehisintellekti, kõnetuvastuse, liitreaalsuse jms vallas muudavad lähiaastatel oluliselt seda, kuidas inimene masinatega suhtleb. Nutitelefonid on muutnud inimeste arusaama masinatest, privaatsusest ja iseendast.

Nii on ilmselt juba mõne aasta pärast normaalne, et justkui nuppudega kaudselt mõjutatavad masinad jäävad minevikku või täitma spetsiifilisi ülesandeid. Igapäevane suhtlus ja meelelahutus muutub kirjaliku ja kaudse asemel kõne-põhiseks, kõik toimub siin ja kohe. Google näeb vaeva isegi pisikese eesti keele tuvastamisega – seega on digimaailma suurtel ilmselt ambitsioonikad plaanid maailma muuta.

Sellega seoses muutub kindlasti ka veebidisain. Kas saab sellest siis enam rääkida, kui innovatiivsest ja olulisest? Võibolla kolime oma eluga emoji-keelsetesse loba-ruumidesse (FB Messenger, Slack jt), kus ajame asju juturobotitega? Ja veebileht kui selline muutub disnosauruseks, mis elas kunagi ammu suurte arvutiekraanide ajastul?

Kokkuvõtteks

Visuaal kõnetab inimesi. Praegused trendid järgivad seda printsiipi, tuues vaatajani suured fotod, huvitavad tüpograafilised lahendused, isikupärased illustratsioonid ja eripärase layoudi. Veebidisainis pööratakse üha enam rõhku kasutajakogemusele. Eesmärk on tagada võimalikult hea kasutajakogemus, olenemata seadmest. Tehnoloogia areng võimaldab inimesteni tuua keerukamaid, originaalsemaid ja detailirohkemaid lahendusi. Ühtlasi on kuskil taustal kogu digimaailm tõsiselt muutumas.