Professional Documents
Culture Documents
DIZAINAS
DIZAINAS
DIZAINAS
1
Tinklalapių dizainas _ nevienareikšmė sąvoka.
Interneto profesionalai visuomet tai apibūdina
skirtingai.
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ų.
4
3. Svarbiausias vertintojas yra vartotojas
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.
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į.
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)
16
SPALVŲ APIBŪDINIMAS
Spalvos apibūdinamos 3 parametrais: tonu, šviesumu ir
sodrumu.
Tonas yra chromatinė spalvos charakteristika, tai, kuo
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
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.
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),
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
40
40
Oranžinė
41
41
Rožinė
42
42
Mėlyna
43
43
Žalia
44
44
Violetinė
45
45
Ruda
46
46
Balta
47
47
Pilka
48
48
Kaip spalvos paveikia žmogų?
49
Raudona šildanti, gyvybingumas, veikla, pavojus. pavojus, aistra, meilė, nuotykiai,
perspėjimas.
Žalia raminanti, šviežia, padeda pailsėti protui, siejama su sveikata, sėkme, pinigais,
OK harmonija, gyvenimu, gamta, natūralumu.
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ą
Čiaupai
atsukame
Britanijoje: sukant pagal laikrodžio rodyklę
užsukame
78
Spalvų naudojimas
Spalvos
Šaltos
būsenos infomacijai,
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ą.
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.
94
Teksto skaitymo lengvumo koeficientas
96
Pasviręs (Italics - angl.) šriftas naudojamas frazių sureikšminimui. Ilgas pasviręs
tekstas sunkiau skaitomas.
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į.
100
Pirmas ir bendras patarimas.
101
Antras patarimas.
102
Trečias patarimas.
103
Ketvirtas patarimas.
104
Penktas patarimas.
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.
109
Dešimtas patarimas.
Pavyzdys:
110
„Interneto vartotojų statistika“
Nuobodu?
111
Pabandykime kitaip.
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
116
4. Maketavimas
117
Kaip patikrinti ar vartotojo 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
121