Paggamit ng Whitespace upang Lumikha ng Mahusay na Disenyo ng Website

Pagbubunyag: Tumutulong ang iyong suporta na panatilihing tumatakbo ang site! Kumikita kami ng bayad sa referral para sa ilan sa mga serbisyong inirerekumenda namin sa pahinang ito.


Mga salitang tulad ng “malinis,” ?? “Simple,” ?? “Maluho,” ?? at “epektibo” ?? madalas na ihagis kapag pinag-uusapan ang tungkol sa whitespace. Ngunit mas madali upang maging kwalipikado ang whitespace bilang isang elemento ng disenyo – at minimalism bilang diskarte sa disenyo na gumagamit ng mga ito – alam mo ba kung paano maayos na gamitin ang whitespace sa disenyo ng web?

Paano Gumagamit ng Whitespace Mas Mabisa

Upang magsimula, may ilang mga bagay na kailangan mong malaman tungkol sa whitespace bago gamitin ito sa iyong trabaho.

  • Ang Whitespace ay kilala rin bilang negatibong puwang.
  • Habang ang whitespace ay nagpapahiwatig ng isang kakulangan ng nilalaman sa loob ng isang nakatakdang lugar, hindi ito tungkol sa kawalan ng laman. Ang Whitespace in at mismo ay isang elemento ng disenyo.
  • Ang susi sa maayos na pagtatrabaho sa whitespace ay ang kakayahang isaalang-alang ang lahat ng puwang. Kung nauunawaan mo ang kaugnayan sa pagitan ng lahat ng iba’t ibang mga elemento sa isang web page, maaari mong gamitin ang whitespace upang ma-impluwensyahan at mapahusay ang mga kaugnayan na iyon.

Pagdating sa disenyo ng web, mas talagang higit pa. Sabihin ito sa mas kaunting mga salita. Pasimplehin ang iyong paleta ng kulay. Gumamit ng natural na grid. Sa madaling salita, isulat ang buong larawan at planuhin ang iyong mga web page nang mas madiskarteng may whitespace. Maaari kang mabigla sa mga benepisyo na aabutin mo kapalit ng paggawa nito:

  • Mas mabisang gumuhit ng atensyon ng mga bisita sa mga Calls to Action (CTA).
  • Pagbutihin ang samahan at balanse upang mas madaling mahanap ang lahat.
  • Dagdagan ang kakayahang mabasa ng nilalaman.
  • Magsumite ng isang pakiramdam ng luho na ang mga bisita ay iugnay sa iyong tatak.
  • Gumuhit ng mga asosasyon sa mga tatak tulad ng Google at Apple na epektibong gumagamit ng malinis, simpleng disenyo at whitespace.

Tila mahusay, hindi ba? Kung gayon, oras na upang suriin ang 12 mga paraan na maaari mong maayos na magamit ang whitespace sa iyong mga web page.

1. Lumikha ng isang Focal Point

Kapag iniisip mo ang tungkol sa isang website na napakaliit at pangunahing disenyo, at lubos na epektibo sa misyon nito, malamang na maisip mo ang Google. Malinaw kung ano ang pinakamahalagang bahagi ng website na ito – at hindi lamang ito dahil mayroon silang isang makulay na logo at kahon ng paghahanap sa pahina. Sa lahat ng whitespace na ito, hindi mo maiwasang maituro ang iyong mga mata sa gitna.

2. Break Up Text

Ang Whitespace ay hindi lamang tungkol sa pagdadala ng pokus sa mga mahahalagang bahagi ng isang website. Maaari rin itong magamit nang epektibo upang makagawa ng maraming nilalaman sa isang solong lugar na mas madaling mabasa. Ginagawa ito ng home page ng Mozilla sa pamamagitan ng paggamit ng mga malalakas na kulay, bukas na espasyo, at balanse upang mapagbuti ang kakayahang mabasa nito.

3. I-pad ang Mga Margin ng Pahina

Tandaan sa paaralan kapag binago mo ang iyong mga margin ng pahina sa 1.25 ″ ?? at pag-asang hindi napansin ng guro ang labis na padding upang maipakita nang mas mahaba ang iyong ulat kaysa dito? Well, ikaw ay nasa swerte, dahil ang mas malawak na mga margin ay talagang mabisa sa pagguhit ng pansin sa gitna ng isang pahina. Nag-aalok ang iA ng isang mahusay na halimbawa nito.

4. Patuloy na Maayos ang Mga Pahina

Ang Whitespace ay madalas na ginagamit upang magtatag ng isang ritmo at isang set na istraktura ng isang web page. Kunin ang Dropbox, halimbawa. Alam mo na may magiging isang tip sa teksto sa isang tabi, isang imahe sa kabilang, at isang malaking puwang ng puwang upang ipakilala ang susunod na magkatulad na laki ng seksyon.

5. Balanse ang Asymmetrical Designs

Kung iisipin natin ang tungkol sa simetrya sa disenyo na ito ay karaniwang kasing simple ng, “Mayroon akong isang imahe sa panig na ito, kaya magdagdag ako ng isang imahe o teksto ng pantay na timbang sa kabilang panig.” ?? Minsan, gayunpaman, ang kawalaan ng simetrya ay mukhang maayos at lohikal na katulad ng ginagawa ng simetriko na disenyo, tulad ng sa pahina ng Apple iPad.

6. Magtatag ng Pakikipag-ugnayan

Ang partikular na diskarteng whitespace na ito ay medyo mahirap na hilahin kaysa sa iba dahil kailangan mong makahanap ng tamang lugar upang gawin ito. Ang isa sa mga pinakamahusay na halimbawa nito ay sa mga talahanayan ng pagpepresyo o serbisyo. Sapagkat ang ilang mga kumpanya ay gumagamit ng mga tseke at X upang punan ang lahat ng puwang, ang WordPress ay may isang mahusay na trabaho sa paggamit ng negatibong puwang upang ipakita kung gaano ka nakukuha sa kanilang mga pinakahalagang plano.

7. Tsart ang isang Kurso

Hindi mo kailangan ng mga arrow o slider upang gabayan ang iyong mga bisita sa pamamagitan ng isang tukoy na landas sa iyong website. Sa katunayan, kung gumamit ka ng mga staggered na imahe at tamang dami ng whitespace, maaari mong hindi direktang gabayan ang iyong mga bisita mula sa itaas hanggang ibaba nang madali tulad ng ginagawa ng Apple.

8. Bigyan ng Breathe ang Navigation Room

Ang nabigasyon bar ay isang mahusay na lugar upang i-play sa paligid na may malawak na bukas na mga puwang. Gumamit ng whitespace upang magbigay ng diin sa logo tulad ng Philip House. O gumamit ng isang pull-out menu na nagbibigay ng isang menu ng mega upang makahinga tulad ng nagawa ni Bulgari. Ang parehong patakaran ay dapat ilapat sa mga footer.

9. Lumikha ng Drama

Ang mga CTA ay tungkol sa paggamit ng damdamin upang himukin ang mga bisita upang mag-click sa isang pindutan o punan ang isang form o gumawa ng isang pagbili. Ngunit ang mga CTA na iyon ay walang malaking epekto kung hindi mo sila bibigyan ng isang sandali upang maipalabas ang damdamin. Ang imaheng Desyuridad ng Negosyante ay ganyan lamang sa “Sigurado Ka Nang Magsingil Ka?” pagbibigay ng mga bisita ng isang sandali upang matakot bago alay ang maliwanag na berdeng solusyon.

10. Bigyang-diin ang Talasalitaan

Kung gumagamit ka ng mas malalaking mukha ng font sa iyong website, dahil nararapat silang mas pansin. Sa pamamagitan ng pagbuo ng karagdagang espasyo sa paligid ng typography na iyon, nag-sign sign ka sa mga bisita na ito ay kung saan kailangan nilang ihinto at bigyang pansin bago magpatuloy, tulad ng ginagawa ng superReal site.

11. Gumamit ng mga Larawan gamit ang Whitespace

Pagdating sa paggamit ng whitespace sa isang website, huwag pakiramdam na kailangan mo itong likhain. Sa isang simpleng paghahanap ng salitang “negatibong puwang” ?? sa Flickr at Pixabay, makakakuha ka ng higit sa sapat na mga pagpipilian para sa mga larawan na maaari mong gamitin na makakatulong sa pagpapatuloy ng ideyang ito ng isang simple, malinis, at madiskarteng disenyo.

12. Lumikha ng Mga Elemento ng Peekaboo

Bagaman ang ideya ng paglikha ng mga titik, hugis, at iba pang kilalang mga bagay na may mga naka-bold na kulay at whitespace ay talagang cool, mahirap gawin ang isang ito sapagkat nangangailangan ito ng hindi bababa sa isang intermediate na antas ng karanasan sa disenyo. Dalawa sa mga kilalang halimbawa ng “peekaboo” ?? ang mga elemento ng whitespace ay ang arrow sa FedEx logo at ang peacock sa NBC logo. Ang mga logo ay hindi lamang ang bahagi ng iyong website kung saan maaari mo ring gamitin ang ganitong uri ng whitespace.

Whitespace sa Hinaharap na Disenyo

Sa ilang mga aspeto, ang disenyo ng web ay mas madali ngayon kaysa sa sampung taon na ang nakalilipas. Mayroon kaming mga sistema ng pamamahala ng nilalaman na puno ng mga tutorial, plugin, at mga tema upang matulungan kahit na ang pinaka-baguhan ng mga developer at webmaster ay nagtatayo ng mga website. Sa kabilang banda, ang disenyo ng web ay mas mahirap ngayon kaysa sa sampung taon na ang nakalilipas. Ito ay dahil mayroon kaming lahat ng mga tool at sanggunian na materyales sa aming pagtatapon na gumagawa ng mga inaasahan na mas malaki kaysa dati. Ito ang dahilan kung bakit ang mga taga-disenyo at developer na nais tumayo sa itaas ng kumpetisyon at dalhin ang kanilang mga website sa mas mataas na taas ay kailangang malaman kung paano mabisang gamitin ang whitespace.

Karagdagang Pagbasa at Mga Mapagkukunan

Mayroon kaming higit pang mga gabay, mga tutorial, at mga infograpiko na may kaugnayan sa disenyo ng web:

  • Pagbubuo ng Magandang HTML: ito ay isang solidong pagpapakilala sa pagsulat ng maayos na nabuo na HTML at paggamit ng HTML validator software.
  • CSS3 – Intro, Gabay at Mapagkukunan: ito ay isang mahusay na lugar upang simulan ang pag-aaral ng layout ng webpage.

Mga Tren ng Disenyo sa Web Hindi ka na Makakalimutan

Ang bawat taga-disenyo ay nais na lumikha ng mga walang tiyak na oras na dokumento – mga hindi kailanman magmumukha. Ngunit madalas kaming nabigo sa na. Sa aming mga infographic Web Design Trend Hindi ka Makalimutan Nagpapatakbo kami sa mga dekada ng mga disenyo na minsan ay naisip na ang taas ng coolness.

Mga Uso sa Web Design Hindi Mo Ito Malilimutan
Mga Tren ng Disenyo sa Web Hindi ka na Makakalimutan

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me