Napakaraming tutorial at gabay online na nagtuturo sa iyo kung paano epektibong gamitin ang disenyo ng web 2.0. Bagama't ang karamihan sa mga tutorial na ito ay kapaki-pakinabang, sa parehong oras pinapatay nila ang pagka-orihinal sa disenyo ng web. Halimbawa, karamihan sa mga "gabay" ay nagsasabi sa iyo na ang web 2.0 ay tungkol sa pagkakaroon ng isang makintab na badge, mga stripes na background, at mga bold na font. Resulta? Mayroong hindi mabilang na daan-daang mga disenyo na may mga badge, guhitan, at malalaking titik na naka-bold... at hindi sila naiiba sa isa't isa. Hindi mahalaga kung gumawa ka ng web 2.0, web 1.0, o web 75.0 na disenyo, lahat ito ay nagiging orihinal at hindi malilimutan.
Gayunpaman, kung hindi talaga makahanap ng anumang partikular na orihinal na sumisimbolo sa iyong disenyo, ito ay "mas ligtas" na sumama sa kasalukuyang mga uso ng disenyo ng web. Kaya narito ang isang napakaliit na fragment ng layout ng disenyo ng web, at kung paano gawing layout ng web 2.0 ang isang regular na layout.
Ito ang mayroon kami…
At ito ang ating gagawin...
Magtatrabaho kami sa Photoshop, walang ginagamit kundi mga estilo ng layer; tumutuon sa mga banayad na gradient at anino.
Magsimula sa pamamagitan ng paggamit ng Rectangular na hugis na may mga bilugan na sulok, at pagguhit ng… parihaba.
Ang kailangan muna nating gawin ay bigyan ng kaunting lalim at buhay ang ating parihaba. Kasunod ng mga prinsipyo ng disenyo ng web 2.0, tanging mga anino, outlining at light gradient ang magbibigay sa atin ng ganitong epekto. Kaya pumunta sa mga estilo ng layer, at mag-drop ng kaunting banayad na anino. Ginamit namin #96aed6 para sa layuning ito.
Upang bigyan ng kaunting lalim ang hugis (para hindi ito magmukhang patag na bagay), magdagdag ng banayad na anino sa loob, na may mas madilim na tono (ginamit namin #304f82 )
Panghuli, mahalagang magdagdag ng kaunting outlining. Gagamitin namin ang #FFFFFF na puting kulay, dahil ang aming mga anino mula sa magkabilang gilid ay mas madidilim, gusto naming magkaroon ng liwanag at semi-visible na linya na mag-contour sa hugis.
[…] Sumulat si Marie ng isang kawili-wiling post ngayon saNarito ang isang mabilis na sipi. Napakaraming mga tutorial at gabay online na nagtuturo sa iyo kung paano epektibong gamitin ang disenyo ng web 2.0. Bagama't ang karamihan sa mga tutorial na ito ay kapaki-pakinabang, sa parehong oras pinapatay nila ang pagka-orihinal sa disenyo ng web. Halimbawa, karamihan sa “gabay” … […]
[…] Sumulat si Jacob Cass ng isang kawili-wiling post ngayon saNarito ang isang mabilis na sipi. Napakaraming mga tutorial at gabay online na nagtuturo sa iyo kung paano epektibong gamitin ang disenyo ng web 2.0. Bagama't ang karamihan sa mga tutorial na ito ay kapaki-pakinabang, sa parehong oras pinapatay nila ang pagka-orihinal sa disenyo ng web. Halimbawa, karamihan sa “gabay” … […]
Magandang trabaho talaga. Nakakita ako ng maraming malalim na impormasyon na makakatulong sa akin na magpatuloy.
Kawili-wiling tutorial. Ang tanong ko ay: Ano ang ginagawa nitong "Web 2.0"? Ang Web 2.0 ay walang (o maliit na gagawin) sa hitsura ng isang site. Ang sinasabi mo dito ay disenyo, o hitsura lang ng isang site. Ayan yun. Ang Flickr.com ay isang web 2.0 site, at talagang hindi gumagamit ng alinman sa mga prinsipyong ito. Gayundin, ang Facebook ay napaka-simple, hindi gumagamit ng mga drop-shadow, bilugan na sulok o "medyo cartoonish at bold" na mga font, ngunit ito ay isang web 2.0 site. Pati Wikipedia.... atbp…
Ang Web 2.0 ay tungkol sa kung paano nakikipag-ugnayan ang mga user sa site, at kung paano nakikipag-ugnayan ang site sa kanila.
Isang magandang tingnan sa disenyo ng web 2.0.
ganda ng tutorial...
Gusto ko sanang itanong,
paano mo malalaman kung 2.0 ang disenyo nito o hindi?
sorry newbie lang ako
[…] Sa pamamagitan ng pswish.com ay nagkaroon ng kahit na pinto, kung saan ginawa mo ang iyong opisyal: Ang Web 2.0 ay nakikilala sa pamamagitan ng mga website. Orihinal na Artikulo […]
[…] Tingnan ang Tutorial […]
Mahusay na artikulo, thx 🙂
Gayundin kung naghahanap ka ng ilang magagandang libreng mga font http://www.fonts2u.com
Hi! kagiliw-giliw na piraso ng disenyo 🙂 ngunit ang link ay hindi gumagana 🙁 maaari ko bang makuha ang psd file na ito kahit saan pa? Salamat