Mga Dapat at Hindi Dapat ng Mahusay na Disenyo sa Web

Kapag sinunod, ang gabay na ito ay magiging isang mahalagang mapagkukunan ng disenyo ng web, lalo na kung plano mong gamitin software sa pagbuo ng website sa hinaharap. Mula sa walang karanasan hanggang sa may karanasan, ang gabay na ito ay may para sa lahat.

Ang Proseso ng Mahusay na Web Design Para lang matiyak na tayo ay nasa parehong pahina, magsimula tayo sa pangunahing kahulugan para sa "web design". Ayon sa Wikipedia, ang disenyo ng web ay:

"isang proseso ng konseptwalisasyon, pagpaplano, pagmomodelo, at pagpapatupad ng paghahatid ng elektronikong media sa pamamagitan ng Internet sa anyo ng Markup language na angkop para sa interpretasyon ng Web browser at ipakita bilang Graphical user interface" .

Ang proseso ng web design ay maihahambing sa proseso ng pagsulat ng research paper. Sa yugto ng konseptwalisasyon/pagpaplano, ang mga flowchart (ang balangkas) ay nilikha na naglalarawan sa istruktura ng pag-navigate ng iyong website. Sa yugto ng pagmomodelo, ang mga static na wireframe ay nilikha (ang magaspang na draft) na naglalarawan ng balangkas na layout para sa bawat seksyon ng iyong website. Pagkatapos malikha ang mga wire frame, ginagamit ang mga graphics, kulay at teksto upang gawin ang disenyo ng iyong mga web page batay sa layout ng mga wire frame. Sa yugto ng pagpapatupad, ang iyong disenyo ay na-convert sa isang format na sinusuportahan ng mga web browser, ang teksto at nilalaman ay idinagdag, at sa wakas, ang iyong website ay nai-publish nang live sa Internet para makita ng mundo (panghuling draft).

Ang lahat ng tatlong yugto ng proseso ng disenyo ay pantay na mahalaga. Maraming mga web designer ang lumalaktaw sa isang yugto upang makatipid ng oras o dahil sa tingin nila ay hindi iyon kinakailangan. Gayunpaman, lahat ng tatlong yugto ay kinakailangan kung ang iyong layunin ay lumikha ng isang matagumpay na disenyo at kagalang-galang na website. Kahit na ang tatlong yugto ay ginamit, maraming mga pagkakamali na maaaring gawin ng mga taga-disenyo ng web na hahantong sa hindi magandang kalidad, hindi user-friendly na mga website. Oras na para linisin ang cabinet ng mga masasamang gawi sa disenyo ng web at i-restock ito ng mga mahusay.

Stage 1: Konseptwalisasyon at pagpaplano
Ang yugtong ito ay mas madalas na nilaktawan kaysa sa iba pang dalawang yugto. Karamihan sa mga manunulat ay hindi nasisiyahan sa paggawa ng mga balangkas para sa mga research paper, at karamihan sa mga web designer ay hindi rin mahilig gumawa ng mga flowchart. Huwag maging tamad. Kung magsusumikap ka at magplano ng iyong website, makikita mo ang proseso ng disenyo ng web na magiging maayos na may mas kaunting mga pagkakamaling nagawa.

Mayroong ilang mga bagay na kakailanganin mo upang mabisang maisip at maplano ang iyong website:

• isang utak
• isang panulat at papel
• (opsyonal) software ng flowchart
• isang pangkalahatang ideya ng iba't ibang mga seksyon ng iyong website

Upang magsimula, kunin ang iyong panulat at papel o ilunsad ang iyong paboritong software ng flowchart. Ginagamit namin ang OmniGraffle Professiona para sa Mac OS X na nagkakahalaga ng $150 bawat lisensya ngunit sulit kung gagawa ka ng mga website nang regular. Kung ikaw ay nasa isang PC, ang SmartDraw ay isang mahusay na LIBRENG piraso ng flowchart software na magagamit mo. Ang isang panulat at papel ay gumagana nang maayos, bagaman.

Maraming paraan sa paggawa ng mga flowchart. Ipapakita namin sa iyo ang pinakapangunahing paraan upang gawin ito para sa kapakanan ng oras at haba ng artikulong ito. Kung gusto mong matuto nang higit pa tungkol sa mga flowchart, maghanap ng mga flowchart sa Google o Yahoo.

Tingnan ang flowchart na ginawa namin noong nagkonsepto ng Chromatic Sites. (1) Sa tuktok ng flowchart ay inilista namin ang pangalan ng aming website. (2) Susunod, isasama namin ang bawat pangunahing seksyon ng aming website: Home, About, at Mga Serbisyo. Ang mga seksyong ito ay ang pangunahing nabigasyon para sa iyong website. Ang magiging mga pangalan ng bawat seksyon ay ganap na nakasalalay sa nilalaman ng iyong website. Subukang gumamit ng kaunting mga seksyon hangga't maaari upang ang iyong mga bisita ay hindi mapuspos kapag nagna-navigate sa iyong website.

(3) Susunod, idagdag ang lahat ng pangalawang pahina (subsection) na ililista sa bawat isa sa mga pangunahing pahina. Para sa Home, isinama namin ang Propesyonal na Disenyo sa Web, Pag-unlad ng Web, at Pag-optimize ng Search Engine. Ang pangalawang nabigasyon ay kailangang mas mapaglarawan kaysa sa pangunahing nabigasyon. Kung mas malalim ang navigational hierarchy ng iyong mga website, dapat ay mas mapaglarawan ang bawat label.

Ang Dos

• Mas kaunti ay higit pa; panatilihing pinakamababa ang bilang ng mga pangunahing seksyon. Gumagamit kami ng 6 na seksyon sa aming website na higit pa sa sapat
• Gumamit ka man ng panulat at papel o software ng flowchart, panatilihing malinis at maayos ang mga bagay hangga't maaari. Bagama't ikaw (at sinumang nagtatrabaho sa iyo) ang tanging gagamit ng flowchart, kailangan pa rin itong magkaroon ng kahulugan -Ang iyong mga pangunahing seksyon ay dapat gumamit ng mas malawak na mga termino, habang ang pangalawa at pangatlong termino ay dapat na mas mapaglarawan

Ang mga Donts
Ang paggawa ng flowchart ay medyo diretso; gayunpaman, may ilang mga pagkakamali na madaling magawa:

• Huwag gumamit ng masyadong mapaglarawang mga termino sa iyong pangunahing nabigasyon maliban kung ang iyong buong website ay nakatuon sa isang makitid na paksa -Huwag subukang pagsamahin ang maraming paksa sa parehong pahina. Gumawa ng pangkalahatang seksyon para sa mga paksang ito at mula sa seksyong iyon ay lumikha ng mga subsection. Gagawin nitong mas malamang na magkaroon ng mas mahusay na mga ranggo ang subsection (descriptive) na mga web page sa mga search engine (Google, Yahoo, MSN, Ask) Kapag nakagawa ka na ng maikli at mapaglarawang flowchart, handa ka nang magpatuloy sa ikalawang yugto ng proseso ng disenyo ng web:

Stage 2: Pagmomodelo
Sa yugto ng pagmomodelo, ang mga static na "wireframe" ay nalilikha. Ang bawat mockup ay naglalarawan ng isang walang laman na balangkas ng layout para sa bawat isa sa mga web page na isasama sa iyong website. Mahalaga ang yugtong ito dahil nagbibigay ito sa atin ng ideya kung saan ilalagay ang iba't ibang elemento sa ating disenyo. Ang ilan sa mga elementong ito ay:

• logo
• menu ng pag-navigate
• nilalaman
• mga larawan, mga video

Upang gawin ang mga mockup na ito, maaari kang gumamit ng panulat at papel o ang iyong ginustong mockup software. Noong nakaraan ay gumagamit kami ng Photoshop, ngunit kamakailan lamang ay gumagamit kami ng OmniGraffle Professional. Ang OmniGraffle ay hindi kasing dami ng mapagkukunan gaya ng Photoshop at nagbibigay-daan ito sa amin na buuin ang aming mga wireframe mockup nang mas mabilis.

Bilang karagdagan, tiyaking mayroon kang (mga) flowchart na ginawa mo sa malapit dahil kakailanganin mong i-reference ang mga ito paminsan-minsan upang matiyak na tinutuya mo ang lahat ng page na lalabas sa iyong website.

Narito ang aming halimbawa kung paano dapat magmukhang isang wireframe mockup. Tulad ng nakikita mo, walang mga kulay o graphics na kasama. Ganito dapat ang isang wireframe mockup - isang skeletal layout ng iyong disenyo. Ang layunin ay magkaroon ng pangkalahatang ideya kung saan ilalagay ang bawat elemento ng web page.

Karaniwan kaming nagsisimula mula sa kaliwang itaas at bumababa sa ibaba. Walang tiyak na paraan kung paano dapat magmukhang ang isang wireframe. Gamitin ang iyong imahinasyon. Gayunpaman, siguraduhin na kapag gumagawa ng iyong mga wireframe ay hindi mo nakakalimutang isama ang pinakamahalagang elemento ng isang website (logo, menu ng nabigasyon, placement ng nilalaman, placement ng mga larawan/video).

Kung ang ilan sa iyong mga pahina ay gagamit ng parehong layout, kung gayon hindi kinakailangang kutyain ang lahat ng mga pahinang iyon (bagama't tiyak na magagawa mo). Siguraduhing mockup ang anumang natatanging layout na magkakaroon ang iyong website. Magpasalamat ka sa sarili mo mamaya.

Ang mga Gawin

• mockup lahat ng natatanging pahina
• isama ang mahahalagang elemento (logo, navigation, placement ng content, placement ng mga larawan/video) -magsimula sa itaas at pababain ang iyong paraan -sangguniin ang iyong flowchart na ginawa sa stage 1 para hindi ka makakalimutang mockup ng anumang mga page -save, save, i-save – tulad ng anumang bagay sa computer, i-save ang iyong (mga) mockup bawat 10 minuto o higit pa
• tumuon sa malinis, user friendly na mga layout -lagyan ng label ang iyong mga elemento upang hindi mo makalimutan kung ano ang mga ito kapag sinangguni mo ang mga ito sa yugto 3, pagpapatupad -gamitin ang iba pang mga web site bilang inspirasyon; walang masama sa pagkuha ng mga elemento mula sa ibang mga site at gawin itong sarili mo (tingnan ang "donts")

Ang Dont's

• huwag isama ang mga graphics o mga kulay (para sa susunod na yugto iyon) -huwag gawing masyadong “abala” ang iyong mga mockup; tumuon sa malinis, maayos at madaling gamitin na mga layout -huwag laktawan ang yugtong ito; ito ay kasinghalaga ng una at huli -kung kukuha ka ng mga elemento mula sa iba pang mga website, siguraduhing hindi ka mang-plagiarize; may pagkakaiba sa pagitan ng pagiging inspirasyon ng isa pang website upang lumikha ng ilang partikular na elemento ng iyong disenyo at tahasang pagtanggal sa kanilang layout at mga kulay

Stage 3: Pagpapatupad
Sa ikatlo at huling yugto, ang pagpapatupad, ang pagpaplano mula sa mga yugto 1 at 2 ay pinagsama upang tumulong sa paglikha ng isang live, interactive na website.
Ang pangatlong yugto ay ang pinakamabilis na oras dahil ikaw ay 1) gagawa ng mga graphic 2) gagawa ng nilalaman, at panghuli, 3) convert ang mga disenyo ng web mula sa mga imahe sa code na ginagamit ng mga web browser upang ipakita ang iyong website sa mundo.

Sa oras na maabot mo ang ikatlong yugto, dapat ay mayroon kang malinaw na ideya ng:

• kung paano dadalhin ang iyong mga bisita mula sa isang lugar patungo sa isa pa (stage 1, flowchart) -paano ilalatag ang iyong mga web page (stage 2, mga mockup ng wireframe)

Kung wala kang malinaw na ideya sa dalawang bagay na ito, bumalik sa una at ikalawang yugto at ipagpatuloy ang pagbuo ng mga ito. Malalaman mo na ang ikatlong yugto ay pinakamadali kapag nakagawa ka ng isang malinaw, maigsi na plano ng labanan para sa pagdidisenyo ng iyong website.

Itapon ang panulat at papel
Sa yugto 3, kailangan mong gumamit ng Photoshop o isa pang programa sa pag-edit ng imahe dahil gagamit ka ng mga kulay at graphics upang lumikha ng layout para sa iyong website.

Karaniwan naming sinisimulan ang paggawa ng "home" page (index) muna. Gamitin ang iyong mga wireframe na ginawa mo sa yugto 2 bilang isang template para sa bawat isa sa mga pahinang iyong nilikha. Gayunpaman, sa halip na gumamit ng mga solidong kahon, gumamit ng mga graphics, kulay at teksto sa halip. Ang bawat pahina ay dapat magmukhang eksakto kung paano mo gustong tingnan ang mga ito sa Internet dahil ito ang huling yugto ng proseso ng disenyo.

Tiyaking isama ang background para sa iyong nabigasyon (ngunit huwag talagang idagdag ang teksto sa iyong larawan). Kapag na-convert gamit ang CSS (cascading style sheets), ang iyong nabigasyon ay dapat nasa anyo ng teksto at hindi mga larawan. Ang mga imahe ay hindi na-crawl ng mga search engine (ang mga keyword na ginamit sa iyong nabigasyon ay hindi mai-index sa mga pahina ng mga resulta ng search engine, ibig sabihin, mas kaunting mga tao ang makakahanap ng iyong website).

Kapag masaya ka sa iyong mga disenyo at pakiramdam na handa na silang ilagay sa Internet, oras na upang hatiin ang mga disenyo upang makagawa ka ng CSS based na layout. Para sa higit pang impormasyon sa pag-convert ng iyong mga layout sa CSS o pagmamarka ng iyong website sa CSS, bisitahin ang w3schools.com. Pagkatapos tumingin sa Internet, wala kaming mahanap na magandang image-to-CSS tutorial – kaya asahan ang isa mula sa amin sa mga darating na linggo. Ang pag-convert ng iyong mga disenyo sa CSS ay napakahalaga dahil ang mga layout ng talahanayan ay isang bagay ng nakaraan.

Narito ang isang halimbawa ng isang halos tapos na website ng layout na aming tinuya sa stage 2. Ito ay kinuha nang direkta mula sa aming web browser at tulad ng nakikita mo, mayroon na ngayong isang logo, mga kulay, isang magandang navigation system, isang footer, at ang pinakamahalaga, isang malinis, organisadong layout.
Salamat sa pagpaplano sa mga yugto 1 at 2, ang aming layout ay maayos at madaling gamitin.

Ang Dos

• sumangguni sa iyong mga template na ginawa sa yugto 2; kahit na mainam na lumihis mula sa iyong orihinal na layout, hindi mo dapat kailanganin
• magsaliksik bago gumawa ng iyong aktwal na disenyo; kumuha ng mga ideya mula sa ibang mga site at gawin ang mga ito sa iyo (nang walang plagiarizing)
• isama ang kulay at mga graphics upang lumikha ng panghuling hitsura para sa iyong mga web page -gumamit ng CSS (cascading style sheets) upang i-convert ang iyong mga disenyo mula sa mga imahe sa markup na mauunawaan ng mga web browser -renggunihin ang iyong flowchart mula sa stage 1 kapag nagko-coding sa iyong mga pahina ng mga hyperlink; mas mainam na gumamit ng drop down na menu na kinabibilangan ng lahat (o karamihan) ng mga link sa iyong website sa bawat pahina; ito ay magbibigay-daan para sa mas madaling pag-navigate at gagawing mas madaling i-crawl ang iyong mga pahina kapag huminto ang mga spider ng search engine; isang magandang lugar para makakuha ng mga drop down na menu ng CSS ay nasa DynamicDrive.com -i-finalize ang iyong disenyo habang nagtatrabaho sa Photoshop o anumang software sa pag-edit ng imahe na iyong ginagamit; maaaring mahirap gumawa ng mga pagbabago sa iyong disenyo kapag na-convert ito sa markup (code)

Ang mga Donts

• huwag isama ang teksto sa iyong mga menu ng nabigasyon kapag nagko-convert sa CSS; sa halip na gumamit ng teksto ng imahe, gumamit ng regular na teksto na nababasa ng mga spider ng search engine
• huwag gumamit ng mga talahanayan kapag nagko-convert; kahit na kailangan mong bumili ng libro sa CSS, sulit ito; patay na ang mga mesa
• huwag laktawan ang unang dalawang yugto para lamang makatipid ng oras; AY magiging mas mahusay ang iyong website kung magsisimula ka sa simula ng proseso ng disenyo ng web (sa halip na sa dulo)
• huwag kalimutang i-compress ang iyong mga larawan kapag pinaghiwa-hiwalay ang mga ito para sa CSS; walang mas masahol pa sa isang mabagal na pag-load ng website dahil sa malalaking file ng imahe; Ang Photoshop ay may opsyong "Save Optimized For Web" (CS3 - "Save for Web and Devices")

Ginagawang Perpekto ang Proseso
Sa pamamagitan ng pagsunod sa isang proseso ng disenyo ng web tulad ng isang nakalarawan sa artikulong ito, pinapataas mo ang mga pagkakataong lumikha ng isang website na maayos, madaling ma-navigate, at napaka-user-friendly. Harapin natin ito – kung naliligaw o nalilito ang mga bisita habang sinusubukang i-surf ang iyong website, maaari nilang pindutin ang back button at maghanap ng mas user friendly na website. Ang mga tao ay hindi gustong mag-isip pagdating sa paghahanap ng kanilang paraan sa paligid ng mga website. Huwag mo silang isipin. Ginagawa mo ang pag-iisip sa pamamagitan ng pagpaplano ng iyong website mula sa stage 1 hanggang stage 3 at makikita mo na mas maraming tao ang masisiyahan sa pagbisita sa iyong website.