Webdizains – ar ko sākt?
Šīs tēzes domātas tiem, kas nolēmuši spert savus pašus pirmos soļus web dizaina izstrādē - pieejot izstrādei šoreiz vairāk no tehniskajām prasībām, ne tik daudz no mākslinieciskās puses.
Varbūt, Jums ir jau zināma pieredze darbā ar dizaina programmām, kā Ilustrator, Photoshop, Corel Draw utt., taču esat nonākuši pie web dizaina izstrādes uzdevuma pirmo reizi, kas atšķiras ar savu specifiku no citiem dizaina darbiem.
Šo pāris pamatlietu ievērošana būtiski atvieglos dzīvi web lapas programmētājiem un citiem izstrādātājiem. Uzlabos arī pašu gala rezultātu. Tiem, kas jau šajā jomā ir guvuši zināmu pieredzi, tas gan noteikti nebūs nekas jauns :)
Pirms ķeramies pirmo reizi pie web dizaina izstrādes, iepazīstamies ar html/css pamatiem – ir svarīgi gūt izpratni, kā dizains pēc tam tiek realizēts, lai varētu panākt maksimālo rezultātu no dizaina ne tikai skicē, bet pēc tam skici pārveidojot reālā web lapā, un izvairītos no situācijām, kad rezultāts krietni atšķiras no tā, kas sākotnēji tika uzzimēts.
1. Web dizaina zīmēšanai izmantojam Photoshop (nevis Ilustrator, Corel Draw u.tml.). Varam izmantot dažādus objektus (vektorus, 3d objektus u.tml.) no citām programmām, taču rezultātu saliekam kopā kā Photoshop dokumentu (.psd). Tas atrisinās daudzas problēmas un jautājumus pēc tam pie dizaina griešanas.
2. Dizaina dokumentam jātbilst sekojošām prasībām – RGB, 72 dpi. Aktīvo dizaina daļu zīmējam ~980px robežās (platumā staipīga dizaina gadījumā tam jābūt kā optimālajam platumam, kurā weblapa ir normāli apskatāma). Neaizmirstam par ekrāna izmēriem, jo lielākajam vairumam atšķirībā no dizaina jomā strādājošiem cilvēkiem nav lieli ekrāni + ir tendence izmantot mobilās ierīces un kompaktos datorus web apskatei. Varam uztaisīt priekš sevis 1024×768px lielu laukumu, kurā tad skatamies, kā dizains “ieguļas” (princips līdzīgi kā rāmītim, ko izmanto mākslinieki, lai redzētu vai kāds no redzamajiem objektiem “nekrīt” ārā no kompozīcijas un lapas kā tādas).
3. Ļoti svarīga lieta - fonti. Neaizmirstam par tādām lietām, kā anti-aliasing – tekstu, kas mazāks par 16 izmēru, labāk maketējam bez anti-analising – tas palīdzēs kontrolēt to, kā lapa izskatīsies lietotājiem kam ir vecākas OS/interneta pārlūka kombinācijas. Neaizmirstam, ka internetā gluži brīvi nevar operēt ar dažādiem fontiem, kas mums patīk. Iepazīstamies ar web standarta fontiem, kurus, ja izstrādājam html/css web lapas dizainu, arī vēlams izmantot – jeb kādi citi fonti, kas nav standarta OS sastāvdaļa pēc tam būs liekami kā attēli web lapā. (saite, kas varētu palīdzēt: http://www.apaddedcell.com/web-fonts ). Standarta tekstu Photoshop dokumentā atstājam kā tekstu, nestandarta fontu tekstus pārveidojam kā vektorus (curves) – tas arī atvieglos dzīvi programmētājam. Ir svarīga lieta, kādēļ nevar visu tekstu piemēram salikt kā attēlus – tās ir SEO lietas – īsāk sakot – interneta meklētāji neredz tekstu, kas ir iekšā attēlos un tādā veidā mēs laupam lielu daļu weblapas uzdevuma.
4. Zīmējot web lapas dizainu neaizmirstam par to, kuras vietas būs dinamiski papildināmas un kuras būs statiskas. Vietās, kurās lietotājs pēc tam pievienos savu tekstu, attēlus u.tml., paredzam iespējas, kā tas izskatīsies, ja tur būs maz satura, un kad būs daudz. Izvairamies no situācijām, kad teksta laukumiem dizainā, kuro pēc tam lietotājs ievietos varbūt pat A4 lapas apjoma teksta daudzumu, mēs esam atvēlējuši pavisam mazu laukumiņu un otrādi.
5. Veidojam mājas lapas šablonus “roku rokā” ar mājas lapas paredzamo struktūru. Šeit darbojas princips “7 reizes nomēri, pirms griez”. Vienmēr būs labāks rezultāts, ja pa priekšu skaidri definēsim struktūru un tehnisko izkārtojumu (tehniskās skices), pirms to visu “apaudzējam” ar dizainu. Neaizmirstam visos mājas lapas šablonos ieturēt vienotu stilu.
6. Zīmējot webdizainu vēlams pieturēties pie režģa principa (grid design). Visi objekti (izvēlnes, bloki, teksta laukumi u.tml.) ir izvietoti viens pret otru ņemot vērā saskaņotus attālumus, novietojumus pa vertikālo vai horizontālo asi – tas ne tikai veido labāk uztveramu dizainisko risinājumu, bet arī novērsīs liekas tehniskas problēmas pie izstrādes.
Šīs būtu dažas no galvenajām lietām, kurām būtu jāpievērš vērība uzsākot web dizaina izstrādi. Ieteikumus, labojumus un papildinājumus droši rakstiet komentāros.
Autors: Jānis Godiņš (dreamerlines)
daGrevis 06.06.2009 | 21:16
Ļoti labs raksts, derēs iesācējiem. :)
Mfz www 08.06.2009 | 10:23
Piekrītu, labs raksts iesācējiem. :)
Roberts 09.06.2009 | 10:56
Ja, ļoti labs raksts lai iesācējs sajuktu prātā un sāktu ražot webu pilnu ar mēsliem.
“Web dizaina zīmēšanai izmantojam Photoshop (nevis Ilustrator, Corel Draw u.tml.). ” par šito tekstu dodu 5 rozā ziloņus, visu cieņu, reti stūlbs teksts.
Dieva dēļ, ja šitā strādā, tad nu tiešām nebrīnos ka vienam otram 5 gadu laikā 30 lapas kontā.
Roberts 09.06.2009 | 11:04
btw par 3. punktu tevi vajag vienkārši ilgi slīcināt spainī. Teksts uz attēla var būt tikai logo, un nekur citur. Gribi nestandarta fontus? Kas tev liedz tos ievietot lapā iekš dir un tad browseram noradīt ka nepieciešamais fonts weba attēlošanai atrodas tādā un tādā mapē?
Pie tam , jebkuru fontu var pārveidot embed fontā.
Vairāk info http://www.ssi-developer.net/design/embed-font.shtml
Jānis 09.06.2009 | 11:50
Uhh, komentāri īstā LV tvnet/delfu garā, nais :)
1. domāju cilvēki gribēs noteikti dzirdēt tavu pieredzi, ieteikumu, kādā programmā zimēt/salikt webdizainam skici vislabāk, lai izvairītos no liekām problēmām – web-dev.lv portāls vienmēr ir brīvi atvērts labiem rakstiem u.tml.
2. šis ir ļoti slidens jautājums, jo ir tāda lieta, ka vairumam fontu ir licenses (un viņus nemaz nedrīkst likt embeded!) un ja tu pie tā nepiedomāsi un sataisīsi kādai firmai ar brendinga fontu šādas lietas, vari iekulties nelāgās copyright problēmās pēc tam. Otrkārt – pārlūku atbalsts bieži vien klibo šīm metodēm.
Šī raksta būtība nav pateikt, ka kaut kaut kas nav iespējams vai ir tikai tā darāms – bet gan ieteikumu kopums, kas novērsīs problēmas, kuras bieži vien uzpeld grafiskajam dizainerim ķeroties klāt pie webdizaina skices izstrādes.
Roberts 09.06.2009 | 22:24
Jani, bet tev jaatzīst ka šis nu nav tas labākais ieteikums jaunajiem dizaineriem, pat ļoti kļūdains. pirmais kas jaunajam web dizainerim ir jaiemācas ir tieši tīri zināt markupu kaut vai vismaz html 401 transit, lai zinātu kā veidot tā lai koderim ja viņš nav viena un tā pati persona vieglāk pēc tam no viņa dizaina izveidot lapu jo parasti jau html un css veido un attēlus griež jau dizaineris ne programmētājs. Tad kad markup ir kaut cik iepazīts basic imenī var sākt veidot vienkāršas kautvai blogveida lapeles tiri trenniņa pēc, pašlaik paņēmu paspārnē vienu jauno dizaineri, var just ka lietas koks bet jau bija sācis šitādā modē veidot webus, un skaidrs, ka nekur tālāk par kaimiņu sētu netiks. un vel piebilst varu, ka web devings ne katram domāts, dazi vienkārši nevar, jo ko tas nozimē kaut vai dizainā, par kodu nerunājot, tas ir domāt jau vairakus soļus uz priekšu, kā šahā, piemēram, kā tas vai cits elements atsauksies uz koda pusi, vai viņu tur fiziski vispār varēs izvietot un kā, kā img src vai bg, vai kā citādi, kur kāda poga, kā izskatisies tam un tam hover effekts, kā us ar backgraundiem widescreen browseram, kā izskatīsies lapa uz nestandarta browsera piemēram 800×600 res vai uz opera mobile, vai tā paša mobilā ucweb. Šī te lieta ir gari un plaši runajama un nāk tikai ar laiku, un teorijas un prakses nostiprināšanu, jo kā jau mēs visi zinām, web dev jābūt gan pieredzei gan teorijas zināšanām, viens bez otra nevar. un ja esi dizaineris tad tas nenozime ka tev bus tikai jazimē, jazin ari koda daļa.
Roberts 09.06.2009 | 22:25
Un netrūkst use-ewerywhere fontu… Btw…
dreamerlines www 09.06.2009 | 23:07
“Pirms ķeramies pirmo reizi pie web dizaina izstrādes, iepazīstamies ar html/css pamatiem…” – ceturtā rindkopa, ko acīmredzot esi vienkārši palaidis garām.
Roberts 09.06.2009 | 23:12
awch, my bad :> bet anyway…
rob 09.06.2009 | 23:12
TO Roberts:
1) normālos kantoros dizainu “griež” html/css cilvēks.
2) Nu nav gluži taisnība ka dizainerim ir jāparedz viss no a līdz z, un veidojot dizainu nav jādomā kā to sagremos css, tā patiesībā jau ir css/html cilvēka darīšana, kā “sagriezt”, protams tas attiecas uz gadījumiem kad nenotiek all in one gadījumi, nesaku ka dizainerim nav jābūt nekādai sajēgai par to ka web tiek būvēts.
3) Nepiekrītu Tev par attēlu izmantošanu, drīzāk tādās vietās ieteiktu izmantot flash vai kādu citu risinājumu. Ne tik ļoti dēļ lapas ielādes ātruma, bet tīri no praktiskās puses, šodien klients te grib tā rīt šitā, lieks un nevajadzīgs darbs koderim / dizianerim
Roberts 10.06.2009 | 00:14
Nu rob taisnība, bet nu ne katram ir normāls kantoris, kur viens griež, cits līmē un zīmē ^^
daGrevis 13.06.2009 | 16:14
Nu uzskatu, ka dizainerim ir jāsaprot kā pēc tam (vismaz aptuveni) attēli tiks salikti kopa un taps dizains. ;)
Newerland boy 21.07.2009 | 17:19
Mjā, ko lai saka. Šitam gara darbam uzdūros pateicoties google – skatījos, ko šodien izmetīs pie web dizains. Piemetīšu arī savu komentāru.
Tātad, visu pēc kārtas.
01. Raksta virsraksts: “web dizains – ar ko sākt?”. Nevaru protams lepoties ar ūberkūlo atzinību web dizaina jomā, bet 10 gadu laikā esmu nonācis pie vienas baigās atziņas – ir jāsāk ar papīru un zīmuli. Nopietni! Un jāsāk ar to, ka atzīmē to auditoriju, kam tu taisi, un iemeslu, kapēc tu taisi to smuko dizainu.
Pēc tam jau uz tās pašas lapas var sākt ar skicēm, idejas uzmetumiem un tā tālāk. Ticiet, pat man, kas fotošopā wacom izmanto 50/50 ar klavieri, ir krietni ātrāk uzskicēt uz papīra ntos variantus dizainam, nekā tos bīdīt kopā uz datora.
02. Citāts: “Web dizaina zīmēšanai izmantojam Photoshop (nevis Ilustrator, Corel Draw u.tml.)”. Gribas teikt – cilvēk, nečakarē smadzenes sev un citiem. Dizainu var zīmēt kā Photoshop, tā Illustrator, CorelDraw, Fireworks, Gimp vai InkScape. Kamēr tevis izvēlētā programma spēj eksportēt gif, jpg, png – tā ir pielietojama šim mērķim. Vienkārši nekad neaizmirsti, ka Photoshop nevienu automātiski neieceļ web dizaineru kastā, vai tā neesamība vēl neliedz kļūt par web dizaineri.
03. Raksts šķiet tapis paķerot no vienas vietas bišķiņ, no citas bišķiņ, bet tā īsti arī neatbild uz virsrakstā uzdoto jautājumu. Varbūt ir vērts pamēģināt vēlreiz?
taiga www 07.09.2009 | 01:27
PALDIES raksta autoram (kaut vai par ”labo domu – palīdzēt” un arī PALDIES saku ‘Newerland boy’ par lielisko komentu. Gribu taisīt savu pirmo WEB lapu – šis raksts mani uzmundrināja. Māku strādāt ar Ilustrator, Corel Draw, Photoshop.Tikko iegādājos grāmatu: ”Tīmekļa lapu veidošana. HTML un CSS”. Šobrīd esmu izlasījusi IEVADU, apskatījusi, ko īsti nozīmē HTLM valoda, apskatīju kā notiek fonta parametru iestatīšana – un nonācu pie secinājuma – ka vispirms IDEJA jāuzliek uz papīra un tad lēnām varu sākt čubināties.
Pagaidām gan neesmu izlasījusi (ar acīm pārskrienot – neieraudzīju) – kādā programmā tad strādāt? Kādu īpaši instalē, jebšu derēs tās pašas: Corel Draw, Photoshop?
rob 07.09.2009 | 02:43
teikšu tā coreli neiesaku, photoshop bus tavs labākais draugs par kodēšanas softu atkarīgs uz kāda OS esi
amatieris 11.09.2009 | 15:43
rob:
tev ir arī kādi iemesli/argumenti? Līdz šim esu izmantojis corel draw, ar fotošopu tādas lietas nedaru. Varbūt vajadzētu? Gribu zināt..
rob www 11.09.2009 | 22:36
Patiesībā iesaku photoshop jo corelis un ilistrators ir vektoru bāzētas programmas, bet photoshop ir punktu bāzēta. Tad ja griez pats tad viss kārtībā, bet ja vēlies lai Tavu dizainu cit sagriež korekti dod uzreiz formātā, kur visi izmēri ir tieši un saprotami.
amatieris 12.09.2009 | 18:20
tieši tapēc izvēlos vektoru bāzētu progrāmu lai ko radītu no 0. Atzīšos ka ar fotožopu pat uz “jūs” neesu. Radies priekšatas ka rastragrafika tomer apstrādei, vektorgrafika radīšanai. Papildus apstrādi rastragrafikā veicu iekš corel photopaint.
Dizaina griešanā, enivej, tiek vienmēr viedots dizains mērogā, eksportējot arī protams sakrīt 1:1 ar mērogu, tālāk griešana, corel, adobe, 3rd party – kas pašam ērtāks.
Es uzskatu, katrs strādā ar sev ērtāko rīku.
rob www 12.09.2009 | 22:24
jā vari strādāt ar to kas Tev liekas ērtāk, bet ne visi css griezēji par to priecāsies ;)
Award wining SEO 13.10.2009 | 20:33
un visu galu beigas izchakare klients! :D
http://normaals.wordpress.com/2009/10/12/web-dizaineris/
banesto 05.12.2009 | 19:51
visnotaļ sulīgs raksts, informācijas ziņā. vispirms – nevajag strīdēties, katram ir savi ieradumi, mīļākās programmas.
piekrītu par to, ka jāsāk ar zīmuli – vajag vismaz uzskicēt, ja nav dzirksts visu uzreiz progā taisīt. dizainerim nav jāzina html/css no galvas, bet jāpārzina tās lietas vismaz teorētiski vajag (ko var/nevar izdarīt). Jāņem vērā fontu, krāsu standarti. Ar nestandarta fontiem labāk neņemties, vai arī izmantot tikai izvēlnē vai kādās reti satopamās vietās. Ir fontu embedēšanas metodes, kā jau minēja, bet uz tām 100% nebalstītos, bet izmantotu, kā back-up variantu.
Mūsu kantorī parasti dizainu uztaisa viens džeks un es jau graizu tālāk. Tas, ka dizains ir photoshopā taisīts ir ļoti pateicīgi, jo dizaineris sakarīgi saliek visu pa objektiem, leijeriem un var atķeksēt, ko gribi importēt.
Anonims 23.02.2010 | 20:19
Bāc, nu gan ir komentāri. Cilvēks uzraksta rakstu (rakstīt katrs var, ko grib). Teiksim, padalās pieredzē. Nezinītis izlasa rakstu un re, ir jau nojausma ar ko sākt. A te profiņi salasījušies un noliek viens otru, Ta rakstat paši savu pieredzi, ieteikumu…
v.art.s 04.03.2010 | 11:48
Jo “profīgāks”(lielāks) programmēšanas speciālists, jo gramatiski kļūdaināks komentārs.
Interesanti, cik webu 5 gados tāds “spečuks” saprogrammē, ja viņš nepārtraukti raksta kodu ar kļūdām?
Nenoliedzami, komentētājam Robertam valodiņa (literārā ziņā) ir bagātāka par raksta autoru(pieļauju,te vecuma starpība), tādēļ jau tāds uzbrukums autoram.
Tad kāda vella pēc didaktiskais spečuks neuzraksta kādu pamācošu rakstu?
Un vēlams nepiesātinātu ar visiem “modē”,”mārkupiem” un pārējiem slengu zvēriem.
Paldies!