Matomi ten, kur jūsų ieško klientai
Devzy nekuria svetainių dėl svetainių. Parduodamas dalykas yra matomumas — tai, kad verslą randa ir Google, ir dirbtinis intelektas, kai klientas klausia savais žodžiais. Visa likusi komunikacija remiasi šia viena mintimi.
Matomumo spraga
Atotrūkis tarp to, ką verslas moka, ir to, ką apie jį randa klientas. Tai vienintelis Devzy sugalvotas terminas. Jis vartojamas nuosekliai — tuo pačiu pavadinimu, ta pačia reikšme — pardavimuose, paslaugų puslapiuose ir tinklaraštyje.
Iš pozicijos išplaukia keturių žingsnių ritmas, kuris kartojasi visame turinyje — pagrindiniame puslapyje, paslaugų aprašuose ir pasiūlymuose. Tai bendriausias Devzy struktūrinis motyvas ir vienintelė vieta, kur naudojama aliteracija.
- S1
Strategija
Ko iš tikrųjų ieško klientai ir kur pralaimima konkurentams. Prieš dizainą — sprendimai iš duomenų.
- S2
Struktūra
Turinys ir kelias iki užklausos. Vienas puslapis — vienas tikslas ir vienas kitas žingsnis.
- S3
Sprendimas
Greita, prieinama, valdoma svetainė. Techninis SEO ir našumas — pagrindas, ne priedas.
- S4
Stebėsena
Po paleidimo matuojama ir tobulinama. Svetainė nėra projektas su pabaiga.
Įsipareigojimai, ne būdvardžiai
Penki teiginiai, kuriais Devzy skiriasi pagrindiniame puslapyje. Kiekvienas jų yra toks, už kurį klientas gali paimti atsakomybėn — tame ir esmė, ir rizika. Nepridėti nė vieno, kurio neketinama laikytis. Tai verslo sprendimai, ne rinkodaros tekstas.
- 01
Fiksuota kaina, ne „nuo“
Pasiūlyme matoma galutinė suma ir data. Už tai, kas jame surašyta, papildomų sąskaitų nebus.
- 02
Rašote tiesiai tam, kuris kuria
Be projektų vadybininkų grandinės. Atsakymas į kiekvieną žinutę per vieną darbo dieną.
- 03
Greitis išmatuojamas, ne pažadėtas
Svetainė nepaleidžiama, kol nepasiekia 90+ Google PageSpeed balo mobiliajame.
- 04
Strategija prieš pirmą maketą
Pirmiausia — struktūros ir turinio planas, kad matytųsi, kodėl puslapis atrodys būtent taip.
- 05
Svetainė lieka jūsų
Kodas, domenas ir prieigos registruojami kliento vardu. Nusprendus išeiti, išeinama su viskuo.
Kalbame tiesiai, net kai tai kainuoja projektą
Kalba — lietuvių, kreipinys — jūs, visada. Sakinys trumpas. Skaičius konkretus arba jo nėra. Ryškiausias balso bruožas yra tas, kurio dauguma agentūrų vengia: kiekvienas paslaugos puslapis turi skyrių „kam tai netinka“, ir jis rašomas sąžiningai.
- ›
Konkretu vietoj gudru
„90+ PageSpeed balas mobiliajame“, o ne „žaibiškas greitis“. Jei teiginio negalima patikrinti, jis netinka.
- ›
Pradedama nuo kliento problemos
Paslaugos vadinamos tuo, ką klientas jaučia — „užklausų iš svetainės beveik nėra“ — ne vidiniu pavadinimu.
- ›
Pasakoma, kada netinkame
„Jei ieškote pigiausio varianto — nesame pigiausi ir nebandome jais būti.“ Tai pigiau abiem pusėms nei sužinoti po dviejų mėnesių.
- ›
Niekada nekuriamas įrodymas
Atsiliepimai, rezultatų skaičiai ir datos ateina iš kliento arba iš analitikos. Išgalvotas skaičius nėra užpildas — tai melas.
- ›
Trūkstamas skaičius žymimas
???Kol kaina ar terminas nenuspręsti, tekste lieka
???, o puslapyje — matomas.todožymuo. Tuščia vieta yra pastebima; įtikinamas prasimanymas — ne.
Taip
Terminas priklauso nuo to, kaip greitai gauname turinį ir sprendimus iš jūsų pusės.
Jei problemą išsprendžia standartinis įrankis — pasakysime tai ir nesiūlysime kurti iš naujo.
Ne
Inovatyvūs sprendimai, kurie pakels jūsų verslą į kitą lygį.
Dirbame greitai, kokybiškai ir už prieinamą kainą.
Žodis ir taškas, ženklas ir skliaustai
Prekės ženklas turi du pavidalus, ir jie nėra vienas kito variantai. Ilgasis — žodinis ženklas Devzy., kur taškas nėra skyryba, o vienintelis atskiras grafinis elementas, stovintis ant bazinės linijos. Trumpasis — </>, uždarantis kodo skliaustas: ženklas, kurį atpažįsta kiekvienas, kas kada nors matė svetainės kodą, ir niekas kitas.
Spalva pagal vietą
Ženklas neturi „firminės“ spalvos — jis turi dvi būsenas ir taisyklę, kuri iš jų renkasi. Trečio varianto nėra: pilkas, permatomas ar spalvotas logotipas neegzistuoja.
| Fonas | Ženklo spalva | Kur tai pasitaiko |
|---|---|---|
| Baltas, #f4f5f6, #f2f2f2 | #1a171a | Antraštė vidiniuose puslapiuose, poraštė, dokumentai |
| Rašalas #1a171a, nuotrauka, vaizdo įrašas | #ffffff | Pagrindinio puslapio antraštė virš hero |
| Naršyklės kortelė, tamsi OS tema | #f1f0f1 | Favicon persijungia pats, per prefers-color-scheme |
Apsauginė zona
Aplink ženklą — ne mažiau kaip „D“ raidės aukščio tuščios erdvės iš visų pusių. Punktyras žemiau rodo ribą, kurios negali kirsti nei tekstas, nei kito ženklo kraštas, nei nuotraukos detalė.
Minimalus dydis
| Pavidalas | Ekrane | Spaudoje |
|---|---|---|
| Žodinis ženklas | 96 px pločio | 25 mm pločio |
| Ženklas </> | 24 px | 8 mm |
Svetainės antraštėje žodinis ženklas fiksuotas ties 34px aukščio; plotis
laisvas. Failai — SVG, tad didesniame gale ribos nėra.
Taip
Rinktis pavidalą pagal vietą: žodinį — kur telpa, ženklą — kur ne.
Naudoti SVG. Rastras tik ten, kur SVG neįmanomas.
Ne
Netempti, nekeisti proporcijų, nesukti ir nedėti šešėlio.
Nedėti abiejų pavidalų greta — jie yra vienas ženklas, ne rinkinys.
Nedėti ženklo ant margo nuotraukos ploto be tamsaus užtemdymo.
Vienspalvė sistema su vienu akcentu
Paletė sąmoningai siaura: rašalas, baltas ir du pilki. Pilkieji turi juntamą šaltai mėlsvą polinkį — tai išskiria juos iš neutralaus pilko ir laiko puslapį ramų. Spalva puslapyje nėra dekoracija: kai jos prireikia, ji pastebima būtent todėl, kad daugiau niekur nenaudojama.
Viena spalva, du atspalviai
Vermilijonas atėjo kartu su šablonu, bet liko sąmoningai: šaltoje, beveik vienspalvėje sistemoje jis yra vienintelis šiltas taškas, ir būtent todėl akis jį randa iš karto. Naudojami abu šablono atspalviai, tik pasirenkami pagal foną, o ne pagal tai, kurią klasę pasitaikė parašyti.
- 01
#e4250c ant šviesaus
Gilesnis. Ant balto duoda 4,6 : 1 — pakanka net smulkioms nuorodoms tekste.
- 02
#f44d37 ant tamsaus
Šiltesnis ir šviesesnis. Ant rašalo duoda 5,1 : 1. Šviesusis variantas ten būtinas:
#e4250cant#1a171anukrinta iki 2,3 : 1, o šablonas kaip tik ten deda savo nuorodas — todėl tamsiose sekcijose jos buvo praktiškai neįskaitomos. - 03
Klaida — atskira spalva
Formų validacija naudoja
#c0392b: tamsesnę, rusvesnę, be oranžinio atspalvio. Šalia jų nepainiojama, bet akcentas niekada nenaudojamas klaidai, o klaida — akcentui. Jei kada prireiks šias dvi atskirti dar labiau, keičiama klaidos spalva, ne akcentas.
Kaip naudoti akcentą
Leidžiama: nuorodos pastraipos tekste, klaviatūros fokuso rėmelis, vienas pabrėžimas puslapyje. Neleidžiama: mygtukų fonai (mygtukai lieka rašalo spalvos), ikonos, dekoratyvūs blokai, diagramų spalvos. Jei akcentas viename ekrane matomas daugiau nei tris kartus, jis nustojo būti signalu.
Kontrastas
| Spalva | Fonas | Santykis | WCAG AA |
|---|---|---|---|
| #1a171a | baltas | 17,8 : 1 | Atitinka |
| #545759 | baltas | 7,3 : 1 | Atitinka |
| #e4250c | baltas | 4,6 : 1 | Atitinka |
| #6f7376 | baltas | 4,8 : 1 | Atitinka |
| #f44d37 | rašalas | 5,1 : 1 | Atitinka |
| #ffffff | rašalas | 17,8 : 1 | Atitinka |
Ankstesnė prislopinta pilka #8a8d8f davė 3,3 : 1 ir neatitiko AA smulkiam
tekstui — o naudota buvo būtent smulkiam: žymoms, datoms, naršymo keliui.
4,5 : 1 yra grindys, ne tikslas. Nauja spalva nepridedama į paletę,
kol nepatikrinta ant to fono, ant kurio stovės.
Trys balsai, nulis licencijų rizikos
Iki šio sprendimo kode buvo įrašyti Hurme Geometric Sans 3 ir Aktiv Grotesk — komercinės licencijos, kurios niekada nebuvo nupirktos, tad naršyklė rodė visai kitus šriftus. Dabar trys atviros licencijos (SIL OFL) šeimos su pilna lietuviška diakritika, talpinamos savame domene. Šis puslapis surinktas jomis — matote ne aprašymą, o rezultatą.
Matomi ten, kur jūsų ieško klientai
Ą Č Ę Ė Į Š Ų Ū Ž
Vis daugiau žmonių nebeatidaro dešimties Google nuorodų. Jie klausia dirbtinio intelekto ir gauna vieną atsakymą — sudėliotą iš to, ką internetas apie jus jau sako.
Paslaugos · Darbai · 2026 · 6 savaitės · 90+ PageSpeed
Kodėl būtent šie
- 01
Archivo antraštėms
Tankus, pramoninis groteskas plokščiomis galūnėmis. Suspaustas jis skamba suprojektuotas, o ne draugiškas — tas pats registras kaip „įsipareigojimai, ne būdvardžiai“. Geometriniai šriftai čia klaidina: apvalūs, optimistiški, startuolio kalba.
- 02
IBM Plex Sans tekstui
Atviresnis ir šviesesnis nei Archivo, todėl 16px pastraipoje kvėpuoja, o kontrastas su antrašte matomas iš karto. Inžinerinė kilmė sutampa su tuo, ką Devzy iš tikrųjų parduoda.
- 03
IBM Plex Mono smulkmenoms
Svetainė jau naudojo monospace nebaigto turinio žymėms — tik atsitiktinai, sisteminiu šriftu. Dabar tai sprendimas: mono neša žymas, kainas, terminus, techninius skaičius. Dviejų žmonių dev studijai tai vienintelis vietoje esantis manieringumas.
- 04
Plex Sans ir Plex Mono yra viena šeima
Bendra skeleto DNR — tekstas ir smulkmenos rišasi savaime. Archivo lieka vienintelis kontrastas, todėl antraštė visada skamba garsiau už viską aplink.
| Vaidmuo | Šriftas | Dydis | Tarpai |
|---|---|---|---|
| Hero antraštė | Archivo 700 | clamp(2.5rem, 7.5vw, 6.5rem) | −.035em |
| Puslapio H1 | Archivo 700 | clamp(2.25rem, 6vw, 4.25rem) | −.035em |
| Sekcijos antraštė | Archivo 700 / 600 | 72px, nuo 992px — 124px | −.04em |
| Poskyrio antraštė | Archivo 700 | clamp(1.5rem, 3.2vw, 2.25rem) | −.03em |
| Kortelės antraštė | Archivo 700 | clamp(1.375rem, 1.9vw, 1.75rem) | −.035em |
| Tekstas | Plex Sans 400 | 15–17px / 1,6 | 0 |
| Žyma (LABEL) | Plex Mono 500, didžiosios | 11 px | +.06 … +.1em |
| Kainos, terminai | Plex Mono 500 | pagal kontekstą | +.04em |
Viena taisyklė, kurią lengva pamiršti
Antraštė visada glaudi, tekstas — niekada. Archivo suspaudžiamas
nuo −.03em iki −.04em, ir kuo antraštė didesnė, tuo
glaudžiau; Plex Sans lieka ties nuliu. Mono eina į kitą pusę:
+.08em ir didžiosios. Trys šriftai skiriasi ne tik forma, bet ir
tarpų kryptimi — būtent tai leidžia juos atskirti net pilkame maketo eskize.
Archivo ir Plex Sans yra kintamieji (variable) šriftai — vienas failas dengia visus
svorius. Tiekiami tik latin ir latin-ext poaibiai;
latin-ext yra tas, kuriame gyvena ĄČĘĖĮŠŲŪŽ, tad jis nėra
pasirenkamas.
Kampai kalba apie dydį
Suapvalinimas nėra vienas visiems: kuo elementas didesnis, tuo kampas švelnesnis. Kortelė su hero rėmelio spinduliu atrodo suglebusi, o hero rėmelis su kortelės — aštrus. Todėl spindulių yra keturi, ir kiekvienas turi savo dydžio klasę.
| Elementas | Reikšmė | Pastaba |
|---|---|---|
| Antraštės aukštis | --header-h: 92px | Vienoje vietoje: nuo jos matuojamas ir #nuorodų poslinkis |
| Kortelės spindulys | --radius-card: 16px | Vaizdams ir tinklaraščio kortelėms |
| Sekcijos tarpas | clamp(48px, 7vw, 88px) | Vertikalus ritmas visame puslapyje |
| Teksto plotis | 44–58ch | Pastraipos ribojamos ch, ne pikseliais |
| Skyriklis | 1px · #e3e5e6 | Plaukinė linija vietoj šešėlio ar rėmelio |
Vienintelė netvarka
Paslaugų sekcijoje keturios kortelės sąmoningai išvestos iš linijos — kiekviena savo aukštyje ir savo nedideliu kampu, pirmoji invertuota į juodą. Užvedus pelę kortelė grįžta į stačią padėtį ir pakyla. Tai vienintelė vieta svetainėje, kur tinklelis rodomas laužomas, ir kaip tik dėl grįžimo į vietą tai skaitoma kaip sprendimas, o ne kaip brokas. Nekartoti šio principo kitur — pakartotas jis nustoja veikti.
Viena kreivė, visur ta pati
Visa animacija svetainėje naudoja tą pačią lėtėjimo kreivę
cubic-bezier(.16, 1, .3, 1) — greitas startas, ilgas nurimimas.
Elementų grupės pasirodo pakopomis po 80–90ms. Nieko nesisuka,
neatšoka ir nemirksi.
| Kas | Trukmė | Ką daro |
|---|---|---|
| Spalva, permatomumas | 0,25 s | Užvedimas ant nuorodų, mygtukų, taškų |
| Kortelės pakilimas | 0,45 s | Pasukimo atstatymas ir šešėlis |
| Vaizdo priartinimas | 0,60 s | Darbų kortelė, mastelis 1,04 |
| Pasirodymas slenkant | 0,70–0,75 s | Sekcijos ir kortelių eilės, pakopomis |
| Antraštės žodžiai | 80 ms / žodį | Kyla iš po kaukės, vieną kartą |
Judesys yra pasirenkamas
Kiekvienas svetainės failas turi prefers-reduced-motion bloką.
Esant šiai nuostatai hero vaizdo įrašas ne sulėtinamas, o visiškai nerodomas;
antraštės lieka paprastu tekstu; kortelės išlaiko savo kampus, bet nebejuda.
Turinys niekada nelieka paslėptas laukiant animacijos — tai taisyklė, ne
pageidavimas.
Kas įdiegta ir kas dar laukia
Keturi prekės ženklo klausimai uždaryti ir perkelti į kodą — jie aprašyti aukščiau kaip norma, ne kaip pasiūlymas. Likę keturi yra turinio, ne dizaino, ir visi susitarti paskutiniam kūrimo etapui.
-
Įdiegta
Ženklas — galutiniai failai svetainėje.
Žodinis ženklas ir
</>SVG formatu, spalva pagal foną. Rastriniai logotipai pašalinti. -
Įdiegta
Šriftai — Archivo, IBM Plex Sans, IBM Plex Mono.
Savame domene, be jokio šriftų CDN. Hurme ir Aktiv pašalinti kartu su licencijos rizika.
-
Įdiegta
Akcentas — #e4250c, tamsiam fonui #f44d37.
Abu atspalviai suvesti į
--accentir--accent-on-dark, todėl akcentas turi vienus namus vietoj literalų, išbarstytų po 401KB šablono. Tamsios sekcijos nustojo rodyti neįskaitomą 2,3 : 1 variantą. Fokuso rėmelis dabar irgi akcento spalvos. -
Įdiegta
Kontrastas — #6f7376 vietoj #8a8d8f.
17 vietų aštuoniuose failuose. Visas tekstas svetainėje dabar atitinka WCAG AA.
-
Paskutinis etapas
Kainos ir terminai.
Keturios paslaugos ir D.U.K. Iki tol
???lieka matomi — tai sąmoninga, ne apsileidimas. -
Paskutinis etapas
Atsiliepimai ir darbų rezultatai.
Skaičius įrašomas tik gavus jį iš kliento arba analitikos. Ši taisyklė galioja ir paskutiniame etape.
-
Paskutinis etapas
Įmonės rekvizitai poraštėje.
Įmonės kodas ir, jei bus, PVM kodas.
-
Paskutinis etapas
Komanda: biografijos ir nuotraukos.
Vardai ir veidai su tikromis nuotraukomis. Tai stipriausio pažado — „rašote tiesiai tam, kuris kuria“ — vienintelis įrodymas.