Pakalbėkime apie tą dalyką, kuris, jei kainuoja, tai kainuoja daug, o jei nekainuoja, tai yra savo šanso pasireikšti laukiantis penktos kategorijos problemų uraganas. Taip jau su tinklapių irba programėlių dizainu būna. Apskritai visokių tai kompiuterinių dalykėlių dizainas Lietuvoje yra tema liūdna kaip mylimiausio šeimos gyvūnėlio laidotuvės. Jei koks nors šviežiai atsidaręs kabokas su daugiausiai dešimties žmonių komanda sugeba be vargo sugraibyti padoriai atrodantį tinklapį ir „Facebook“ puslapį, tai verslui didėjant, dėmesys tam, kas rodoma ekrane, nyksta.
Pakalbėkime apie tą dalyką, kuris, jei kainuoja, tai kainuoja daug, o jei nekainuoja, tai yra savo šanso pasireikšti laukiantis penktos kategorijos problemų uraganas. Taip jau su tinklapių irba* programėlių dizainu būna.
Apskritai visokių tai kompiuterinių dalykėlių dizainas Lietuvoje yra tema liūdna kaip mylimiausio šeimos gyvūnėlio laidotuvės. Jei koks nors šviežiai atsidaręs kabokas su daugiausiai dešimties žmonių komanda sugeba be vargo sugraibyti padoriai atrodantį tinklapį ir „Facebook“ puslapį, tai verslui didėjant, dėmesys tam, kas rodoma ekrane, nyksta. Didžiausi mūsų šalies verslai išvis gerai įsisavino taisyklę, kad nesvarbu, kaip atrodai, svarbiausia – vidinis grožis. Ja ir vadovaujasi. Jei labiau matomos tinklapių dalys dar yra dailinamos, tai funkcionalumas, kuris prieinamas ribotam kiekiui vartotojų, dažniausiai atrodo kaip į internetą sukišta OS „Windows“ Neandertaliečiai.
Geras tinklapio dizainas mūsuose yra ne taisyklė, o labai maloni, nes labai reta, išimtis. Jei norite būti ta madinga ir gražiai atrodančia išimtimi, žemiau rasite kelias nuorodas, kur žiūrėti bei ką daryti. Nuorodų galiojimo laikas ribotas: čia Jums ne kokie šachmatai, kad žaidimas amžinai vyktų pagal tas pačias taisykles.
1. Paralaksas
Jei norite būti ultramadinga internetų „fashionista“, this one is for you. Tai kol kas yra karšta, įspūdinga ir pasitaiko dar pakankamai retai, kad vietoj drungno „Nah…“ paliktų bent santūrų „Vau!“
Paralakso „scrollinimu“ užvadintas toks turinio važinėjimas ekrane, kai foninis vaizdas vartotojo atžvilgiu juda lėčiau nei esantis priekyje, taip sukuriant erdvės ir gylio pojūtį. Internete, kuris šiuo metu pabrėžtinai neigia trečios dimensijos egzistavimą (žr. 3-ią punktą), tai yra turbūt vienintelis priimtinas priminimas, jog puslapių bei programėlių dizainas nebūtinai turi būti suplotas it pakliuvęs po pramoninio lygintuvo presu.
Visgi, reikėtų prilaikyti vadeles prieš piešiant pernelyg optimistišką paralakso ateities paveikslą. Taip, tai atrodo labai efektingai, puikiai dera prie „Viskas viename“ puslapių (žr. 5-ą punktą), o UX/UI profesionalai dėl rimtų priežasčių myli šį efektą. Bet kartu tai yra sunkiai suderinama su mobiliais įrenginiais, gali įkišti rimtą pagaikštį į ratus puslapio užsikrovimo greičiui ir nėra „SEO-friendly“.
Visgi, jei norite pabandyti išbandyti paralaksą savo puslapiuose, čia galite rasti keletą idėjų: „Creative Bloq“ 40-ies puikių paralakso pavyzdžių rinkinys, „Awwwards“ 30 geriausių puslapių su paralaksu.
2. Automatiškai prisitaikantis dizainas
Jei kuri nors iš šiame sąraše esančių tendencijų yra bound to stay, tai būtent ši. Automatiškai prisitaikantis dizainas (Responsive Web Design, sutr. RWD) nėra masinis dizainerių kaprizas, nėra tai ir luotu upe nuplaukianti mada. Tai — ateitis. Blogos naujienos Jums, jei numojote ranka į APD: galite ruoštis ilgai savo tinklapio agonijai ir ieškoti jam minkštesnio karsto.
Dar neseniai į mobilius įrenginius buvo žiūrima kaip į trečiarūšę priemonę nerti į internetą, bet padėtis pasikeitė. 2013-aisiais 17,4 % visų vartotojų jį pasiekdavo ne iš ant stalo tupinčio nešiojamojo kompiuterio, o iš kokio nors lengvo įrenginio užapvalintais kampais.
Savaime aišku, kad toks skaičius padaro šiuos žmones ir jų patirtį dalyku, į kurį būtina atkreipti dėmesį. Jei manote kitaip, pabandykite įsivaizduoti Pinigų kartos tinklaraštį suspaustą į „iPhone“ ekraną arba prisiminkite nesibaigiantį Zoom In ↔ Zoom Out procesą, kuris lydi mobiliems įrenginiams nepritaikytų puslapių naršymą.
Automatiškai prisitaikantis dizainas skirtas optimaliam turinio atvaizdavimui skirtinguose įrenginiuose. Primityviai tariant, priklausomai nuo įrenginio, puslapio turinys pasistumdo ir sušokinėja taip, jog vartotojui nereikėtų su lupa šifruoti iki aukso smiltelės dydžio sumažėjusių raidžių. Nesvarbu, tai pusę ofiso sienos užimantis programuotojo monitorius, eurobiurokratės laptopo ekranas, kokia nors egzotiška skaityklė ar išmanusis telefonas – tinklapiu naudotis bus patogu.
APD atėjimas yra ir mirties nuosprendis tam, kas ilgai buvo mylima mobiliųjų įrenginių ir interneto atžala – m. svetainių versijoms. Kam laikyti porą skirtingų tinklapių įvairių tipų aparatams, jei galima turėti vieną, visur veikiantį korektiškai?
Tad, jei dar neturite automatiškai prisitaikančio tinklapio, pats metas pažiūrėti, kaip tai atrodo, bei ieškotis gudresnio programuotojo irba dizainerio: „Mobify“ 70 pribloškiančių automatiškai prisitaikančių puslapių.
3. Plokščias dizainas
Kažkada seniai seniai, kai Lietuvos padangėje skrandė „Krizė? Kokia krizė!“ šarka, mano šeima augino dar tik kokį trečią katiną, o Kolorado vabalas buvo tik užknisantis ropotojas bulvėse, internetas atrodė šiek tiek kitaip. Tada jame buvo daug trimatės erdvės, šešėlių, atspindžių, tekstūros, švytėjimo. Apskritai, viskas, ką sugebėjo atvaizduoti gamta ir industrija, galėjo būti ir buvo perkelta į interneto dizainą. Tai buvo detalės ir realizmo šlovės metai.
Tada atėjo ir praėjo krizė, trečias katinas mirė ar pabėgo, o Kolorado vabalai nespėjo transformuotis į svetimų žemių alkanus megalomaniakus, kai internetas atsisuko į priešingą pusę. Iš gazilijono efektų ir ornamentų liko tik aukštis, plotis, tipografija, išgryninta spalva ir, gal, nuotrauka. Dizainas tapo pabrėžtinai plokščias ir minimalistinis.
Ši tendencija yra itin lengvai suderinama su jau aptartu automatiniu prisitaikymu, tonomis megabaitų paveiksliukų neužpilti tinklapiai kraunasi greičiau ir lengviau, tokį dizainą lengviau sukurti ir palaikyti.
Kartu galima be didelio vargo pakibti ant pakankamai silpno šriftų pasirinkimo ar tragiškos spalvinės paletės, kai tenka kurti „corporate“ tinklapį senai kompanijai, kurios įvaizdis buvo sukergtas prieš pusšimtį metų daltonikės bobulės. Gradientų ir 3D viešpatavimo laikais tragiška spalvinė paletė nuskęsdavo kažkur Įmantrių efektų įduboje, o dabar žvyro į akis švysteli ne dora šiūpele, o „Caterpillar“ ekskavatoriumi.
Jei reikia pavyzdžių, Jūsų paslaugoms „Microsoft Metro“ ir „Apple iOS 7“ su visomis, anot Užkalnio, supermamytiškomis ikonomis. Negana? Šekit, Jums nuo „Designrazzi“ – virš 175 plokščių puslapių įkvėpimo gaudynėms.
4. Pokštai su „scrollinimu“
Čia būtų galima lengvai įklijuoti ir paralaksą, bet jis apsiavė septynmylius batus ir šiuo metu svarbumu jau yra šviesmečiais pralenkęs visus savo brolius, todėl nusipelnė ir atskiro punkto šiame sąraše.
O, štai, likusius „scrollinimus“ sukišim į vieną.
Su tuo padaryta daug. Prašom, yra ir horizontalus „scrollinimas“, kai turinys važinėja į šonus, beigi laisvos formos „scrollinimas“, su informacijos blaškymusi į visas įmanomas puses. Didysis iš mažųjų „trendų“ yra nesibaigiantis vartymas, kai bedrožiant pelės ratuką tau užkrauna vis daugiau ir daugiau turinio, kad tik negalėtum atsiplėšti nuo puslapio. Jei įdomu, kaip tai atrodo, Jūsų paslaugoms „Pinterest“, kur „scrollinti“ per lentas galima tol, kol baigsis „pinai“, ir „Facebook“ naujienų srautas. Pabaigei peržiūrinėti, ką prieteliai nuveikė ir prikomentavo per paskutines minutes? Še senesnių naujienų. Ir dar. Ir dar.
Šita tendencija tikrai nežavi visų, o ypač ji nedraugiška tiems, kurių kompiuteris irba interneto ryšys gali varžytis nebent paraolimpinėse greičio bei pajėgumo žaidynėse. Daug duomenų reikalauja ir atitinkamai treniruoto virtualaus raumens jiems pakelti.
Jei įmanoma prie pelės ratuko pririšti dar kokį nors elgesio šabloną, garantuoju, Pietų Korėjos darželinukai implementavo ir tai. Jei trūksta idėjų: „Skullcandy“ puslapis su laisvos formos vartymu, 33 horizontalaus „scrollinimo“ pavyzdžiai iš „Design Your Way“, 30 puslapių su nesibaigiančiu „scrollinimu“, kuriuos surinko „One Extra Pixel“.
5. „Viskas viename“ puslapiai
Aišku, išmanų scroll‘inimą reikia kaip nors pademonstruoti. Tam reikia turinio. Turinio dauguma puslapių turi mažai**. Jei jį išmėčius po tradicinius „Apie mus“, „Vizija“, „Misija“, „Produkcija“, „Kontaktai“ puslapius lieka trys perteklinės eilutės, kurias gali naudoti parodymui, kaip tavo puslapis reaguoja į pelės ratuko sukimą, tai jau yra labai gerai.
Tokios problemos nekyla su dabar madingais puslapiais, kur kiek įmanoma daugiau informacijos sukraunama vienoje vietoje. Tai, kas anksčiau buvo atskiri puslapiai, tampa sekcijomis, tvarkingai sudėtomis į vieną puslapį. O jau čia koks nors paralaksas įsipaišo labai lengvai.
Ką čia paralaksas – navigacija tokiuose puslapiuose yra patogesnė vartotojui: turinį pakanka užkrauti kartą ir jis jau čia, tavo paslaugoms. Nebereikia kiekvieną kartą paspaudus ant nuorodos laukti tų poros sekundžių, kol bus iš serverio parvaryti reikiami bitai. Taipogi dizaineriams lengviau koncentruotis į vieną puslapį, o ne kuplią liepą primenančią puslapiūkščių hierarchiją, o mobiliame įrenginyje patogiau vartyti vieną puslapį nei blaškytis tarp kelių.
Visgi vėl delnais į galvas pliaukši visi paieškos variklių algoritmai, kuriems tokio puslapio reitingavimas yra pūliuojanti rakštis vienoje minkštoje vietoje, tokį puslapį sunkiau keisti bei atnaujinti ir stichinės nelaimės atveju daug labiau tikėtina, kad veidu į purvą tėkšis visas tinklapis – ne dalis funkcionalumo, o daug turinio, nors ir vieną kartą, bet tą kartą yra kraunama ilgiau nei mažesnės porcijos.
Jūsų įkvėpimui daugybę „Viskas viename“ puslapių surinko „One Page Mania“.
6. Pokyčiai navigacijoje
Ir štai, po ilgų metų sklandžių ir vaisingų santykių, internetas laidoja „hover“ meniu. Čia galime padėkoti tam penktadaliui vartotojų, kurie naudojasi mobiliais įrenginiais ir pirštais maigo ekranus. „Hoveris“ ir lietimui jautrus ekranas yra gal tik šiek tiek labiau suderinama nei Vladimiras Putinas ir žmogaus teisės, internetinis balsavimas ir Konstitucija ar aštuoniskart per savaitę vyro talžoma, tradicines vertybes puoselėjanti namų šeimininkė iš Varėnos bei gebėjimas laiku*** užčiaupti srėbtuvę ir visam „Facebookui“ apie transvestitus nekarktelėti: „O tai kaip man savo vaikams paaiškinti tokį išsigimimą?“
Šventa vieta laisva nebūna, tik čia randame ne vieną, lyderiaujantį navigacijos tipą, o porą jų. Vienas iš populiariausių hover‘io įpėdinių – meniu įtaisytas fiksuotame „headeryje“ (na, ar kitoje tinklapio vietoje). Kitas – iš mobilių programėlių nukniauktas ir dabar jau visur naudojamas burgerio meniu. Bendri reikalavimai bet kokiai navigacijai: kuo paprastesė, kuo labiau minimalistinė ir kuo labiau primenanti gerą tarnaitę: ji nekrenta tau į akis daugiau nei reikia priminti, kad ji čia, tavo paslaugoms.
Šiuo atveju sunku iškristalizuoti bendrus vieno ar kito sprendimo privalumus bei trūkumus. Galima kalbėti apie dizainerio gebėjimus, bet čia net ir vienaląsčiui aišku: blogam dizaineriui ir geriausia planšetė trukdo. Nesvarbu, kokią svetainę tektų kurti.
Pavyzdžiai: 22 fiksuotos navigacijos pavyzdžiai iš „Web Design Ledger“, burgerinių meniu galerija „Pinterest“ puslapyje.
7. Tipografijos cirkelis
Tipografija internete išgyvena savo aukso amžių. No doubt about that. Kažkada visus internete naudojamus šriftus lengvai galėjo suskaičiuoti vidutinio intelekto šimpanzė. Pats šriftas buvo trečiarūšis dizaino elementas, į kurį dėmesys kreipiamas tik dėl to, jog negali palikti tinklapio be teksto.
Prie to ženkliai prisidėjo HTML5, egzotinių šriftų naudojimą iš techninio iššūkio numušęs į paprastos užduoties lygmenį. Kanistrą benzino į ugnį metė plokščias dizainas. Kai gradientai, atspindžiai ir realistiškos tekstūros laikomo beveik blogu skoniu, naudoji tai, kas yra. O yra nedaug ir tipografija yra vienas narys iš to kuklaus būrelio.
Tad šiandien madingam tinklapiui būtina įspūdinga, pastebima tipografija, egzotiniai ar kaligrafiški šriftai ar bent jau atidus jų pasirinkimas.
Jūsų dėmesiui: „Intechnic“ 50 geriausių tipografijos panaudojimo pavyzdžių.
8. Storėjimas
Už šią tendenciją galime dėkoti savo pirštų dydžiams ir, vėl, mobilių įrenginių populiarėjimui. Smulkumu varžytis su pelės žymekliu galėtų nebent daug grūdų per metus sunaudojančios damos, plačiau žinomos Coliukės vardu, pirštai. Stiliai kovą su mūsų galūnėmis pralaimėjo net jos nepradėję, tad čiupinėti visų „iPhone“, „iPad“ ir šlykštesnių jų pusbrolių ekranus tenka pirštams.
Dabar pabandykite atsiminti, kaip smagu ir patogu „gudrafonu“ naršyti svetainę, pritaikytą plačiam ekranui ir aštriam, nusmailintam pelės žymekliui. Grybštelėti reikiamą nuorodą beveik neįmanoma – tenka vėl griebtis vaizdo pritraukinėjimo ir kitų gudrybių, palengvinančių internauto gyvenimą šiose liūdnose žemėse.
Pirštai reikalauja daugiau erdvės bei mėsingesnio elemento. Turi būti ir yra paliekama daugiau pikselių, kad eitų lengvai paspausti reikiamą mygtuką. Storėja ir plečiasi lentelės eilutė, bet koks formos elementas, didėja iki tol buvęs smulkus tekstas, atsiranda papildoma tuščia erdvė.
Pavyzdžių gausit nė jokių, užtai skaitykit „Smashing“ straipsnį apie pirštus ir „tapinimą“.
9. Spalviniai kraštutinumai
Jūs turite du pasirinkimus. Pirmasis – beveik monochromatinė paletė, kai darbą atlieka pora spalvų ir trys jų atspalviai. Antrasis – akių nervus ant menčių parbloškiantis vaivorykštinis spalvų rinkinys. Viskas arba nieko.
Bet kokiu atveju šiandien internete priimtina spalva – ne kokios nors purvinos, sušvinkusios paplavos iš sovietinės paletės, kai 90 % pigmento buvo pavogta ir parduota pažįstamiems, o likusiu dažoma. Ji ryški, aiški, charakteringa. Turtingi ir matomi atspalviai, primena Joan Holloway iš „Mad Men“ apdarus.
Spalvos padėtis panaši į tipografijos. Virtualus dažas netaupomas, nesielgiama atsargiai, galimybės išsunkiamos negailint ir be jokio politkorektiškumo. Nelabai ir svarbu, darbą atlieka dvi spalvos ar steroidų prikimšta paletė.
Pažiūrėti galima čia: 40 monochromatinių puslapių iš „One Extra Pixel“, 24 ypač spalvoti tinklapiai, surinkti „Econsultancy“.
O dabar galite eiti ieškotis gero dizainerio. Jei kompanijoje daugiau nei 200 žmonių, garantuoju – reikia.
* Irba yra puikus žodis, nukaltas tūlo Rokiškio Rabinovičiaus (dar žinomo kaip Visatos Valdovas), bei sutrumpinantis gremėzdą „ir/arba“ iki patogių 4 raidžių.
** „Twitter“, „Youtube“, „Pinterest“ turinio apimtys yra išimtys, o ne taisyklė. Kiekvienam jų yra tūkstančiai Pinigų kartos ar Protokolų dydžio tinklapių. O kiekvienai tokio dydžio svetainei sultingo turinio pavydi daug e. parduotuvių, kur pardavinėjama trys poros vielinių auskarų bei vėrinys, ir korporatyvinių penkių žmonių kompanijų tinklaraščių, kurie buvo sukurti just because ir dabar nepildomi aprauda savo egzistenciją.
*** Tikrai laiku. Šiuo atveju tai tikrai būtų laiku.
