Uždaryti
Jei aktyviai domiesi kompiuterinės grafikos naujovėmis, web dizainu, svetainių kūrimu, užsiprenumeruok E-grafika.lt turinį per RSS!
Nori pareikšti savo nuomonę? Peržiūrėti video pamokas? Gauti tik nariams prieinamų resursų? Sužinoti apie naujienas pirmasis? Tada registruokis!
Jeigu jau esi užsiregistavęs, prisijunk ir diskutuok forumuose, komentuok naujienas, straipsnius, video pamokas, bendrauk su kitais bendruomenės nariais!

Straipsnis

Spalvos dizaine

Spalvos dizaine

Nekyla nė abejonės, kad spalvos tiek spaudos, tiek tinklalapio dizaine yra vienas iš svarbiausių rodiklių, lemiančių gražų dizainą. Atrodo, jog spalvas galima rinktis pagal nuožiūrą, tačiau, deja, tai ne visada pasiteisina. Pastaruoju metu pastebėjau, kokias klaidas daro pradedantieji savamoksliai dizaineriai, todėl galiausiai nusprendžiau aprašyti tas klaidas ir paaiškinti, kaip jų išvengti.

Esminė problema yra ta, kad kai kurie žmonės sugeba sukurti patrauklius dizaino elementus, juos tvarkingai išdėstyti, tačiau neteisingų spalvų pasirinkimas sugadina, sudarko vaizdą, o tai nulemia galutinį sukurto dizaino rezultatą.

Todėl pasistengsiu kuo detaliau išnarplioti dažnai pasitaikančias spalvų derinimo klaidas, šiek tiek apžvelgsiu bendrąją spalvos teoriją ir, žinoma, pateiksiu tiek tinkamų, tiek netinkamų spalvų derinių pavyzdžių.

Spalvos teorija

Paprastai spalvos mums atrodo elementarus reiškinys. Jeigu prisimante fizikos pamokas, žinote, kad kiekvienas daiktas, objektas atsipindi ir sugeria skirtingų ilgių šviesos bangas, o mes, matydami savo akimis, atpažįstame, skiriame šias bangas ir sakome, kad matome spalvas. Tačiau šis straipsnis ne apie fiziką — mums svarbu suvokti, kad gebėjimas skirti spalvas yra ne tik papildomas „priedas“ prie mūsų kūno. Nesuklysiu teigdamas, kad spalvos sukelia emocijas, kurios vienaip ar kitaip paveikia mūsų būseną ir įprasmina tam tikras asociacijas. Nežinau, kiek tame yra teisybės, tačiau esu skaitęs straipsnį, kuriame teigiama, jog pamačius raudoną spalvą truputį pakyla kraujospūdis. Na, kad ir kaip ten bebūtų, spalvos turi prasmę.

  • Mėlyna spalva asocijuojasi su sėkme, rimtumu, ramybe, profesionalumu, patikimumu;
  • raudona yra visiška priešingybė mėlynai spalvai: pavojus, aistra, meilė, nuotykiai, perspėjimas;
  • žalia spalva siejama su sveikata, sėkme, pinigais, harmonija, gyvenimu, gamta, natūralumu;
  • geltona spalva asocijuojasi su švara, paprastumu, grynumu, nekaltumu;
  • oranžinė — su kūryba, jaunatve, linksmybėmis, komfortu;
  • rožinė/rausva spalva siejama su nekaltumu, švelnumu, saldumu, jaunatviškumu;
  • violetinė — su fantazija, sapnais, prabanga, teisingumu;
  • balta — su nekaltumu, teisybe, dorove, paprastumu, švara;
  • juoda spalva siejama su mistika, rimtumu, tamsa, paslaptimi;
  • pilka spalva asocijuojasi su neutralumu, lygybe, uždarumu.
Raudona rožė

Spalvų asociacijos ne iš piršto laužtos — tai įsitikinti galite pamąstę apie įvairias gyvenimiškas situacijas. Pavyzdžiui, raudonos rožės yra dažnas romantikos simbolis, tačiau raudona spalva taip pat gali reikšti pavojų, klaidą. Užtenka prisiminti, kad kompiuterio programose klaidos ikona dažnai yra raudonos spalvos. Kita vertus, žalios spalvos ikonos nurodo, kad tam tikras programos veiksmas buvo įvykdytas sėkmingai. Pateikiau tik keletą pavyzdžių, tačiau manau, kad jums bus nesunku sugalvoti ir daugiau pavyzdžių.

Labiau įsigilinus į spalvų prasmę galime daryti išvadą, kad ta pati spalva gali reikšti keletą dalykų, todėl negalima kiekvienai spalvai priskirti konkrečią, vienintelę asociaciją.

Spalvų ratas

Spalvų ratas

„Kas kas toks? Spalvų ratas?!“ — turbūt tie, kuriems neteko girdėti tokio termino, dabar perskaitę šią antraštę nesuprato, kas tai per išradimas. Standartiniame RYB (red, yellow, blue) spalvų modelio rate yra 3 pirminės spalvos: mėlyna, raudona ir geltona. Iš jų sudaryti atspalviai yra antrinės ir tretinės spalvos. Taigi, pažiūrėję į dešinėje pateiktą iliustraciją galime teigti, kad antrinės spalvos yra oranžinė, žalia ir violetinė, o tretinėsraudonai oranžinė, geltonai oranžinė, geltonai žalia (liaudiškai — salotinė), mėlynai žalia, mėlynai violetinė ir raudonai violetinė (rausva, rožinė). Antrinės spalvos gaunamos sumaišius dvi pirmines spalvas, o tretinės — sumaišius dvi antrines. Trumpai sakant, spalvų ratas — tai vizualinė spalvų reprezentacija, kurioje susiję atspalviai vaizduojami aplink apskritimą.

Iškyla klausimas — kokia spalvų rato paskirtis? Dizaine spalvų ratas yra ypač naudingas norint sudaryti tam tikrą spalvų derinį arba kombinaciją (spalvų derinimą analizuosime kiek vėliau šiame straipsnyje), sužinoti, kaip susijusios spalvos tarpusavyje.

Spalvų modeliai (maišymo sistemos)

Spalvų modeliai — tam tikros sistemos, kuriomis remiantis pagal nustatytas sąlygas apibūdinamos (atvaizduojamos) spalvos. Žinau, apibrėžimas glumina ir kelia chaosą galvoje, tačiau paskaitę plačiau apie spalvų modelius viską suprasite.

RGB

RGB modelis

Neabejoju, kad vienur ar kitur esate girdėję (skaitę) apie RGB. Žodis (na, tiksliau ne žodis, o trumpinys) išvestas iš pirmųjų trijų spalvų pavadinimų raidžių: Red, Green, Blue (raudona, žalia, mėlyna). RGB modelis naudojamas elektronikos prietaisuose, kuriuose integruotos funkcijos atvaizduoti/gauti spalvoms (televizoriai, kompiuterių monitoriai, telefonų ekranai, projektoriai; taip pat ir įvedimo prietaisai: skaitytuvai, video kameros, skaitmeniniai fotoaparatai ir t. t.).

RGB sistemos pirminės spalvos, kaip jau turbūt supratote, yra raudona, žalia ir mėlyna. Kompiuterio monitoriaus ekrane pagal siunčiamus duomenis iš kompiuterio atvaizduojamas skirtingas kiekvienos pirminės spalvos intensyvumas. Intensyvumas RGB modelyje nurodomas procentaline skale nuo 0 iki 100 procentų arba šešioliktaine skaičių sistema (HEX), kurią tikrai yra tekę pažinti, jeigu dirbate su Adobe Photoshop ir kitomis grafikos programomis arba nagrinėjote pakopinių stilių (CSS) kalbą, kurioje spalvos reikšmės nurodomos HEX kodais. Tiesa, skaičiavimuose RGB reikšmės nurodomos nuo 0 iki 255. Pavyzdžiui, juodą spalvą galime nurodyti RGB(0, 0, 0), o HEX — #000000 arba raudoną spalvą: RGB(255, 0, 0), HEX — #FF0000. Paeksperimentuoti su RGB galite įsijungę Adobe Photoshop programą ir atsidarę „Color Picker“ — ten rasite ir kitų sistemų, pavyzdžiui, CMY(K) reikšmes pagal pasirinktą spalvą.

Vėl prisiminę spektrus ir šviesos bangas iš fizikos pamatysite, kad RGB modelyje spalva nagrinėjama kaip spinduliavimas (© Vikipedija). „Visų trijų spalvų nulinės reikšmės atitinka juodą spalvą, o visų trijų maksimalios reikšmės – baltą“.

CMY(K)

CMY(K) modelis

Priešingai negu RGB modelyje, čia trijų spalvų nulinės reikšmės sudaro baltą spalvą, o maksimaliosios — juodą. CMY modelį sudaro trys pirminės spalvos: cianas (ciano mėlis), purpurinė ir geltona. Trumpinys, kaip ir RGB atveju, išvestas iš pirminių spalvų pavadinimų primųjų raidžių: Cyan, Magenta, Yellow. Spaudoje naudojamas CMYK modelis, kuris yra beveik tas pats CMY, tačiau skiriasi vienu dalyku. Teoriškai, sumaišius spalvas CMY maišymo būdu turėtume gauti juodą spalvą, tačiau praktikoje taip nėra. Iš tikrųjų sumaišytos spalvos sudaro tamsiai rudą spalvą. Taip pat pastoviai maišant visas tris spalvas juodai spalva gauti nėra ekonomiška — išnaudojama daug dažų, o popierius tiesiog persigeria dažais, todėl spausdinys ilgiau džiūna. Šioms problemoms išspręsti į CMY sistemą buvo įvestas tamsumą ir šviesumą reguliuojantis raktas (juoda spalva). Tokiu atveju į maišymą įtraukiami juodi dažai, kuriais galima išgauti ryškią juodą spalvą ar papildomus atspalvius. Taigi, CMYK — Cyan, Magenta, Yellow ir Key (black).

Atliekant spaudos darbus su grafikos programomis, pravartu nustatyti CMYK spalvų sistemą, kadangi to dažniausiai prašys klientai. Be to, taip išvengsite problemų su spalvų netikslumais, kadangi spalvų konvertavimas iš RGB į CMYK yra sudėtingas, todėl konvertuojant atsiranda paklaidos. Gali būti atvejų, kai spaudos darbas kompiuterio monitoriuje skirsis nuo jau atspausdinto varianto (spalvų atžvilgiu). Tai ypač svarbu, jeigu norima išgauti tam tikras spalvas spausdinyje ir spalvų paklaidos yra netoleruotinos.


Atkreipkite dėmesį, kad sumaišius dvi pirmines RGB spalvas gaunama pirminė CMY(K) spalva, o sumaišius dvi pirmines CMY(K) spalvas — pirminė RGB.

Spalvų deriniai (kombinacijos)

Kaip jau anksčiau minėjau, kiekviena spalva sukuria tam tikrą įspūdį, sukelia jausmus, emocijas, tačiau dar kitokį efektą galima sukurti panaudojus keletą spalvų — sukūrus spalvų kombinaciją arba, kitaip sakant, derinį. Spalvų derinimo klaidos yra viena iš pagrindinių priežasčių, kodėl nusprendžiau rašyti šį straipsnį. Kai kurie žmonės „jaučia“, kurios spalvos derinasi ir tinka viena šalia kitos, tačiau kiti, deja, šio instikto neturi arba nėra jo išlavinę.

Keletas klausimų (pamąstymui) žmonėms, kurie jau kurį laiką kuria dizainus — ar dažnai atkreipiate dėmesį į tai, kokias spalvas pasirinkote dizainui? Ar derinote jas tarpusavyje, stengdamiesi įsivaizduoti ir sukurti norimą vaizdą? Rinkotės spalvas savo nuožiūra ir pagal nuotaiką? Atvirai sakant, kai pradėjau domėtis tinklalapių dizainu, retai galvodavau apie šiuos (ir panašius) klausimus. Galbūt todėl, kad tada neatradau informacijos apie spalvų reikšmę dizaine (nors kažkodėl apie tokios informacijos ieškojimą net nemąsčiau), o gal todėl, kad man buvo svarbiau išmokti naudotis programine įranga grafikos darbams kurti... Bet kuriuo atveju neabejoju, kad kai kuriems iš jūsų susiklostė panaši situacija.

Plačiau analizuodamas spalvų derinius privalau paminėti, kad egzistuoja kelios derinių kūrimo variacijos (schemos).

Pagrindinės spalvų schemos:

  • analoginė;
  • monochromatinė;
  • papildomoji;
  • skiriamoji papildomoji;
  • trijų sudaromoji.

Pavadinimai gana migloti, todėl paaiškinsiu kiekvieną spalvų schemą ir pateiksiu pavyzdžių.

Monochromatinė (Monochromatic)

Monochromatinė schema Naudojant monochromatinę spalvų schemą pasirenkama tam tikra viena spalva, o po to iš jos išvedami papildomi atspalviai tamsinant, šviesinant arba keičiant tos spalvos sodrumą (angl. saturation). Šią schemą pravartu naudoti tada, kai norima sukurti solidarumo įspūdį (ypatingai tam tinka mėlyna spalva). Pasirinktos spalvos atspalviai puikiai dera tarpusavyje, tad naudodami monochromatinę spalvų schemą būsite beveik pilnai užtikrinti, kad dizaino spalvos neprivers žiūrinčiuosius krapštytis akis iš skausmo. wink

Tiesa, kaip ir visada, kas turi pliusų, turi ir minusų. Pagrindinė problema naudojant šią schemą iškyla tada, kai norima išryškinti tam tikrą tinklalapio dizaino elementą (nors ta pati situacija tinka ir spaudos dizainui), mat tarp panašių atspalvių norimas elementas gali „pasimesti“, todėl svetainės lankytojai gali paprasčiausiai pražiopsoti informaciją, kurią jūs norite jiems parodyti. Kitaip sakant, tinkamai neišryškinus svarbios informacijos, lankytojai gali jos nepastebėti. Be to, monochromatinė spalvų schema dizaine stokoja kontrasto.

Tinklalapių dizainai su monochromatine spalvų schema

www.cellzone.co.uk

www.mozilla.com

www.finerhome.co.uk

www.mediatemple.net

Tiesa, jeigu dar nepastebėjote, mūsų tinklalapio dizainas taip pat labai artimas monochromatinei spalvų schemai. wink


Analoginė (Analogous)

Analoginė schema Anksčiau užsiminiau apie spalvų ratą ne be reikalo — spalvų schemos remiasi šiuo principu. Analoginė spalvų schema sudaroma pasirinkus vieną bazinę spalvą bei spalvas, esančias šalia pasirinktosios spalvų rate. Pavyzdžiui, pasirinkus geltonai oranžinę spalvą kaip bazinę, papildomos spalvos būtų geltona ir oranžinė (pažvelkite į dešinėje esantį paveiksliuką).

Teoriškai, pasirinkus spalvą iš spalvų rato, saugus plotas, iš kurio reikėtų rinktis spalvas, yra trečdalis arba apytiksliai 33% viso spalvų rato ploto (tai reiškia, kad pasirinkus pradinę spalvą, trečdalį viso rato sudaro vienas šeštadalis rato į vieną pusę nuo pasirinktosios pradinės spalvos, o antras — į kitą pusę).

Kaip ir monochromatinė spalvų schema, ši taip pat stokoja kontrasto, tačiau čia yra didesnis spalvų pasirinkimas ir visgi galima sukurti žaismingesnį dizainą. Analoginę spalvų schemą siūlau naudoti kiek atsargiau negu monochromatinę, nes yra didesnė tikimybė prisižaisti su spalvomis ir sudarkyti dizainą.


Papildomoji (Complementary)

Papildomoji schema Nesu tikras dėl šios schemos vertimo iš anglų kalbos, kadangi pripažinkite — tokius terminus vartojame labai retai, o man, tiesą sakant, niekados neteko susimąstyti, kaip tiksliai verčiamas žodis complementary į lietuvių kalbą. wink Jeigu žinote tikslesnį vertimą, parašykite komentarą po straipsniu.

Iš kairėje pusėje pateikto paveikslėlio nesunku suvokti, kaip sudaroma ši schema: pasirenkate norimą spalvą iš spalvų rato ir mintyse nubrėžę statų skersmenį atrandate antrąją spalvą. Papildomoji schema yra pati efektyviausia tuo atveju, kai norima sukurti ryškų spalvinį kontrastą. Kontrastingos spalvos kur kas labiau atkreipia dėmesį, lengva išryškinti norimus dizaino elementus.

Turiu jus įspėti, kad tai pati pavojingiausia spalvinė schema, nes netinkamas jos panaudojimas privers kitus žmones šlykštėtis jūsų dizainu. Taip taip, visai neperdedu. Prašau jūsų, niekada nenaudokite vienos papildomosios schemos spalvos fonui, o kitos — tekstui! Pavyzdžiui, fonui pasirinkote žalią spalvą, o tekstui — raudoną. Galbūt jums, kaip ir man, atrodys visiškas absurdas pasirinkti tokią spalvų kombinaciją, nes jau po vienos perskaitytos pastraipos tokiame puslapyje pajaustumėte mirguliavimą, skausmą akyse, tačiau esu matęs ne vieną žmogų, bandantį kurti dizainą su tokiomis spalvomis. Taip ne tik pravirkdytumėte lankytojus, tačiau taip pat sugadintumėte svetainės įvaizdį. Sakoma, kad tinklalapyje svarbiausia turinys, o ne išvaizda („Content is King“), tačiau niekas nenori skaityti informacijos, jeigu dizainas kelia pasišlykštėjimą.

Taip pat noriu atkreipti dėmesį į tai, kad turėtumėte stengtis atidžiai naudoti kontrastingas spalvas kartu su blankiomis spalvomis (ypatingai su blankiomis šiltomis spalvomis), kadangi rizikuojate atsitiktinai užgožti svarbius arba išryškinti pirminiam planui nepriklausančius dizaino elementus.


Skiriamoji papildomoji (Split Complementary)

Skiriamoji papildomoji schema Tai panaši schema į papildomąją, kurią aprašiau anksčiau, tačiau skiriasi spalvų pasirinkimo iš spalvų rato galimybe. Šiuo atveju pasirenkame pirmąją spalvą iš rato, o iš jo priešingos pusės pasirenkame gretimas spalvas. Pavyzdžiui, pažiūrėję į dešinėje pateiktą paveikslėlį matome, kad pasirinkus violetinę spalvą, papildomos spalvos yra geltona ir oranžinė.

Kaip ir papildomoji, skiriamoji papildomoji schema taip pat leidžia sukurti ryškų kontrastą, tačiau šios schemos spalvos suteikia daugiau harmonijos.

Pavojai ir galimos klaidos yra tos pačios, kurios galioja ir papildomajai schemai.


Trijų sudaromoji (Triadic)

Trijų sudaromoji Trijų sudaromosios schemos principas labai paprastas: paimame 3 spalvas, atitolusias viena nuo kitos vienodu atstumu, t. y. kiekvieną spalvą paimame kas 120 laipsnių. Kaip matote iš paveikslėlio, viena iš galimų šios schemos spalvų kombinacijų: mėlynai violetinė, raudonai oranžinė ir geltonai žalia. Kitas pavyzdys: į trijų sudaromosios schemos spalvų kombinacijų sąrašą galime įtraukti 3 pirmines spalvas: raudoną, mėlyną ir geltoną, kadangi jos spalvų rate yra taip pat atitolusios viena nuo kitos vienodu atstumu.


Išvardijau ir aprašiau ne visas spalvų schemas, o tik tas, kurios, mano nuomone, yra svarbiausios ir dažniausiai sutinkamos. Aptaręs spalvų schemas noriu pereiti prie, manau, jums pačios įdomiausios šio straipsnio vietos — spalvų derinių (palečių) kūrimo arba, kitaip sakant, generavimo naudojant web aplikacijas/įrankius.

Spalvų derinių (palečių) kūrimas

Pačiam sukurti spalvų paletę be papildomų programų ar aplikacijų yra gana sudėtinga — galima greitai sudarkyti spalvų kombinacijos harmoniją pridėjus spalvą, kuri nedera prie kitų spalvų. Tačiau nesijaudinkite, interneto platybėse slypi daug naudingų įrankių spalvų paletėms sukurti.

Adobe Kuler

Adobe Kuler

Adobe Kuler — tai vienas iš naudingiausių įrankių spalvų paletėms, deriniams kurti. Kurdami savo paletę galite nurodyti schemą, pagal kurią Adobe Kuler turi sugeneruoti spalvas iš bazinės spalvos (angl. Base Color). Taip pat prie kiekvienos spalvos rasite jas atitinkančias reikšmes įvairiose žymėjimų sistemose (RGB, CMYK, HEX, HSV).

Jeigu nenorite kurti savo paletės, galite naudoti kitų lankytojų sukurtas paletes! Kitu atveju, sukūrę spalvų paletę, galite ją patys publikuoti ar išsaugoti, tačiau turite būti užsiregistravęs ir prisijungęs prie Adobe Kuler sistemos.


Color Scheme Designer

Color Scheme Designer

Color Scheme Designer neturi tokio didelio funkcionalumo kaip Adobe Kuler, tačiau šį įrankį vis tiek rekomenduoju išbandyti. Ypatingai naudinga funkcija Color Scheme Designer aplikacijoje yra pavyzdžių generavimas pagal pasirinktas spalvas. Paspaudę atitinkamai „Light page example“ arba „Dark page example“ atidarysite papildomą langą, kuriame pamatysite pavyzdinį dizaino maketą su pasirinktomis spalvomis.


Colour Lovers

Colour Lovers

Colour Lovers — tai ne tik web įrankis spalvų paletėms kurti, o internetinė svetainė, turinti milžinišką bendruomonę — virš 220 000 užsiregistravusių lankytojų. Šiame tinklalapyje galite kurti savo spalvų paletes, derinius, juos publikuoti, taip pat peržiūrėti kitų narių sukurtas paletes, jas komentuoti, įvertinti. Be to, galite sekti populiarias spalvų tendencijas interneto tinklalapių ir žurnalų dizanuose. Manau, Colour Lovers tinklalapį turėtų aplankyti kiekvienas dizaineris ar asmuo, besidomintis dizainu.


GenoPal

GenoPal


Kiti įrankiai ir tinklalapiai:

Pilkos spalvos fenomenas

Per keletą metų pastebėjau, kad tie žmonės, kurie pradeda domėtis tinklalapių dizainu, piktnaudžiauja pilka spalva savo dizainuose. Tiesą sakant, negaliu paaiškinti, kas tai įtakoja. Susidaro įspūdis, kad Lietuvos žmonės yra prislėgti, kupini skausmo, nusivylimo ir depresiją keliančių minčių. Žinoma, taip rašau ironizuodamas, tačiau situacija yra būtent tokia. Realių pavyzdžių nepateiksiu, nes nenoriu įžesti tų, kurių darbai galėtų atsirasti šiame straipsnyje, tačiau parodysiu keletą netinkamų spalvų kombinacijų, į kurias įtraukta pilka spalva.

Svetainės pavadinimas
Puslapio turinys

Praesent quis orci leo. Quisque vulputate enim viverra dui tincidunt condimentum. Proin viverra felis ac lacus sodales vestibulum. In leo purus, mollis in convallis quis, vulputate eget lacus. Integer et nunc diam, sit amet tempor odio. Morbi facilisis mauris fringilla purus porttitor tincidunt. Nam eu lectus id diam aliquam blandit a eu ligula.

Paanalizuokite pateiktą pavyzdį ir pabandykite pamąstę atsakyti sau į sekančius klausimus.

1. Kur iš karto nukreipiamas dėmesys pamačius pavyzdį?

Neabejotinai pirmiausiai dėmesį atkreipia pavyzdyje esanti purpurinė spalva, panaudota dizaino viršutinei daliai ir nuorodoms, kadangi ji ypatingai išskiria elementus iš viso dizaino, mat purpurinė spalva, lyginant su kitais dizaino pilkais atspalviais, yra labai ryški.

2. Ar tinkamai išryškinta svarbiausia dizaino dalis — turinio sritis?

Turėjote pastebėti, kad tekstas, esantis turinio srityje, beveik susilieja su fonu, kadangi tarp teksto ir fono spalvos nesudarytas tinkamas kontrastas. Lankytojai, skaitydami, tarkime, straipsnį tinklalapyje su tokiu dizainu turėtų labai atidžiai sekti kiekvieną žodį, nes sunku įskaityti tekstą, kurio spalva beveik neišsiskiria iš fono.

3. Koks teksto ir fono spalvos santykis viršutinėje dalyje?

Antraštė „Svetainės pavadinimas“ mirguliuoja akyse dėl esančios ryškios fono spalvos, kuri, beje, labai blaško dėmesį bandant perskaityti antraštę. Kaip ir turinio dalyje, nėra tinkamo kontrasto tarp teksto ir fono. Jeigu apkeistume teksto ir fono spalvas vietomis, bėdos neišspręstume (pažiūrėkite į šoninę sritį, kurioje yra nuoroda, — ten teksto spalva ryški, tačiau fonas pilkas, blankus, todėl nuorodos tekstas vis tiek mirguliuoja).

4. Koks dizaino pagr. fono ir dizaino elementų fono santykis?

Kaip jau minėjau anksčiau, dėmesį atkreipia ryški viršutinės dalies spalva, ir nesvarbu, į kurią diaino dalį žiūrėsime, ši ryški spalva atkreips (blaškys) dėmesį. Naudojant blankias ir ryškias spalvas kartu, reikia ypač atsargiai jas pasirinkti, nes taip galite pasunkinti lankytojų informacijos ieškojimą, peržiūrą. Padėtį gelbėja tai, kad šoninės ir turinio dalies fono spalva skiriasi (nors ir nežymiai), todėl lankytojas gali greičiau orientuotis, kur ir kokia informacija pateikta.

5. Kokios išvados?

Dizainas, kuriame „persūdyta“ pilkos spalvos, dažniausiai atrodo labai monotoniškas, neišvaizdus ir neįdomus (tik nemaišykite su paprastumu — tai visai kas kita). Tokiu atveju labai sunku prie pilkų atspalvių pritaikyti ryškesnes spalvas, jas subalansuoti taip, kad per daug neišryškėtų nepirminiai dizaino elementai. Jeigu norite tamsaus dizaino, bandykite kombinuoti juodą spalvą su keliomis kitomis tamsiomis spalvomis bei pridėti porą šiek tiek ryškesnių spalvų.


Aplankę Colour Lovers svetainę pamatysite, kad dizaine dominuoja pilka spalva. Atrodo, tokia populiari svetainė, kurią kūrė patyrę žmonės, tačiau dizaineris(-iai), regis, neišmano savo darbo. Prieš pradėdami peikti dizainą, turėtumė išanalizuoti, kodėl buvo pasirinktos tokios spalvos.

„Color + Design Community for Creative Inspiration“ („Spalvos + dizaino bendruomenė kūrybiniam įkvėpimui“) — kontraversiškas šūkis svetainei, kurios dizaine dominuoja pilka spalva, tiesa? Deja, ne viskas taip paprasta, kaip atrodo. Atminkite, kad svetainėje publikuojamos spalvų paletės, kombinacijos, todėl žiūrint kokią nors paletę (pavyzdžiui: „Green Door“) aplink tą sritį, kurioje rodoma paletė, turėtų būti neutralios spalvos, kurios netrikdytų pamatyti bendro paletės vaizdo, harmonijos. Pilka dizaino spalva bei baltas rėmelis aplink paletę puikiai ją išskiria.

Taip pat atkreipkite dėmesį, kokia teksto spalva buvo parinkta skirtingose tinklalapio dalyse. Ten, kur fono spalva tamsesnė, o tekstas, esantis toje dalyje, yra svarbus, jis išryškinamas su balta spalva, o ten, kur informacija nėra svarbiausia, teksto spalva kiek tamsesnė.

Pažvelgę į prisijungimo sritį pamatysite, kad registracijos mygtukas („REGISTER“) išskiskira iš kitų mygtukų („LOST PASSWORD“, „GO“) bei apskritai iš visų kitų elementų, esančių prisijungimo srityje (tinklalapyje), kadangi registracijos mygtuko fono spalva yra raudona. Tokiu būdu siekama lankytojų žvilgsnius nukreipti būtent ties registracijos mygtuku. Na, o kam tai daroma, aiškinti, manau, nereikia.

Colour Lovers tinklaraštyje pastebėsite, kad visi įrašai patalpinti bloke, kurio fono spalva balta, o teksto spalva — tamsi, nes patogiausia skaityti tada, kai viskas pateikta „juodu ant balto“ (čia tiesioginis išsireiškimas).

Taigi, ne visais atvejais dominuojanti pilka spalva yra blogis — kartais to reikalauja pati tinklalapio idėja, tema. Tačiau rekomenduoju atsargiai naudoti pilką spalvą ir ja nepiktnaudžiauti kiekviename dizaine. Dažniausiai galite sukurti gražų dizainą išsiversdami be pilkos spalvos, tad ar verta rizikuoti? wink

Apibendrinimas

Kaip matote, nagrinėjant spalvų svarbą dizaine, reikia atsižvelgti ne tik į tai, kokias, tačiau ir kaip tinkamai pasirinkti spalvas. Apžvelgėme bendrąją spalvos teoriją, spalvų derinimo principus, spalvų schemas, kombinacijas, išsiaiškinome, kokių klaidų vertėtų vengti ir kaip jas ištaisyti. Viliuosi, kad tai, ką perskaitėte šiame straipsnyje, padės jums ateityje kurti patrauklius, gražius dizainus. Sėkmės kūryboje! wink

Data ir laikas 2009-07-11 11:42:40   Autorius adijux   Gairės Gairės: Patarimai naujokams, Web dizainas, Web įrankiai

Komentarai

Imago 2009-07-11 16:41:25
Imago Ui kiek daug skaitymo wow Kai perskaitysiu parasysiu kaip patiko, bet is bendro vaizdo, tai labai geras straipsnis
 
DoT 2009-07-12 15:31:01
DoT Labai geras straipsnis. Aciu.
 
napalias 2009-07-12 20:52:27
napalias Super straipsnis smile. O "Complementary" gal labiau tiktu "Prišingos spalvu sulinio" smile
 
adijux 2009-07-12 21:55:12
adijux Priešingos spalvų šulinio? Hm, kiek keistai skamba toks pavadinimas. shy
 
elsson 2009-07-13 20:17:49
elsson Uch, tikrai ne man skaityti tokius ilgus straipsnius cheeze
Jei jau pats nebeišsirenku spalvų, dažnai pasinaudoju Colour Lovers paletėmis.
 
adijux 2009-07-13 20:29:13
adijux Na, kam tai dominanti tema, manau, atras savyje noro ir pastangų perskaityti straipsnį. smile
 
Subiniukas 2009-07-29 08:11:40
Subiniukas Didelis dekui. Seip ir anksciau dideli demesi skyriau dizaino atspalviam, taciau persaicius si straipsni gavau daugiau naudingos informacijos, kuria tikrai pritaikysiu tolimesniems savo darbams.

Beje turiu klausima. Tarkim pasirinkau norima spalvu palete, sukuriau dizaina. Ar dizaine esancio teksto (navigacija, straipsniu pavadinimai..) spalvos taip pat turetu buti is tos pacios paletes?
 
adijux 2009-07-29 10:30:01
adijux Prašom, malonu, kad straipsnis tau buvo naudingas. smile

Beje turiu klausima. Tarkim pasirinkau norima spalvu palete, sukuriau dizaina. Ar dizaine esancio teksto (navigacija, straipsniu pavadinimai..) spalvos taip pat turetu buti is tos pacios paletes?

Nebūtinai, tačiau rekomenduotina. Kaip pavyzdį gali peržiūrėti e-grafika.lt dizainą. Pagrindinė dominuojanti spalva dizaine yra mėlyna, tačiau straipsniuose matai, kad skyrių antraštės yra pažymėtos kita spalva (šviesiai ruda-tamsiai oranžine spalva) ir galima tvirtai teigti, kad antraščių spalva „nesipjauna“ su kitomis dizaino spalvomis. Pagrindinė to priežastis yra baltas fonas — ši spalva yra neutrali, su ja galima suderinti daugybę spalvų nepaisant kitokių spalvų, esančių dizaine. 

Geriausias variantas — viską derinti pagal pasirinktą paletę, o norint išryškinti (atskirti) kokią nors specifinę tinklalapio dalį (skyrių), galima panaudoti spalvą, kuri sudarytų ryškesnį kontrastą tarp kitų dizaino spalvų. Na, visko teoriškai aprašyti neįmanoma — kai kada reikia tokius dalykus tiesiog pajausti. smile
 
Justė 2009-08-12 18:27:09
Justė Straipsnis puikus, pagilino bendrą išprusimą, bet dažniausiai vistiek pasikliauju savo jutimu spalvoms. Na, bet kai niekas nešauna į galvą geriau laimės nebandau, nes viskas baigiasi klaidomis, todėl "pasisemiu įkvėpimo" taip sakant iš Colour Lovers arba Color scheme designer
 
anis 2009-08-29 22:46:43
anis Puikus straipsnis.Daug naudingos informacijos pradedanciajam, kaip mansmile
 
iCan 2009-08-30 19:49:43
iCan Straipsnelis tikrai ne mažas, bet manau rasiu laiko jam perskaityti ir igyti naujų žinių. smile
 
dreammaster 2009-10-06 15:55:12
dreammaster Labai geras straipsnis, senai tokio ieškojau lietuvių kalba. Respect autoriui.

Tiesa, dėl pilkos spalvos. Šiaip pilka spalva "gesina" aplinkines spalvas. Galima tai nesunkiai pastebėt ir aplink mus (tiek dailej, tiek mene, tiek gamtoj). 

Geriausia paletė yra gamta. Paimkit gėlės žiedą, ir geriau įsižiūrėkit, pamatysit kaip viskas harmoningai ir derančiai sudėliota smile
 
adijux 2009-10-06 17:47:40
adijux Džiaugiuosi, kad patiko straipsnis. wink
 
WipeR 2009-10-14 16:05:20
WipeR Didelė pagarba straipsnių autoriui. Visi straipsniai labai išsamūs, tvarkingi. Nepatingėta, malonu skaityti. Taip ir toliau. smile
 
adijux 2009-10-14 17:41:24
adijux Dėkoju už nuomonę! smile
 
Imaginative 2009-10-19 00:19:37
Imaginative Pritariu WipeR'iui nes visi straipsniai parašyti tikrai tvarkingai, išsamiai ir nesudetingai, gali praktiškai bet kas suprasti ką norima pasakyti. Linkiu tau ir toliau rašyti tokius pas gerus bei naudingus straipsnius! smile
 
jonas 2009-11-24 08:54:32
jonas Puikus straipsnis.
 
dofka 2009-12-30 00:30:13
dofka Puikus straipsnis . turek tu man tiek kantrybes parasyt toki ;D puse perskaiciau manau pradziai uzteks ;P
 

Skaitomiausi straipsniai

Spalvos dizaine

Nekyla nė abejonės, kad spalvos tiek spaudos, tiek tinklalapio dizaine yra vienas iš svarbiausių rodiklių, lemiančių gražų dizainą. Atrodo, jog spalvas galima rinktis pagal nuožiūrą, tačiau, deja, tai ne visada pasiteisina. Pastaruoju metu pastebėjau, kokias klaidas daro pradedantieji savamoksliai dizaineriai, todėl galiausiai nusprendžiau aprašyti tas klaidas ir paaiškinti, kaip jų išvengti.

Esminė problema yra ta, kad kai kurie žmonės sugeba sukurti patrauklius dizaino elementus, juos tvarkingai išdėstyti, tačiau neteisingų spalvų pasirinkimas sugadina, sudarko vaizdą, o tai nulemia galutinį sukurto dizaino rezultatą.

Todėl pasistengsiu kuo detaliau išnarplioti dažnai pasitaikančias spalvų derinimo klaidas, šiek tiek apžvelgsiu bendrąją spalvos teoriją ir, žinoma, pateiksiu tiek tinkamų, tiek netinkamų spalvų derinių pavyzdžių.


Technikos apvalintų kampų elementams kurti

Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.

Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.

Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.


Tinklalapių kūrimas: pirmieji žingsniai

Žmonės, kurie domisi interneto naujovėmis, lankomais tinklalapiais, portalais, anksčiau ar vėliau iškelia sau klausimą — kaip sukurti tinklalapį? Klausimas iš pirmo živlgsnio atrodo visiškai „nekaltas“ ir gana paprastas: be išvedžijimų, nesuprantamų žodžių ar mokslinių terminų. Tačiau asmenims, kuriems šis klausimas užduodamas (čia, manau, nereikia nė minėti, kad žmogus, kurio klausiama, išmano tinklalapių kūrimo subtilybes), visiškai nesuprantama, kaip galima užduoti tokį naivų klausimą?

Stebitės, kodėl tai naivus klausimas? Jeigu taip, tada pamąstykite, iš ko susideda tinklalapio kūrimo procesas. Deja, nemanykite, kad solidų, gerą tinklalapį galima sukurti per kelias valandas ar dienas. Reikia turėti aiškią internetinės svetainės plėtros viziją, patirties, įgūdžių, daug laiko, kolegų (partnerių) ar draugų, kurie padėtų kurti tinklalapį, motyvacijos ir, be abejo, reikia turėti tikslą.

Išvardijau nemažai reikalavimų (raktažodžių), pagal kuriuos turėtumėte orientuotis kurdami tinklalapį, tačiau vien mano tuščiažodžiavimas nepadės jums sužinoti apie interneto svetainių kūrimo aspektus, todėl šiame straipsnyje aptarsiu kiekvieną sritį atskirai, pasidalinsiu savo patirtimi ir nukreipsiu jus teisinga linkme.


Naujausi komentarai straipsniuose

autorius roki60

Tikrai geras straipsnis, kaip ir visi kiti e-grafika.lt straipsniai.

autorius Imaginative

Ačiū už strapsnį, pagilinau savo CSS žinias. smile

autorius Demo

Puikus straipsnis, kaip tik man - naujokui smile.

autorius madman333

aciu supratau smile

autorius dofka

Puikus straipsnis . turek tu man tiek kantrybes parasyt toki ;D puse perskaiciau manau pradziai uzteks ;P