web.hc.lv - vortāls tīmekļa veidotājiem: Raksti http://web.hc.lv/dizains/raksti/?rss=1/ Raksti par mājaslapu dizainu lv 2007-2017, web.hc.lv web.hc.lv 60 http://www.hc.lv/inc/baners/hclv_baner_small.gif web.hc.lv - vortāls tīmekļa veidotājiem http://web.hc.lv/ web.hc.lv - vortāls tīmekļa veidotājiem Sun, 22 Oct 2017 22:23:34 +0300 2 3 4 5 6 Kā mainīt jebkuras lapas saturu savā pārlūkā Dizains Raksti http://web.hc.lv/dizains/raksti/ka-mainit-lapas-saturu/ http://web.hc.lv/dizains/raksti/ka-mainit-lapas-saturu/ Sun, 28 Feb 2010 20:43:57 +0200 web.hc.lv - vortāls tīmekļa veidotājiem Nepieciešams ātri pamainīt jebkuras mājaslapas izskatu, pirms uztaisīt tās ekrānšāviņu? To var izdarīt dažās sekundēs.

Viss, kas jādara - jāatver nepieciešamā mājaslapa un pārlūka adreses lauciņā jāievada sekojošs javascript kods:

javascript:document.body.contentEditable='true';document.designMode='on';void0

Pēc tam tur pat pārlūkā var dzēst vai mainīt mājaslapas saturu.

Mājaslapas labošana

Diezgan ērti, ja nepieciešams ātri paskatīties, kā mājaslapa izskatīsies ar labotu saturu, vai vienkārši vēlaties palielīties draugu priekšā.

]]>
Lorem Ipsum - maketēšanas "zivs" Dizains Raksti http://web.hc.lv/dizains/raksti/lorem-ipsum/ http://web.hc.lv/dizains/raksti/lorem-ipsum/ Fri, 10 Jul 2009 02:12:25 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Bieži vien veidojot dizainu vai maketu vai paraugu, kad vēl nav īstā ne teksta, ne vizuālā materiāla rodas jautājums - ko lai ieliek?! Variācijas par šo tēmu dažādas. Kāds saraksta xxx, kāds iekopē rakstu no delfiem, kāds izgrābj tekstu sazin’ no kurienes. Bet izrādās arī par to ir padomāts. Saucas – Lorem Ipsum.

 

lorem ipsumKo tad īsti varam lietot:

1. Var sarakstīt bezjēdzīgu burtu kombināciju. Vēlams dažādu garumu, lai varētu novērtēt rindas laušanos. Agri vai vēlu, šāda bezjēdzīga rakstīšana apniks un teksts tiks kopēts, kā rezultātā kopējais iespaids par darbu nebūs visnotaļ labs.

2. Paņemt gatavu tekstu, teiksim, no delfiem. Maza problēmiņa – ne visi teksti derēs. Teiksim tā – par mākslu, mūziku vai "neko" būs labs. Bet... lai arī darba vērtētājs sapratīs jūsu domu un vēlmi maketā iestrādāt laikmetīgās iezīmes, var gadīties, ka pašam tekstam tiks pievērsts vairāk uzmanības nekā pašam maketam.

3. Ņemt visnotaļ bezjēdzīgu tekstu, piemēram:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Klorem ipsumurš bija tas "umņiks" kur sāka lietot šo savā ziņā bezjēdzīgu tekstu nav zināms. No wikipedia.org zināms vien tas, ka šo tekstu sāka lietot ap 1960. gadu kāds izdevējs, savukārt citā interneta vietnē rodam arī daudz senākas šī teksta lietojuma saknes, proti, 1500. gads.

Šī teksta izcelsmi identificē ar Cicerona darbu – apcerējumu par labā un ļaunā robežām. Darbs, uzrakstīts 45. gadā pirms mūsu ēras. Pastāv versijas, ka šis vai līdzīgs teksts bija kļuvis par industriālo standartu labu laiku atpakaļ. Pat vēl vairāk, šo tekstu kā šablonu izmantoja arī pirmās maketēšanas (desktop publishing) programmas, piemēram, Aldus PageMaker, nieka 1985. gadā. Skaidrības labad gribu piebilst arī to, ka Aldus 1994. gadā nopirka Adobe.

Teksts Lorem Ipsum pa šiem gadsimtiem paspēja mazlietiņ izmainīties (varbūt arī apzināti?). Sākotnēji tas izskatījās šādi:

dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

Interesanti fakti:

a) Krievu valodā šādam "feikam" tekstam ir savs apzīmējums - "Рыба"

Рыбу можно вставлять, использовать, вешать, заливать, показывать, запихивать... Словом, с ней можно делать что угодно, лишь бы эскиз был максимально похож на готовую работу.

b) Angļu valodā sinonīmi šādam tekstam (lai pateiktu pieklājīgi):

  • blind text
  • dummy text
  • greeked text
  • placeholder text
  • mock content
  • filler text

c) Firefox ir addons, kas ģenerē Lorem Ipsum;

d) Pēc Artēmija Ļebedeva domām, šādu abstraktu tekstu būtu jāsaraksta dizainerim pašam, jo gluži bezjēdzīgs tas nebūs un tam jābūt tādam, lai klients nevarētu atteikt dizainu.

(Raksts pārpublicēts no IINUU bloga ar autoru piekrišanu.)

]]>
Cilvēka uztveres īpatnību pielietošana veidojot mājaslapas Dizains Raksti http://web.hc.lv/dizains/raksti/uztveres-ipatnibu-pielietosana/ http://web.hc.lv/dizains/raksti/uztveres-ipatnibu-pielietosana/ Thu, 17 Jan 2008 16:08:59 +0200 web.hc.lv - vortāls tīmekļa veidotājiem Veidojot mājaslapas, bieži vien dizains un struktūra tiek izvēlēts vadoties pēc skaistuma vai ērtuma principa. Tomēr, ir svarīgi zināt dažas lietas par cilvēka uztveri, lai mājaslapu izveidotu viegli uztveramu.
Domāju, ka izlasot šo rakstu, beigās radīsies tā pazīstamā sajūta – „tieši tā es parasti arī daru”. Jā, katram cilvēkam ir uztvere, arī tam, kas veido mājaslapu, tāpēc parasti jau intuitīvi lapa tiek veidota balstoties uz cilvēka uztveres īpatnībām. Taču tās nav zināšanas. Zināšanas ir tās, ko var pamatot ar vārdiem, tāpēc varbūt tieši šis raksts palīdzēs izzināt pamatojumu daudzām it kā pašsaprotamām lietām.

Ir viena ļoti būtiska cilvēka uztveres īpatnība – normāli cilvēks uztver ne vairāk par 7-9 objektiem vienlaicīgi.

Kā to var izmantot mājaslapas veidošanā?

Pieļauju, ka šajā lapā ir vairāki tūkstoši objekti. Pat katrs burts un katra pieturzīme ir atsevišķs objekts. Palūkosimies uz vārdiem. Parasti tie nav garāki par 9 burtiem. Vārdus labs lasītājs uztver jau kā vienotu veselumu, nevis burto. Garākie vārdi tiek izburtoti. Līdzīgi ir arī ar teikumiem – skaitās slikts stils veidot pārlieku garus teikumus. Arī garus tekstus ir pieņemts sadalīt rindkopās vieglākai uztverei. Kā redzat, visas šīs diezgan pašsaprotamās lietas, kas ir izkristalizējušās jau kopš seniem laikiem, pamatojas uz cilvēka uztveres īpatnībām.

Vārds

Ja ir vairāk objektu, kā cilvēks var vienlaicīgi uztvert, tad tie ir jāgrupē un būtiskākais jāizceļ, jo sagrupētus objektus cilvēks uztver kā vienotu veselumu. Piemēram, burti tiek grupēti vārdos, vārdi teikumos, teikumi rindkopās. Virsraksts tiek izcelts.

Sagrupēt objektus var tos atdalot ar strīpu, attēlu, izmantojot krāsas vai izmērus, vienojošus elementus un citos veidos. Ļoti labi var izmantot kontrastus (izmēra, krāsas u.c.), īpaši lai izdalītu grupas svarīgāko elementu (piemēram, raksta virsrakstu).

Pētījumi liecina, ka visērtāk ir lasīt apmēram 35 līdz 65 simbolu garas rindas.

  • Setting Type #1 Avoid setting type in lines of more than sixty-five characters. Longer lines cause the reader to "double," or read the same line twice.
  • Setting Type #2 Avoid setting type in lines of less than thirty-five characters. Shorter lines cause sentences to be broken and hard to understand.


Izprotot, ka cilvēks vienlaicīgi var uztvert 7-9 objektus, nav grūti šādu rezultātu izsecināt pašiem – paņemam 7-9 vārdus un saskaitam tajos burtus, lai iegūtu apmēram to pašu rezultātu.

Teikums no astoņiem vārdiem un četrdesmit deviņiem simboliem.


Ļoti jāuzmanās ar pārlieku lielu objektu piesātinātību. Ļoti bieži, palielinoties mājaslapas saturam un apjomam, mājaslapas veidotāji aizmirst, ka lietotājs, atšķirībā no paša veidotāja, nezin no galvas visu sadaļu nosaukumus, lai izprastu, kur meklēt nepieciešamo informāciju. Ja būs pārāk daudz sadaļas vienā līmenī, tad lietotājs pat neizlasīs ne pusi no sadaļu nosaukumiem, bet drīzāk pameklēs kādu citu lapu, kur informācija būs vieglāk atrodama. Tieši tas pats attiecas arī uz citiem objektiem mājaslapā.

Konkrēts piemērs no pieredzes. Veidojot www.hc.lv un web.hc.lv, tehniski izvēlnē vienā līmenī ir iespējams izvietot ne vairāk par 11 sadaļām (pretējā gadījumā tās sadalās divās rindās). Pateicoties kam, palielinoties sadaļu skaitam, tās bija nepieciešams grupēt, kas tikai nāca par labu lietotājiem.

web.hc.lv izvēlne

Pareizi būt bijis, ja sadaļas tiktu sagrupētas pamatojoties nevis uz tehniskajiem ierobežojumiem, bet gan pamatojoties uz cilvēka uztveres īpatnībām. Kaut arī rezultāts tas pats – pamatojums izrādījās nepareizais.

Tas izraisīja citu būtisku problēmu, kura palika kādu laiku nepamanīta un neatrisināta. Tā kā sākumlapā parādās fragmenti no pēdējiem rakstiem un ziņām katrā sadaļā, tad palielinoties sadaļu skaitam, tā palika tik neuztverama, ka lietotāji tajā nespēja orientēties - neatrada sev interesējošās ziņas, kuras tur atradās. Protams, ka pirmā reakcija bija vainot „neuzmanīgos” lietotājus, kuri pat nepacenšas iedziļināties lapas saturā.

Pēc kārtīgas apdomāšanas kļuva skaidrs – sākumlapā ir tik daudz teksta, ka pat lapas veidotāji to nespētu visu izlasīt. Situācija tika risināta samazinot ievietoto teksta fragmentus, atstājot tikai pašu būtiskāko informāciju, kā arī vairāk grupējot objektus izmantojot lielākas atstarpes starp tiem, dažus vizuālos elementus, kā arī krāsu un izmēru kontrastus. Papildus tika izvākti visi liekie un mazāk nozīmīgie elementi – apmeklētāju skaitītāji, vārdi „lasīt vēl” zem teksta fragmentiem un citi. Noteikti, ka daudzi te pamanīs Web 2.0 tendences. Taču rezultāts tika sasniegts - sākumlapa kļuva daudz uztveramāka.

HC.LV ekrānšāviņš
HC.LV sākumlapas ekrānšāviņš - spiediet uz attēla, lai aplūkot lielākā izmērā.
(Attēlā ir izpudināts tas lauks, kas nav redzams uzreiz atverot lapu)

Apskatiet savu lapu – vai tā nav pārblīvēta ar objektiem? Vai tajā būtiskākais ir viegli uztverams? Kā objekti ir sagrupēti?

Mājaslapas saturam jābūt ne tikai kvalitatīvam, bet tam ir jābūt arī kvalitatīvi pasniegtam. Līdzīgi kā labā restorānā – ne tikai garšīga maltīte, bet arī patīkama apkalpošana.
]]>
Jauniešu kultūras portāla HC.LV logo veidošana Dizains Raksti http://web.hc.lv/dizains/raksti/hc.lv-logo-izveidosana/ http://web.hc.lv/dizains/raksti/hc.lv-logo-izveidosana/ Thu, 08 Nov 2007 00:15:13 +0200 web.hc.lv - vortāls tīmekļa veidotājiem Neliels raksts par to, kā tika veidots Jauniešu kultūras portāla HC.LV logo.

HC.LV logo

Ievads

Saistībā ar iepriekšējo rakstu par logo to saistību ar mājaslapas identitāti, kāds mans draugs, ar kuru kopīgi uzsākām veidot Jauniešu kultūras portālu HC.LV, palūdza, lai es aprakstu kā tika veidots HC.LV logo. Pašreiz viņš pats studē Anglijā, Braitonas Universitātē grafisko dizainu, un par situāciju mūsu valstī izteicās šādi:

vērojot kā uk tiek viss pamatots un researchots un kā šeit prasa dažādas starpstadijas atrādīt/attaisnot, tad liekas, ka lv lielākajai daļai logo nav kārtīgi izpētīts pats koncepts, jo var labāk...


Tā kā Jauniešu kultūras portāla HC.LV logo tika sākts veidots diezgan sen - nu jau gadus 3 atpakaļ, tad man nācās pameklēt saglabātās diskusijas un citus materiālus, kas vēl ir saglabājušies no tiem laikiem, tāpēc brīdinu uzreiz, ka iespējamas kādas neprecizitātes, jo ne viss ir saglabājies.

Vēsture

Runājot par logo izveidi Jauniešu kultūras portālam HC.LV, nevar noklusēt to, kā izveidojās šis portāls. Lieta tāda, ka pirms Jauniešu kultūras portāla HC.LV, zem domēna hc.lv (toreiz arī zem hardcore.lv) darbojās mājaslapa par hardcore punk mūzikas stilu un ar to saistītu kustību Latvijā. Lai nebūtu jāraksta garais „hardcore”, pamatā tika izvēlēts vispārpieņemtais saīsinājums "hc", no kura tad arī izveidojās domēna vārds "hc.lv". Šādi lapa pastāvēja kādu laiku, varbūt pāris gadus. Pēc tam es pieņēmu lēmumu šo lapu slēgt uz nenoteiktu laiku, jo kaut arī lapa bija salīdzinoši apmeklēta (dienā 100-300 apmeklētāji), reāli palīdzēt tās veidošanā neviens īpaši nevēlējās. Es arī pats drīz vien emigrēju uz Kanādu.

Kanādā izlēmu veidot mājaslapu, kas būtu vairāk kā portāls, aptverot daudz plašākas tēmas, nevis tikai hardcore stila mūziku Latvijā, kā arī kuras darbības pamatā būtu jauniešu brīvprātīgais darbs un pašiniciatīva, kas Kanādā ir diezgan pašsaprotama lieta, atšķirībā no Latvijas. Turklāt portāls būtu tikai viena no šī brīvprātīgā darba un pašiniciatīvas izpausmēm.

Tika izstrādāta aptuvenā koncepcija, kā arī sākts domāt par logo izveidi, kā arī bija dažas idejas, kā varētu veidot lapas izklājumu, kas praktiski tika veidots un pārveidots man atgriežoties Latvijā. Lai gan lapas izklājums jau ir piedzīvojis neskaitāmas izmaiņas un piedzīvos tās vēl, logo praktiski pēc izstrādes līdz šim brīdim nav mainījies, saglabājot lapas identitāti.

Iespējams, ka toreiz tika pieļauta kļūda saglabājot to pašu domēna nosaukumu "hc.lv", taču tajā brīdī šķita, ka plusu ir vairāk kā mīnusu:
  • zināmā sabiedrībā tas jau bija atpazīstams
  • tas ir ērti uzrakstāms
  • bija jau diezgan daudz saišu uz šo vietni, kas palīdzēja attīstīties portālam
  • „hc” tikpat labi var nozīmēt arī „hockey club” vai „homo culturalis” kā „hardcore
Īsāk sakot, balstoties uz vecajiem pamatiem tika sākts pilnīgi jauns projekts, kurā iesaistījās aktīvi jaunieši, daļa no kuriem vēl aizvien turpina brīvprātīgi un bez atalgojuma veidot šo portālu.

Tika izlemts atmest pieņemto saistību ar „hardcore”, un veidot hc.lv kā zīmolu, ar savu identitāti un atpazīstamību. Kā saka – lasām „hc.lv”, domājam jauniešu kultūras portālu. Līdzīgi, kā ar "draugiem" tiek saprasts sociālais tīkls draugiem.lv.

Zvaigznes koncepcija logo

Bija skaidrs, ka viens no logo elementiem varētu būt zvaigznes simbols, kas tika izmantots arī vecajā hc.lv versijā. Kā zināms, zvaigzne apzīmē ko spožu (skatuves zvaigzne), jaunu (Bētlemes zvaigzne), revolucionāru (asociācijas ar Kubu un Če Gevaru).

HC.LV logo zvaigzne
Zvaigznes simbols no vecās hc.lv versijas

Logo izmantotais zvaigznes simbola pamatā ir stilizēts attēls, kurš tika izveidots uzliekot zvaigznes trafaretu un ar krāsas baloniņu tam pārpūšot dažas reizes pāri. No vienas puses tas simbolizē jauniešiem tik ļoti tuvais dumpinieciskuma izpausmes, kuras bieži vien atspoguļojas dažādos grafitti un uzpūstos trafaretos uz māju sienām. No otras puses interesanto efektu veido tas, ka logo veido nevis pati zvaigzne, bet tas, kas paliek pāri – tiek izmantots pretstats vai alternatīva.

Portāls tika veidots mūsdienu aktīviem jauniešiem, piedāvājot tiem dažādas iespējas izpausties un izrādīt iniciatīvu – gan iesaistoties portāla veidošanā, gan piedāvājot informāciju par citām iespējām izpausties. Tas ir alternatīvs pretstatā citiem komerciālajiem projektiem (visi Jauniešu kultūras portāla ienākumi tiek ieguldīti portāla un ar to saistīto projektu attīstībā un labdarībā).

Tāpēc nebaidīšos teikt, ka šis portāls ir savā ziņā tiešām revolucionārs, jauns un alternatīvs, ko arī simbolizē logo izmantotais zvaigznes simbols. Tajā pašā laikā zvaigznes simbols logo ir smalki izstrādāta detaļa, kas liecina par to, ka pievēršam uzmanību arī smalkām detaļām.

Variācija par zvaigzniSātanistu simbolsVeidojot šo zvaigznes simbolu bija diezgan daudz variācijas. Bija jāpanāk, lai būtu skaidri saskatāma zvaigzne, tajā pašā laikā līnijas nedrīkstēja būt pārāk tievas, jo tās izplūstu un saplūstu, kā arī šis simbols nedrīkstēja asociēties ar sātanisma simbolu, savukārt, ja izmantotu pārāk biezas līnijas, tad vai nu zvaigzne nebūtu saskatāma, vai arī šīs biezās līnijas izskatītos vienkārši prasti, neveidojot nekādu formu. Turklāt bija būtiski izvēlēties pareizo līniju slīpumu, lai tas izskatītos dabīgs un pašsaprotams, vienlaicīgi nesamazinot redzamās zvaigznes efektu. Ilgi eksperimentējot, beigu beigās tika atrasts zelta vidusceļš.

Jaunā zvaigznes simbolā tika samazinātas krāsu pārejas, lai tas izskatītos stingrāks, kā arī būtu mazāk problēmas ar logo attēlošanu.

Logo krāsas

Cita soma Logo krāsu salikums tika izvēlēts tāds, lai tas atspoguļotu zīmola hc.lv pamatvērtības – kvalitāti, dinamiskumu, stabilitāti, pozitīvismu, atvērtību jaunām idejām. Bija skaidrs, ka mājaslapas fonam jābūt ir baltam, jo tā ir ne tikai klasiska, pozitīva, gaiša krāsa, bet tā arī ir no lietojamības viedokļa vislabākā krāsa, jo vismazāk nogurst acis lasot tumšus burtus uz balta fona. (Ne par velti grāmatas drukā uz balta papīra, kā arī pārsvarā visi lielākie portāli ir izvēlējušies balto krāsu kā fona krāsu.) Pašam logo bija jārada gaišuma un viegluma iespaids.

Tika izvēlēta arī sarkanā krāsa, kas kā zināms ir ne tikai diezgan revolucionāra, bet arī pati košākā krāsa. Sekojot Yahoo! piemēram, tika veikts uzstādījums, ka citi mājaslapas elementi nevar saturēt sarkano krāsu, lai logo vairāk izceltos lapā.

Yahoo! ekrānšāviņš
Yahoo! ekrānšāviņš
(spied uz bildi, lai to aplūkotu lielākā izmērā)

Bez šaubām iepriekšminēto iemeslu dēļ mājaslapas burtiem jābūt klasiski melniem, vai vismaz tumši pelēkiem. Tātad arī melnā krāsa tika ieskaitīta krāsu gammā.

SomaLai izvēlētos atlikušās krāsas, vēroju visu, kas man apkārt. Beigās konstatēju, ka man ļoti patīk kā izskatās krāsu sakopojums vienai no manām somām, kur tika izmantota piesātināta sarkana krāsa, melna krāsa un pelēki akcenti. Pārliecību, par šo krāsu salikumu pastiprināja vēl kāds veikalā redzēts balts t-krekls ar zīmējumu, kurā tika izmatotas melna, pelēka, sarkana un pelēcīgi zila krāsa, kas kopā izskatījās ļoti labi. Protams, ka bija arī citas iespējamie krāsu salikumi, taču tieši šī krāsu gamma vislabāk atbilda jaunā projekta koncepcijai.

Eksperimentējot ar logo skicēm pelēcīgi zilā krāsa vismaz no logo krāsu gammas tika izslēgta, jo tā padarīja logo pārāk raibu, kas bojāja tā stabilitātes iespaidu. Patiesībā arī nebija īsti kur to krāsu izmantot, jo papildinot logo ar papildus elementiem tas vairs neizskatījās tik pārliecinošs, bet vairāk tāds sadrumstalots.

Krāsu gamma
Iespējamā krāsu gamma

Krāsu pamatgamma tika izvēlēta no web safe krāsām, lai pēc iespējas mazāk samazinātu toņu deformācijas dažādos ekrānos (PDA, mobilajos tālruņos u.c.)

Logo teksta daļa

Neveiksmīgi HC.LV logo Sākotnēji bija doma veidot portālu no vairākiem apakšdomēniem, katrs par savu tēmu, piemēram muzika.hc.lv, literatura.hc.lv u.c., bet beigās tika izlemts tomēr visu veidot kopā, jo šīs tēmas tomēr ir visai saistītas, atstājot iespējas nākotnē tomēr veidot subdomēnus par atsevišķām nesaistītām tēmām (pašlaik jau ir izveidots web.hc.lv, ir doma nākotnē izdot zīnu/žurnālu zem nosaukuma zine.hc.lv, kā arī dažas citas idejas). Tāpēc arī sākotnēji logo skices tika veidotas izmantojot dažādus subdomēnus.

Bija diezgan skaidrs, ka uzrakstam „hc.lv” ir jābūt vienkāršam, skaidram, izlasāmam, stabilam un pamanāmam. Eksperimentējot tika izvēlēts pats parastākais fonts „Arial”, jo tas palīdz veidot vienkāršus un stabilus burtus, kas tajā pašā laikā ir viegli salasāmi, bet nav pārāk smagnēji.

Logo kopskats

Kombinējot dažādi iegūtos elementus – uzrakstu „hc.lv”, zvaigzni, un apakšdomēna nosaukumu, kas atradīsies pirms uzraksta „hc.lv”, beigās tika izvēlēti daži varianti. No tiem atkrita variants ar zvaigzni starp apakšdomēna nosaukumu un hc.lv, jo vizuāli šāds logo diezgan stipri atgādināja e-pasta adresi. Pašās beigās vēl skaidrības labad tika iekombinēts klāt uzraksts „Jauniešu kultūras portāls”, jo „hc.lv” tomēr nav diezgan pašsaprotamas uzraksts. Arī tam tika piemērots „Arial” fonts, bet tika piestrādāts pie atstarpēm starp burtiem, lai tās būtu vienmērīgākas. Protams, ka tika noteikts arī cik lielam jābūt baltajam logo fonam, gadījumā ja logo tiks izvietots uz citas krāsas fona.

HC.LV logo galējais variants
HC.LV logo galējais variants

Kopsavilkums

Kopumā logo tika veidots un pārdomāts apmēram 3 mēnešu garumā (protams, paralēli plānojot citas lietas). Tagad, pēc apmēram 3 gadiem, varu pateikt, ka kopumā esmu ļoti apmierināts, kā izskatās logo. Visefektīvāk (pateicoties smalki izstrādātajai zvaigznei), tas protams izskatās lielā izmērā, taču arī mazā izmērā to ir viegli saskatīt un arī atpazīt. Atzīšos, ka vienreiz pats izbrīnījos, ka bez grūtībām garāmejot atpazinu uz trotuāra guļošā bukletā Jauniešu kultūras portāla HC.LV logo, kas bija apmēram centimetra platumā, iepriekš par to nezinot.

Baneris ar HC.LV logo
Reklāmas baneris ar HC.LV logo


No iespējams sliktajām logo īpašībām varbūt var minēt to, ka samazinot paliek neskaidrs uzraksts „Jauniešu kultūras portāls”, kuru nepieciešamības gadījumā var bez pūlēm izdzēst, nenodarot lielu skādi pašam logo.

Logo pēc izveides diezgan viegli bija pārveidot, lai tas atbilstu nepieciešamajiem izmēriem, jo ne vienmēr garuma un platuma attiecība ir tāda, kādu mēs to vēlamies.

88x31 HC.LV baneris
88x31 baneris

125x125 HC.LV baneris
125x125 baneris

160x60 HC.LV baneris
160x60 baneris

468x60 HC.LV baneris
460x60 baneris

Cita problēma bija tas, ka logo sākotnēji tika veidots Adobe Photoshop programmā, līdz ar to tas netika saglabāts vektoru formātā, kas palīdzētu logo palielināt un samazināt bez kvalitātes zudumiem. Vēlāk logo tika pārzīmēts Adobe Ilustrator programmā vektoru formā, atrisinot arī šo problēmu.

Nobeigumā

Laika gaitā ir radušās arī dažas izmaiņas Jauniešu kultūras portāla logo – baltā fona krāsa vairs nav tik obligāta, to tāpat reti kurš logo publicētājs ievēroja, un, ja arī ievēroja, tad bieži vien baltais fons tika apgraizīts neatbilstoši. Turklāt veidojot dizainu t-kreliņiem konstatējām, ka logo pat ļoti labi izskatās arī uz melna fona.

T-krekli ar HC.LV logo
T-krekli ar HC.LV simboliku

Iespējams, ka arī uzrakstā „Jauniešu kultūras portāls” turpmāk tiks vairāk atdalītas garumzīmes un jumtiņš virs „š”, no pašiem burtiem, jo samazinot logo šīs diakritiskās zīmes pārāk saplūst ar burtiem.

web.hc.lv logoKā redzat arī web.hc.lv logo ir veidots uz Jauniešu kultūras portāla HC.LV logo bāzes, saglabājot to pašu identitāti. Tuvākajā laikā arī tikko nodibinātajai biedrībai portāla pārstāvēšanai plānojam simbolikā izmantot zvaigznes simbolu no logo, kurš vispārīgi ir ieguvis tik pozitīvu atzinību no jauniešu un portāla apmeklētāju puses, ka mums ir doma veidot krekliņus ar šo simbolu un auduma iepirkuma kulītes.

Jauniešu kultūras portāls HC.LV turpina savu un zīmola attīstību un atpazīstamību. Pašlaik to ik dienas to apmeklē ap 2000 apmeklētāju, un šis skaitlis nepārtraukti aug, lielākā daļa no apmeklētājiem ir jaunieši līdz 25 gadiem. Portālā tiek organizēti konkursi, koncerti un citas aktivitātes. Ir tikko nodibināta biedrība „Homo Culturalis” (saīsinājumā – HC), kas pārstāvēs Jauniešu kultūras portālu HC.LV, kas atvieglos dažādas juridisku un finansiālu lietu kārtošanu. Pašlaik brīvprātīgi portāla veidošanā ir iesaistīti vairāk kā 10 cilvēki un iespējams, ka tas ir visapmeklētākais nekomerciālais portāls Latvijā.

Ja kāds vēl neko nav dzirdējis par Jauniešu kultūras portālu HC.LV, tad tagad es ar lielu pārliecību varu teikt – jūs noteikti dzirdēsiet! Tas kļūst arvien atpazīstamāks, un ļoti būtisku nozīmi Jauniešu kultūras portāla HC.LV identitātes veidošanā un atpazīšanā rada tieši logo.
]]>
Logo - mājaslapas identitāte Dizains Raksti http://web.hc.lv/dizains/raksti/logo-identitate/ http://web.hc.lv/dizains/raksti/logo-identitate/ Thu, 25 Oct 2007 19:54:46 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Logo ir viens no lapas identitātes veidošanas pamatelementiem. Pateicoties logo, uzmetot tikai paviršu skatienu uz lapu, var pateikt, kas tā ir par lapu, no kuras mājaslapas un par ko tā ir.
Logo ietekmē mājaslapas apmeklētāja sajūtas par to, kas atrodas mājaslapā, cik viņš uzticas mājaslapā atrodamajai informācijai, ko viņš vispār sagaida no mājaslapas. Mājaslapas dizainu parasti veido balstoties uz logo dizainu, lai nesanāktu tā, ka logo neiederas lapas dizainā.

Logo ir ne tikai jāizskatās labi pašam par sevi, bet tam ir jāizskatās labi arī dažādās citās situācijās – teksta vidū, uz blankām, uz reklāmas baneriem, citās mājaslapās, uz dažādiem foniem utt. Logo, bez šaubām, jāsaskan ar kopīgo uzņēmuma stilu.

HC.LV logo izmantošana

Jauniešu kultūras portāla HC.LV logotips tiek izmantots dažādos veidos.

Turklāt, lai zīmols, ko „pārstāv” logotips veidotu uzticamību, ir būtiski to izveidot tādu, lai logotips nebūtu jāmaina, jo mainot logo zūd zīmola atpazīstamība.

Kā redzat, logo izveide ir ļoti atbildīgs darbs. Ne jau par velti logo, kurš bieži vien neizskatās pārāk sarežģīts, izstrādes izmaksas tiek mērītas simtos un reizēm pat tūkstošos latos.

Var veidot logo vienkārši – izdomāt 3 variantus, kas izskatās interesanti/forši un izvēlēties skaistāko. Jāatzīst, ka šāda pieeja nav pārāk profesionāla. Profesionāļi dizaineri logo izstrādi (tāpat kā jebkuru citu dizainu) sāk ar koncepcijas izstrādi, līdzīgi kā mājaslapas izstrādi sāk ar tehniskā uzdevuma izveidošanu.

Krāsas vīriešiem un krāsas sievietēmPirmām kārtām ir jāatbild uz dažiem pamatjautājumiem:
  • Kādai auditorijai ir paredzēta mājaslapa? (Vecums, demogrāfiskā situācija utt.)
  • Kāda informācija tiks ievietota mājaslapā?
  • Kādu iespaidu mēs gribam, lai mājaslapa atstātu uz apmeklētāju?
  Tikai tad, kad ir atbildēts uz šiem jautājumiem, var ķerties klāt pie nākamā logotipa izstrādes posma.

Piemēram, izvēlēties logo krāsas. Var iet vieglo ceļu - izvēlēties skaistu krāsu gammu un veidot logo un var iet pareizo ceļu - ņemt vērā krāsu īpatnības un krāsu nozīmi. Ir krāsu gammas, kuras atstāj uz cilvēku rotaļīgu iespaidu, ir tādas, kuras atstāj stabilitātes iespaidu, ir tādas, kuras atstāj viegluma iespaidu. Protams, ka nebūs labi veidot mājaslapu bērniem, izmantojot korporatīvos krāsu toņus (zils, melns, pelēks). Tas pats attiecas arī uz mājaslapas logo. Ir skaidrs, ka bērnus daudz labāk piesaistīs košs un krāsains logo.

IBM logoIr veikti pētījumi, ka vīrieši biežāk izvēlas tumšās un neitrālās krāsas, kamēr sievietēm vairāk patīk gaišas un pasteļkrāsas. Ļoti svarīgi ir neaizmirst par krāsu nozīmi dažādās kultūrās. (Starp citu, laba, interaktīva pamācība par krāsām ir pieejama te: poynterextra.org/cp/)

Arī logo stilam ir nozīme. Ja mēs vēlamies, lai logotips veidotu stabilitātes sajūtu, nepieciešams izvēlēties stabilas, stingras līnijas. (Piemēram, IBM logo.) Ja vēlamies panākt dinamiskumu, tad jāizvēlas slīpas, liektas līnijas. Ņemot vērā šīs un citas īpašības ir vieglāk izvēlēties fontu, ko izmantot logotipā.

Veidojot logo, vajag ņemt vērā arī to, ka nevajag izmantot lielus elementus kopā ar pavisam sīkiem, jo samazinot šādu logo, sīkie elementi izplūdīs.


Archija webbloga logotips

Archija webloga logo samazinot izplūst.


Logo dizains ir jāveido balstoties uz koncepciju, nevis balstoties uz to, kas šķiet smukāks.

Piemēram, par to, kāda ir Parex bankas logo koncepcija, var izlasīt rakstā "Kā pozicionēt Parex". Turpat ir pieejami arī citi interesanti raksti par logo, no kuriem var smelties iedvesmu logo veidošanai.

Grāmatā "Usability: The site speaks for itself" ir nodaļa par mājaslapas economist.com, kas ir ietekmīgā žurnāla "The Economist" tīmekļa pārstāvniecība, redizainu. Vienu daļu no šīs sadaļas var izlasīt Digital Web Magazine (angliski), bet citu daļu, saistībā tieši ar economist.com logo, esmu pārtulkojis latviski:

Identitātes definēšana

Economist.com tika veidots ar noteiktu mērķi. Mājaslapai bija jāatspoguļo drukātais izdevums, to nekopējot, kā tas tika darīts iepriekš. Economist.com bija paredzēts eksistēt pašam par sevi kā atsevišķam produktam no The Economist zīmola. Economist.com attīstītu savu saturu, dizainu un ienākuma avotus, tajā pašā laikā katru nedēļu pārpublicējot rakstus no drukātās versijas. Online komanda bija brīva izvēlēties unikālu mājaslapas stilu, ja vien tas saglabāja paša "The Economist" autoritatīvo, inteliģento un neatkarīgo dabu, un ļāva "The Economist" lasītājiem mājaslapu izmantot kā žurnāla online versiju, ja tie to vēlēsies. No dizainera viedokļa šie ierobežojumi nozīmēja zināmu izaicinājumu: kā lai economist.com parāda savas stiprās puses, kā "The Economist" rakstus, tajā pašā laikā vēl aizvien pastāvot kā neatkarīga vienība? No otras puses puses, redizains bija atkarīgs no mūsu iespējām satvert "The Economist" tiešo, spēcīgo un ekskluzīvo dabu. Mēs neanalizējām drukātā izdevuma fontu vai toreiz melnbalto drukātā izdevuma izklājumu. Koncentrējoties uz mērķiem, nevis uz to, kas bija iepriekš, mājaslapa bija gatava saņemt jaunu redzējumu bez ierobežojumiem.

The Economist logoTie paši principi tika pielietoti mājaslapas identitātei. Economist.com bija jāattīstas kā unikālam produktam, un tam bija nepieciešams atšķirīgs logo no "The Economist". Tas veidoja zināmu izaicinājumu: kā mēs sauksim mājaslapu, un kā mēs to vislabāk varētu reprezentēt? Menedžments ātri vien izvēlējās izmantot standarta "nosaukums-plus-dotcom", izsecinot, ka šis nosaukums būtu loģisks un aprakstošs, kā arī tas būtu jauks papildinājums esošajam "The Economist" zīmolam.

Logo pamatideja radās diezgan ātri, tiko bija izlemts izmantot "vecākā" logo stiprās puses.  Acīmredzams solis būtu saglabāt stingro sarkano krāsu, bet ko tālāk? Mēs eksperimentējām ar vairākiem prototipiem, izmantojot dažādus fontus, mazāk sarkano, idejas no āras (ziņu dienesta klišeja - zemeslode bija viens no favorītiem sākumposmā) - tie bija interesanti, bet ne īpaši veiksmīgi.


Neizdevušies logo prototipi

Daži neizdevušies logo prototipi.


Veidojot logo dizainu, mums bija ekstensīvas iekšējās debates par pirmo burtu "e"; Graham Barron, mūsu jaunās-ēras-biznesa attīstības vadītājs lobēja mazo "e" iekš "economist.com", lai saglabātu Interneta industrijas stilu un vizuālo saskaņu ar  URL adresēm, kurās parasti visi burti ir mazie.

economist.com logoGalu galā, vienkāršākais izrādījās labākais. Es saspiedu "The Economist" parasto taisnstūraino logo garākā šaurākā taisnstūrī, un izmantoju mazliet atšķirīgu fonta variantu no "The Economist" fonta, lai ierakstītu parastu "Economist.com". Pirmais burts palika lielais, lai saglabātu kopējo zīmola identitāti.

Šis logo, kas bija diezgan tieša "The Economist" logo interpretācija, atrada plašu, lai neteiktu pārsteidzošu, atbalstu.

"The Economist" un economist.com logo tiek izmantots speciāli veidotu fontu, nosauktu atbilstoši par Ecotype. Uz redizaina laiku "The Economist" fontu ģimene ietvēra diezgan plašu stilu izvēli; tas, ko mēs izmantojām mūsu logo un atbilstošajos materiālos, EcoDisplay601, bija ar stingrākiem apakšējiem uzsvariem (downstrikes) un plašāks, kā tradicionālais parastā teksta fonts. Tam arī anti-alias efekts bija labāks kā Ecotype, kas labāk izskatās, kad ir saglabāts GIF formātā. Pagāja daži mēneši vieglas eksperimentēšanas, pirms logo ieguva tā galīgo izskatu ar noteiktām proporcijām (3,75:1 ar uzstādītiem sarkanā laukuma ierobežojumiem) un krāsas izvēli, kuru saglabājām koši sarkanu (RGB 255/0/0), lai samazinātu variācijas pārlūku attēlojumos.


Vēl dažas noderīgas saites par logo izstrādes tēmu:
]]>
Par attēlu formātiem – JPEG, GIF un PNG Dizains Raksti http://web.hc.lv/dizains/raksti/par-attelu-formatiem-jpeg-gif-un-png/ http://web.hc.lv/dizains/raksti/par-attelu-formatiem-jpeg-gif-un-png/ Sat, 23 Jun 2007 01:43:27 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Tīmeklī visbiežāk tiek izmantoti trīs attēlu formāti – JPEG, GIF un PNG. Šajā rakstā tiks izskaidrotas katra šī formāta būtiskākās īpatnības, tiem, kas vēl nezin ar ko šie formāti atšķiras.
JPEGVisus šos formātus vieno tas, ka attēli šajos formātos nav vektoru formā, bet gan rasterizēti – tas nozīmē, ka mainot attēla izmērus, kvalitāte zudīs.

JPEG

JPEG artifaktiTātad sāksim ar JPEG. JPEG formātā esošajiem attēliem parasti ir faila paplašinājums .jpg, bet var būt arī .jpeg. JPEG formātā visbiežāk saglabā krāsainus attēlus, kuros ir redzamas dažādas krāsu pārejas, jo JPEG formāts ļauj izmantot līdz pat 16 miljoniem krāsu toņus (32 biti). Tāpēc visbiežāk šajā formātā ir redzami fotoattēli. Saglabājot attēlus JPEG formātā ir iespējams norādīt kompresijas līmeni procentos. Protams, jo vairāk tiks kompresēts attēls, jo nekvalitatīvāks tas būs. Tieši JPEG kompresētos attēlus raksturo kompresijas radītie defekti, kuri tiek saukti par JPEG artifaktiem.


GIFGIF

GIF formāta attēliem faila paplašinājums parasti ir .gif. GIF formāta ierobežojums ir 256 krāsu toņi – tātad kvalitatīvu fotogrāfiju šajā formātā nevar saglabāt. Ja nu vienīgi kādu melnbaltu fotogrāfiju izmantojot 256 melnbaltos toņus. GIF attēlā var norādīt, cik un kādas krāsas izmantot attēlā. Šī informācija tiek saukta par attēla krāsu paleti un tā tiek saglabāta kopā ar attēlu. Jo mazāk krāsas tiks izmantotas, jo mazāk aizņems GIF attēls.

Vēl viena GIF formāta īpašība ir tāda, ka var norādīt krāsu paletē, kura krāsa būs caurspīdīgā krāsa – tātad attēlā var iekrāsot vēlamās vietās ar „caurspīdīgu” krāsu.

Animēts GIF attēlsNākamā pozitīvā īpašība ir tāda, ka GIF formātā vienā failā var saglabāt vairākus attēlus, kuri tiks rādīti pēc kārtas ar norādītu laika intervālu. Šādus animētus attēlus parasti sauc sauc par „animētajiem gifiem”. Pašlaik šādu animēto gifu nozīme mājaslapā ir stipri sarukusi, jo animētie gifi ir atzīti kā ļoti distraktējoši elementi un ja nu ir liela nepieciešamība pēc kā animēta, tad biežāk izmanto Flash tehnoloģijas, kas ir daudz mūsdienīgāks risinājums, ielādējas ātrāk un arī attēlojas kvalitatīvāk, jo atbalsta vektorgrafiku.

Vēl GIF failiem ir iespēja norādīt vai tie ir „interlaced” vai nav. „Interlaced” – tas nozīmē to, ka liels GIF fails ielādējoties netiks ielādēts kā parasti no augšas līdz apakšai, bet gan tas tiks ielādēts vienmērīgi – tādā veidā vēl nepilnīgi ielādētā GIF attēlā var jau saskatīt gaidāmā attēla aprises. Tomēr pie mūsdienu tīmekļa ātrumiem un tendencēm (CSS izmantošana noformējumā, minimālisms dizainā, arī WEB 2.0) arī šī GIF attēlu īpašība praktiski ir zaudējusi savu nozīmi.

GIF attēlus parasti izmanto dažādu grafiku, shēmu zīmēšanai, kā arī lapu dizaina elementiem, kur pietiek ar dažiem krāsu toņiem un nav daudz krāsu pāreju.

PNG

PNG attēli tiek izmantoti retāk (ar faila paplašinājumu .png), lai gan tie bieži vien ir stipri efektīvāki par citiem. PNG formāts tika veidots kā GIF formāta aizstājējs, taču diemžēl tas netika pietiekoši atbalstīts, lai gūtu pietiekošu savu īpašību atbalstu no pārlūkprogrammu veidotājiem. Tāpēc arī mājaslapu veidotāji to tā arī nesāka masveidā izmantot, nezinot, kā kura pārlūkprogramma tos attēlos.

PNG attēli praktiski nezaudē savu kvalitāti pie kompresijas, kā arī tie gandrīz vienmēr kompresējas labāk kā GIF attēli par apmēram 5-25%. Arī PNG attēli var būt „interlaced”, pie tam tie atbalsta līdz pat 48 bitu krāsu dziļumu.

Atšķirībā no GIF failiem, PNG failos, līdzīgi kā JPEG failos nevar saglabāt vairākus attēlus un veidot no tiem animācijas. Toties, PNG attēlos var norādīt ne tikai vienu caurspīdīgu krāsu, bet var pat norādīt dažādus caurspīdības līmeņus – piemēram, vienam attēla stūrim norādīt 10% caurspīdīgumu un otram stūrim 90% caurspīdīgumu.

Diemžēl, kā jau minēju iepriekš, dažas pārlūkprogrammas (pat populārais Internet Explorer 6) nekorekti atbalsta PNG caurspīdīgumu, tāpēc šis formāts nav pārāk izplatīts, lai gan praktiski ar dažādiem knifiem ir iespējams panākt šī formāta korektu caurspīdīgumu uz visām populārākajām pārlūkprogrammām. Pašlaik gan visas mūsdienu pārlūkprogrammas vairāk vai mazāk pilnīgi atbalsta PNG formātu – pat Internet Explorer 7+.

Šeit tika virspusēji apskatītas tikai pašas būtiskākās JPEG, GIF un PNG formātu īpašības, nepieciešamības gadījumā pilnīgāku informāciju nav grūti atrast tīmeklī.
]]>