Unsa ang Wireframe sa Website?

Pagkat-on sa paggamit sa yano nga Wireframes aron sugdan ang imong mga desinyo

Ang usa ka Web wireframe usa ka yano nga giya sa paghulagway aron ipakita kanimo kung unsa ang hitsura sa usa ka Web page . Kini nagsugyot sa istruktura sa usa ka panid , nga walay paggamit sa bisan unsang mga graphic o teksto. Ang usa ka website nga wireframe magpakita sa tibuok nga gambalay sa site - lakip na kon unsa ang mga pahina nga mag-link sa diin.

Ang wireframe sa web mao ang usa ka maayong paagi sa pagsugod sa imong buhat sa pagdesinyo. Ug bisan kini posible nga makahimo og komplikado nga mga butang nga adunay daghan nga detalye, ang imong pagplano magsugod sa usa ka panyo ug usa ka pen. Ang yawe sa paghimo og maayo nga mga pagbag-o mao ang pagbiya sa tanang makita nga mga elemento. Paggamit sa mga kahon ug mga linya aron sa paghulagway sa mga hulagway ug teksto.

Mga butang nga ilakip sa usa ka panid sa Web nga kabag-ohan:

Unsaon Pagtukod og usa ka Simple nga Wireframe sa Web

Pagmugna og usa ka pahina sa web gamit ang bisan unsang scrap sa papel nga imong gamiton. Ania kung unsaon nako kini:

  1. Pagdrowing og usa ka dako nga rektanggulo - kini mahimong magrepresentar sa bisan asa nga panid o sa makita nga bahin. Kasagaran magsugod ako sa makita nga bahin, ug unya palaparon kini aron ilakip ang mga elemento nga anaa sa ubos sa panon.
  2. Sketch ang layout - kini ba 2-kolum, 3-kolum?
  3. Idugang sa usa ka kahon alang sa usa ka graphic header - Pagdibuho sa imong mga kolum kung gusto mo nga kini usa ka ulohan sa ibabaw sa mga kolum, o idugang kini kung asa nimo kini gusto.
  4. Isulat ang "Headline" diin gusto nimo ang imong H1 headline.
  5. Isulat ang "Sub-Head" kung asa gusto nimo ang H2 ug ubos nga mga headline. Makatabang kini kon imo kining himoon nga proporsyonal - h2 mas gamay kay sa h1, h3 mas gamay kay sa h2, ug uban pa.
  6. Idugang sa mga kahon alang sa ubang mga larawan
  7. Idugang sa nabigasyon. Kon nagplano ka sa mga tab, pagdibuho og mga kahon, ug isulat ang "navigation" sa ibabaw. O ibutang ang mga listahan sa bala sa mga haligi nga gusto nimo ang pag-navigate. Ayaw isulat ang sulod. Isulat lang ang "nabigasyon" o gamiton ang usa ka linya sa pagrepresentar sa teksto.
  8. Pagdugang og dugang mga elemento sa panid - pag-ila kung unsa kini sa teksto, apan ayaw gamita ang aktwal nga sulod nga teksto. Pananglitan, kon gusto nimo ang usa ka call to action button sa ubos nga tuo, ibutang ang usa ka kahon didto, ug sulati kini nga "call to action". Ayaw isulat ang "Buy Now!" sa maong kahon.

Sa dihang nasulat na ang imong yano nga wireframe, ug dili ka magdala kanimo og sobra sa 15 minutos aron paglaraw sa usa ka bahin, ipakita kini ngadto sa laing tawo. Pangutan-a sila kung adunay butang nga nawala ug alang sa ubang mga feedback. Base sa ilang gisulti mahimo ka magsulat og lain nga wireframe o ipabilin ang imong nabatonan.

Nganong Labing Maayo ang mga Papel sa Papel alang sa Unang mga Hulagway

Samtang posible ang paghimo sa mga wireframe gamit ang mga programa sama sa Visio, alang sa una nga mga sesyon sa brainstorming, kinahanglan mo nga magpabilin sa papel. Ang papel daw dili permanente, ug daghang mga tawo ang maghunahuna nga gilabay nimo kini sulod sa lima ka mga minuto ug busa dili magpanuko sa paghatag kanimo og maayong feedback. Apan kon mogamit ka og usa ka programa sa paghimo og mga nindot nga mga kahon nga adunay mga hingpit nga mga kwadro ug mga kolor, imong gipadagan ang risgo nga madakpan sa programa mismo ug paggasto og mga oras sa paghuman sa usa ka butang nga dili gayud mabuhi.

Ang papel nga wireframe sayon ​​buhaton. Ug kung dili ka ganahan niini, ikaw lang ang magun-ob sa papel, ihulog kini sa pag-recycle ug pag-ilog og bag-ong papel.