Website wireframes ay simpleng mga guhit na linya na nagpapakita ng paglalagay ng mga elemento sa isang web page. Maaari mong i-save ang iyong sarili ng isang mahusay na oras ng oras sa pamamagitan ng pag-edit ng layout ng isang simpleng wireframe sa simula ng proseso ng disenyo sa halip ng isang komplikadong disenyo mamaya.
Ang paggamit ng mga wireframe ay isang mahusay na paraan upang simulan ang isang proyekto ng website, dahil pinapayagan ka nitong at ang iyong kliyente na tumuon sa layout nang walang kaguluhan ng kulay, uri, at iba pang mga elemento ng disenyo. Pag-isipin kung ano ang nangyayari kung saan sa iyong mga web page at ang porsyento ng espasyo na kinukuha ng bawat elemento, na maaaring matukoy ng mga pangangailangan ng iyong kliyente.
01 ng 03
Ano ang Isama sa isang Wireframe ng Website
Ang lahat ng mahalagang elemento ng isang web page ay dapat na kinakatawan sa wireframe ng iyong website. Gumamit ng simpleng mga hugis sa halip na aktwal na graphics, at lagyan ng label ang mga ito. Kabilang sa mga elementong ito ang:
- Pag-navigate: Mga Pindutan para sa mga gumagamit upang bisitahin ang mga pangunahing seksyon ng iyong site.
- Logo ng Kumpanya: Maaari lamang na katawanin ng isang kahon.
- Mga lugar ng nilalaman: Saan lilitaw ang iyong iba't ibang mga seksyon ng nilalaman?
- Maghanap ng mga kahon
- Mga lugar ng pag-login ng user
02 ng 03
Paano Gumawa ng Wireframes ng Website
Mayroong iba't ibang mga paraan upang lumikha ng wireframe ng website. Kabilang dito ang:
Pagguhit Ito sa pamamagitan ng Kamay sa Papel
Ang pamamaraan na ito ay madaling gamitin kapag nakaharap sa isang kliyente. I-sketch ang iyong mga ideya sa layout sa papel, na may pagtuon sa kung anong mga elemento ang dapat pumunta kung saan.
Paggamit ng Adobe Photoshop, Illustrator, o Iba pang Software
Karamihan sa mga pakete ng software ng graphics ay nilagyan ng lahat ng mga pangunahing tool na kinakailangan upang lumikha ng mga wireframe. Ang simpleng mga linya, mga hugis, at teksto (upang lagyan ng label ang iyong mga elemento) ay ang kailangan mo upang lumikha ng isang kaakit-akit na wireframe.
Paggamit ng Software na Nilikha para sa Uri ng Task na ito
Habang ang Photoshop at Illustrator ay maaaring gumawa ng trick, ang ilang mga pakete ng software ay partikular na binuo para sa ganitong uri ng trabaho. Ang OmniGraffle ay isang piraso ng software na nagpapadali sa paglikha ng mga wireframe sa pamamagitan ng pagbibigay ng mga hugis, linya, arrow at mga tool ng teksto upang magamit sa isang blangkong canvas. Maaari ka ring mag-download ng mga custom na set ng graphics (para sa libreng) sa Graffletopia, na nagbibigay sa iyo ng higit pang mga elemento, tulad ng karaniwang mga pindutan sa web, upang gumana.
03 ng 03
Ang Mga Benepisyo
Sa website wireframes, mayroon kang pakinabang ng pag-aayos ng isang simpleng pagguhit ng linya upang makamit ang ninanais na layout. Sa halip na ilipat ang mga kumplikadong elemento sa paligid ng isang pahina, maaaring tumagal ng napakaliit na oras upang i-drag ang ilang mga kahon sa mga bagong posisyon. Mas mainam pa rin para sa iyo o sa iyong kliyente na mag-focus sa layout muna ... hindi ka magsisimula sa mga komento tulad ng "Hindi ko gusto ang kulay na iyon doon!" Sa halip, magsisimula ka sa isang tinatapos na layout at istraktura sa kung saan ibabase ang iyong disenyo.