Pag-unlad at Disenyo ng Web 101

web_development_101Nais mo bang malaman ang mga pangunahing kaalaman ng Web Development at Disenyo? Galing…


Ngunit may problema sa linyang ito ng pag-iisip, o ang ilan sa kanila …

  • Ano ang layunin ng pagkakaroon ng isang website? Kailangan ba talaga ng bawat isa?
  • Kung gayon, paano ka magtatayo ng isang kalidad ng website? O sa madaling salita, paano mo natutunan ang pangunahing pag-unlad at disenyo ng web na magbibigay-daan sa iyo upang mabuo ang kalidad ng website sa iyong sarili?
  • Mas mahalaga, maaari kang bumuo ng isang kalidad ng website sa iyong UNANG pagsubok? O kailangan mo ba ng maraming taon ng karanasan sa likod mo, bago ka makakaasa para sa anumang resulta na higit sa kakila-kilabot?

Sagutin natin ang lahat ng ito gabay ng nagsisimula sa pagbuo at disenyo ng web.

[Babala basag trip. Yep, maaari kang bumuo ng isang kalidad ng website sa iyong unang pagsubok.]

Ano ang Saklaw sa Gabay na Ito?

Okay, una na ang mga bagay, natutuwa kami na patuloy mong binabasa at napagpasyahan mong subukang subukan ang web! Narito kung paano ito mai-play:

Ang mga kabanata ay ipinakita sa isang napaka-simpleng paraan, kasama ang pangunahing nilalaman sa kaliwa, at ang mga naaangkop na item sa kanan. Tulad ng:

Panimula ng Gabay: Kabanata 1

Ngayon, kung paano magpatuloy:

  • Habang nasa iyong 1st basahin: Inirerekumenda naming basahin ang buong bagay mula sa itaas hanggang sa ibaba. Bibigyan ka nito ng magandang 10,000 na pagtingin sa paksa at makakatulong sa iyo na maunawaan ang pinakamahalagang bahagi nito. Magbibigay din ito sa iyo ng mga pangunahing tool at pamamaraan kung paano hahawak ang mga indibidwal na gawain.
  • Habang sa iyong ika-2 basahin at higit pa: Gumamit ng TOC at umikot sa bahagi na pinaka-interesado sa iyo. Gayundin, huwag mag-atubiling gamitin ang mga pindutan ng pagbabahagi sa tabi ng bawat kabanata, at ipadala ang alinman sa mga link sa iyong sarili o sa iyong mga kaibigan / tagasunod na maaaring maging interesado.

Handa na? Pumunta tayo sa kabanata 1.

Sino ang Gabay na Ito?

Kung nais mong malaman ang pangunahing pag-unlad at disenyo ng web, ang gabay na ito ay para sa iyo. Anuman ang iyong pagganyak.

Gayundin, hindi mo na kailangan ang anumang paunang kaalaman sa teknikal upang makapagsimula (maliban sa pangunahing “mga kasanayan sa web”). Ang buong punto ng patnubay na ito ay upang maging isang uri ng kurso na “101” para sa lahat na interesado sa pagbuo ng mga website at pag-aaral ng pag-unlad ng web.

Narito ang ilang mga karaniwang dahilan kung bakit maaaring maging interesado ka:

  • 1. Kailangan mo ng isang website para sa iyong negosyo (at nais mong makita kung maaari mo itong mabuo).
  • 2. Nais mong ARALIN ang pag-unlad ng web sa hilig o pansamantalang interes (walang masamang tungkol sa na).
  • 3. Kailangan mo ng isang website para sa paaralan.
  • 4. Tinutulungan mo ang isang kaibigan o miyembro ng pamilya upang makakuha ng kanilang website sa online.

Ang Pangunahing ideya na Pupunta sa Paggabay sa Amin

Ito ay mahalaga! At mangyaring huwag magalit sa amin kung ikaw ay isang advanced na web developer na nagbabasa nito, ngunit ang pangunahing ideya na gagabay sa amin sa buong buong pag-unlad ng web at 101 na mapagkukunan ay:

“Ang Pinakamabagbag na Diskarte sa Paglaban”

Narito ang tatlong mga prinsipyo ng hindi bababa sa diskarte sa paglaban:

  • Kami hindi masira ang mga bagay sa isang antas ng molekular. I.e. hindi kami pupunta sa ilalim ng kung paano gumagana ang mga wika sa programming, o kung paano gumagana ang isang web server.
  • Kami hindi muling pag-aayos ng gulong. I.e. kung ang isang tao ay nalutas na ang isang naibigay na problema at ginawang magagamit ang solusyon, gagamitin namin ito.
  • Kami paggawa ng isang simpleng solusyon kahanga-hangang, sa halip na isang kumplikado at tila mas mahusay na solusyon ng maraming surot at hindi maintindihan.

KABANATA 1: Ang Plano

Ang iyong ideya, uri ng website, pangalan ng domain, at pagho-host.

Bago ka Mag-set up ng isang Website, Kakailanganin mo ng Plano

Nakapagtataka na maaaring tunog – ang pinapakita ng ‘hit’ 80s ay nagturo sa amin “Ang A-Team” ay nagturo sa amin, isang mahusay na plano ay isang susi sa tagumpay.

Kung mayroon kang isang website na nakaupo sa iyo para sa isang habang ngayon ay tiyak na nasasabik ka tungkol sa nag-iisang ideya na sa wakas mailabas ito para sa iba na basahin at mag-browse.

Nais mong maging kahanga-hangang ang iyong website. Marahil alam mo kung ano ang magiging hitsura ng ilang antas. O baka mayroon ka ring perpektong logo na handa.

Ngunit …

Hindi ito sa lahat kung saan ka dapat magsimula. Kung magsisimula ka sa paunang natatag na mga inaasahan, hahantong lamang ito sa iyo sa maraming pagkalito kasama ang paraan at isang resulta ng sub-par sa dulo.

Sa halip, isipin ang mga sumusunod:

  1. Paghiwalayin ang iyong sarili mula sa anumang mga layunin sa teknikal na maaaring mayroon ka. Tulad ng, halimbawa, ang layunin ng pag-aaral ng mga teknolohiya ng website o ng ilang software ng website.
  2. Tanungin ang iyong sarili ng isang pangunahing katanungan: “Ano ang kailangan ko para sa site?”

Hindi ito tungkol sa iyo, ito ay tungkol sa layunin ng site.

Mga Tanong na Kailangan mong Itanong sa Iyong Sarili Bago ka Mag-set up ng Iyong Website

  1. Ano ang ibig sabihin ng site upang makamit?
  2. Ano ang magiging pangunahing “bagay” na ipinakita sa site? (hal. ang iyong negosyo, isang produkto, iyong mga post sa blog, atbp.)
  3. Magkakaroon ba ng anumang espesyal na layunin ang website? (hal. isang eCommerce store, portfolio ng litratista, atbp.)
  4. Sino ang target na madla?
  5. Bakit interesado sila sa paksa ng site?
  6. Anong sakit ang nalulutas ng site para sa mga indibidwal na miyembro ng madla?

Tungkol sa mga huling 3 katanungan, hayaan ang pag-uusap ng madla para sa isang minuto …

Mayroong 2 pangunahing mga patakaran para sa pagbuo ng website. Narito ang panuntunan # 1:

 Ang mambabasa / bisita ay unang dumating.Ang mga ito ang pangunahing tao na dapat mangyaring ang iyong website.

Sa isang paraan, ang iyong website ay hindi sa iyo. Ito ang kanilang.

(Rule # 2 tatalakayin namin sa isang minuto.)

Ang paglimot tungkol sa simpleng patnubay na ito ay maaaring humantong sa iyo sa ganap na maling paraan, kahit na hanggang sa puntong makikita mo ang iyong sarili sa isang website na nakalilito sa lahat ngunit ikaw.

“Ugh! Hindiintindihan ng mga tao kung ano ang tungkol sa site na ito. Paano sila magiging ignorante ?! ” – tinatapos mo ang pag-iisip. Ngunit sa lumiliko ito, ang walang alam ay ikaw.

Ang tanging paraan upang maiwasan iyon ay upang mabuo ang iyong website kasama ang mambabasa sa isip mula mismo sa get-go.

Kaya … kunin ang papel na iyon, at sagutin ang lahat ng mga katanungan sa itaas.

Kapag tapos ka na, mayroon ka ng iyong pinakamatatapos na hanay ng mga alituntunin na gagampanan mo habang nagtatrabaho sa iyong website.

Ang mga sagot na iyon ay magiging isang napakalakas na tool habang sumasabay ka. Magagawa mong bumalik sa kanila sa tuwing ikaw ay nahaharap sa isang desisyon tungkol sa iyong website.

Dapat mo bang gawin ito * o * na *? Pumunta sa sheet sheet at alamin. Dapat mong gamitin ang isang malawak o makitid na sidebar? Pumunta sa mga sagot, alamin kung alin ang mas malamang na sumasalamin sa target na mambabasa. At iba pa.

Mga Pangalan ng Domain at Pagho-host sa Web

Kung nais mong maging isang may-ari ng website, kailangan mo ng isang domain name at isang web host.

Well, okay, technically Speaking, maaari kang bumuo ng isang pagsubok sa website ng lahat sa iyong sariling computer at pagkatapos ay patakbuhin ito mula sa isang lokal na webserver (naka-install din bilang software sa iyong computer), ngunit hindi iyon magiging isang kapaki-pakinabang na solusyon para sa 99% ng kaso, kaya laktawan natin ito.

Kaya, isang host at isang domain …

Ang masamang balita dito ay pareho silang nagkakahalaga ng pera.

Ang mabuting balita … hindi gaanong pera sa engrandeng pamamaraan ng mga bagay. Dagdag pa, habang natututo ka, maaari ka ring maglunsad ng maraming maliliit na website sa isang solong pangalan ng domain at sa ilalim ng isang web host.

Ngunit magsimula tayo sa simula.

Mga host sa web:

  • Sa simpleng mga term, isang web host ay kung saan nakaupo ang iyong website, at kung saan mahahanap ito ng iyong mga bisita. Sa isang paraan, ang mga web host para sa mga website ay katulad ng mga apartment para sa mga tao. Sa ilalim ng hood, ang mga host ng web ay mga kumpanya na nag-abang sa kanilang mga server kapalit ng pera (… maliit na apartment para sa iyong mga website).
  • Upang magsimula, gagawin ang isang karaniwang ibinahaging plano sa pagho-host. Maaari kang makakuha ng mga para sa anumang pagsisimula ng mababang halaga ng $ 3 / buwan. Narito ang isang mahusay na paghahambing ng mga sikat na web host. Suriin ito at magpasya kung alin sa mga kumpanyang iyon ang tila tama para sa iyo. Gayunpaman, ang aming mga rekomendasyon ay pumunta para sa SiteGround, A2 Hosting, at Dreamhost.

Mga domain:

  • Kung ang isang web host ay isang apartment, kung gayon ang isang domain ay ang address ng apartment na iyon. Halimbawa, ang domain ng website na ito ay hostingfacts.com.
  • Ang paraan upang makapagsimula ay ang pumili ng iyong ninanais na pangalan ng domain at pagkatapos ay bilhin ito mula sa isang rehistro. Narito ang isang komprehensibong gabay sa kung paano bumili ng isang domain name, at narito ang isang listahan ng mga tagagawa ng domain name.

 

Mga Mungkahi at Tip para sa Pagpili ng isang Pangalan ng domain

Okay, kaya ang pagpunta sa ilang domain registrar at talagang pagbili ng domain ay isang bagay, ngunit paano mo pipiliin ang tamang pangalan ng domain?

Mayroong ilang mga paaralan:

  • Mga brand na pangalan ng domain. Iyon ay mga domain na binubuo ng mga di-umiiral na mga salita. Isipin, ang mga bagay tulad ng Google.com, o Yahoo.com. Bago sumama ang mga kumpanyang iyon, walang ibig sabihin ang mga salitang iyon. Ang baligtad ng isang naka-brand na pangalan ng domain ay … maayos, lubos na brandable, hindi malilimutan, at madaling makilala ang iyong site mula sa iba.
  • Mga pangalan na batay sa keyword. Ang mga ito ay binubuo ng mga umiiral na mga salita, inilalagay sa isang pagkakasunod-sunod na naglalarawan sa layunin ng site. Isipin, ang mga bagay tulad ng Pizza.com, o StartBloggingOnline.com. Gamit ang isang domain name na ganyan, ang iyong mga bisita ay magagawang tumpak na mahulaan ang uri ng website na pupuntahan lamang nila. Ang downside ay ang mga domain na iyon sa pangkalahatan ay hindi gaanong tatak.
  • Mga pinagsamang pangalan. Iyon ay mga branded domain at mga keyword na nakabase sa keyword na magkasama. Sa tingin, Facebook.com, o Copyblogger.com. Ang mga nasabing pangalan ay nagmumungkahi ng “ilang” bahagi ng kalikasan ng website sa bisita, ngunit mataas pa rin ang pagiging brandable.

Ang ilang mga pangkalahatang alituntunin anuman ang uri ng domain na iyong pinili:

  • Gawing madaling kabisaduhin ang domain.
  • Gawin itong maikli at simple. Ang mas mahaba ang domain ay, mas nakalilito ito.
  • Kumuha ng isang .com (kung maaari). Ang .com ay ang pangunahing “top-level domain” na magagamit. Huwag tumira para sa anumang bagay.
  • Subukan upang maiwasan ang mga hyphens. Kunin ang iyong pangalan sa form na single-blob tulad ng “cakerecipes.com” sa halip na “cake-recipes.com”

Mga bagay na handa pagkatapos ng kabanatang ito:

  • Isang pangalan ng domain.
  • Isang web host.
  • Ang iyong sheet ng mga sagot – ang mga layunin ng iyong site at kung paano ito maglilingkod sa madla.

Kailangan mo ng karagdagang tulong? Narito ang karagdagang pagbabasa para sa iyo:

  • Bakit ibinahagi ang pagho-host? Ang mga pangunahing uri ng host ay inihambing
  • 10 mga bagay na nagpapabuti sa isang web host
  • 12 mga patakaran para sa pagpili ng tamang pangalan ng domain
  • Isang komprehensibong gabay sa pagpaplano ng website

KABANATA 2: Pagdidisenyo at Wireframing

Kumuha ng isang papel at panulat at magkamot kasama ang istraktura ng website

Okay, ipasok ang yugto ng disenyo.

Una sa mga bagay, narito ang etika sa trabaho na pupuntahan natin dito:

  • Gumagamit kami ng panulat at papel hangga’t maaari, at pagkatapos lamang lumipat sa computer. Maniwala ka sa amin, bawat minuto na ginugol sa pagtatrabaho sa iyong disenyo sa papel ay isang oras na na-save sa sandaling simulan mo ang pag-tune ng mga bagay sa computer.
  • Gumagawa kami ng iterative na trabaho … Ginagawa namin »suriin ang mga resulta» pagbutihin »suriin ang mga resulta» ulitin hanggang sa magawa.

Sa kabanata 1, binanggit namin ang isang bagay na tinawag naming panuntunan # 1 ng pagbuo ng website. Ngayon ang oras para sa panuntunan # 2:

Rule # 2 ng pagbuo ng website:

Mag-isip muna ng nilalaman.

Ang nilalaman ay ang mahalaga sa isang website. Hindi ang disenyo. Nilalaman.

Dumating ang mga tao para sa nilalaman. Hindi sila darating para sa disenyo. Ang disenyo ay lamang ng isang sasakyan upang maihatid ang nilalaman.

Huwag magsimula sa kung paano ang hitsura ng iyong website. Magsimula sa nilalaman. Nilalaman. Nilalaman. Nilalaman.

Kaya ano ang ibig sabihin ng “nilalaman”? Sa madaling salita, ito ang bagay na nais makuha ng mga tao mula sa iyong website. Ang mga post sa blog, mga produkto sa tindahan, mga thread ng forum kung nagtatayo ka ng isang forum, mga artikulo ng balita, alok ng iyong negosyo, atbp.

“Talaga? Hindi mahalaga ang mga hitsura? ” – tanong mo.

Sa halip na matalo natin ito, tingnan ang pahinang ito:

Simpleng website

Ang simpleng web page na ito ay ang pinakamainam na paliwanag ng kung ano ang disenyo at kung anong layunin ang nagsisilbi online.

Kaya tandaan, nilalaman muna!

Nilalaman at Istraktura ng Website

Okay, kaya dahil ang nilalaman ay ang pinakamahalagang bagay, kailangan mong magkaroon (karamihan sa) handa na ito nang una. O hindi bababa sa, kailangan mong magkaroon ng isang magandang ideya kung magkano ang nilalaman na magiging at kung anong anyo.

Tandaan. Alam namin na ang bahaging ito ay maaaring maging matigas. Ang pagsisimula sa nilalaman ay tila hindi likas para sa disenyo ng website, ngunit ito talaga ang pinakamahusay na paraan upang makakuha ng isang napakahusay na resulta sa pagtatapos. Kaya isipin ang tungkol sa nilalaman na nais mong ibahagi sa mambabasa, at kung paano mo nais ipakita ito.

Ang susunod na hakbang ay upang mailabas ang mga indibidwal na uri ng mga pahina na iyong kakailanganin (tulad ng isang homepage, isang pahina ng produkto, isang pahina ng kategorya, isang pahina, isang pahina ng contact, ang pangunahing pahina ng benta, ilang pahina ng landing page ng subscription sa newsletter, pangunahing listahan ng blog, mga indibidwal na post, isang tindahan marahil, at kung ano pa ang tila kinakailangan).

Isipin, ano ang pinaka-epektibong paraan upang maisaayos ang iyong nilalaman sa website?

Gawin ang lahat ng ito sa papel. Ito ay malamang na magiging mas madali at mas mabilis para sa iyo kaysa sa pag-aaral ng ilang piraso ng software na pagguhit ng tsart sa lugar.

Halimbawa:

nilalaman-istraktura

Mag-scroll Magkasama sa isang Wireframe

Ang isang wireframe sa disenyo ng web ay simpleng pahina ng eskematiko o blueprint – isang visual na gabay na kumakatawan sa balangkas ng isang website (Sinasabi sa amin ng Wikipedia).

Ang mga wireframes ay kahanga-hangang! Ginagamit namin ang mga ito para sa karamihan ng mga bagay na ginagawa namin na sinadya upang lumitaw sa online. Halimbawa, narito ang isang wireframe para sa napaka gabay na ito:

Mag-scroll nang sama-sama ng isang wireframe

Tulad ng nakikita mo, muli, nasa papel ito. Kahit na maraming mga app para sa ganitong uri ng trabaho, hindi namin talaga pinapayuhan ang paggamit nito. Maaari silang maging mahusay para sa mga pro designer, ngunit ang isang nagsisimula o isang tagapamagitan ay mawawalan lamang ng oras sa pag-aaral ng mga ito, at sa huli, hindi sila makakakuha ng maraming pagpapabuti sa kung ano ang kanilang makamit sa pamamagitan ng pen at papel.

Kaya, kung paano mag-wireframe?

Buweno, mayroong dalawang pamamaraang kung ikaw ay isang nagsisimula:

  • Pumunta sa daloy kung pakiramdam mo ay malakas, at lumayo lamang (hindi palaging isang perpektong solusyon).
  • Kumuha ng ilang mabilis na kaalaman sa kung paano maayos ang wireframe (karaniwang mas mahusay).

Para sa huli, pumunta dito – isang mahusay na gabay.

(Siguraduhin na lumikha ng isang wireframe ng bawat mahalagang uri ng pahina na nakalista ka sa nakaraang hakbang.)

Mga bagay na handa pagkatapos ng kabanatang ito:

  • Karamihan sa mga nilalaman para sa site, o hindi bababa sa karamihan sa mga hinulaang (halimbawa, kung umaasa ka sa nilalaman na binubuo ng gumagamit, kung gayon mahirap na magkaroon ng bago).
  • Inihanda ang istraktura ng nilalaman ng iyong website bilang isang grap.
  • Isang wireframe ng mga indibidwal na uri ng mga pahina na kakailanganin mo.

Karagdagang pagbabasa:

  • 9 mga hakbang sa pagpaplano ng nilalaman ng website
  • Bago sa disenyo ng web? Magsimula dito.

KABANATA 3: UX at UI

Huwag maliitin ang kahalagahan ng karanasan ng gumagamit at interface ng gumagamit

Tulad ng sa, Karanasan ng Gumagamit at Interface ng Gumagamit.

Binibigyan kami ng WebDesignerDepot ng isang medyo patula na kahulugan ng dalawa:

Ang UI ay ang saddle, ang mga gumagalaw, at naghahari.

Ang UX ay ang pakiramdam na nakakuha ka ng pagsakay sa kabayo, at itali ang iyong mga baka.

Para sa isang mas praktikal na kahulugan:

  • Ang UI ay kung ano ang nakikita ng gumagamit kapag tiningnan nila ang iyong site.
  • Ang UX ay kung ano ang pakiramdam nila tungkol dito.

Ang pares, at kung gaano kahusay ang naisakatuparan nito, pangunahing tumutukoy sa pagiging kapaki-pakinabang ng iyong website para sa end-user / bisita.

Ang parehong disenyo ng UX at UI ay malaki ang mga paksa sa kanilang sarili, at maraming mas maliit na elemento na may papel sa panghuling resulta.

Sa madaling salita, maraming matututunan kung nagsisimula ka lang sa iyong paglalakbay.

Kaya sa halip na subukang subukan natin ang isang buong kurso sa disenyo ng UX at UI dito, ituro lang natin ang isang maliit na mahahalagang elemento, at pagkatapos ay ipadala ka sa ibang lugar para sa karagdagang pagbabasa.

Mga Layunin ng Gumagamit

Ang UX ay tungkol sa mga layunin ng gumagamit … Hindi kasing dami ng iyong mga layunin … Mga layunin ng gumagamit.

Okay, ano ang ibig sabihin nito? Una sa lahat, bumalik sa layunin ng iyong website – ang bagay na nagtrabaho ka sa nakaraang mga kabanata. Ang dahilan kung bakit ka nagtatayo ng website at kung paano ito nakakatulong sa gumagamit / bisita.

Paano ito isinalin sa layunin ng bisita? … Ano ang isang bagay na nais makamit o makamit ng bisita pagdating sa iyong site? Iyon ang kanilang layunin.

Gaano kadali ang Mga Mga Layunin na Makamit?

Susunod, tumuon sa sumusunod na tanong:

  • Maaari bang makamit ng bisita ang kanilang layunin? – Maaari ba silang makarating sa eksaktong piraso ng impormasyon na kanilang napunta para sa isang simpleng paraan?

Upang masagot ito, kailangan mong bumalik sa iyong wireframe, ang iyong istraktura ng nilalaman, at mga double-check na mga bagay.

Tiyaking ang kahulugan ng istraktura ng nilalaman at mga pahina na naisip mo na mula sa punto ng view ng isang gumagamit. Siguraduhin na posible para sa kanila na mag-navigate sa pagitan ng mga mahahalagang pahina nang malay at sa hindi nakakalito na paraan.

Mahalaga, narito, tinitiyak namin na binibigyan ng website ang iyong halaga ng mga bisita.

Mahirap malaman ang lahat sa iyong sarili, hindi ito?

Inirerekomenda ng lubos na suriin mo ang mga mapagkukunang nakalista sa seksyon ng “karagdagang pagbasa” ng kabanatang ito … ngunit maaari mo ring subukan ang “isang hack,” upang makapagsalita.

Lalo na, isipin kung ano ang nabigo sa iyo kapag binisita mo ang mga website na katulad ng nais mong itayo? Marahil mayroong ilang impormasyon na mahirap makuha o o ilang elemento ng interface na ginagawang nakalilito ang site.

Kumuha ng mga tala, gumawa ng mga konklusyon, huwag gumawa ng parehong pagkakamali sa iyong website.

Paggamit ng Emosyon bilang isang Tool

Kapag nagtatrabaho sa UI at UX ng iyong site, kung ano ang pangunahing layunin mo ay ang pag-imbita ng isang tiyak na damdamin sa iyong bisita.

Nais mong madama nila ang isang tiyak na paraan, na kung gayon ay makumbinsi ang mga ito na kumilos ng isang tiyak na paraan. Kaya, ang paggawa ng iyong website ay tunay na kapaki-pakinabang.

Upang gumana sa emosyonal na bahagi ng trabaho, ang isa sa mga pinakamahusay na tool ay kulay.

Ang mga kulay ay may iba’t ibang kahulugan sa iba’t ibang kultura. Ang pag-unawa sa mga pagkakaiba na ito ay maaaring gawing mas madali ang iyong trabaho. Narito ang isang magandang sheet ng cheat.

Kapag nasa ballpark ka ng kung anong mga kulay na nais mong gamitin (marahil), narito ang ilang mga pangkalahatang patnubay kapag nagtatrabaho sa kulay:

  • Pumili ng isang pangunahing pamamaraan ng kulay na binubuo ng isang pares ng mga kulay na magkasama nang magkasama. Narito ang isang mahusay na tagagawa ng scheme ng kulay.
  • Pumili ng isang kulay na magiging iyong kulay ng tuldik – ang kulay na gagamitin para sa mga pindutan ng pagkilos, bumili ng mga pindutan, atbp Talaga, anumang bagay na nangangailangan ng atensyon ng gumagamit.

Palalimbagan

Sa maraming mga kaso, ang palalimbagan ay kung saan nanalo ka (o nawala) ang laro ng pagbuo ng website.

Napakadali nitong kalimutan ang tungkol sa typograpiya at gamitin ang Arial para sa lahat.

Hindi inirerekomenda.

Sa mga araw na ito, ang pakikipagtulungan sa mga pasadyang mga font ay madali ang uber, at hindi mo na kailangang gumawa ng anumang teknikal upang paganahin ang mga pasadyang mga font sa iyong site.

Malaki, grand typography ay napaka sa moda sa mga araw na ito, at gumagawa din ito ng gawain ng isang taga-disenyo – lalo na ang gawain ng isang nagsisimula sa taga-disenyo – mas madali.

Tingnan ang site na ito, halimbawa:

bonobos

Napansin ba? Yep, malaki ang mga font, at mukhang mahusay sila!

Narito kung paano ito gagana:

  • Sa pangkalahatan, ang bawat disenyo ng website ay nangangailangan ng dalawang uri ng teksto: heading at talata. Sa karamihan ng mga kaso, isang font lamang ang bawat gagawin.
  • Pumunta sa Google Font – sariling aklatan ng Google ng mga libreng font na magagamit mo sa iyong website – at maghanap ng isang font ng headline na talagang nasiyahan ka.
  • Pagkatapos, kunin ang pangalan ng font na iyon, at hanapin ito sa Font Pair – ito ay isang silid-aklatan ng paunang ginawa ng mga pares ng font na magkasama.
  • Pumili ng isang pagpapares na mukhang kamangha-manghang.
  • Ibagsak ang mga pangalan ng parehong mga font, kakailanganin mo ito mamaya.

Ang paggawa nito sa ganitong paraan ay mapabilis ang iyong proseso at magbibigay pa rin sa iyo ng isang mahusay na resulta.

Halimbawa, nakita namin ang isang font na tinatawag na Bree Serif sa Google Font na lubos naming nasiyahan:

Bree-Serif

Pagkatapos, dinala namin ito sa Font Pair, at iminungkahi ng site na ang Bree Serif ay napupunta nang maayos sa Open Sans. Perpekto:

Bree-Serif-open-sans

Ang Pangwakas na Istraktura

Sa wakas, ang huling hakbang!

Ang buong punto ng kabanatang ito ay makarating sa isang pangwakas na layout / istraktura na gagamitin mo para sa iyong site. Sa puntong ito, dapat lamang na sigurado ka tungkol sa mga bagay na nais mong gawin sa iyong disenyo at UI.

Mga bagay na handa pagkatapos ng kabanatang ito:

  • Malinaw na nakalista ang iyong mga layunin sa gumagamit.
  • Dobleng naka-check ang iyong wireframe upang matiyak na hindi nakalilito ang mga layunin na iyon.
  • Napili ang scheme ng kulay.
  • Lumalabas ang typography.
  • Ang iyong buong layout ng site / istraktura / samahan ng website.

Karagdagang pagbabasa: 

  • UX Magazine
  • UX Booth
  • Ang sikolohiya at emosyon sa likod ng kulay sa disenyo ng web
  • Ano ang disenyo ng karanasan sa gumagamit? Pangkalahatang-ideya, mga tool, at mapagkukunan
  • Ang pagtatakda ng matalinong mga layunin sa negosyo para sa isang website
  • 8 mga patakaran para sa paglikha ng mabisang palalimbagan

KABANATA 4: WordPress, HTML o Mga template?

Magpasya kung aling ruta ang pupunta – mga sistema ng pamamahala ng nilalaman o code ito mula sa simula

Narito kung saan magsisimula ang tunay, marumi, kamay sa ilalim ng hood!

Ito rin marahil ang nakakatakot na bahagi ng proseso (aminin ito!).

Para sa isang beses, ito ang tamang oras upang maglagay ng panulat at papel at magsimulang magtrabaho sa ilang software.

At sa labas ng gate, mayroong isang tonelada ng mga katanungan …

  • Dapat ba akong matuto ng HTML?
  • Kumusta naman ang CSS?
  • Ang mga handa na mga template ng website ng HTML ay gawin ang trick para sa akin?
  • Kailangan ko bang malaman ang isang programming language tulad ng PHP?
  • Narinig ko ang WordPress ay ang paraan upang makabuo ng isang site sa mga araw na ito.
  • Nakita ko na ang ad ng Squarespace Super Bowl. Anong meron dyan?
  • Ano ang tinatawag na Joomla na ito? O Drupal?
  • at on and on.

Ang sagot sa lahat ng iyon ay oo.

Tulad ng sa, oo, maaari mong gawin ang alinman o lahat ng mga bagay na iyon, at nasa iyo lamang ang magpasya kung aling landas ang pipiliin.

Ang nais nating sabihin ay walang # 1 pinakamahusay na diskarte dito. Ang lahat ng ito ay nakasalalay sa kung paano kasangkot ang nais mong makamit sa pagbuo ng web, kung magkano ang mga pangunahing kaalaman sa gusali ng website na nais mong malaman, kung gaano kabilis na kailangan mo ng isang kalidad na site na tapos na, at kung paano mo napapasadya na nais mo itong matapos.

Kaya narito kung paano tayo magpapatuloy mula sa kabanatang ito pasulong. Una, piliin ang persona na tumutukoy sa iyo ng pinakamahusay:

  • a) Nais kong malaman kung ano ang tungkol sa pagbuo ng web, lahat ng mga pangunahing kaalaman, lahat ng mga panloob na pagtrabaho ng isang website, at lahat ng mga mekanismo na gumagawa ng isang website.
  • b) Gusto kong malaman kung paano gamitin ang isang maaasahang tagabuo ng website na hahawakan ang karamihan sa mabibigat na pag-angat para sa akin.
  • c) Hindi ko alam ang gagawin. Gusto ko lang ng isang website na maaari kong itayo ang aking sarili at na gumagana nang maayos.

Sinagot a)? Pumunta sa Kabanata 5.

Sinagot b)? Pumunta sa Kabanata 6.

Sinagot c)? Huwag mag-atubiling suriin ang artikulong ito at pagkatapos ay bumalik (dapat itong makatulong sa iyo na piliin ang perpektong landas):

  • 8 pinakamahusay na blogging at website ng mga platform ng gusali sinuri … Ang bawat platform ay inilarawan kasama ang mga kalamangan at kahinaan nito, at nagmumungkahi din ang mapagkukunan ng pinakamahusay na magagamit na pagpipilian (Wix o SB) para sa iyong mga tiyak na pangangailangan.

Nabasa mo na ba ito? Malaki! Kaya alin sa mga personas sa itaas ang naglalarawan sa iyo ng pinakamahusay – a) o b)?

Ang mga tool na maaaring madaling gamitin:

  • Mga graphic: Kulayan ng pintura.NET, Gimp, Pixlr.
  • Pagsulat ng code: Notepad ++, TextWrangler, SublimeText.
  • Pamamahala ng trabaho: Trello.
  • Disenyo: mga scheme ng kulay, Mga Google Font, ang mga tool mula rito.
  • Potograpiya: I-unsplash, AllTheFreeStock

KABANATA 5: Panimula sa HTML, CSS & Javascript

Paano ang mga website ay isang built-in na katotohanan

Sa kabanatang ito, ituturo namin ang hubad na mga pangunahing kaalaman sa pag-unlad ng web, ipaliwanag ang pinakamahalagang termino, at pagkatapos ay ipadala ka sa ilang mga tiyak na mapagkukunan kung saan maaari mong dagdagan ang iyong kaalaman at kasanayan.

HTML

Ang HTML ay ang wika ng mga website. Ang bawat webpage ay binuo o na-convert sa HTML sa ilang mga punto.

Halimbawa, upang makita ang istraktura ng HTML ng mismong gabay na binabasa mo dito, pindutin lamang ang “Ctrl + U” sa iyong keyboard.

Tinukoy ng HTML ang bawat bloke na nakikita mo sa isang webpage. Sa pagtatapos ng araw, upang ipakita ang anuman sa isang webpage, kailangang ma-convert sa HTML.

Upang matuto nang epektibo ang HTML, ipinapayo namin sa iyo na mag-sign up para sa isa sa (libre o bayad) na mga kurso na magagamit sa web. Ang ilan sa mga pinakamahusay na bago ay matatagpuan sa Codeacademy o Treehouse.

Halimbawa, narito ang isang tukoy na seksyon sa Codeacademy lahat tungkol sa HTML at CSS.

CodeCademy homepage

Kaya iyon ang komprehensibong diskarte sa HTML.

CSS

CSS – upang laktawan ang nakakainis na mga detalye sa teknikal – ay may pananagutan sa pag-istil ng lahat ng nakikita sa isang webpage.

Kinukuha ng CSS ang mga HTML tag at pagkatapos ay mga istraktura at nagdaragdag ng estilo sa kanila. Ang mga bagay tulad ng: naka-bold na teksto, mga pagsasaayos ng kulay, mga anino, mga layout, kahit na mga animasyon, ay ginagawa ngayon sa pangunahin sa CSS.

Para sa isang mas mahusay na pag-unawa sa kung paano ito eksaktong gumagana, lumapit sa mabilis na kurso na ito sa Codeacademy.

Para sa higit na malalim na pag-aaral, suriin din ang mga seksyon ng CSS sa alinman sa Codeacademy o Treehouse.

JavaScript, jQuery, Bootstrap, atbp.

Ang JavaScript ay isang wika ng programming na nagbibigay-daan sa iyo na ipakilala ang ilang mga dynamic na pagkilos sa iyong website. Halimbawa, maaari mong gawin ang mga bagay tulad ng patunayan ang mga form sa web o makipag-ugnay sa gumagamit sa isang mas naka-streamline na paraan nang hindi kinakailangang i-reload ang pahina na kanilang naroroon. Narito ang isang magandang tutorial ng w3schools.

Sa pag-iisip, ang jQuery ay isang library ng JavaScript na nagbibigay-daan sa iyo upang lumikha ng mga advanced na bagay na may mas kaunting pag-cod. Napakadaling magamit para sa isang web developer. Dagdagan ang nalalaman dito.

Sa wakas, ang Bootstrap ay isang kawili-wiling pag-imbento. Orihinal na ipinakilala sa pamamagitan ng Twitter, talaga itong isang unahan sa unahan na nagpapabilis sa proseso ng pagtatayo ng isang website sa pamamagitan ng paghahatid ng karamihan sa mga karaniwang elemento ng site na na-pre-built na. Ito ay kumplikado, hindi ba?

Ngunit hindi. Suriin lamang ang kursong ito ng starter sa Codeacademy (sa pamamagitan ng paraan, ito ay kung paano namin orihinal na natutunan ang Bootstrap).

Mga bagay na handa pagkatapos ng kabanatang ito:

  • Karaniwan, ang unang draft ng iyong website ng HTML / CSS na ganap na itinayo. Mula doon, maaari mong simulan ang iterating at pagpapabuti ng pangwakas na resulta.

KABANATA 6: Mga Plataporma sa Pagbuo ng Website

Pagse-set up ng iyong unang site? Subukan ang mga libreng platform ng website tulad ng WordPress, Joomla o Drupal

Kabanata 6: Mga Plataporma sa Pagbuo ng Website

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Mayroong maraming mga tagabuo ng website sa labas kaysa maaari mong iling ang isang stick. (Kung ikaw ang uri ng isang tao na nanginginig sa mga bagay.)

Okay, biro sa tabi.

Maliwanag, kung wala kang hangaring malaman kung paano mai-code ang mga bagay sa kamay, tiyak na maraming mga solusyon ang makakatulong sa iyo.

Tandaan. Mangyaring tandaan na ang lahat ng ibang tinalakay natin sa mga kabanata 1-4 ay naaangkop pa rin dito. Kahit na pumunta ka sa isang solusyon sa pagbuo ng site na uri ng hands-off, kailangan mo ring maging maingat na gawin ang mga pangwakas na produkto na maging friendly sa mga gumagamit at umayon sa mga layunin ng lahat. Yaong mga tool sa pagbuo ng site ay eksakto na … mga tool.

Magsisimula sa mga pinakamadaling maunawaan:

SquareSpace

Ang nag-iisang platform ng website na nag-anunsyo sa panahon ng Super Bowl.

Sa madaling sabi, isang napaka-madaling gamiting solusyon na maaaring magamit ng sinuman. Walang kinakailangang paunang kasanayan.

Pinapayagan ka nitong magtayo ng mga klasikong website, blog, kahit na ang mga tindahan ng eCommerce ay nagsulat pa kami ng isang pagsusuri tungkol sa mga ito. Ang interface at ang buong proseso ng paggamit nito ay medyo madaling maunawaan, kasama ang mga squarespace guys ay nagbibigay ng maraming kawili-wiling mga tutorial. Suriin ang mga ito dito.

WordPress

Matapat, mahal namin ang WordPress.

Karamihan sa oras, ito ang perpektong platform upang makabuo ng isang website. Ito ay may perpektong balanse sa pagitan ng pagiging kumplikado at kadalian ng paggamit, at talaga itong walang pasadyang napapasadyang.

Animasyon ng WordPress

Gayundin, kasalukuyang ito ang pinakapopular na platform ng website sa kanilang lahat. Tulad ng ibinahagi ng tagalikha ng WordPress – Matt Mullenweg – Ang WordPress ngayon ay may kapangyarihan na 25% ng buong internet. Maaari bang maging mali ang lahat ng mga taong iyon?

Okay, kaya upang makapagsimula sa WordPress kailangan mo lamang ang iyong domain at pagho-host. Ang WordPress software mismo ay libre.

Upang magsimula, huwag mag-atubiling sundin ang isa sa mga landas na ito:

a) “Ang mabilis na landas ng pagsisimula”

  • Pumunta dito upang malaman ang pinasimple na paraan ng pag-install ng WordPress at paglulunsad ng iyong site sa isang hapon.
  • Pumili ng isang libreng tema mula sa opisyal na direktoryo – tiyaking naaayon sa mga layunin ng iyong site, at na ang layout / disenyo ay hindi malayo sa iyong ninanais na istraktura (ayusin mo itong bahagya).
    • Suriin ang dalawang mapagkukunang ito upang malaman kung paano ipasadya ang isang umiiral na tema.
    • Bilang kahalili, maaari kang pumili ng isang multipurpose premium na tema na maaaring maiakma sa pamamagitan ng isang madaling gamitin na interface ng gumagamit (walang kasamang coding). Ang tema ng X ay isang magandang halimbawa ng gayong bagay.
  • I-install ang ilan sa mga pinakatanyag at pinakamahusay na mga plugin upang makakuha ng mga karagdagang tampok.

b) “Ang malalim na landas”

  • Magsimula sa pamamagitan ng pag-aaral ng WordPress sa pamamagitan ng isang online na kurso. Nag-aalok ang Treehouse ng isang kahanga-hangang isa.
  • Piliin ang iyong tema at mga plugin tulad ng sa itaas. Bilang kahalili, bumuo ng iyong sariling tema mula sa ground up.

Sa huli, ang WordPress ay marahil ang pinaka-maraming nalalaman platform ng website sa merkado. Gamit ito, maaari kang bumuo ng halos anumang uri ng website, hindi lamang mga blog o simpleng mga site ng negosyo. Narito ang isang listahan ng 47 (!) Iba’t ibang paraan upang magamit ang WordPress, upang maiisip mo lang.

Joomla at Drupal

Kahit na bahagyang naiiba mula sa bawat isa, Joomla at Drupal ay parehong mahusay na mga sistema ng pamamahala ng nilalaman para sa mas advanced na mga proyekto sa web.

Hindi sila malakas na disenyo-matalino, ngunit ang mga ito ay lubos na napapasadyang at may kakayahang pangasiwaan ang anumang uri ng website na maaaring mayroon ka sa plano.

Sa mga oras, depende sa pagiging kumplikado ng iyong proyekto, maaaring mangailangan sila ng mas maraming oras upang makabisado at mas maraming pagsisikap sa iyon.

Para sa mas malalim na pagsasanay, may mga kahanga-hangang kurso sa Lynda.com, kapwa para sa Joomla at Drupal.

Mga bagay na handa pagkatapos ng kabanatang ito:

  • Ang unang draft ng iyong website ay ganap na binuo, kahit na kung nagpasya kang gumamit ng WordPress o ilang iba pang platform.
  • Tiyaking naaayon sa iyong paunang layunin, ang target na madla, at naghahatid ito ng mahusay na UX.

KABANATA 7: Disenyo ng Tumutugon sa Mobile

Mahigit sa 60% ng mga tao ang gumagamit ng mobiles at tablet upang mag-browse sa web

Ang pagtugon sa mobile ay isang napakahalagang aspeto ng pagbuo ng website, marahil higit pa kaysa sa dati.

Narito kung ano ang tungkol sa buong isyu:

Karaniwan, ngayon, maraming mga tao ang gumagamit ng mga mobile device upang ma-access ang web kaysa dati. Sa katunayan, tinatantiya na mayroong mas maraming mga gumagamit ng internet sa internet kaysa sa mga gumagamit ng internet sa internet (75.1% kumpara sa 52.7%).

Ngunit may problema.

Hindi lahat ng disenyo ng website ay mai-optimize upang matingnan sa mga mobile device na nasa labas ng gate.

Ang ilang mga karaniwang problema ay kinabibilangan ng:

  • ang mga font na napakaliit,
  • ang layout mismo ay hindi nag-aayos ng lahat sa isang mas maliit na screen,
  • o ang teknolohiyang ginamit upang mabuo ang site na hindi magagamit sa mobile.

Ito ay kung saan ang ideya ng mobile na pagtugon ay naglalaro.

Ang isang tumutugon na website ay tumugon sa kapaligiran na tinitingnan nito. Kung ito ay isang computer na desktop, ang website ay nagbibigay sa isang tiyak na paraan. Kung ito ay isang mobile, nag-aalok ito sa ibang paraan.

Narito ang isang mas mahusay na paliwanag: Ano ang Ang Heck Ay Nakikiramay sa Disenyo sa Web?

Kaya ang bagay na dapat gawin ngayon ay upang suriin at siguraduhin na ang iyong website ay gumagana sa mga mobile device. Gumamit ng iyong sariling mga aparato upang suriin ito, ngunit subukang subukan din ang mobile test ng Google, o mag-hop sa isang tool tulad ng Responsive Design Tester.

Kung may mga problema, kailangan mong ayusin ang mga ito.

Ang ilang mga solusyon:

  • Nakikiramay sa Disenyo ng Web – kung paano
  • Paano Makagawa ng Tumutugon ang Website Sa Mga 15 Minuto

KABANATA 8: Pinagsasama-sama ang lahat

Alam mo ang mga pangunahing kaalaman, ngayon mo na rin

Manatili, malapit na kami doon!

Ito ang huling kabanata sa aming medyo mahabang paglalakbay.

Sa puntong ito, dapat mong itayo ang iyong unang website … Maging ito sa WordPress, built-built HTML / CSS, ilang tagabuo ng website, o anumang iba pang mga tool na pinili mo para sa trabaho.

Sa madaling sabi, congrats! Ngunit mayroon pa ring ilang mga bagay na nagkakahalaga ng paggawa:

  • I-double-check ang mga bagay na tinalakay namin sa mga kabanata 1 at 2. Siguraduhin na ang mga layunin ay talagang gumagana para sa end-user, at na ang website ay hindi nakalilito.
  • Patunayan ang iyong istraktura ng code sa pamamagitan ng serbisyo ng pagpapatunay sa markup ng W3C.
  • Suriin kung walang anumang mga isyu sa seguridad sa site. Gamitin ang scanner ni Sucuri para sa na.
  • Kumuha ng puna mula sa komunidad. Suriin kung ano ang iniisip ng ibang tao sa iyong trabaho. Ang mga forums sa Sitepoint ay maaaring maging mabuti para doon.

Kung ito ang una mong basahin ang mapagkukunang ito pagkatapos ay hinihikayat ka namin na bumalik ito nang ilang beses at ituring ito bilang isang file ng sanggunian para sa iyong karagdagang edukasyon.

Tulad ng sinabi namin sa simula, huwag mag-atubiling gamitin ang TOC at mag-navigate mula sa kabanata hanggang kabanata at mapagkukunan sa mapagkukunan na nakikita mong angkop.

Panghuli, kami ay kakaiba … ano ang iyong pinakamalaking hamon pagdating sa pagbuo ng website, pagbuo ng web o disenyo? Mangyaring ibahagi sa mga komento o sa pamamagitan ng Twitter. Lahat tayo ng tenga!

Salamat sa pagbabasa, kamangha-mangha ka!

  • Kabuuan116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector