website mock up

website mockup

Isipin o isipin ang tungkol sa kliyenteng iyon na lalapit sa iyo at kinomisyon ka na magdisenyo ng isang website. Maaaring kailanganin mong idisenyo ang tema na gagamitin nito, at ito ang magiging unang impresyon na maiiwan nito sa libu-libo o milyon-milyong tao na bibisita dito. Paano mo ito ihaharap sa kanya? Kukuha ka ba ng mga screenshot ng isang website kung saan ka nagtrabaho sa disenyo at ipapakita ito sa kanila? Hindi ba mas mabuting gumamit ng web mock up?

Naghihintay, Hindi mo ba alam na mayroon ding web mock up? Kaya, kung gayon ang paksang ito ay interesado sa iyo. At marami. Dahil maaari mong bigyan ang iyong presentasyon ng isang mas mahusay na presensya at gawing mas masaya ang kliyente pagkatapos makita ang mga larawan kung saan tila gumagana na ang website. At ang totoo ay hindi ka gaanong gagastusin sa paggawa nito.

Ano ang isang website mockup

Una sa lahat, ipaliwanag natin nang kaunti kung ano ang a website mock up. Tulad ng alam mo, ang isang mockup ay talagang isang representasyong "tunay na imahe" na nagpapakita kung ano ang magiging hitsura ng huling resulta ng iyong trabaho.

Sa kaso ng isang website, ay isang imahe ng resulta ng web page na iyon.

Ang ganitong uri ng collage ginagamit ang mga ito upang bigyan ng higit na realismo ang akda, dahil maraming beses, kapag ipinakita mo ito, maaaring walang laman o hindi kumakatawan sa isang daang porsyento kung ano ang iyong ginawa. Bilang karagdagan, ang kliyente ay may mas visual na paraan ng pagkuha ng ideya.

At sasabihin mo, bakit hindi mo ipakita sa kanya ang website na pinaghirapan mo? Maaari itong gawin, ngunit hindi bilang isang pagtatanghal ng gawain ngunit kailangan mong hayaan ang kliyente na mag-navigate sa web para makilala niya siya ng lubusan at, maraming beses, wala silang oras para gawin ito, kaya hindi mo masigurado na nakita niya ang lahat.

Sa kabilang banda, sa isang web mockup ay makakamit mo ito dahil iha-highlight mo ang lahat ng gusto mong makita sa mga larawang iyon.

Kung paano sila ginawa

Ngayon, paano ginagawa ang mga web mock up na ito? Mayroon bang programa upang lumikha ng mga ito? Ang mga ito ba ay collage na kinuha mula sa Internet?

Sa totoo lang mayroong ilang mga libreng tool na maaari silang magbigay sa iyo ng isang kamay upang lumikha ng mga ito, at na maaari nilang bigyan ka ng mga pagpipilian, hindi lamang sa mga halimbawa na ibibigay namin sa iyo sa ibang pagkakataon.

Sa pamamagitan nito maaari ka ring lumikha ng isang koleksyon ng mga ito para sa kliyenteng iyon, na inilalagay ang disenyo sa iba't ibang mga pagkakasunud-sunod na ginagawang mas maganda ang hitsura ng huling resulta.

Ang mga tool na ito ay:

kumikislap

Ang tool na ito ay online at libre ito. Gamit ito maaari kang lumikha ng web mock up dahil ay may maraming schematics at isang API kung saan mo magagawa ang trabaho sa loob ng ilang minuto.

Sa katunayan, ito ay isang sa pinaka ginagamit at nagbibigay iyon sa iyo ng maraming pagpipilian.

cocoo

Sa kasong ito, dapat namin kayong bigyan ng babala na, bagama't kami ay magtutuon sa libreng bahagi, ang tool ito ay binabayaran din at ang kahulugan niyan ay magiging mas limitado sa kung ano ang maaari mong gawin.

Para makakuha ng ideya, maaari ka lang mag-export PNG (kaya hindi ito napapasadya kung gusto mong gamitin ito sa ibang mga kliyente).

Ang magandang bagay ay kung nagtatrabaho ka sa isang koponan maaari kang magtulungan nang sabay-sabay (ibig sabihin, sa totoong oras).

Wirify

Wirify ay isa sa mga kasangkapan maaaring gawing isang website ang isang wireframe at, kasama nito, magtrabaho kasama ang kliyente ipinapakita sa iyo ang web ayon sa gusto mo. Ngunit siyempre, dito kakailanganing pumili ng larawan ng isang computer, tablet o mobile upang mai-mount ang resulta ng program na ito.

Tulad ng maaaring nahulaan mo, ang lahat ng mga tool ay nagbibigay sa iyo ng isang imahe ng disenyo ng web, ngunit ito ay kinakailangan upang aktwal na tipunin ito sa isang tunay na imahe. Para dito, kailangan mong i-access ang mga larawan kung saan ipinapakita ang mga computer, mobile, tablet upang maipasok ang iyong disenyo sa itaas at makakuha ng larawang pinagsasama ang dalawa (at mukhang maganda).

Upang gawin ito maaari kang gumamit ng mga yari na mockup o lumikha ng mga ito sa iyong sarili gamit ang isang programa sa pag-edit ng imahe.

Web mock up na maaari mong i-download

Kung hindi mo nais na labis na puspusan ang iyong sarili upang ipakita ang gawain, narito ang iiwan namin sa iyo Mga halimbawa ng website mock up na maaari mong i-download at gamitin. Makakatipid ka ng oras.

Makatotohanang website mock up

Makatotohanang website mock up

Nagsisimula tayo sa isang eksena na maaaring magkaroon ng kahit sino. Ito ay isang desk at isang computer screen sa itaas (keyboard at mouse sa ibaba). Sa background ay isang aparador ng mga aklat na may mga libro. Gayunpaman, ang aparador ng mga aklat na ito ay nasa itim at puti, gayundin ang mga pandekorasyon na elemento ng mesa (higit pang mga libro at lampara) at ang dingding, na nasa kulay abong tono.

Bakit? Upang ang tingin ay nakatuon sa pahinang ipinapakita ng monitor. sa iyong kaso maaaring ang tahanan ng pahina, o mga bahaging kinatawan na gusto mong ipakita sa kliyente.

I-download mo ito dito.

Simpleng website mockup

Simpleng website mockup

Isang mas simpleng representasyon, kung saan may kulay abong background (bagama't maaari itong i-customize) hindi ito nagpapakita ng screen kung saan naipasok namin ang web page.

Kapansin-pansin na, kung titingnan mo ang screen, mayroon itong mas magaan na bahagi at mas madilim na bahagi, dahil ginagaya nito na ang liwanag ay nahuhulog dito.

Ito ay maaaring maging kawili-wili para sa mga bahagi kung saan mo gusto eksklusibong nakatingin sa kanila ang kliyente.

I-download mo ito dito.

Samsung Galaxy S5 Mockup

Samsung Galaxy S5 Mockup

Ito ay partikular na isang mockup ng Samsung Galaxy S5 ngunit maaari itong maging perpekto para sa iyo na ipakita, sa parehong larawan, ang tatlong bahagi ng disenyo ng web na iyong ginawa upang ma-appreciate ng kliyente ang magiging hitsura nito sa isang mobile.

Tandaan na mas binibigyang kapangyarihan ng Google ang mga negosyo gumamit ng tumutugon na website, ibig sabihin, mukhang maganda kung gumagamit ka ng computer, tablet o mobile. Samakatuwid, hindi sapat na maganda ang hitsura nito sa computer, kailangan mong tiyakin sa lahat ng iba pang mga platform.

Maaari mo itong i-download dito.

Mockup para sa tablet at mobile

Mockup para sa tablet at mobile

Sa kasong ito, hindi mo maipapakita ang 100% ng web sa isang tablet, ngunit magagawa mo sa mobile. At ito ay kung gusto mong ipakita ang iyong disenyo sa dalawang device na ito, magagawa mo rin ito, upang magkaroon ng ideya ang kliyente kung ano ang magiging hitsura nito.

Syempre, tandaan mo yan sa tablet ito ay ipapakita sa landscape na format habang ang mobile magkakaroon nito patayo. Isa itong paraan para makita niya ang pagbabago ng iyong disenyo upang magkasya sa parehong device.

Nakuha mo dito.

Mayroon ka bang ilang halimbawa ng web mock up? Maaari mong ibahagi ang mga ito sa mga komento.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish.

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.