5 Tools Wireframe Untuk Membina Landing Page

Shares

Adalah penting sebelum kita bina landing page atau website kita, kita harus bayangkan bagaimana end result tersebut. Saya selalu cuba visualize apa yang saya akan bina dalam landing page. Tapi bukan mudah nak visualize apa yang ada di dalam kepala dan bina laman web melalui tools atau coding.

Cara mudah untuk visualize adalah dengan menggunakan tools wireframe. Pilihan saya adalah Balsamiq, kerana ia senang dan mudah digunakan. 

1. Balsamiq

Ini merupakan satu perisian wireframing yang agak popular. Boleh diguna samada melalui browser ataupun download ke laptop. Tetapi perisian ini perlu bayar untuk digunakan selepas tempoh percubaan. Ciri penting perisian ini adalah semuanya drag and drop. Amat mudah untuk digunakan walaupun buta IT.

Terdapat banyak widget yang menarik serta sesuai digunakan untuk proses visualization samada untuk landing page/website atau perisian mobile. Setelah siap, anda boleh export ke web atau download ke PC dan share dengan designer atau developer anda.

URL - https://balsamiq.com/

2. Mockingbird

Mockingbird ini agak menarik dengan ada ciri boleh meletakkan warna pada objek tertentu. Perisian ini boleh digunakan di dalam web dan tidak perlu daftar dahulu jika anda tidak ingin mengubah wireframe dalam 6 hari. 

Selain itu juga ada kelebihan dalam menambahkan mukasurat dan pautan diantara wireframe.​

URL - https://gomockingbird.com/

3. Moqups

Lebih kurang sama wireframe tool yang sebelum ini, sebenarnya pada asasnya, semua wireframe tool mempunyai ciri yang sama. Moqup memberikan pilihan yang banyak untuk mengubah text dalam wireframe. Selain itu, ciri Hotspot juga senang digunakan untuk link sesuatu objek kepada mukasurat yang lain atau website lain.

Moqups juga memberikan pilihan widget yang banyak bagi mereka yang​ membangunkan mobile app.

URL - https://moqups.com/

4. Mockflow

Saya pernah guna perisian ini tahun 2010-2011. Tidak banyak berubah hingga kini. Perisian web based dan senang digunakan. Paling yang saya suka terdapat pakej percuma. Perisian lain samada trial atau limited pake. Yang ini memang ada pakej percuma dan sesuai untuk mereka yang baru belajar tentang landing page/website.

Selain daripada itu, ciri-ciri hampir sama dengan wireframing tool yang lain.​

URL - https://www.mockflow.com/

5. SimpleDiagrams

Tool ini agak menarik. Ia bukan perisian yang khas untuk wireframing tetapi lebih khusus kepada process flow, problem solving dan workflow. Tetapi oleh kerana interface dia agak mudah dan senang digunakan, ia juga boleh digunakan untuk membuat wireframe.  Design agak comel dan berbentuk kartun seperti Balsamiq.

Tool ini boleh download kepada PC atau Mac dan mengandungi lebih 500 libary atau item yang boleh digunakan dalam melukis wireframe anda.​

URL - http://www.simplediagrams.com/​

“If you fail to plan, you are planning to fail!” - ― Benjamin Franklin

Jika anda ada sebarang soalan atau pertanyaan tentang cara membina landing page atau website untuk perniagaan anda, sila tinggalkan komen anda di bawah atau hubungi saya pada alamat emel ini - ganee@sifuweb.my

About the Author Sifu Web Ganee

Berpengalaman lebih daripada 15 tahun dalam dunia web dan kini mengajar para pelajar tentang cara membina landing page dan website untuk perniagaan mereka.

follow me on: