Kung nais mong mag-disenyo at lumikha ng mga web page, ang prosesong ito ay magiging mas madali kung plano mo nang maaga. Sa yugto ng pagpaplano, ang taga-disenyo at kliyente ay maaaring magtulungan upang makahanap ng isang format at layout na naaangkop sa kanilang mga pangangailangan. Ang proseso ng pagpaplano ay nakakaapekto sa istilo o istilo ng site, masasabi mong ito ang pinakamahalagang aspeto sa disenyo ng web, lalo na kung para sa mga hangarin sa negosyo.
Hakbang
Bahagi 1 ng 4: Paglikha ng Pangunahing Istraktura
Hakbang 1. Tukuyin ang pagpapaandar ng website
Kung lumilikha ka ng isang personal na site, malamang alam mo na ang sagot. Gayunpaman, kung lumilikha ka ng isang site para sa isa pang samahan, kumpanya, o tao, kailangan mong malaman kung ano ang gusto nila at ang pagpapaandar ng site. Ang lahat ng iyong tinukoy dito ay magkakabisa kapag natapos na ang web page.
- Kailangan ba ng website ang Storefront? Dapat bang gawin ang mga komento ng gumagamit? Kakailanganin ba ng gumagamit na lumikha ng isang account sa paglaon? Nakatuon ba ang artikulo sa website? O nakatuon sa imahe? Ang lahat ng mga ito at iba pang mga katanungan ay makakatulong sa iyo sa pagdidisenyo at pagdidisenyo ng site.
- Ang proseso ng pagpaplano na ito ay maaaring iguhit sa isang pagguhit, lalo na kung ito ay para sa isang malaking kumpanya at maraming mga tao ang kasangkot sa paglikha ng proyektong ito.
Hakbang 2. Lumikha ng isang diagram ng mapa ng site (site map)
Ang isang diagram ng sitemap ay katulad ng isang tsart ng daloy, ipinapakita kung paano lumilipat ang mga gumagamit mula sa isang pahina patungo sa susunod. Hindi mo kailangan ng isang web page sa yugtong ito, isang pangkalahatang daloy lamang ng mga konsepto. Maaari kang gumamit ng isang programa sa computer upang lumikha ng mga diagram o i-sketch ang iyong sarili sa papel. Gamitin ang diagram na ito upang maipakita ang mga konsepto ng pag-aayos ng hierarchical at pagkakakonekta ng web page.
Hakbang 3. Subukan ang paraan ng pagbubuo ng kard
Ang isang tanyag na pamamaraan ng pagbuo ng pangkat ng web ay ang paggamit ng isang bilang ng mga kard upang malaman ang inaasahan ng lahat. Kumuha ng isang bilang ng mga note card at isulat ang pangunahing nilalaman ng isang web page sa bawat isa isa-isa. Ayusin ang mga kard na ito kasama ang iyong koponan upang hanapin ang pinakamahusay na konsepto. Ang pamamaraang ito ay angkop para magamit kapag nakikipagtulungan ka sa iba sa paglikha ng mga web page.
Hakbang 4. Gumamit ng papel at isang bulletin board, o isang whiteboard
Ito ay isang orihinal na pamamaraan ng pagpaplano sa isang maliit na badyet, maaari mong mabilis na matanggal o ilipat ang nilalaman at baguhin ang daloy. Iguhit ang iyong disenyo ng web sa papel, pagkatapos ay ikonekta ang mga papel na may thread, o gumuhit ng mga linya sa pisara. Ang pamamaraang ito ay napakaangkop para magamit sa mga sesyon ng brainstorming.
Hakbang 5. Lumikha ng imbentaryo ng nilalaman
Sa katunayan ito ay may kaugaliang mas naaangkop na gamitin sa muling pagdidisenyo ng mga web kaysa sa mga bagong disenyo ng web. Ipasok ang bawat natapos na piraso ng nilalaman o web page sa isang spreadsheet. Gumawa ng isang tala ng layunin ng bawat piraso ng nilalaman o pahina, gamit ang listahang ito upang matukoy kung ano ang aalisin at kung ano ang panatilihin. Maaari mong gawing simple ang istraktura ng web at gawing simple ang proseso ng muling pagdisenyo sa paglaon.
Bahagi 2 ng 4: Lumilikha ng isang Pangunahing Balangkas ng HTML
Hakbang 1. Lumikha ng isang wireframe upang maitaguyod ang hierarchy ng web page
Ang pangunahing template ng HTML ay ang blueprint ng site na iyong itatayo, gamit lamang ang pinaka pangunahing mga tag at sample na nilalaman (mga bloke / template). Sinasagot ng balangkas na ito ang tanong na, "Ano ang nakikita sa web at saan?" Hindi kinakailangan ang pag-format at pag-istilo sa paglikha ng balangkas na ito.
- Maaari mong makita ang istraktura at daloy ng tsart ng nilalaman na may isang pangunahing balangkas bago pumili ng isang setting ng estilo.
- Ang mga pangunahing template ng HTML ay hindi static tulad ng mga PDF o imahe, maaari mong mabilis na mag-swipe sa pamamagitan ng sample na nilalaman upang lumikha ng mga bagong istraktura.
- Ang batayang balangkas ay interactive na nakikinabang sa parehong mga developer ng web at kliyente. Dahil ang pangunahing balangkas na ito ay nakasulat sa simpleng HTML code, maaari mo pa rin itong i-navigate at malaman kung paano gumagana ang paglipat ng web page. Hindi ito magagawa sa PDF.
Hakbang 2. Subukan ang pamamaraan ng Gray Box
I-block o i-highlight ang nilalaman ng iyong webpage sa Gray Box, ang pinakamahalagang nilalaman ay nasa itaas. Pagbukud-bukurin ang mga nilalaman sa isang haligi. Halimbawa, kung ang pahina ay "Tungkol sa Kumpanya" kung gayon ang detalyadong impormasyon tungkol sa kumpanya ay nasa itaas, na sinusundan ng isang listahan ng mga kawani, pagkatapos ay makipag-ugnay sa impormasyon, atbp.
Hindi kasama rito ang mga header at footer. Ang Gray Box ay isang visual na representasyon ng nilalaman na lilitaw sa web
Hakbang 3. Sumubok ng isang pangunahing programa ng tagabuo ng balangkas
Mayroong iba't ibang mga programa na maaari mong gamitin sa proseso ng paglikha ng isang pangunahing balangkas sa web. Ang halaga ng web programming code (wika) na kailangan mong master ay naiiba para sa bawat programa. Ang ilan sa mga programa na medyo popular ay kinabibilangan ng:
- Pattern lab. Ang site na ito ay nakatuon sa "disenyo ng atomic", ang bawat nilalaman ay itinuturing na isang "Molekyul" na bumubuo ng isang mas malaking web page.
- Mga Jumpchart. Nagbibigay ang web page na ito ng mga serbisyo sa pagpaplano at pag-frame ng batay sa web. Ang mga site na ito ay binabayaran at nangangailangan ng isang subscription, ngunit maaari kang mabilis na bumuo ng mga balangkas ng web nang hindi kinakailangang makabisado ng maraming code sa web programming.
- Wirefy. Ang Wirefy ay isa pang site na nag-aalok ng "disenyo ng atomic". Maaaring makuha ng mga developer ng web ang tool nang libre.
Hakbang 4. Gumamit ng simpleng markup ng HTML
Ang isang mahusay na pangunahing template ay madaling mag-convert sa orihinal na site. Huwag mag-isip ng labis tungkol sa estilo ng web sa panahon ng proseso ng paglikha ng template na ito. Gumamit ng markup na madaling maunawaan at mabago.
Ang isang simpleng pangunahing balangkas ay mas mahusay. Ang layunin ng paglikha ng isang markup ay upang bumuo ng isang istraktura. Ang visual na hitsura ay maaaring iakma sa paglaon gamit ang CSS at advanced markup
Hakbang 5. Lumikha ng isang pangunahing balangkas para sa bawat web page
Maaari kang matukso upang ipantay ang bawat web page sa isang pangunahing balangkas. Sa katunayan, gagawin nitong payak at mainip ang iyong site. Lumikha ng ibang balangkas para sa bawat pahina, mauunawaan mo na ang bawat pahina ay nangangailangan ng sarili nitong disenyo.
Bahagi 3 ng 4: Lumilikha ng Nilalaman
Hakbang 1. Ihanda ang nilalaman bago lumikha ng isang web page
Mas madali mong masisilip ang iyong webview kung mayroon ka ng tunay na nilalaman sa halip na gumamit ng mga sample o placeholder. Hindi mo kailangang magkaroon ng labis na nilalaman, ngunit ang iyong pag-mockup ay magiging mas mahusay kung gagamit ka ng isang kopya ng orihinal na imahe.
Hindi mo kailangang magkaroon ng lahat ng materyal ng artikulo, ngunit hindi bababa sa dapat itong magkaroon ng isang aktwal na headline
Hakbang 2. Tandaan na ang mahusay na nilalaman ay hindi lamang teksto
Ang Internet ay mas kumplikado kaysa sa isang simpleng web page ng teksto. Kailangan mo ng iba't ibang iba't ibang nilalaman upang lumikha ng isang mahusay na website upang maakit at maanyayahan ang mga bisita. Halimbawa:
- Larawan
- Boses.
- Mga video.
- Paghahatid ng web o webstream (Twitter)
- Pagsasama sa Facebook
- RSS
- Web feed
Hakbang 3. Humingi ng tulong sa isang propesyonal na litratista
Kung nais mong isama ang mga larawan sa iyong site, ang unang impression na makukuha mo mula sa iyong website ay magiging mas mahusay kung puno ito ng propesyonal na potograpiya. Ang isang mabuting larawan ay nagkakahalaga ng higit sa dalawampu't mababang kalidad na mga larawan.
Maghanap para sa isang sariwang nagtapos ng sining ng potograpiya bilang isang mas murang solusyon kaysa sa isang propesyonal na litratista na matagal nang nasa negosyo
Hakbang 4. Sumulat ng mga de-kalidad na artikulo
Ang nakasulat na nilalaman sa web page ay matutukoy ang dami ng iyong trapiko sa web. Habang hindi ka masyadong mag-alala tungkol sa paglikha ng nilalaman sa proseso ng disenyo na ito, hindi nasasaktan na simulan ang pag-iisip tungkol dito dahil kakailanganin mo rin ang nilalaman sa isang regular na batayan sa sandaling ang iyong site ay tumatakbo na.
Bilang karagdagan sa nilalaman ng artikulo, may nakasulat na materyal na kailangan mo ring magkaroon sa proseso ng pag-iipon ng isang web page. Halimbawa ng impormasyon sa pakikipag-ugnay, pangalan ng kumpanya, o anumang bagay na gagamitin ng maraming beses sa site
Bahagi 4 ng 4: Pag-on ng Mga Konsepto sa Mga Website
Hakbang 1. Ayusin ang mga pangunahing elemento
Nalalapat ang pag-aayos ng mga elemento sa bawat pahina sa iyong site, tulad ng mga header, footnote, at menu ng pag-navigate. I-set up ito sa isang napaka-simpleng istilo upang masuri mo kung paano ang hitsura ng lahat ng mga pahina. Lalo itong kapaki-pakinabang habang sumusulong ka sa proseso ng layout ng web.
Huwag mag-alala nang labis tungkol sa mga detalye, subukang i-preview (i-preview) ang hitsura ng header
Hakbang 2. Lumikha ng isang simpleng layout
Magsimula sa pamamagitan ng paglilipat ng posisyon ng orasan mula sa base na balangkas ng haligi sa aktwal na lokasyon sa pahina. Halimbawa, baka gusto mong ilipat ang sample na menu ng nabigasyon sa kaliwa ng pahina at ang listahan ng mga headline sa kanan.
Patuloy na mag-eksperimento sa mga layout ng web para sa maraming mga pahina, bago ka lumipat sa susunod na hakbang. Payagan ang iba na tingnan ito upang makita kung ang layout na iyong nilikha ay pakiramdam buhay
Hakbang 3. Lumikha ng isang mockup
Gumamit ng isang programa tulad ng Photoshop upang lumikha ng mga mockup o halimbawang mga pahina ng iyong website. Gamitin ang layout na iyong naipon bilang isang gabay. Maaari mong gawing mas mabilis ang mga mockup at makuha ang mga resulta na nais mo sa isang programa sa pagproseso ng imahe. Ang mga resulta ng mga imaheng ito ay maaaring magamit sa ibang pagkakataon bilang isang sanggunian sa proseso ng pagsulat ng code ng program sa web.
Ilagay ang aktwal na nilalaman sa mockup upang gawin itong maganda
Hakbang 4. Palitan ang halimbawa ng konsepto ng orihinal na nilalaman
Magdagdag ng nilalaman at mga elemento sa mga web page. Huwag pawisan ang mga setting ng istilo ng web sa ngayon, isalansan lamang ang lahat sa tamang lokasyon. Tutulungan ka nitong suriin ang mga pagbabago sa istilo ng web na gagawin mo sa paglaon.
Hakbang 5. Lumikha ng isang gabay sa estilo ng web
Napakahalaga na mapanatili ang isang halo ng mga estilo, lalo na para sa mga malalaking site. Kung ang site ay inilaan para sa mga layunin ng negosyo at mayroon nang sariling tatak o istilo, dapat itong isama sa disenyo ng site. Mga bagay na isasaalang-alang kapag lumilikha ng isang gabay sa istilo ng web page:
- Nabigasyon
- Tala ng ulo
- Talata
- Italic character
- Matapang na ugali
- Mga link (aktibo, hindi aktibo, mag-hover)
- Paggamit ng imahe
- Icon
- Knob
- listahan
Hakbang 6. Ilapat ang istilo ng web
Kapag nahanap mo ang tamang estilo at disenyo, ipatupad ito. Ang CSS ay isa sa pinakamadaling paraan upang magpatupad ng mga istilo sa isang web page o sa buong site. Tingnan ang mga sumusunod na tagubilin upang mas maunawaan ang mga detalye ng paggamit ng CSS.
