Pagdidisenyo ng Mga Background Para sa Mga Website

Kapag ang pinakamahalagang bahagi ng anumang disenyo ng website, ang background ng isang site ay maaaring magamit sa maraming mga paraan upang makatulong na lumikha ng isang mas mahusay na karanasan ng gumagamit.

Ngayon, ang paglikha ng mga background nang maayos ay mas mahirap kaysa dati, at nagpapakita ng ilang mga bagong hamon, habang pinaghihigpitan ang ilan sa mga potensyal na magkaroon ng mga background kung hindi man.

Halimbawa, ang background sa nakaraang mga oras ay maaaring magamit bilang isang praktikal na bahagi ng disenyo. Maaari kang maglagay ng mga arrow dito, halimbawa, upang maituro ang pansin ng manonood sa isang bagay na mahalaga.

Bakit nagbago ang mga bagay ay dahil sa pangangailangan para sa tumutugong disenyo, at ang pagkakaiba-iba ng iba't ibang laki ng screen at mga uri ng screen na maaaring ginagamit ng mga tao.

Bilang isang resulta, ang background ay naging isang hindi gaanong mahalagang elemento sa disenyo ng site ngayon, at medyo maraming mga site ang walang opisyal na background sa lahat.

Talaga bang mahalaga ang mga background? Upang malaman, sinuri namin ang nangungunang 30 mga website na niraranggo (hindi kasama ang mga pag-uulit) at ang mga resulta ay talagang kawili-wili.

Tulad ng nakikita mo mula sa imahe sa itaas, ang nangungunang mga website na ranggo ay hindi mag-abala sa mga background sa lahat, at tila hindi ito nagawa sa kanila ng kaunting pinsala na patungkol sa pagtanggap ng gumagamit.

Lumilipad ito sa harap ng maginoo na pag-iisip tungkol sa disenyo ng website, ngunit mahirap na makipagtalo sa malamig na mahirap na katotohanan. Nakakagulat na sapat, ang unang website sa listahan na may background ay hindi sumisikat hanggang maabot mo ang bilang 10, na kung saan Twitter, at ang background na iyon ay makikita lamang kung hindi ka naka-log in.

Sa nangungunang 30 mga website para sa 2017, ang mga site lamang na may tamang background ay:

  • Twitter, na may background na potograpiya (niraranggo ang ika-10)
  • Live (Outlook), na may isang solidong background ng kulay (niraranggo sa ika-12)
  • NetFlix, na may background sa collage (niraranggo sa ika-21)
  • Ang WordPress, na may isang solidong background ng kulay (niraranggo 26th)
  • Bing, na may background sa potograpiya (niraranggo ang 29th)
  • Tumblr, na may background sa potograpiya (niraranggo ang 30th)

Kaya't 20 porsyento lamang ng nangungunang 30 mga website ang may mga background, at ang mga nagawa nito ay hindi maganda ang listahan.

Ang nag-iisang bentahe ng isang background sa site ay nakakatulong itong mapanatili ang isang kahulugan ng pagkakakilanlan ng site sa maraming mga pahina, ngunit dahil may iba pang mga elemento na maaaring makamit din ang hangaring ito at marahil ay mas mabuti, hindi talaga iyon isang malaking kalamangan.

Maraming mga kalamangan. Ipinakikilala ng mga background ang labis na mga hamon pagdating sa pagtugon sa site, at maaaring mangailangan ng madalas na pag-update upang maiwasan ang pagiging luma.

Ang isa pang hamon para sa modernong taga-disenyo ay na bilang karagdagan sa mga static na background, posible ring lumikha ng mga background sa video. Kung pipiliin mo ang huli, mahalaga na malaman kung ano ang iyong ginagawa, dahil maraming mga gumagamit ang makakahanap ng isang hindi magandang naisip na background ng video na nakakainis.

Sa maraming kadahilanan na huwag gumamit ng mga background, maaari kang magpasya na sundin ang mga yapak ng mga nangungunang ranggo na mga website at kanal ang buong ideya sa background nang isang beses at para sa lahat. Ngunit kung ipilit ng maikling sabi na ang site ay kailangang magkaroon ng isang background, ano ang maaari mong gawin? Iyon ang susubukan naming malutas sa natitirang artikulong ito.

Dapat na nilalaman ang mga background

Ang nilalaman ay dapat palaging nasa isang layer sa itaas ng background ng pahina. Kung hindi mo paghiwalayin ang mga elemento ng iyong pahina sa iba't ibang mga layer, maaari itong lumikha ng mga problema para sa iyo kapag may isang bagay na kailangang baguhin.

Pinakamahusay na kasanayan na gamitin ang paghihiwalay ng layer na ito hangga't maaari. Halimbawa, ang logo ba ng site ay talagang kailangang isama nang direkta sa background? Kadalasan magiging mas makatuwiran na magkaroon ng logo sa isang hiwalay na layer. Sa ganitong paraan kung kailangang ma-update ang logo, maaari itong mai-update nang nakapag-iisa ng buong background.

Ang paggamit ng mga layer sa ganitong paraan ay nangangahulugang mas maraming trabaho para sa iyo sa bahagi ng paglikha ng mga bagay, ngunit mas kaunting trabaho sa panig ng pagpapanatili. Nagbibigay din ito sa iyo ng maximum na kontrol, dahil maaari mong itago ang mga bagay, ilipat ang mga ito, o gawing iba ang kilos ayon sa iyong mga pangangailangan sa anumang oras.

Ipinapakita ng imaheng ito ang perpektong istraktura para sa isang template ng disenyo ng background:

Sa loob ng bawat layer (maliban sa base layer) mayroong saklaw upang lumikha ng karagdagang mga layer para sa kahit na mas mataas na antas ng paghihiwalay kung kailangan mo sila.

Ang mas maraming mga degree ng paghihiwalay na nilikha mo, mas maraming kontrol na maaari mong makuha. Maaari mong pakiramdam na hindi iyon mahalaga sa iyong ngayon, ngunit madalas na nangyayari na ito ay nagiging isang kadahilanan sa paglaon.

Ang nag-iisang pinakamahalagang bagay na dapat maunawaan ay ang "background" ay anumang hindi nilalaman. Kaya't ang teksto o mga imahe na inilaan ay nasa pahina ngunit hindi bilang bilang ng nilalaman na bilang bahagi ng background, ngunit hindi lahat ay uuri-uriin ang mga ito sa ganoong paraan.

Pag-frame

Bumalik sa mga unang araw ng disenyo ng web, ang pag-frame ay isang simpleng bagay lamang sa pag-eehersisyo kung saan ang iyong nilalaman ay dapat na may kaugnayan sa background. Sa araw na ito ng tumutugong disenyo, gayunpaman, ito ay karaniwang mas kumplikado kaysa doon.

Sa tumutugong disenyo, mayroon ka lamang dalawang pagpipilian upang harapin ang isyu sa pag-frame. Ang unang pagpipilian ay upang sukatin ang nilalaman at imahe sa background na may kaugnayan sa magagamit na laki ng screen. Ito ay pinakamainam kung ang integridad ng disenyo ang pinakamahalagang kadahilanan, kahit na ito ay magiging isang bihirang sitwasyon.

Ang pangalawang pagpipilian ay i-phase out ang mga seksyon ng background, o kahit ang buong background, sa mas karaniwang sitwasyon kung saan ang pagiging totoo ng nilalaman ay mas mahalaga kaysa sa integridad ng disenyo.

Ang isyung ito ng "integridad ng disenyo", sa pamamagitan ng paraan, nangangahulugan lamang na palaging pareho ang disenyo, anuman ang uri ng screen na tiningnan ito. Ang kabaligtaran ay kung saan laging nakikita ang nilalaman (higit pa o mas kaunti) magkapareho anuman ang uri ng screen na ito ay tiningnan.

Paggamit ng pag-scale para sa kakayahang tumugon

Kapag gumamit ka ng pag-scale upang mapanatili ang pare-parehong pag-frame sa iba't ibang mga uri ng aparato at oryentasyon, pinapanatili nito ang integridad ng iyong disenyo, ngunit ang resulta ay maaaring hindi parating magiging kung ano ang iyong inaasahan o kahit na nais, lalo na kung gumagamit ka ng background sa potograpiya.

Suriin natin ang isang halimbawa ng diskarteng ito sa pagkilos. Simula sa Samsung Galaxy S5 sa portrait mode (tandaan na ang mga imaheng ito ay na-scale upang magkasya sa artikulo, sa gayon ang teksto na maaari mong makita doon ay talagang nababasa sa mismong aparato).

Ito ang hitsura nito sa landscape mode (halos palaging mas mahusay na humawak ng isang telepono sa oryentasyong tanawin para sa lahat maliban sa pagtawag sa telepono, ngunit pinipilit pa rin ng mga tao na i-hold ang kanilang mga telepono sa orientation ng larawan.

Tulad ng nakikita mo, ang layout ay perpektong pagmultahin kapag na-scale, kahit na mayroon ka lamang 640 x 360 pixel upang gumana. Susunod na mayroon kaming iPad sa orientation ng larawan.

At tanawin.

Ang bagay na mapapansin mo kapag ginamit ang pag-scale ay ang kaunting pagkakaiba-iba sa pagitan ng iba't ibang mga aparato at resolusyon, maliban na maaaring maraming nasayang na patayong espasyo sa view ng larawan.

Totoong magiging mas mahusay na gumamit ng iba't ibang mga pamamaraan sa background at mga bahagi ng nilalaman, upang ang mga item sa menu ay ibabalot sa isang 2 × 2 grid sa halip na laging manatili sa 1 × 4 na layout, ngunit ang dahilan na hindi ito ginagawa sa ganoong paraan ay dahil imposibleng mahulaan kung magkano ang magagamit na patayong puwang.

Sa gayon ang bentahe ng pag-scale ay kapag nais mong matiyak na ang ilang bahagi ay palaging mananatili sa pagtingin, anuman ang mga pangyayari.

Paggamit ng phased na itago at ibunyag ang kakayahang tumugon

Ang isang mas praktikal na senaryo, at ang pinaka nais ng mga taga-disenyo ay nais na gamitin ang halos lahat ng oras, ay isang disenyo kung saan ang background (o mga bahagi nito) ay maaaring i-phase out lamang kung walang sapat na silid upang maipakita ito, kaya't laging nilalaman ng site nakakakuha ng maximum na pansin.

Narito ang isang halimbawa ng pagkakaiba kapag ginagamit ang pamamaraang ito. Gagamitin namin ang parehong mga aparato at oryentasyon upang ilarawan. Una ay ang Samsung Galaxy S5 na larawan.

Samsung Galaxy S5 na tanawin.

Potograpiya ng iPad.

iPad Landscape.

Makikita mo rito ang isang malaking pagkakaiba sa pagitan ng mga aparato. Hindi pinapayagan ng maliit na screen ng Samsung Galaxy S5 na maipakita ang background, hindi alintana kung ang aparato ay gaganapin sa portrait o orientation ng landscape, at kung ano ang ipinapakita ay nababagay upang magkasya sa magagamit na puwang.

Kapag ang parehong site ay tiningnan sa iPad, kung gayon ang background ay palaging ipinapakita anuman ang orientation, ngunit may ilang pagkakaiba sa nakikita.

Pinakamahusay na mga konsepto para sa disenyo ng background (sa pagkakasunud-sunod)

1. Solid na kulay (o walang kulay)

2. Photographic (nakaunat)

3. Maliit na tile (perpektong seamless)

4. Malaking tile (perpektong seamless)

Ang dapat mong iwasan ay ang pag-tile ng mga background ng potograpiya maliban kung magagawa iyon sa paraang hindi ito kapansin-pansin. Karaniwang pinakamahusay ang kahabaan para sa mga background ng potograpiya, o upang makulong ang mga ito sa loob ng isang paunang natukoy na puwang.

Ang panahon ng malaking splashy background ay halos patay maliban sa mga dalubhasang site na inilaan lamang para sa pagtingin sa isang desktop. Karamihan sa mga background na idinisenyo para sa mga desktop ay hindi magiging maganda kapag tiningnan sa mga telepono.

Ang isang workaround na magagawa mo ay upang mag-set up ng isang malaking bilang ng mga breakpoint sa iyong CSS file at idisenyo sadividalawahang mga background para sa bawat breakpoint, ngunit tulad ng dati mayroon kang hamon na ang patayong magagamit na puwang ay hindi maaaring kalkulahin, kahit na ang uri ng aparato ay kilala.

imahe ng header sa kabutihang loob ng

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.