MEAN stack

Full-stack JavaScripti arendajatele tuttav lühend “MEAN” on mulle viimasel ajal hakanud huvi pakkuma. Kes veel MEAN stacki ei tea, siis karta pole vaja. MEAN midagi kurja ei tähenda vaid moodustub sõnadest MongoDB, Express, AngularJS ja Node.js. See postitus on sissejuhatuseks ühele seeriale, mille tulemusena oskab lugeja eelnevaid tehnoloogiaid kasutades luua täiesti toimiva täis-JavaScripti veebiäpi. Esimeses postituses tutvustaksin lühidalt kõiki nelja tehnoloogiat.

MongoDB

Tegemist on andmebaasimootoriga, mis ei salvesta andmeid SQL formaati, vaid iga andmekirje on eraldi JSON tüüpi dokument ja seotud dokumendid moodustavad kollektsioone (SQL-s tabelid).

MongoDB on ka vaba andmestruktuuriga. See tähendab, et ühes kollektsioonis olevad dokumendid ei pea olema samade andmeväljade ja struktuuriga.

Node.js

Selles projektis kasutan Node’i veebiserverina. Node ongi iseenesest üks JavaScriptis kirjutatud runtime keskkond, mida saab erinevateks otstarveteks kasutada (mitte alati veebiserver).

Tänu avatud lähtekoodile on Node.js’le arendatud lisaks VÄGA palju lisafunktsioone ja rakendusi. Veebiäpi loomine node serverile ongi laias laastus sobivate pakettide kokku sobitamine. Ratast pole vaja leiutada.

Express

Kui andmebaas (MongoDB) ja server (Node) on olemas, siis liigume edasi rakenduse kirjutamise juurde. Express on Node’i jaoks kirjutatud veebirakenduste raamistik, mis ei sisalda küll palju, kuid on vägagi paindlik ja ühilduv teiste pakettide ja pluginatega.

Express on kogu rakenduse jaoks justkui süda. See seob komponendid omavahel, määrab konfiguratsiooniparameetrid ja käivitab kõik, mis äpi toimimiseks vaja. Kuigi express juba sisaldab mõningast front-end võimekust, on lõppkasutaja jaoks veel üks raamistik…

AngularJS

Angular on Google’i loodud kasutajapoolne raamistik MVC arhitektuuri toetusega. See on mõeldud ühe-lehe veebiäppide tegemiseks ning nagu ka kõik eelnenud tehnoloogiad, on ka Angular avatud lähtekoodiga. Tänu MVC ja MVVM arhitektuuride implementeerimisele on loodava rakenduse ülesehitus ja testimine lihtsam.

Üks Angulari põhifunktsionaalsus on kahesuunaline andmeside. See tähendab, et klient ei pea uute andmete saamiseks pidevalt serverist neid küsima. Server saab ka otse kasutajale andmeid “pushida”.

Mis edasi?

Lisaks nendele tuleb veel päris mitu uut tööriista, millega on vaja arenduse käigus sõbraks saada. Järgmiseses postituses vaatan täpsemalt Node’i ja MongoDB installeerimist ning seadistamist.

Seeria lõpptulemuseks võiks olla MEAN stacki peale loodud tavaline CRUD näide, mida siis igaüks saaks enda ideedega edasi arendada. Täpselt veel ei oska tulemust ennustada. Võibolla loon hoopis uue Skype’i…

Tehisintellekt… ulme või jaekaup?

Iga päevaga märkame meedias ja uudistes aina rohkem sõnu “AI”, “tehisintellekt”, “superarvuti” jms. Nendest vändatakse filme, kirjutatakse raamatuid, avaldatakse artikleid. Arvamused jagunevad siinkohal väga laialdaselt – on “vanaemad” kes pole asjast midagi kuulnud ja peavad seda satanismiks. Nendest järgmine, üpriski suur grupp on inimesi, kes arvavad, et tegemist on pelgalt ulme või kauge-kauge tulevikuga. See arvamus põhineb suuresti filmidel nagu Ex Machina, Avengers: Age of Ultron, Terminator ja neid on veel palju. Millal siis on oodata suurt robotite mässu?

Intelligentsed süsteemid on juba olemas

Kas oled tähele pannud, kuidas reklaamid, mis ilmuvad Facebooki ja Google’i otsingutulemuste kõrvale oleks justkui sinu jaoks sinna paigutatud? Ei pea kartma, et teiselpool netikaablit istub mingi mehike, kes sinu võrguliiklust jälgib ja reklaame sinu jaoks välja valib. Seda teeb AI.

Kuigi sellest palju ei räägita, on Google, Apple ja mitmed teised suured tehnoloogia organisatsioonid arendamas oma tehisintellekti ning seda vaikselt oma toodetesse integreerimas. Google on selle jaoks lausa eraldi osakonna loonud: Google AI.

Viimasel ajal on ka Apple ja Microsoft aru saanud, et AI on tulevik ja ilma selleta lihtsalt ei saa. Mis saakski olla parim kandidaat intelligentseks robotiks kui otsingumootor?

Just nagu filmis Ex Machina, arendatakse ka päris AI-d otsingusüsteemidele. Seni on olnud Google konkurentsitult omal alal parim, kuid nii Microsoft oma Cortanaga kui ka Apple’i Siri (ja ka nende peagi ilmuv uhiuus otsingusüsteem) näitavad tõelist konkurentsi kasvu sellel alal.

Kuhu edasi?

Arvatavasti on vaid mõne aasta küsimus, millal intelligentsed masinad meie igapäevaelu lahutamatuks osaks saavad.

Suure tõenäosusega on see meie jaoks vaid hea uudis, sest see parandaks elu kvaliteeti, tooks mugavust ja rohkem vaba aega. Loomulikult vinguks keskmine eestlane ikka rohkem, aga sellega oleme kõik juba harjunud ja küll harjub ka AI.

Suurt robotite mässu ega maailmavallutust pole vaja karta, aga tuleks arvestada fakti, et kui uus tehnoloogia jõuab tavakasutajateni on see ilmselt juba aastaid olnud sõjaväe käsutuses. See tähendab rohkem kontrolli ja vähem sedasamust privaatsust.

Veebidisaini trendid praegu ja tulevikus

Miks on nii, et aasta tagasi tehtud ülimalt moodne veebileht on tänaseks disainerite jaoks naerualune? Eelmises kvartalis parimaks disainitööriistaks tituleeritud raamistik on 10 konkurendi võrra alla vajunud ning uued tehnoloogiad pressivad peale. Projekti alustades tuleks arvestada, et kui asi saab valmis, on veebis juba uued nõudmised. Sellepärast on igal disaineril kohustuslik olla kursis hetke “veebimoega” ning ennustada ka tuleviku.

Minimalism

Vaadates praegu loodud lehti võib märksõnadeks öelda minimal ja flat.

Less is more

Tuntud ja vägagi asjakohane tsitaat, millest järeldub, et eemaldades lehelt ebavajaliku prahi paraneb väljanägemine, kasutuskogemus ning ka jõudlus. Lisaks ebaolulise eemaldamisele on hea vastuvõtu osaliseks saanud ka flat disain, mille puhul muudetakse ka lehel olevaid elemente lihtsamaks kaotades varjud ja gradiendid. Ka ikoonid ning nupud tehakse üheplaaniliseks.

Trendid saavad üldjuhul alguse suurtest eeskujudest. Minimalismi kasutajatest suurimaks võib pidada Apple’it, kes nii oma toodete kui ka veebidisaini poolest ülimalt minimalistliku stiiliga silma torkab.

Apple’i kodulehekülg

Flat disaini eestvedajaks võib hetkel nimetada Microsofti, kelle tarkvara ja veebiteenused on ilma igasuguste varjutamiste ja värvihajumisteta.

Microsofti kodulehekülg

Samuti on oma suhteliselt flati disainifilosoofiaga välja tulnud Google. Selle Material Designi reeglite järgi kujundavad paljud suured korporatsioonid oma veebikeskkondi ümber, parandades sellega kasutuskogemust ning ühtlustades üldist veebipilti.

Google’i disaini leht

Suured pildid

Suur tühjus ehk white space ei sobi aga kõigile. Sellepärast on moodi tulnud suured (Hero) pildid. Vahel isegi terve ekraani suurused päisepildid võisid aasta eest tunduda utoopilisena, kuid praegu leiavad nad väga laialt kasutust.

Koos suurte piltidega on tulnud ka suured ja omapärased kirjatüübid, mis toovad väga konkreetselt välja lehe põhiidee. Käsitsi joonistatud pealkirjad annavad lehele omapära ja hubasust.

navigatsioon

Tühjuse loomist ja põhjaliku koristustööd veebidisainis on näha ka teistes trendides. Näiteks väga levinud hamburgeri ikoon menüü asemel. See hoiab palju ruumi kokku, kuid samas tähendab lisaklikki navigeerimises.

Viimasel ajal on pinnale kerkinud ka palju full screen menüüsid. Kõige levinumad küll mobiilsetel seadmetel, aga seda trendi näeb üha enam ka suurtel ekraanidel.

Kuidas luua minimalistliku lehte?

Paar näpunäidet minimalismi rakendamiseks veebidisainis:

1. Jaga leht suures osas mitte rohkem kui viieks sektsiooniks.
2. Otsusta, millised elemendid on tingimata vajalikud, kõik muu viska minema.
3. Ühel lehel peaks olema ainult üks eesmärk või idee korraga.
4. Alusta must-valgelt. Loo sõrestikmudelid.
5. Kasuta minimalistliku stiili vaid seal, kus see on mõistlik. Suurte infohulkadega süsteemide korral on vaba ruumi tihtipeale raske juurde tekitada.
6. Kui disain on valmis, vaata see veel paar korda läbi, et eemaldada ebavajalik.

 Tuleviku trendid

Ühte võib väita peaaegu kindlalt – minimalistlik stiil jääb püsima. See on fundamentaalne disaini filosoofia/teooria, mis sobib väga paljude trendidega ja mis on töötanud juba üle 100 aasta erinevates valdkondades nagu arhitektuur, kunst ja muusika. Kuna see parandab nii jõudlust ja kasutuskogemust pole lihtne leida alternatiivi. Võimalik, et kvantarvutusega kaob ära mure jõudluse pärast. See võib kindlasti mõjutada ka disaini.

Flat disain ei pruugi kaua kesta. Puhtad värvid asenduvad hajutustega või nende animatsioonidega ning hakatakse kasutama õrnu tekstuure puhta ja tehisliku värvi asemel.

Nagu eelnevalt mainitud, võib kvantarvutus kaotada jõudluse probleemi. Seega lisandub palju interaktiivsust ja liikumist. Sümmetrilised mustrid ja animatsioonid asenduvad või on juba asendumas asümmeetriaga. See aga ei tähenda, et sümmeetria funktsioon (harmoonia, hierarhia) kuhugi kaoks. Alati tuleb kombineerida!

Kokkuvõtvalt tuleks olla kursis veebiga. Tuleb külastada saite ning katsetada uusi asju. Nagu ka arenduses, ei piisa ka disainis ühele trendile spetsialiseerumisest. Õppimine ehk uue olustikuga kohandumine peab olema pidev.

Negatiivse ruumi kasutus disainis ja kasutajaliidestes

Lugesin hiljuti raamatut “Zen of White Space in Web UI Design”, mis on muide UXPin-i tasuta raamatute seerias ning mille saab endale muretseda siit: raamat. Üritan järgnevalt raamatus sisalduvad põhitõed välja tuua ning kokkuvõtvalt seda pisut arvustada.

Mis see “Valge Ruum” on?

Väga üldistatud, kuid samas piisav definitsioon oleks:

Lehel asetsevate elementide vaheline ruum

“Valge ruum” on aga väga eksitav, sest see ruum ei pea absoluutselt valge olema. See võib olla ükskõik mis värvi. Selleks on inglise keeles olemas termin “Negative space“, mis eesti keelde tõlgituna oleks negatiivne ruum. Samuti võib kasutada fraasi vaba ruum.

Kuidas saab aga olla üks tühi ruum nii oluline, et sellest kirjutatakse raamatuid ja vaieldakse pidevalt?

Üldiselt jagatakse vaba ruum kahte kategooriasse: makro- ning mikroruum. Nagu sõnadest ka paistab kuuluvad makroruumi alla sektsioone ja suuremaid leheosasid eraldavad vahed. Mikroruumina mõistetakse aga teksti ning üksikute elementide (nagu ikoonid ja pildid) vahesid.

Kuidas seda kasutada?

White Space’l on võime suunata kasutajat vaatama lehte kindlas järjekorras ja just nii, nagu autor soovib. Seda loomulikult juhul, kui ruumi kasutus on õigesti lahendatud.

Üldine kuldreegel on, et mida rohkem on elemendi ümber vaba ruumi seda tähtsam ja rõhulisem ta tundub. Samas saab mingit osa lehel välja tuua ka teisi disaini võtteid kasutades. Näiteks muutes taustavärv kontrastseks ülejäänud lehega võrreldes, teha tekst suuremaks või kasutada animatsioone.

Ruumi jagamisel tuleks olla loov ning mitte jääda kinni mingisse kindlasse mudelisse või raami. Erinevus rikastab ja seda eriti disainis. Kasutades vaba ruumi erinevates lehe osades erinevalt, tekivad grupid ja sektsioonid. Ehk osad, mille vahel on vähem ruumi, näivad ühtse tervikuna.

Suuna kasutajat lehel

Üks negatiivse ruumi põhifunktsioone on veebilehe külastajat mõjutada, et ta vaataks või leiaks lehelt üles just selle kõige olulisema ja seda kõige esimesena. Selleks kasutatakse mustreid, et paigutadatekstid ja pildid lehele. Mustrid võivad olla nii sümmeetrilised kui asümmeetrilised. Arvan, et siinkohal väärib üks nõuanne raamatust tsiteerimist:

White space produces either symmetry or asymmetry. Symmetry creates memory and harmony, while asymmetry draws
attention. Balance both accordingly.

Seega mida ühtlasemad vahed elementidel, seda meeldejäävam ja ühtsem tundub tervik. Mida rohkem erinevust, seda rohkem peab kasutaja igat osa eraldi vaatlema jagades oma tähelepanu erinevalt.

Tekstid ja tüpograafia

Üldised reeglid tüpograafias kasutatavale ruumile on järgnevad:

1. Rea kõrgus peaks olema 1.5 – 1.75 korda suurem kui tekstikõrgus.
2. Alati on targem valida pisut suurem font kui väiksem.
3. Lõigu all peaks olema piisavalt vaba ruumi, et see oleks selgelt tekstist eraldatud.
4. Ääreribal asuv tekst nõuab kitsamaid ääriseid kui lehe põhiosas olev.

NB! Kõik ülaltoodud punktid ja reeglid on soovituslikud. Mingeid kindlaid seadusi disainis pole ega tule. Seega lase oma kujutlusvõimel lennata, kuid arvesta, et kasutades mõnda eelnevalt mainitud meetodit võivad sinu edaspidised teosed oluliselt meeldivamaks, efektiivsemaks ja kasutajasõbralikumaks muutuda.

Teosest

Raamat “Zen of White Space in Web UI Design” on täis nõuandeid ja praktilisi näiteid vaba ruumi / valge ruumi / negatiivse ruumi kasutusest. Lisaks nõuannetele on iga soovituse või reegli juures seda kinnitav reaalne näide. Selleks kasutati edukate ettevõtede nagu Apple, Microsoft, Wunderlist, Sketch, Medium jpt veebilehti. Soovitan seda kõigile disaineritele ja ka teistele huvilistele, kes tahavad tühjuses ilu näha…