Trumpai: UI UX dizainas – tai svetainės ar programėlės struktūros (UX) ir vizualinės sąsajos (UI) kūrimas, kad naudotojui būtų patogu ir jis atliktų norimą veiksmą. NEXDEV UI UX dizainas kainuoja nuo 590 € + PVM nedidelei svetainei; dizainas su programavimu individualioje svetainėje – nuo 1490 € + PVM. Nedidelės svetainės dizainas paprastai užtrunka 1–2 savaites, sudėtingesnių platformų – ilgiau.
UI UX dizainas lemia, ar lankytojas jūsų svetainėje ar programėlėje ras tai, ko ieško, ir atliks veiksmą – ar išeis pas konkurentą. Gražios spalvos ir madingi šriftai sudaro tik dalį darbo. Svarbiausia – kaip suplanuota informacija, kiek žingsnių reikia iki užklausos ar pirkimo ir ar sąsaja patogi telefone. NEXDEV kuria svetainių, el. parduotuvių, platformų ir programėlių dizainą – nuo vieno puslapio svetainių iki sudėtingų rezervacijų ir verslo sistemų.
UX ir UI: kuo skiriasi
Šie du terminai dažnai rašomi kartu, bet reiškia skirtingus dalykus.
UX (angl. User Experience, naudotojo patirtis) atsako į klausimą „ar patogu?“. Tai struktūra, logika ir kelias: kokie puslapiai reikalingi, kokia tvarka pateikiama informacija, kiek laukų turi forma, kas nutinka paspaudus mygtuką.
UI (angl. User Interface, naudotojo sąsaja) atsako į klausimą „kaip tai atrodo ir jaučiasi?“. Tai spalvos, tipografija, mygtukai, ikonos, tarpai, animacijos – vizualinė kalba, kuri paverčia struktūrą aiškia ir patrauklia.
Paprasta analogija: UX – tai buto planas, UI – apdaila. Prastas planas su brangia apdaila vis tiek nepatogus, o geras planas su prasta apdaila neįkvepia pasitikėjimo.
| UX dizainas | UI dizainas | |
|---|---|---|
| Pagrindinis klausimas | Ar naudotojas lengvai pasiekia tikslą? | Ar sąsaja aiški, patraukli ir nuosekli? |
| Rezultatas | Struktūra, scenarijai, wireframe'ai, prototipas | Galutinis dizainas, UI kit, dizaino sistema |
| Kaip matuojama | Konversijos, užduoties atlikimo laikas, klaidos | Nuoseklumas, skaitomumas, prekės ženklo atitikimas |
Žmonės dažnai ieško „web dizainas“ ar „svetainės dizainas“ – iš esmės tai tas pats UI UX dizainas, pritaikytas svetainei.
Kaip vyksta UI UX dizaino procesas
1. Tyrimas
Pradedame nuo klausimų: kas yra jūsų klientai, ką jie nori padaryti svetainėje, kas juos stabdo? Analizuojame esamos svetainės analitiką (jei ji yra), konkurentus, klientų dažniausiai užduodamus klausimus. Jei galima – pakalbiname kelis realius klientus ar jūsų pardavimų komandą. Tai pigiausias etapas, kuris vėliau sutaupo daugiausia pinigų.
2. Informacijos architektūra ir wireframe'ai
Sudarome puslapių medį ir supaprastintus eskizus (wireframe'us) be spalvų ir nuotraukų. Šiame etape diskutuojame apie esmę: ar pirmame ekrane aišku, ką siūlote, ar logiška navigacija, ar ne per ilgas kelias iki kontakto. Struktūrą pakeisti eskize užtrunka kelias minutes, o suprogramuotoje svetainėje – dienas.
3. Interaktyvus prototipas Figma
Iš wireframe'ų sukuriame paspaudžiamą prototipą Figma programoje. Jį galite išbandyti telefone ar kompiuteryje dar prieš programavimą, parodyti kolegoms ar keliems klientams ir pamatyti, kur žmonės sutrinka.
4. UI dizainas, UI kit ir dizaino sistema
Kai struktūra patvirtinta, kuriame galutinį vizualinį dizainą. Kartu paruošiame UI kit – spalvų paletę, tipografijos skalę, mygtukus, formų laukus, korteles su visomis būsenomis (įprasta, užvesta pele, aktyvi, klaida, išjungta). Didesniems projektams tai išauga į dizaino sistemą, kad nauji puslapiai po metų atrodytų taip pat nuosekliai.
5. Perdavimas programuotojams
Programuotojai gauna tvarkingą Figma failą su komponentais, išmatavimais, adaptyviais vaizdais telefonui, planšetei ir kompiuteriui bei eksportuotais resursais. Kadangi dizainą ir programavimą atlieka ta pati komanda, niekas nepasimeta tarp „dizainerio idėjos“ ir „programuotojo realizacijos“.
Visas projektas – nuo konsultacijos iki paleidimo – atrodo taip:
- 01Nemokama konsultacija
Išsiaiškiname tikslus, auditoriją ir biudžetą. Atsakome per 24 val. darbo dienomis.
- 02Pasiūlymas ir sutartis
Pateikiame aiškų pasiūlymą su apimtimi, terminais ir kaina + PVM. Pasirašome sutartį.
- 03Dizainas ir prototipas
Parengiame struktūrą ir dizainą – matote rezultatą prieš programavimą.
- 04Programavimas ir turinys
Kuriame, testuojame telefonuose ir naršyklėse, paruošiame tekstus ir SEO.
- 05Paleidimas ir augimas
Paleidžiame, prijungiame analitiką, Google Search Console ir toliau prižiūrime.
Dizainas, orientuotas į konversijas
Dizainą vertiname pagal tai, ar jis padeda verslui. Todėl laikomės kelių principų:
- Vienas pagrindinis veiksmas ekrane. Kai kiekviename bloke yra penki skirtingi mygtukai, žmogus nespaudžia nė vieno.
- Aiški vizualinė hierarchija. Svarbiausia informacija – didžiausia ir pirmoji, antraeilė – mažesnė.
- Pasitikėjimas šalia sprendimo. Atsiliepimai, garantijos ir darbų pavyzdžiai dedami ten, kur žmogus abejoja – prie kainų, formos, krepšelio.
- Trumpos formos. Kiekvienas nereikalingas laukas mažina užpildymų skaičių, todėl paliekame tik būtinus ir paaiškiname, kas nutiks po užklausos.
- Tikras turinys, ne „lorem ipsum“. Kuriame dizainą su realiais tekstais, todėl iš anksto matome, ar viskas telpa ir skaitosi.
- Greitis – dizaino dalis. Sunkios animacijos ir didžiulės nuotraukos gražiai atrodo tik greitame kompiuteryje.
Plačiau apie tai, kaip dizainas, turinys ir technika kartu paverčia lankytojus klientais, rašome puslapyje svetainė, kuri pritraukia klientus.
Dažniausios UX klaidos, kurias randame
- Meniu su vidiniais įmonės terminais – „Sprendimai“, „Kompetencijos“, „Produktai“ klientui nieko nepasako.
- Pirmame ekrane – slankiojantis karuselės banneris su keliomis žinutėmis, iš kurių nė viena neperskaitoma.
- Kontaktai paslėpti puslapio apačioje – telefone iki jų tenka ilgai slinkti.
- Per smulkūs mygtukai ir nuorodos telefone – sunku pataikyti pirštu.
- Formos be klaidų paaiškinimų – žmogus nežino, kodėl užklausa neišsisiuntė.
- Silpnas kontrastas – šviesiai pilkas tekstas ant balto fono gražiai atrodo maketuose, bet sunkiai skaitomas saulėje.
- Iššokantys langai iškart atidarius svetainę – lankytojas dar nežino, kas jūs, o jau prašomas el. pašto.
Jei atpažinote savo svetainę, ne visada reikia kurti viską iš naujo – dažnai užtenka UX peržiūros ir tikslinių pakeitimų.
UX auditas esamai svetainei ar el. parduotuvei
Jei svetainė jau veikia, bet užklausų ar pardavimų mažiau nei tikėjotės, pradėti verta nuo UX audito. Peržiūrime analitikos duomenis – kuriuose puslapiuose žmonės išeina, kiek jų pasiekia formą ar krepšelį, kuriame žingsnyje sustoja. Tada patys pereiname pagrindinius scenarijus telefone ir kompiuteryje: surasti paslaugą, palyginti kainas, pateikti užklausą, nusipirkti prekę. Rezultatas – problemų sąrašas su prioritetais ir konkrečiais pasiūlymais, ką pakeisti. El. parduotuvėse dažniausiai randame per ilgą apmokėjimą, neaiškias pristatymo sąlygas ir nepatogius filtrus – plačiau apie tai rašome el. parduotuvių kūrimo puslapyje.
Kaip vertiname, ar dizainas pavyko
Gražus dizainas, kuris nedidina užklausų, – nepavykęs dizainas. Todėl prieš pradėdami susitariame dėl tikslų: daugiau užpildytų formų, didesnė dalis lankytojų, pasiekiančių krepšelį, mažiau skambučių su tais pačiais klausimais ar greitesnis registracijos procesas. Po paleidimo šiuos rodiklius matuojame analitikoje ir lyginame su ankstesniais. Jei kažkuris ekranas neveikia taip, kaip tikėjomės, jį koreguojame. Kodėl net graži svetainė gali neatnešti klientų, išsamiai paaiškinome straipsnyje kodėl svetainė negeneruoja klientų.
Kiek laiko trunka UI UX dizainas
Orientaciniai terminai priklauso nuo apimties. Vieno puslapio ar nedidelės svetainės dizainas su prototipu dažniausiai užtrunka 1–2 savaites. Įmonės svetainės su keliais skirtingų tipų puslapiais – apie 2–3 savaites. El. parduotuvės, rezervacijų platformos ar mobiliosios programėlės dizainas su tyrimu ir dizaino sistema – nuo kelių savaičių iki kelių mėnesių, priklausomai nuo scenarijų kiekio. Greičiausiai projektai juda tada, kai pastabos prototipui pateikiamos per vieną ar dvi darbo dienas, o sprendimus priima vienas atsakingas žmogus.
Ko reikės iš jūsų
- prekės ženklo elementų: logotipo, spalvų, šriftų (jei jų neturite – pasiūlysime);
- informacijos apie klientus ir dažniausius jų klausimus;
- prieigos prie esamos analitikos, jei svetainė jau veikia;
- kelių svetainių ar programėlių, kurios jums patinka, ir pagrindinių konkurentų sąrašo;
- vieno žmogaus, kuris priims sprendimus ir greitai pateiks pastabas prototipui.
Prieinamumas: WCAG ir Europos prieinamumo aktas
Prieinama svetainė – tokia, kuria gali naudotis ir silpnaregis, ir žmogus, naršantis tik klaviatūra, ir vyresnio amžiaus klientas su mažu telefonu. Nuo 2025 m. birželio 28 d. Europos prieinamumo aktas (EAA) prieinamumo reikalavimus taiko ir daliai privačių paslaugų, įskaitant el. prekybą. Mikroįmonėms, teikiančioms paslaugas, numatytos išimtys, tačiau prieinamumas naudingas visiems: jis gerina patirtį ir padeda SEO.
Dizainą kuriame pagal WCAG gaires:
- pakankamas teksto ir fono kontrastas (įprastam tekstui – bent 4,5:1);
- aiškiai matoma fokusavimo būsena naršant klaviatūra;
- formų laukai su aiškiomis etiketėmis ir suprantamais klaidų pranešimais;
- pakankamo dydžio paspaudžiami elementai telefone;
- alternatyvūs tekstai nuotraukoms ir logiška antraščių struktūra;
- informacija, perteikiama ne vien spalva.
Mobile-first: pirmiausia telefonas
Daugumoje projektų didelė dalis lankytojų ateina iš telefono, todėl dizainą pradedame nuo mažiausio ekrano. Tai priverčia atsisakyti nereikalingų elementų ir palikti esmę. Telefonui projektuojame atskirai: svarbiausi mygtukai – nykščio pasiekiamoje zonoje, telefono numeris paspaudžiamas, formose atsidaro tinkama klaviatūra (skaičiams, el. paštui), o meniu neužgožia turinio.
Ką gausite
- tyrimo išvadas ir puslapių struktūrą;
- wireframe'us ir interaktyvų Figma prototipą;
- galutinį dizainą telefonui, planšetei ir kompiuteriui;
- UI kit ar dizaino sistemą su komponentų būsenomis;
- programuotojams paruoštą failą ir eksportuotus resursus.
Figma failas priklauso jums – galėsite jį naudoti ir ateityje, net jei programavimą patikėsite kitai komandai.
UI UX dizaino kaina
| Projekto tipas | Kas įeina | Kaina |
|---|---|---|
| Nedidelės svetainės ar nukreipimo puslapio dizainas | Struktūra, prototipas, UI dizainas visiems ekranams | Nuo 590 € + PVM |
| Individuali svetainė su dizainu ir programavimu | Unikalus UI/UX dizainas, TVS, SEO, integracijos | Nuo 1490 € + PVM |
| El. parduotuvės, platformos ar programėlės dizainas | Tyrimas, sudėtingi scenarijai, dizaino sistema | Individualiai |
Kainos nurodytos be PVM. Kainą lemia ekranų ir scenarijų kiekis, tyrimo apimtis ir tai, ar reikia dizaino sistemos. Tikslią kainą pateikiame po nemokamos konsultacijos – atsakome per 24 valandas. Dizainą kuriame ir svetainėms, ir el. parduotuvėms, ir mobiliosioms programėlėms.
Mūsų dizaino darbai
Action Studioactionstudio.ltSukurta moderni reprezentacinė svetainė, orientuota į prekinio ženklo identitetą, vizualinę komunikaciją ir kūrybinės studijos pristatymą. Sprendimas pritaikytas…
ShowLifeshowlife.ltSukurta moderni renginių ir kūrybinės industrijos platforma, skirta koncertų organizavimui, atlikėjų vadybai ir techninių sprendimų pristatymui. Sprendimas…
Booklibookli.ltSukurta enterprise lygio paslaugų rezervacijos ir verslo valdymo platforma, orientuota į grožio ir sveikatingumo sektorių. Sistema leidžia salonams savarankiškai…
Paskutinis Raundaspaskutinisraundas.ltSukurta interaktyvi žaidimo platforma, skirta serialo pristatymui ir vartotojų įtraukimui į projekto pasaulį. Sprendimas apjungia pramoginį turinį ir žaidimo…
Action Studio – minimalistinis, vizualiai išgrynintas kūrybinės studijos dizainas su interaktyviais elementais ir animacijomis. Showlife – dinamiškas renginių platformos dizainas su aiškia navigacija tarp koncertų, atlikėjų ir paslaugų. Bookli – aukštos konversijos rezervacijų platformos UX/UI, kuriame vienoje sistemoje susitinka salonai ir jų klientai. Paskutinis Raundas – naršyklės žaidimo sąsaja, perteikianti serialo nuotaiką.
Reikėjo ne tik svetainės, bet pilno sprendimo su registracija ir vidiniu valdymu mokyklai. Gavome sistemą, kuri leidžia lengvai valdyti mokinius, registracijas ir visą administracinį procesą. Tai ženkliai supaprastino kasdienį darbą ir pagerino bendrą organizacijos efektyvumą.
Kada atskiro UX projekto nereikia
Sąžiningai: jei jums reikia paprastos vieno puslapio svetainės, atskiras tyrimas ir dizaino sistema greičiausiai būtų perteklinė investicija – Start pakete naudojame patikrintą struktūrą, kuri veikia daugumai mažų verslų. Atskiras UI UX dizaino projektas atsiperka, kai svetainė ar programėlė sudėtingesnė, kai konkuruojate patirtimi arba kai esama svetainė gauna lankytojų, bet ne klientų. Pastaruoju atveju dažnai užtenka UX peržiūros ir svetainės atnaujinimo.