You are on page 1of 121

TINKLALAPIŲ

DIZAINAS

1
Tinklalapių dizainas _ nevienareikšmė sąvoka.
Interneto profesionalai visuomet tai apibūdina
skirtingai.

Vieniems – tai vidinių svetainės funkcijų


programavimas, kitiems – asmenį ar bendrovę
išreiškiančios matomos tinklalapio išvaizdos ir
nuotaikos kūrimas. Esmė ta, kad abu apibrėžimai
teisingi.

2
7 TINKLALAPIŲ KŪRIMO
TAISYKLĖS
1. Kad galite, dar nereiškia, kad privalote
Interneto technologijos suteikia daugybę kūrimo
galimybių ir priemonių. Tačiau dizaineris neprivalo
naudotis tam tikromis technologijomis vien todėl,
kad jos egzistuoja. Dažnai tam tikros technologijos
gali pakenkti tinklapio našumui ir taip suerzinti
lankytojus (pvz.: mirksintis tekstas).

3
2. Beveik visada yra išimčių.

Tinklalapių dizaine nėra beveik nieko absoliutaus.


Todėl dizaineris turėtų būti atsargus, atmesdamas
kurią nors technologiją ar konstrukciją vien todėl,
kad tai nepasiteisino viename tinklalapyje (pvz.:
mirksintis tekstas kaip įspėjimas apie lankytojo
padarytą klaidą).

4
3. Svarbiausias vertintojas yra vartotojas

3. Dizaineris visada turi stengtis tobulintis.

3. Geriausias principas – kuklumas.

Kuriant tinklalapius susiduriama su daugybe dalyku,


visada atsiras kuriančių patrauklesnius, su naujesnėmis
technologijomis tinklalapius arba kūrybiškiau tas
technologijas pritaikančių dizainerių. Jei dizaineris
nepasiduoda išdidumui, mokydamasis iš kitų, jis gali
patobulinti savo įgūdžius.
5
6. Neįmanoma įtikti visiems

7. Vertėtų neatsilikti nuo techninių sąlygų ir


standartų.

6
TRYS TINKLALAPIŲ KŪRIMO
PRINCIPAI
1. ESTETIKA. Ar profesionaliai sukurta
tinklalapio išvaizda ir nuotaika? Ar ji
tapatinama su bendrove ar asmeniu, ar dera?
2. PRAKTIŠKUMAS. Ar pakankamai greitai ir
lengvai vartotojas gali rasti ir pasinaudoti
informacija bei atlikti reikiamas užduotis?
3. FUNKCIONAMUMAS. Programuojant suku-
riami funkciniai tinklalapio aspektai, tokie kaip
formos ir iš duomenų bazių įkeliamas tekstas.
7
PRAKTINIAI DALYKAI
 Turi būti didesnė persiuntimo sparta.
 Naršymas turi būti savaime suprantamas.
 Turi būti vartojami pastovūs interneto terminai ir
simboliai.
 Rašymo stilius turi būti aiškus ir glaustas.
 Tinklalapius visuomet turi testuoti įvairūs vartotojai,
naudodami įvairias naršykles.
 Negalima pamiršti vartotojų su negalia.

8
KITI ASPEKTAI
 Tinklalapio išvaizda, o taip pat su ja tapatinamas
asmuo ar bendrovė, pirmiausia įvertinami vizualiai.

Pirmąkart apsilankius svetainėje, akimirksniu pasąmonėje


susiformuoja tam tikra nuomonė. Jie tinklalapis atrodo
lyg mėgėjo penkių minučių darbas, vartotojas suabejoja
asmens ar bendrovės profesionalumu ir rimtumu, todėl
tikriausiai ilgiau tame tinklalapyje neužsibus.

 Smegenys vaizdus suvokia greičiau nei tekstą.

9
Akies supaprastinta struktūra
Stiebeliai, ~125 mln
•nakties matymui
•skiria pilkumo atspalvius

Vaizdo
interpretacija

10
Regos aštrumas ir laukas
Regos aštrumas - gebėjimas fokusuoti vaizdą.
Matymo laukas – matomas diapazonas, matuojamas
laipsniais.

11
 Paveikslėliai ir spalvos atkreipia vartotojo
dėmesį.

Tai paranku, kai dizaineris turinį išdėsto pagal


svarbą, t.y. ką lankytojas turi pamatyti pirmiausiai.

 Grafinės technologijos padidina veiksmingumą.

12
Spalvos
Spalva – tai daiktų savybė sukelti regos pojūtį,
atitinkanti tų daiktų skleidžiamos, atspindimos arba
praleidžiamos šviesos spektrinę sudėtį ir
intensyvumą.
Regimoji šviesa yra nedidelė elektromagnetinio
spektro dalis. Mūsų regėjimo sistema pastebi
elektromagnetines bangas nuo 400 iki 750 nm
(nanometrų, nanometras – tai viena milijoninė
milimetro dalis) ilgio. 400 nm bangą pastebime kaip
violetinę spalvą, o 750 nm – kaip raudoną).

13
Spalva –...
... tai daiktų savybė, sukelianti regos pojūtį,
 atitinkantį tų daiktų

 skleidžiamos,
 atspindimos arba
 praleidžiamos šviesos spektrinę sudėtį ir intensyvumą.
Spalvos yra galinga priemonė gerinti naudotojo sąsają,
tačiau netinkamas naudojimas gali žymiai pabloginti
naudotojo sąveiką su kuriama sistema

14
15
Spalva
Matome elektromagnetines bangas nuo 400 iki 750
nm (Hermann von Helmholz, Fizikas, 1821 –1884)
Spalvos požymiai:
 Tonas, atspalvis (angl. hue)

 Šviesumas (angl. brightness)

 Sodrumas (angl. saturation)

16
SPALVŲ APIBŪDINIMAS
Spalvos apibūdinamos 3 parametrais: tonu, šviesumu ir
sodrumu.
 Tonas yra chromatinė spalvos charakteristika, tai, kuo

viena spalva skiriasi nuo kitos, pvz.: oranžinė nuo


raudonos arba geltonos.
 Šviesumas – tai spalvos šviesumo arba tamsumo

laipsnis. Jis parodo, kokią vietą spalva užima tarp


juodos ir baltos gradacijos skalėje.
 Sodrumas yra spalvos grynumas arba ryškumas, kurį

sąlygoja chromatinės ir achromatinės spalvos kiekių


santykis

17
Chromatiškumas (Chroma): Kaip grynas yra atspalvis
lyginant su pilka spalva.
Įsisotinimas (Saturation): Atspalvio grynumo laipsnis.
Intensyvumas (Intensity): Atspalvio šviesumas ar
išblukimas. Intensyvumą galima mažinti pridedant baltos arba
juodos spalvos.
Skaistis (Luminance): Nurodo kiek šviesos atsispindi nuo
spalvos. Atspalviai, savo sudėtyje turintys daugiau baltos turi
didesnę atspindžio vertę.
Šešėlis (Shade): Atspalvis gaminamas pridedant juodos
spalvos.
Atspalvis (Tint): Atspalvis gaminamas pridedant baltos
spalvos.
Šešėlis ir atspalvis yra žodžiai, kurie nurodo atspalvio kitimą.

18
Jautrumas spalvoms

19
Mažiausias jautrumas regos centre – mėlynai
spalvai
 Vengti mėlynų tekstų ir linijų

Gera spalva
fonui

20
Ne visos spalvos yra vienodai skiriamos

21
Šiuolaikinės spalvotyros specialistas šveicaras J. Itenas
(1888-1967) teigė, kad dvi ar daugiau spalvų
tarpusavyje yra harmoningos (dera tarpusavyje), jeigu
jų mišinys duoda neutralią pilką spalvą. J. Iteno spalvų
ratas yra skirtas nustatyti harmoningas spalvas. Jos yra
sujungtos trikampiais ir keturkampiais. Jų išdėstymas
spalviniame skritulyje sudaro lygiašonį trikampį. Taigi
naudodami šias spalvas mokomajai medžiagai,
išlaikytume spalvų harmoniją. Šį trikampį per vieną
padalą pasukę, gausime kitas harmoningas spalvas. Taip
naudoti galima visus įbrėžtus trikampius ir
keturkampius.

22
J. Iteno harmoningos spalvos
Jų mišinys gamina neutralią pilką spalvą.

23
Spalvų ratas
Spalvų ratas yra vizualus spalvų išdėstymas pagal jų
chromatinį santykį. Rato išdėstymas prasideda nuo
pagrindinių atspalvių, išdėstytų tolygiai viena nuo
kitos, toliau sukuriami perėjimai tarp pirminių
naudojant antrines ir tretines spalvas.

24
Pirminės spalvos
Esminės spalvos, tokios, kurių negalima išgauti
maišant kitas spalvas.

25
Antrinės spalvos
Šios spalvos išgaunamos maišant dvi pirmines
spalvas.

26
Tretinės spalvos
Šitos yra išgaunamos maišant pirminius ir antrinius
atspalvius.

27
Papildančios spalvos
Šios spalvos yra išsidėsčiusios priešinguose spalvų
rato pusėse.

mirgėjimo efektas

Atkreipkite dėmesį į tai, jog priešingos spalvos


parinktos kartu sudaro mirgėjimo efektą.

28
Analoginės spalvos
Šios spalvos spalvų rate yra išsidėsčiusios greta
viena kitos.

29
Spalvų kombinacijos
Papildantis ryšys. Išsiskyręs papildantis Dvigubas papildantis
Šios spalvos rate ryšys. Vienas atspalvis ryšys. Dviejų
išsidėsčiusios viena ir du kiti vienodai papildančių spalvų
prieš kitą nutolę papildantys aibė; atstumas tarp
atspalviai. pažymėtų papildančių
spalvų porų sąlygoja
bendrą kontrastą
galutinėje
kompozicijoje.

Analoginis ryšys. Triados ryšys. Trys Monochromatinis


Tokios spalvos, kurios atspalviai vienodai ryšys. Spalvos,
yra gretimos viena kitai nutolę vienas nuo kito kurios yra konkrečios
spalvų rate. spalvų rate. spalvos atspalviai arba
šešėliai

Sąmonė ir
30
Rega Klausa Atmintis
pažinimas
Adityvios spalvos
Jeigu dirbame su kompiuteriu, spalvos, kurias
matome, yra sukuriamos naudojantis adityvių spalvų
metodu. Adityvių spalvų maišymas prasideda nuo
juodos (#000000) ir baigiasi balta (#FFFFFF); kuo
daugiau spalvų yra pridedama, tuo rezultatas yra
šviesesnis ir artėja prie baltos spalvos.

31
Substraktyvios spalvos
Kada mes maišome spalvas naudodami paint programą arba
spausdimo metu, naudojame substraktyvių spalvų metodą.
Substraktyvus spalvų maišymas reiškia, kad spalvos
prasideda nuo baltos (#FFFFFF) ir baigiasi juoda
(#000000); kai yra pridedama spalva, rezultatas tamsėja ir
artėja prie juodos spalvos. CMYK (cyan, magenta, yellow
and key (black)) spalvų sistema yra naudojama
spausdinimui.

32
SPALVŲ KATEGORIJOS
Pagal šviesos spindulio bangų sugėrimą,
atspindėjimą arba praleidimą spalvos grupuojamos į
achromatines ir chromatines spalvas.
 Achromatinės spalvos (gr. achromatos –
bespalvis) – tai neutralios spalvos – juoda,
balta, pilka ir visi jų tarpusavio mišiniai.
 Chromatinės spalvos (gr. chroma (kilm.
chromatos) – spalva), spektro spalvos,
priešingos achromatinėms spalvoms, taip pat
įvairūs jų atspalviai ir mišiniai.

33
Spalvų chromatiškumas
Nechromatinės

 ryškesni kraštai
Chromatinės

 stambiems elementams

 dėmesiui atkreipti

34
Hermanas fon Helmholcas (Hermann von
Helmholz, vokiečių fizikas, 1821 – 1894) 1886
metais atrado, kad visos spalvos turi tris bendrus
požymius:
 atspalvį (angl. hue),

 šviesumą (angl. brightness),

 sodrumą (angl. saturation).

35
Naudingi patarimai:
1) Akis skiria virš 7 milijonų spalvų. Be abejo, vienu
metu nėra naudojamos visos spalvos. Jautrumas
spalvai yra didesnis tinklainės centre ir mažėja
šonuose. Tinklainės šonuose akis mažiau skiria
raudoną, žalią ir geltoną spalvas, o mėlyna spalva yra
skiriama geriausiai. Todėl mėlynos spalvos atspalviai
labiausiai tinka fonui.
2) Regėjimo centre akis geriausiai skiria raudoną ir
geltoną spalvas, o mėlynai yra mažiausiai jautri.
Todėl maži mėlyni objektai gali pasimesti ekrane,
ypač, jei tai yra melsva spalva. Vadinasi, reiktų vengti
mėlynos spalvos tekstų ir linijų.
36
Naudingi patarimai:
3) Reiktų vengti gretimų spalvų, besiskiriančių
melsvumo kiekiu, nes jų kraštai susilieja. Labiausiai
akis yra jautri raudonos spalvos atspalviams, o mėlynos
spalvos atspalviams – mažiausiai.
4) Priešingos spalvos neturėtų būti kartu, nes tai
vargintų akis, ypač raudonos ir mėlynos bei geltonos ir
violetinės spalvų derinius.
5) Šiltos spalvos, kaip antai raudona ir geltona, yra
suvokiamos, kaip artėjančios prie naudotojo, o šaltos –
tolstančios nuo jo. Tai yra svarbu projektuojant grafinę
sąsają darbui su lygmenimis.

37
Naudingi patarimai:
6) Laikui bėgant jautrumas kontrastui mažėja. Todėl
projektuojant sistemas, skirtas vyresniems naudotojams, spalvų
kontrastas turi būti didesnis nei jauniems žmonėms, būtent
kompiuteriniuose žaidimuose.
7) Per mažai spalvų yra geriau nei per daug. Vaikams skirtos
programos turi būti spalvingesnės nei suaugusiems, nes spalvos
skatina vaikų vaizduotę.
8) Nėra vieningos nuomonės, kokios spalvos geriausiai tinka
sąsajoms. Teoriškai violetinė ir geltona spalvos yra priešingos
ir neturi būti kartu naudojamos. Tačiau nespalvotame ekrane šis
derinys atrodo puikiai. Vadinasi, jei projektuotojas žino, koks
yra naudotojo monitorius, tuomet tiksliau gali suderinti spalvas.
Svarbus yra sąsajos estetinis patrauklumas ir malonus vaizdas.

38
Raudona

Raudona. Šilta. Tai intensyviausia spalva,


iššaukianti emocinį atsaką. Ji gali sukelti
susijaudinimo, galios, karščio, meilės ir aistros
(tiek teigiama, tiek neigiama prasme), ar agresijos,
pavojaus jausmus. Beveik visos raudonos spalvos
sukeltos reakcijos yra stiprios, todėl ją geriausia
naudoti kaip išskiriamąją, o ne pagrindinę spalvą .
39
39
Geltona

Šilta. Šiai spalvai būtinas atspalvis, ji gali sukelti


saulės, linksmumo ir šilumos arba baimės,
įspėjamąsias, nykimo ir silpnumo reakcijas.
Geltona labiausia vargina žmogaus akį ir ji
turėtų būti išskiriamoji, o ne pagrindinė.

40
40
Oranžinė

Šilta. Asocijuojasi su šiluma, pasitenkinimu,


pozityvumu ir natūralumu. Ji dažnai naudojama
tam, kad produktai atrodytų prieinami ir
pasiekiami, bet dėl jos jie gali atrodyti ir pigūs.
Tai spalva, kuri labiausiai kelia apetitą, todėl ji
dažna restoranuose.

41
41
Rožinė

Šilta. Perteikia jaunatviškus, moteriškus, šiltus


ir raminančius jausmus.

42
42
Mėlyna

Šalta. Sukelia beveik priešingą reakciją nei


raudona. Ji sukelia šaltumo, ramybės,
stabilumo, rimties, pasitikėjimo, lojalumo,
išminties ir brandumo jausmą ar atsaką, bet taip
pat gali būti šalta, kelti depresiją ir numušti
apetitą.

43
43
Žalia

Šalta. Asocijuojasi su augimu, sveikata,


gamta, energija ir komfortu arba godumu ir
pavydu. Manoma, kad žalia spalva yra
lengviausiai priimama akims ir gali pagerinti
regėjimą.

44
44
Violetinė

Šalta. Karališka spalva, asocijuojasi su


prabanga, turtu ir rafinuotumu. Tai reta
spalva gamtoje ir vieniems ji gali atrodyti
dirbtinė, o kitiems - meniška.

45
45
Ruda

Neutrali. Tiek, žemės, tiek medžio spalva, ji


asocijuotis su sveikata, solidumu, patikimumu,
natūralumu ir paprastumu. Be to, tam tikri
atspalviai gali kelti nuobodumo ar susidėvėjimo
įspūdį.

46
46
Balta

Neutrali. Gryna, švari ir atvira spalva. Tai


puikus fono spalvos pasirinkimas, nes ji sudaro
visišką kontrastą tekstui ir suteikia erdvės
pojūtį, jei naudojama laisvai.

47
47
Pilka

Neutrali. Paprastai reiškia sąžiningumą,


neutralumą, ramumą, brandą ar melancholiją.

48
48
Kaip spalvos paveikia žmogų?

49
Raudona šildanti, gyvybingumas, veikla, pavojus. pavojus, aistra, meilė, nuotykiai,
perspėjimas.

Oranžinė šildanti silpniau, stimuliuojanti, tinka su kūryba, jaunatve, linksmybėmis,


vaikams. komfortu.

Geltona tonizuojanti, mažiausiai varginanti, asocijuojasi su švara, paprastumu,


gerina nuotaiką, atkreipia dėmesį. grynumu, nekaltumu.

Žalia raminanti, šviežia, padeda pailsėti protui, siejama su sveikata, sėkme, pinigais,
OK harmonija, gyvenimu, gamta, natūralumu.

Mėlyna ramina, suteikia tvirtumo, orientacija į asocijuojasi su sėkme, rimtumu, ramybe,


praeitį, tradiciškumas, tikrumas, profesionalumu, patikimumu.
objektyvumas.

Juoda šalta, atgrasi, sunkumų, vyravimo, mirties asocijuojasi su rafinuotumu, elegancija,


spalva. tamsiom jėgom ar mirtimi. Jauni žmonės
juoda spalva dažnai išreiškia maištą.
Rožinė/rausva spalva siejama su nekaltumu, švelnumu,
saldumu, jaunatviškumu

balta su nekaltumu, teisybe, dorove,


paprastumu, švara;

pilka asocijuojasi su neutralumu, lygybe,


uždarumu.

50
Spalvos įvairiose kultūrose

51
SPALVŲ KONTRASTAS
Spalvų kontrastas (pranc. contraste), skirtingų
spalvų derinys, fiziologinis reiškinys – spalvos tono,
sodrumo, šviesio kitimas veikiant gretimai spalvai.
Spalvų poveikis yra reliatyvus ir sąlyginis. Greta
būdamos, jos veikia viena kitą. Kontrasto efektas
gali sustiprėti ar susilpnėti, nelygu su kokiom
aplinkinėm ta spalva sąveikauja.

52
4 PAGRINDINIAI SPALVŲ
KONTRASTAI
1. Komplementinis kontrastas – tai ryškiausias spalvinis
kontrastas, maksimaliai sustiprinantis abiejų spalvų
aktyvumą. Komplementinio kontrasto spalvų poros:
raudona – žalia, geltona – violetinė, mėlyna –
oranžinė.
2. Kiekybinis kontrastas leidžia reguliuoti spalvų poveikį
subalansuojant spalvų plotų proporcijas, priklausančias
nuo kiekvienos spalvos ryškumo. Pvz.: geltona yra
trigubai ,,aktyvesnė“ už violetinę, todėl, norint gauti
subalansuotą spalvų santykį, violetinį plotą reikia tris
kartus padidinti santykinai geltonam plotui.

53
3. Intensyvumo kontrastas – visos sodrios
spalvos ,,suaktyvėja“ būdamos šalia blankių ir
švelnių spalvų ar atspalvių. Pvz.: bet kuri ryški
chromatinė spalva dar labiau suaktyvės šalia
pilkos achromatinės spalvos.
4. Simultaninis kontrastas grindžiamas žmogaus
regos sugebėjimu matant vieną iš spalvų atkurti
priešingą (komplementinio kontrasto principu).
Pvz.: achromatinis plotelis raudoname fone
atrodo žalsvas, ilgai žiūrėjus į bet kokios
intensyviai ryškios (pvz.: raudonos) spalvos
kvadratą ir akį nukreipus į neutralią plokštumą,
atsigamina priešingos, šiuo atveju žalios spalvos
kvadratas.

54
KELETAS GILUMOS ĮSPŪDŽIO
PERTEIKIMO, REMIANTIS SPALVŲ
SAVYBĖMIS, EFEKTŲ
 Šviesos - tamsos efektas – šviesūs plotai išryškėja, o
tamsūs traukiasi atgal.
 Šaltumo – šiltumo efektas – visos to paties šviesumo
spalvos atrodo esančios arčiau, o šaltos
tarsi ,,traukiasi“ tolyn.
 Dydžių kitimo efektas – šviesiomis spalvomis
nudažyti daiktai visuomet atrodo didesni negu tokio
pat dydžio objektai, nudažyti tamsiomis spalvomis.
 Kokybinis efektas – grynos ir intensyvios spalvos
traukia dėmesį, o blyškios ir švelnios mažiau
pastebimos.

55
Kontrasto efektai
Interpretavimas papildo vaizdą
 neegzistuojantys objektai

 Hermano gardelė

56
Kontrastas – kraštų paryškinimas
Šviesių ir tamsių spalvų susidūrimas keičia ryškumą

57
Kontrastas
Fono spalva keičia pirmo plano spalvos suvokimą

58
Skaistis – erdvės efektas

59
Šiltos ir šaltos spalvos

60
Naudojantis vienu ar keliais spalvų ypatumais
pagrįstais principais, galima kurti įtaigias ir
išraiškingas abstrakčių formų kompozicijas,
sustiprinti vizualios reklamos, tapybinių
kompozicijų, spalvinės perspektyvos įspūdį.

61
KOMPOZICINĖ SISTEMA
Kompozicija - vienas iš kūrybos profesionalumo
požymių. Suvokiama subjektyviai ir dažnai
prieštaringai. Grožio samprata kinta, kompozicinės
priemonės šiais laikais taip pat nepastovios.
Komponavimas - tai įvairių elementų išdėstymas
plokštumoje arba erdvėje atitinkama meniška tvarka.
(Kartais ir “meniška netvarka”, suvokiama intuityviai,
yra kompozicija.) Kiekvienas kompozicijos variantas
nėra galutinis ir absoliučiai geriausias. Be to, meno
kūrinio kompozicija - santykinis dalykas.

62
KOMPOZICIJA (lot. compositio) reiškia sudėstymą,
sudarymą arba elementų sujungimą į visumą. Tai ir
sandara ir struktūra, konstrukcija, tektonika,
architektonika.
Iš karto keliami du klausimai: ką pavaizduoti ir kaip
pavaizduoti.

63
Lengviausiai kompozicinė vienybė
pasiekiama statika, simetrija, ritmu,
niuansais.
Sunkiau vienybę pasiekti dinamika,
asimetrija ir kontrastais.

64
Deriniai
 Standartinis – mišrus
 Tikslingi deriniai

65
Neutralios spalvos

66
Veiksmų lygmuo
 Šiltos ir šaltos spalvos nusako veiksmų lygmenį
 šiltos
 greitesnis naudotojo atsakas
 šaltos
 būsena arba pradinė informacija
 Ryškumas turi atitikti informacijos svarbą

67
Vengiame
Vengiame priešingų spektro spalvų susidūrimo
Sprendimas
- mažinti ryškumą

68
Sutrikęs spalvų matymas
 7% žmonių
 Vengiame žalio ir raudonos spalvų atspalvių fonui

ir pirmam planui

69
Vaizdo interpretacijos pokštai
 Ehrenstein ir Orbison Iliuzijos
 Heringo iliuzija

 Jastrow iliuzija

 Mueller-Lyer iliuzija

 Zoelnerio iliuzija

http://www.brl.ntt.co.jp/IllusionForum/index.html

70
Ehrensteino ir Orbisono iliuzija

71
Heringo iliuzija
http://www.brl.ntt.co.jp/IllusionForum/v/hering/ja/index.html

72
Jastrow iliuzija
http://www.brl.ntt.co.jp/IllusionForum/v/jastrow/ja/index.html

73
Mueller-Lyer iliuzija
http://www.brl.ntt.co.jp/IllusionForum/v/mullerLyer/ja/index.html

74
Zoelnerio iliuzija (linijos yra
lygiagrečios)
http://www.brl.ntt.co.jp/IllusionForum/v/zollner/ja/index.html

75
Objektų skyrimo kriterijai

Spalva

Tekstūra

Figūra

Kryptis

Dydis

76
Dar kelios .....
http://www.brl.ntt.co.jp/IllusionForum/v/verticalHorizontal/ja/index.html
http://www.brl.ntt.co.jp/IllusionForum/v/fraser_life/ja/index.html
http://www.brl.ntt.co.jp/IllusionForum/v/ebbinghaus/ja/index.html

77
Kiti kultūriniai skirtumai
Šviesos jungikliai
 Amerika: nuspaustas apačioje reiškia išjungtą

 Britanija: nuspaustas apačioje reiškia įjungtą

Čiaupai

 Amerikoje: sukant pagal laikrodžio rodyklę

atsukame
 Britanijoje: sukant pagal laikrodžio rodyklę

užsukame

78
Spalvų naudojimas
Spalvos

 Pateikia papildomą informaciją


Šiltos

 veiksmams, reikalaujantiems atsakymas,

 artumo pajūčiui sukelti

Šaltos

 būsenos infomacijai,

 nuotolio pojūčiui sukelti

Pilkos

 neutralumas

79
FIRMINIS STILIUS
Tinklalapio dizainas – tai ne tik jo išvaizda.
Surinkus visus reikalavimus ir informaciją,
reikalingą tinklalapio struktūrai sukurti, būtina
užtikrinti, kad būtų sukurta ir išlaikytas firminis
stilius. Kai kurie tinklalapiai atrodo gražiai, bet
neperteikia jokios idėjos. Auditorijai gali patikti
vaizdas, bet ji nejaučia jokio lojalumo ar noro
pasirinkti šią organizaciją.

80
Firminis stilius nėra paprasčiausias logotipas. Tai
viso tinklalapio idėjinis turinys. Firminis stilius- tai
organizacijos asmenybė internete. Kaip auditorija
prisimins organizaciją? Kaip emocinis krūvis
perduodamas auditorijai?

81
Kuriant firminį stilių ir nustatant jo
standartus, reikia atsižvelgti į:
 PAVADINIMĄ. Pavadinimas gali tiesiogiai
apibrėžti tikslą arba būti visiškai nesusijęs.
Kartais visiškai neįpratas pavadinimas gali
padėti sukurti savo įvaizdį.
 NORIMĄ EMOCINĮ ATGARSĮ. Kai
norima, kad verslas būtų priimtas auditorijos:
pirkėjų, to paties verslo atstovų, kolegų,
bendros publikos ir pan.

82
 LOGOTIPĄ. Ar bendrovė turi logotipą, at jis turi
būti sukurtas?
 TIPOGRAFIJĄ. Šriftą pasirinkti visada
sudėtinga. Nors dizaineris gali turėti šimtus šriftų,
galima būti tikriems, kad vartotojas tokio
pasirinkimo neturi.
 PLATŲ MĄSTYMĄ. Koks darbartinis
bendrovės požiūris, ar reikia jį pakoreguoti?

83
LOGOTIPAS
PATARIMAI:
 Svarbu turėti kruopščiai ir gerai apgalvotą logotipą.

 Venkite smulkių detalių ir kitų elementų, kurie taps

neryškūs ar iš vis išnyks sumažinus atvaizdo dydį.


 Logotipą naudokite visame tinklalapyje, įsitikinkite, kad

jis yra įvairaus dydžio ir tinkamas skirtingiems


formatams, pvz. spausdinti.
.

84
 Svarbiausia – paprastumas. Logotipas turėtų gerai
atrodyti ir spalvotas, ir juodai baltas, išlaikyti savo
vientisumą net kopijuojant ar siunčiant faksu.
 Laikykitės kuo toliau nuo gradientų ir kelių
atspalvių - jei nespalvotas logotipas atrodo blogai,
jokios spalvos ar šešėliavimas jam nepadės.
 Sukurdami nespalvotą logotipo versiją, pašalinkite
visus galimus dėmesio trukdžius

85
REIKALAVIMAI REKLAMAI
 Kreipinys (jei toks yra). Jis turi būti kiek įmanoma
labiau suasmenintas, personalizuotas.
 Teksto išdėstymas. Neturėkite vilties, kad
vartotojas jūsų pranešimą įdėmiai skaitys pusę
valandos. Kiekvienas pranešimo gavėjas elgiasi
tipiškai. Visų pirma, užmetus akį bandoma surasti
esminius taškus – raktinius žodžius. Tada
sprendžiama skaityti tekstą ar ne.

86
Per pirmas sekundes ieškomi žodžiai: pranešimo
objektas, kaina, privalumai. Atkreipiamas dėmesys į
paryškintus žodžius – "tik", "net", "nemokamai",
"akcija" ir t. t.
Per pirmas sekundes skaitytojas užfiksuoja apie 10
esminių taškų. Refleksyviai skaitytojas pirmiausia
atkreipia dėmesį ir geriausiai nesąmoningai įsimena
informaciją esančią lapo viršutinėje dalyje, kairėje
pusėje.
Taigi, per pirmas kontakto sekundes turi būti sudaroma
galimybė apstebėti produktų privalumus, įmonės ar
prekės skiriamuosius ženklus. Pranešimas skaitomas,
jei taikytojas suintriguojamas, tuomet tikrinama ar
antraštėje pasakyta tiesa, ieškoma "kabliukų".
87
 Antraštė. Skaitytojas nesąmoningai ieško antraštės,
taigi joje turi būti esminiai žodžiai .
 Informacijos glaustumas. Trumpi ir aiškūs
sakiniai, suprantami terminai, pabrėžiami esminiai
privalumai, kiek galiama glaustesnis produkto
aprašymas. Jei tai reklaminis tekstas, jį turi
sudaryti ne daugiau 6-7 sakinių.
 Pranašumai ir nauda. Neperkraukite teksto,
išskirkite pranašumus, naudą ir galimybes.

88
 Šriftas. Tekstas turi būti parašytas paprastu,
lengvai skaitomu, nevarginančiu šriftu. Tekstas
neturi būti margas - 2-3 spalvos. Jei neesate
profesionalai verčiau nenaudokite ryškių,
erzinančių spalvų.
Post skriptum. Svarbesnes smulkmenas galite
išdėstyti teksto apačioje. Informaciją, kuri gali
atgrasyti vartotoją išdėstykite smulkiomis
raidėmis. Tokia informacija privalo būti jei ji gali
pakeisti kliento apsisprendimą įsigyti produktą,
priešingu atveju galite būti apkaltinti vartotojų
dezinformavimu ir klaidinimu.

89
 Dialogo forma. Jei nėra komandos – nėra veiksmo.
Pranešime turi būti užkoduota komanda veiksmui.
Tikslas, kad klientas reaguotų į pranešimą.
Pranešimas gali būti koduojamas kaip pakvietimas,
užsakymo forma, klausimynas ar anketa ir pan.
 Kontaktai. Nepamirškite nurodyti savo kontaktų:
adreso, telefono, elektroninio pašto, fakso ir kt.

90
LENGVAS SKAITOMUMAS
Atributai Paaiškinimai
Tinkama šrifto Nevargina akių
spalva ir kontrastas
Geras šrifto dydis Pakankamai stambus ir aiškus
Tinkamas šrifto tipas Svarbias neilgas frazes galima užrašyti
DIDŽIOSIOMIS RAIDĖMIS. Ilgo teksto
rašyti didžiosiomis raidėmis negalima.
Necentruokite ir nelygiuokite ilgo teksto
prie puslapio dešinio krašto. Italics
naudojamas frazių sureikšminimui. Ilgas
italics tekstas sunkiau skaitomas.
Tinkamas fonas Neturi gąsdinti, stebinti, nustelbti turinio.
Nėra gramatinių
klaidų

91
Kalba taisyklinga Teksto aiškumas ir paprastumas daugumoje
atvejų yra privalumas. Sakiniai trumpi ir aiškūs.
Gerai suskaidyta Jei dokumentas ilgas, suskaidykite į kelis
pastraipomis puslapius- failus, susietus tarpusavyje. WWW
puslapio dydis turi būti ne didesnis negu 2
ekranai. Skaityti lengviau, jei eilutė ne ilgesnė
negu 60 simbolių. Naudinga įtraukti perėjimus į
kitą eilutę <BR>. Trumpų eilučių tekstas
suprantamesnis. Sudalinkite dokumentą skiltimis.
Bet nepiktnaudžiaukite. Kuo ilgesnės skiltys, tuo
didesnis tarpelis tarp jų turi būti. Idealus
kolonėlės plotis 5-6 žodžiai ( 30 simb.) Skyrikliai
padeda skaityti: ?- klausimas, !-dėmesio
atkreipimas, : - paaiškinimas

92
Teksto
sudėtingumas
tinkamas skaitytojui
Aktyvus garsas

93
Teksto skaitymo lengvumas
Rašykite taisyklinga kalba, trumpais, sklandžiais sakiniais.
Teksto sudėtingumas turi būti priderintas skaitytojo amžiui
ir išsilavinimui.

Teksto skaitymo lengvumo koeficientas (FRES-Flesh


Reading Ease Score) apskaičiuojamas pagal vidutinį sakinio
ilgį Lvid ir vidutinį žodžio sunkumą Žvid.

Lvid = žodžių kiekis /sakinių kiekis 100 žodžių ilgio


pavyzdyje.

Žvid = skiemenų kiekis 100 žodžių ilgio pavyzdyje.

94
Teksto skaitymo lengvumo koeficientas

Teksto skaitymo Stilius Vidutinis Pavyzdžiai


lengvumo skaitytojų
koeficientas amžius
90-100 Labai lengvas 9-10  

80-89 Lengvas 10-11 Bulvarinė spauda, komiksai

70-79 Pakankamai 11-12  


lengvas
60-69 Standartinis 12-14 Užrašai apie Šerloką Holmsą

50-59 Pakankamai 14-16 Vidurinės mokyklos


sudėtingas vadovėliai

30-49 Sudėtingas 17-22 Universiteto vadovėliai

0-29 Labai 22+ Profesiniai žurnalai,


sudėtingas mokslinės monografijos
95
Teksto pateikimas
Antraštės ir paantraštės (grafika) suteikia skaitytojui
supratimą apie tinklalapio turinį, leidžia geriau suprasti jo
struktūrą. Paantraštės (grafika) informuoja apie teksto
esmę, vilioja skaitytoją. Dokumento išdėstymas turi būti
logiškas.

Teksto raidžių spalva ir kontrastas turi nevarginti akių, būti


pakankamai stambus ir aiškus. Svarbias neilgas frazes
galima užrašyti DIDŽIOSIOMIS RAIDĖMIS. Ilgo teksto
rašyti didžiosiomis raidėmis nepatartina. Necentruokite ir
nelygiuokite ilgo teksto prie puslapio dešinio krašto.

96
Pasviręs (Italics - angl.) šriftas naudojamas frazių sureikšminimui. Ilgas pasviręs
tekstas sunkiau skaitomas.

Fonas neturi stebinti, gąsdinti ir nustelbti turinio.

Jei dokumentas ilgas, elektroninį jo variantą suskaidykite į kelis puslapius - failus,


susietus tarpusavyje. WWW puslapio dydis turi būti ne didesnis negu 2-3 ekranai.
O spausdinti patogiau visą dokumentą iš karto. Todėl spausdinimui pateikite
atskirą failą. Skaityti lengviau, jei eilutė ne ilgesnė negu 60 simbolių. Naudinga
įtraukti perėjimus į kitą eilutę.

Trumpų eilučių tekstas suprantamesnis. Dokumentą sudalinkite kolonėlėmis. Kuo


ilgesnės kolonėlės, tuo didesnis tarpelis tarp jų turi būti. Idealus kolonėlės plotis 5-
6 žodžiai (30 simbolių).

Norėdami valdyti teksto išdėstymą, galite sukurti lentelę. Galite tekstu užpildyti tik
vieną kolonėlę, o kitą palikti tuščią. Arba kitoje kolonėlėje įdėti paveikslą ar vėliau
sukurtą tekstą (taip išdėstytas yra šis teksto blokas). Bet nepiktnaudžiaukite
kolonėlėmis, kur nereikia.
.

97
Naudokite skyriklius, nes jie padeda skaityti:
? - klausimas,
! - dėmesio atkreipimas,
: - paaiškinimas

98
Nepatartina naudoti spalvų derinių, pateiktų
lentelėje.

Geltona ant balto Geltona ant raudono Geltona ant žalio Žalia ant balto
Fuksijos ant žalio Mėlyna ant juodo Raudona ant juodo Fuksijos ant juodo
Geltona ir balta Raudona ir mėlyna Raudona ir žalia Mėlyna ir žalia

99
10 būdų kaip teksto pagalba pagerinti
žiniatinklio lankomumą
Statistika. Dar 1980 metais Jakob Nielsen atlikti tyrimai parodė,
kad interneto vartotojai skaitydami informaciją internete yra
mažiau susikoncentravę, nei skaitydami spausdintinę informaciją
ar žiūrėdami TV laidą. Tolimesni tyrimai parodė, kad daugelis
žmonių tiesiog skenuoja informaciją ir tik 16% perskaito kiekvieną
žodį. Tuo pačiu tyrimas išaiškino, kad interneto vartotojai teikia
didesnį prioritetą tekstui nei tinklapio grafikai ar dizainui. Tyrimas
buvo atliktas tuo metu, kai elektroninės paslaugos tik buvo
pradėtos vystyti. Pastaruoju metu interneto vartotojai į pateiktą
informaciją koncentruojasi dar mažiau, nes per tą patį laiką turi
galimybę apžvelgti didesnį jos kiekį.

Išvados. Jūsų tinklapio vartotojų grįžtamumo rezultatas tiesiogiai


priklauso nuo teksto pateikimo stiliaus ir Jūsų potencialaus
vartotojo skaitymo stiliaus. Ką daryti?

100
Pirmas ir bendras patarimas.

Visų pirma aiškiai apsispręsti kas yra Jūsų


potencialūs vartotojai. Turint potencialaus
vartotojo „portretą“, galima parinkti būtent jam
tinkantį rašymo stilių.

101
Antras patarimas.

Neeksperimentuoti su šriftais. Visi mes įpratę prie


daugumos spausdintų tekstų šriftais „Times new roman“,
„Arial“ ir pan., todėl tikrai neverta naudoti tokius stilius kaip
Bauhaus93, Bernard MT Condensed. Atrodo gražiai, bet tai
tikrai apsunkina informacijos skenavimą potencialiam
vartotojui.

Kalbant apie šrifto dydį, pradėkite nuo dvylikos pikselių ir


rinkitės didėjančia tvarka.

102
Trečias patarimas.

Dėl grafikos ir teksto sintezės. Jeigu turi „nukentėti“


Jūsų tinklapio dizainas vardan to, kad tekstas būtų
geriau matomas, tegu taip ir būna. Neteikite
prioriteto dizainui lyginant su informacijos
pateikimu. Patikėkite - parduoda tekstas, o ne graži
tinklapio spalva.

103
Ketvirtas patarimas.

Pirmajame teksto puslapyje nesistenkite sugrūsti visą turimą


tekstinę informaciją. Naudokite antraščių principą (Headline).
Po antraštėmis parašykite nedidelį įvadą su sąsaja skaityti
toliau.

Įspėjimas: niekada neparašykite viso įvadinio sakinio,


nutraukite įvadinį sakinį pačioje įdomiausioje vietoje, taip
skatindami potencialų vartotoją skaityti toliau.

104
Penktas patarimas.

Apsispręsdami dėl vidinių sąsajų (link) Jūsų tinklapio


tekste, žymėkite sąsajomis tuos žodžius, kurie įvardija Jūsų
prekes ar paslaugas. Tai suteiks keletą privalumų. Visų
pirma, kita spalva bus rodomas jūsų prekės pavadinimas
skenuojančiam potencialiam vartotojui. Antra, tai ženkliai
pakels Jūsų reitingus paieškos jėgainių sistemose.
Nešvaistykite vidinių sąsajų teikiamų galimybių tokioms
sąsajoms kaip: skaityti toliau, žiurėti čia ir pan.

105
Šeštas patarimas.
Nurodysiu keletą įdomesnių stilių, naudojamų vartotojų dėmesiui
patraukti internete. Tikriausiai daugelis iš Jūsų jau esate matę
amerikietiško stiliaus e-komercijos tinklapius, naudojančius dideles
antraštes (H1), kuriomis iš karto įvardinama problema ir kviečiama
veikti, visa tai tęsiasi per 20 puslapių. Lietuvoje neteko matyti dar
nei vieno panašaus. Bet, galbūt, kas tinka Amerikai, nelabai tinka
Lietuvai. Ir vis dėlto, patarimas būtų toks:
išanalizavę savo tinklapio turinį, sugalvokite Jūsų turinio esmę
įvardinančią antraštę (headline).
Naudokite H3 arba H2 dydį. Turėti antraštę (headline) būtina, nes
tai viena iš potencialių priemonių „priversti“ lankytoją gilintis į Jūsų
tinklapio turinį.

106
Septintas patarimas.
Paryškinkite tai, kas Jūsų nuomone potencialiam
vartotojui būtų svarbu. Jeigu tai negadina Jūsų
tinklapio dizaino koncepcijos, pakeiskite į
giminingas spalvas.

107
Aštuntas patarimas.
Kalbant apie rašymo turinį, rašydami tekstus, mažiau
kalbėkite apie techninę produkto ar paslaugos pusę.
Visą dėmesį skirkite tam, kad išgirti produkto
privalumus. Pavyzdžiui, reklamuojamas „Canon“
fotoaparatas, rašoma: „Lengvai pakeičiamas
objektyvas...“. Kaip standartiška. Pabandykite parašyti
šitaip: „Dar niekada nebuvo taip paprasta pakeisti
objektyvą dėka zoomC technologijos“ ar pan.

108
Devintas patarimas.

Vienas iš svarbesnių punktų būtų pati informacija,


kuri yra tekste. Arba tiksliau - jos kokybė.
Užtikrinkite, kad vartotojui pateikta įdomi ir
patraukli informacija. Kad ir kokios būtų
intriguojančios antraštės, jeigu nėra įdomaus
turinio, vargu ar ilgai išlaikysite potencialaus
vartotojo dėmesį.

109
Dešimtas patarimas.

Rašykite taip, kaip kalbate. Nustebote? Tai


garantuotai visada patrauks dėmesį.

Pavyzdys:

110
„Interneto vartotojų statistika“

...Pagal paskutinius tokio ir tokio instituto statistikos


duomenis, gautus atlikus tyrimą, kuriame buvo apklaustas
vienas tūkstantis potecialių respondentų amžiaus
kategorijose nuo... ir iki... , paaiškėjo, kad interneto
vartotojai teikia didesnį prioritetą tekstinei informacijai prieš
grafinę...

Nuobodu?

111
Pabandykime kitaip.

„Žodis prieš Spalvą“

...Ar žinote, kad INTERNAUTAI, lankydamiesi


interneto svetainėse, tiesiog skenuoja, „SPAUDINĖJA“
įvairiausius linkus, „ŠOKINĖJA“ iš puslapio į puslapį,
jiems lengvai viskas ATSIBOSTA, jie NEPABAIGIA to,
ką pradėjo skaityti...
(dabar atskirai perskaitykite žodžius iš didžiųjų raidžių.
Turėjote pamatyti esminį sakinį).

112
Kaip tinkamai sukurti web dizainą?

113
1. Pradinė informacija

Pirmiausia kai ruošiatės kurti dizainą, turėtumėte išanalizuoti informaciją, kurią jau
turite. Pavyzdžiui, jeigu su jumis susisiekė klientas ir davė tik trumpą įmonės
veiklos aprašymą, pavadinimą ir, tarkime, logotipą. Pagal tai reikėtų pradėti
pačiam rinktis detalesnę informaciją. Tai pradėti galima nuo konkurentų analizės,
t.y. peržiūrėti įmonių, kurios užsiima panašia veikla, tinklalapius ir įvertinti, kas
tuose tinklalapiuose pateikta, kaip pateikta ir ar patogu svetainės lankytojams
surasti reikiamą informaciją.
Pagal įmonės veiklą galite grubiai susidaryti vaizdą, kokie grafiniai elementai tiktų
tinklalapyje. Tai gali būti nuotraukos, iliustracijos ar smulkūs pagražinimai. Ir
galiausiai reikia atkreipti dėmesį į logotipą (aišku, jei jį gavote): pažiūrėkite,
kokios spalvos dominuoja, gal yra kokia specifinė, išsiskirianti simbolika ir
panašiai. Tai padės labiau perteikti įmonės veiklą dizaine.
Ir, žinoma, skirkite pakankamai laiko su klientu diskutuodami apie tai, kokią
paskirtį būsimas tinklalapis turės. Galbūt tinlalapis bus skirtas tik informacijos ir
kontaktų pateikimui, o galbūt bus vykdomi kažkokie užsakymai tiesiogiai
internetu. Nuo to gali radikaliai pasikeisti viso tinklalapio struktūra.
Taigi pagal surinktus duomenis galite susirašyti, kokios turinio sritys bus
reikalingos tinklalapyje.

114
2. Planavimas

Tai atlikę galite pereiti prie antrojo etapo — planavimo. Dauguma mano, jog
tinklalapio titulinis vaizdas yra viskas, ko reikia kuriant dizainą. Deja, tai netiesa.
Išvaizda tinklalapyje turi išlikti gana pastovi, t.y. lankytojas neturėtų jaustis lyg vis
naujame tinklalapyje atsivertus skirtingus svetainės puslapius. Taigi iš karto turite
apgalvoti visus galimus ir reikiamus vadinamuosius vidinius puslapius ir kaip jie bus
stilizuoti.
Taip pat nepamirškite puslapių struktūros: pagrindinę tinklalapio meniu navigaciją
dažniausiai sudaro 5 ar 6 nuorodos, tad pagalvokite ir pasikonsultuokite su užsakovu,
kokie bus pagrindiniai svetainės skyriai. Jeigu tinklalapyje bus pateikta daug
informacijos, vertėtų apmąstyti, kaip ją išskaidyti į mažesnes kategorijas. Tam dažnai
tinka nusileidžiantieji meniu (angliškai juos vadina „drop-down menus“).
Galiausiai reikia suplanuoti, kokią pagrindinę informaciją norite pateikti lankytojams.
Pavyzdžiui, jeigu tikslas yra pristatyti kažkokį svarbų produktą, informacija apie tai
turi būti labiausiai pastebimoje puslapio vietoje.

115
3. Eskizavimas

Toliau galime pereiti prie dizaino eskizavimo. Čia ypatingai didelių


apribojimų nėra, kadangi kiekvienas tai daro pagal poreikius, įgūdžius ir
įpročius. Vieni pradinius eskizus paišo ant popieriaus lapo, kiti renkasi
kompiuterį su atitinkama programine įranga. Svarbiausia mokėti grubiai
vizualizuoti visas dizaino idėjas, kad galėtume nuspręsti, ar tos idėjos
tinkamos. Eskizai neturi būti ypač detalūs. Iš tiesų galite išdėlioti pagrindines
puslapio dalis stačiakampiais blokais. Tokiu būdu matysite vizualiai turinio
blokus ir galėsite pagal tai nuspręsti, ar reikia ką nors keisti, ar ne.
Beje, noriu atkreipti dėmesį į tai, jog dauguma pradedančiųjų sąmoningai
praleidžia šį etapą, t.y. dizaino eskizavimą, manydami, jog iš karto sugebės
viską idealiai sudėlioti galutiniame makete. Tačiau per keletą metų
vertindamas pradedančiųjų dizainerių maketus pastebėjau, jog jie nemoka
proporciškai idėlioti informacijos. Pavyzdžiui, meniu sritis užima per daug
vietos, kai kurie elementai nesiderina su bendru dizaino vaizdu ir pan.

116
4. Maketavimas

Sukūrę jus tenkinantį eskizą, pagal jį galite imtis tikrojo darbo —


dizaino maketavimo. Maketavimui galite naudoti jums parankią
programinę įrangą, su kuria turite daugiausia patirties. Svarbu
nepamiršti, jog vėliau maketą reiks paversti į tikrą puslapio versiją,
kurią galėtumėte atversti naršyklėje.
Taigi pradėdami piešti dizaino maketą pagal eskizą iš karto turėkite
omenyje du pagrindinius aspektus: „branding“ ir stilių. Pagal pirmąjį
aspektą turite pasirinkti tinkamas spalvas arba, kitaip sakant, sudaryti
spalvų paletę, kuri atspindėtų įmonės veiklą ar tam tikrą produktą.
Nepamirškite logotipo — tai simbolis, padedantis atpažinti įmonę ar
produktą. Tad logotipas turėtų būti gerai pastebimoje vietoje, o spalvų
paletė suderinta su logotipo spalvomis.

117
Kaip patikrinti ar vartotojo naršyklė palaiko CSS3 ?

Javascript kodas kurio pagalba galėsite patikrinti ar vartotojo


naršyklė palaiko CSS3 ir pagal tai parengti,bei pritaikyti savo
puslapio stilius ir funkcijas.
Šiuo metu dar ne visos populiariausios naršyklės palaiko tokią
galimybę, tad kaip gi naudoti CSS3 galimybes neprarandant
išvaizdumo ir senuose naršyklėse .
Yra keletas būdų šiam sprendimui užtikrinti, šįkartą pateiksime
vieną iš jų : Javascript’as patikrinantis ar naršyklė palaiko CSS3.

Plačiau:
http://www.modernizr.com/

118
<script>
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;
  
   return function(prop) {
      if ( prop in div.style ) return true;
  
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });
  
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // naršyklė palaiko text-shadow
            // Arba atlikti ką nors kitą, jei ne!
            return true;
         }
      }
      return false;
   };
})();
  
if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

119
<head>
<meta charset="UTF-8" />
<title>Testing for CSS Properties</title>
<style>
h1 {
color: red; /* just for example */
}

.textStroke h1 {
-webkit-text-stroke: 2px black;
color: white;
font-size: 70px;
font-family: helvetica, arial, sans-serif;
}
</style>
</head>
<body>
<h1> Hello Readers </h1>
<script>
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
}
})();
if ( supports('textStroke') ) {
document.documentElement.className += ' textStroke';
alert('This browser supports the text-stroke property');
} else {
alert(Ši naršyklė nepalaiko CSS3 versijos');
}
</script>
</body>
</html>

120
Apibendrinimas

Dizaino kūrimas reikalauja kruopštaus, atsakingo ir suplanuoto


darbo. Kūrimo procesas tinkamas visais atvejais, nes turite
pasiruošti, sukurti planą, vizualizuoti idėjas ir galiausiai jas
realizuoti galutiniame darbe.

Linkiu jums sėkmės darbe ir kūryboje!

121

You might also like