Ekranų dydžių ribos

Darbalaukis
>1025px pločio

Planšetinis kompiuteris
768px-1024px

Mobilusis
<767px

Turinio plotis

Viso pločio
pvz. >1400px

Įrėmintas
1400px

Įrėmintas
1200px

Plotas, skirtas
turiniui atvaizduoti

Mobilusis
<767px

Plotas, skirtas
turiniui atvaizduoti

20px kairės/dešinės pusės paminkštinimas

0px paminkštinimas

Tekstų dydžiai

H1

Darbalaukis 57px (3,563rem)

Mobilusis 36px (2,25rem)

H2

Darbalaukis 43px (2,688rem)

Mobilusis 28px (1,75rem)

H3

Darbalaukis 32px (2rem)
Mobilusis 25px (1,563rem)

H4

Darbalaukis 25px (1,563rem)

Mobilusis 21px (1,313rem)

H5

Darbalaukis 21px (1,313rem)

Mobilusis 18px (1,125rem)

H6

Darbalaukis 18px (1,125rem)

Mobilusis 14px (0,875rem)

Kūno tekstas

Darbalaukis 16px (1rem)

Mobilusis 14px (0,875rem)

Blokų dydžiai

Navigacijos juostos / antraštės
Desktop preliminariai aukštis 60-100px (kompiuteriuose), 50-70px (mobiliuosiuose).

Herojus skyriai (puslapio viršus)

Stalinio kompiuterio preliminariai aukštis 600-800px, mobiliojo mažinti atitinkamai.

Dažniausiai užima didžiąją pirmo ekrano dalį (virš „fold” linijos) kompiuteryje. Mobiliuosiuose paprastai sumažėja iki 300-500px.

Daugelyje „landing page” herojų sekcijoms taikomas viso ekrano aukštis (100vh), kad blokas užimtų pilną ekraną. Tačiau praktiškiau naudoti 80-100vh intervalą, nes taip įskaičiuojamas ir naršyklės įrankių juostos plotas, užtikrinant, kad turinys neiškristų iš matomo lauko.

Funkcionalumo / turinio sekcijos (tarp hero ir poraštės)

Stalinio kompiuterio preliminariai aukštis 500-900px, mobiliojo mažinti atitinkamai.

Daugelyje „landing page” naudojamas viso ekrano aukštis (100vh), kai blokai slenkami po vieną.

Praktikoje geriau veikia naudoti 80-100vh, kadangi tuomet yra įskaičiuojamas ir naršyklės įrankių juostos plotas.

Kortelės / turinio blokai (pvz., straipsnių peržiūros, produktų plytelės)

Darbalaukio preliminariai aukštis 250-400px, Mobilieji mažinti atitinkamai.

Dažnai lankstus, priklauso nuo teksto kiekio ir paveikslėlio proporcijų.

Dažniausi dydžiai: 300px (tinkleliuose), 350px (daugiau informacijos turinčiose kortelėse).

Poraštės (footeriai)
Desktop preliminariai aukštis 200-400px, Mobile mažinti atitinkamai.

Aukštis priklauso nuo nuorodų, socialinių ikonų, teisinių tekstų kiekio.

Blokų turinio išdėstymas

Flex išdėstymas

Flex – vienos krypties išdėstymas (x arba y ašis). Lengva kurti dinamišką lygiavimą – centrinimas horizontaliai ir vertikaliai, yra tarpų išlyginimas. Elementai gali būti lanksčiai „ištempami” ar „suspaudžiami”.

1/4 bloko

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

3/4 bloko

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

3/4 bloko

Bloko turinys

4/4 blokai

Bloko turinys

Tinklo išdėstymas

Grid – dviejų krypčių išdėstymas (x ir y ašis vienu metu). Leidžia kurti fiksuotus ar proporcingus tinklus. Puikiai tinka kortelių tinkleliams, galerijoms, nukreipimo puslapio blokams.

1/4 bloko

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

3/4 bloko

Bloko turinys

1/4 bloko

Bloko turinys

2/4 blokai

Bloko turinys

3/4 bloko

Bloko turinys

4/4 blokai

Bloko turinys

Tarpai tarp blokų

Darbalaukio sekcijų tarpai:
6em-8em (96px-128px)

Darbalaukio vidiniai tarpai tarp elementų:
3em-4em (48px-64px)

Mobiliųjų sekcijų tarpai:
3em-4em (48px-64px)

Mobilieji vidiniai tarpai tarp elementų: 2em-3em (32px-48px)

Paveikslėliai ir failai

Paveikslėliai ruošiami bent 1,5x jų rodymo dydžio, kad būtų užtikrintas geras vaizdas aukštos raiškos ekranuose. JPG/PNG failai turėtų būti suspausti iki 70-80 % kokybės, kad svetainė būtų optimizuota greičiui.

SVG failai turi būti paruošti „švarūs”, be perteklinių parametrų.

Failų pavadinimai turėtų būti aiškūs, angliški ir logiški, pvz., product-name.jpg.

Esamas blokas yra 1400x670px dydžio, naudojama foninė nuotrauka su „Cover” nustatymu. Nuotraukos dydis 2100x1005px (1,5x dydis), su 80% kokybe užima 681kb (galėtų būti ir mažiau). Nuotrauka bus lengvesnė naudojant mažesnę rezoliuciją, tačiau siekiant išlaikyti kokybę – rezoliucija turi būti ne mažesnė nei reikalaujamo bloko. Perdangos nustatymas – Juoda spalva su 75 % nepermatomumu.

Naudojant Parralax efektą sekcijų/blokų fonams – naudojamos nuotraukos „Cover” nustatymą pritaiko pagal ekrano rezoliucija, ne bloko dydį, dėl to reikia turėti didesnės rezoliucijos nuotraukas.

„Cover” naudojamas ten, kad nuotrauka užpildytų esamo bloko/sekcijos erdvę, nepaliekant tuščios erdvės be fono.

Interaktyvumas ir animacijos

>

Graži nuoroda

>

Graži nuoroda

>

Graži nuoroda

Graži nuoroda

>

Graži nuoroda

opoto agreement process
opoto susitarimo procesas
Darbo paraiška
Kiek metų patirties turite?
gyvenimo aprašymą arba CV: