People Innovation Excellence
 

Mengenal Istilah Wireframe dalam Industri UI/UX

       Wireframe adalah sebuah cara untuk merancang desain website atau aplikasi pada tingkat struktural. Wireframe memungkinkan untuk mendefinisikan information hierarchy dari desain, sehingga memudahkan kita dalam melakukan perencanaan layout sesuai dengan rencana kita tentang bagaimana pengguna dapat memproses informasi. Wireframe biasanya digunakan untuk meletakkan konten dan fungsionalitas pada halaman dengan mempertimbangkan kebutuhan pengguna dan perjalanan pengguna. Terdapat beberapa elemen dari wireframe, diantaranya adalah:

  1. Desain Informasi
    Desain informasi bersumber dari hasil riset mengenai apa saja konten atau informasi yang ingin disampaikan. Contoh dari desain informasi adalah desain dari form input, thumbnail, gambar, link, paragraf, dan lain sebagainya.
  1. Navigasi
    Sistem navigasi menyediakan seperangkat elemen layar yang memungkinkan pengguna untuk memindahkan halaman ke halaman melalui situs web. Desain navigasi harus mengkomunikasikan hubungan antara link (tautan) yang dikandungnya sehingga pengguna memahami opsi yang mereka miliki untuk menavigasi sebuah situs.
  1. Desain Interface
    Pada tahapan ini dilakukan proses menyeleksi penempatan elemen, seperti penempatan tombol, link, judul, text-align, font-size, dan lain sebagainya. Hal ini bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.

      Kemudian, dalam pembuatan wireframe juga harus dapat menjelaskan beberapa hal, diantaranya:

  1. Apa isi yang ada dalam halaman website atau aplikasi?
  2. Bagaimana isi tersebut teroganisir dalam halaman website atau aplikasi?
  3. Kemana pengguna akan pergi dari halaman website atau aplikasi?
  4. Bagaimana pengguna akan bergerak di sekitar website atau aplikasi?

          Dalam pembuatan wireframe, terdapat beberapa kelebihan yang diperoleh, diantaranya adalah sebagai berikut:

  1. Memberikan UI Designergambaran dasar sebelum mulai membuat
  2. Menjadi titik referensi untuk pengembangan situs atau aplikasi.
  3. Mengkomunikasikan pengalaman menggunakan situs kepada pemangku. kepentingan atau klien tanpa terlalu banyak menyoroti desain visual dan
  4. Membantu tetap fokus pada pengalaman pengguna.
  5. Memperjelas dan menentukan fitur dalam
  6. Menggali ide dengan cepat.
  7. Sebagai dasar untuk pembuatan prototipe dan user testing sejak awal.

     Selain kelebihan, terdapat beberapa kelemahan dari pembuatan wireframe, yaitu karena wireframe ini tidak termasuk desain, atau memperhitungkan implikasi teknis, maka tidaklah mudah bagi klien untuk memahami konsep tersebut. Desainer juga harus menerjemahkan wireframe menjadi sebuah desain, sehingga komunikasi untuk mendukung wireframe ini sering diperlukan untuk menjelaskan mengapa elemen halaman diposisikan sebagaimana adanya. Selain itu, ketika konten ditambahkan, pada awalnya mungkin terlalu banyak untuk masuk dalam layout (tata letak) wireframe, sehingga desainer dan copywriter perlu bekerja sama untuk membuat kedua hal tersebut cocok.

        Dalam melakukan pembuatan wireframe, terdapat berbagai tools yang dapat digunakan, seperti Balsamiq, ProtoShare, Indesign, Illustrator, Firework, Adobe CS, FairBuilder, Axure, Omnigraffle, Cacoo, Jumpchart, Gliffy serta Mockflow.

Source:

https://www.jetorbit.com/blog/wireframe-yuk-cari-tahu-detailnya/

https://qwords.com/blog/wireframe-adalah/

https://www.techfor.id/8-cara-mudah-membuat-wireframe/


Published at : Updated
Leave Your Footprint

    Periksa Browser Anda

    Check Your Browser

    Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

    Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

    Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

    Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

    We're Moving Forward.

    This Site Is No Longer Supporting Out-of Date Browser.

    If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

    Best viewed with one of these browser instead. It is totally free.

    1. Google Chrome
    2. Mozilla Firefox
    3. Opera
    4. Internet Explorer 9
    Close