• Blog
    • Bidang Profesi
      • Marketing
      • Tech & Data
      • Media & Communications
      • Business Dev & Sales
      • Product
      • Design
    • Tips Karier
      • Mengawali Karier
      • Dunia Kerja
    • Konten Eksklusif
      • Artikel Expert
      • Panduan
      • Laporan
    • Dari Glints
      • Panduan Komunitas & Konten
      • Campaign Berlangsung
      • Kabar Produk
      • Kabar Glints
  • Lowongan Kerja
  • Glints ExpertClass
  • Glints Community
  • Bidang Profesi
  • Design
  • UI Design
  • UX Design

Yuk, Kenalan dengan Wireframing untuk Desain UI/UX

Diperbarui 11 Feb 2021 - Dibaca 9 mnt
Nadiyah Rahmalia Engineering graduate with expertise in content writing and SEO; an aspiring digital/content marketer striving to create and share meaningful works.

Isi Artikel

    Dunia desain UI/UX mengenal istilah wireframe dan wireframing. Secara sederhana, wireframe adalah sebagai kerangka awal sebelum halaman website atau antarmuka sebuah aplikasi didesain.

    Wireframing merupakan tahap penting dalam desain produk yang harus dipahami dengan baik. Untuk itu, yuk, kenali lebih lanjut tentang wireframe!

    Baca Juga: 9 Tren Desain UI/UX Tahun 2020 yang Harus Kamu Ketahui!

    Apa Itu Wireframe?

    apa itu wireframe

    © Unsplash.com

    Wireframing merupakan cara desainer UI/UX membuat rancangan website maupun aplikasi pada level struktural. 

    Wireframe sendiri dapat diartikan dengan sederhana sebagai kerangka gambar.

    Merancang sebuah wireframe berarti merencanakan kerangka garis besar sebuah aplikasi atau website.

    Dengan wireframe, kamu bisa merancang struktur halaman yang baik, layout, arsitektur informasi, user flow, fungsionalitas, dan perilaku yang diinginkan dari pengguna.

    Wireframe merupakan tahap penting sebelum stakeholder menyetujui letak-letak informasi untuk website dan aplikasi sebelum developer mulai membuat antarmukanya menggunakan kode.

    Wireframing dapat dilakukan secara sederhana menggunakan gambar dengan tangan maupun software khusus.

    Apa Keuntungan Menggunakan Wireframe?

    keuntungan wireframe adalah

    © Pexels.com

    1. Memastikan konsep fokus pada user

    Menurut Career Foundry, wireframe adalah cara pengguna dapat dengan mudah memberikan masukan dan saran mengenai desain website atau aplikasi pada tahap wireframing.

    Hal ini juga mempermudah stakeholder berkomunikasi dan memberikan ide pada desainer.

    Selain untuk mendapatkan masukan dari pengguna dan stakeholder, proses wireframing juga bertujuan untuk mengidentifikasi titik masalah yang dialami pengguna.

    Informasi yang diperoleh saat tahap wireframing dapat digunakan untuk memperbaiki konsep produk dan rancangannya.

    Selain itu, wireframe juga digunakan desainer untuk mengukur dan menilai bagaimana pengguna website atau aplikasi berinteraksi dengan antarmuka yang didesain.

    Informasi-informasi ini digunakan desainer untuk memahami pengguna lebih baik dan membuat produk yang mudah serta nyaman digunakan semua orang.

    2. Memperjelas fitur

    Ketika mengomunikasikan ide desain kepada klien, lebih baik gunakan bahasa yang sederhana dan cara yang mudah dipahami.

    Nah, wireframing merupakan metode yang tepat untuk itu.

    Dengan wireframing, kamu bisa lebih mudah mengomunikasikan fitur, fungsi, dan tujuan dari sebuah web atau aplikasi.

    Stakeholder akan dapat mengukur berapa ruang yang perlu dialokasikan untuk fitur-fitur yang dirancang, menghubungkan arsitektur informasi pada desain visual, dan memperjelas fungsionalitas sebuah web atau aplikasi.

    Wireframing membuat seluruh elemen dan fungsi desain lebih jelas.

    Selain itu, hal ini juga mempermudah pemahaman tentang cara kerjanya sehingga keputusan-keputusan tepat dapat dibuat sebelum tahap perancangan selanjutnya.

    3. Cepat dan murah

    Salah satu alasan wireframe disukai oleh banyak desainer UI dan UX adalah karena mudah dan murah untuk dibuat.

    Cukup dengan kertas dan pulpen, kamu bisa dengan cepat membuat sketsa wireframe tanpa harus mengeluarkan uang.

    Selain itu, ada banyak tools dan software yang bisa membantu desain wireframe secara digital dengan mudah.

    Baca Juga: Apa Itu UX Designer? Yuk, Kenali Peran dan Skill yang Dikuasainya!

    Elemen Wireframe

    elemen wireframe adalah

    © Pixjumbo.com

    1. Desain informasi

    Desain informasi dalam wireframe adalah bagaimana cara mempresentasikan informasi atau konten yang ingin disampaikan pada pengguna dengan baik.

    Contoh elemen dalam desain informasi adalah input, thumbnail, link, paragraf, gambar, dan lain-lain.

    2. Navigasi

    Desain antarmuka sebuah website atau aplikasi harus mudah dimengerti. 

    Jika tidak, pengguna akan meninggalkan website atau aplikasi yang kamu buat dengan cepat.

    Navigasi yang jelas adalah salah satu cara untuk memastikan pengguna tahu di mana mereka bisa menemukan informasi dan bagaimana cara untuk menemukannya.

    Navigasi yang baik tidak hanya menciptakan kenyamanan bagi pengguna, tetapi juga membuat website atau aplikasi tampak lebih profesional dan rapi.

    3. Desain interface

    Desain interface atau desain antarmuka dalam wireframe adalah proses seleksi dan penempatan elemen seperti tombol, link, judul, text-align, ukuran font, dan lain-lain.

    Elemen-elemen ini penting untuk memudahkan pengguna berinteraksi dengan desain antarmuka yang telah dibuat.

    Tipe-Tipe Wireframe

    © Pexels.com

    Terdapat tiga tipe utama wireframe yaitu low-fidelity wireframe, mid-fidelity wireframe, dan high-fidelity wireframe.

    Perbedaan ketiga tipe wireframe ini adalah detail informasi yang ditampilkan.

    1. Wireframe low-fidelity

    Wireframe low-fidelity merupakan representasi visual yang paling dasar.

    Biasanya, desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe.

    Wireframe low-fidelity adalah desain kasar yang dibuat tanpa ukuran dan akurasi piksel, jadi, desain ini masih sangat sederhana dan tidak terinci.

    Wireframe low-fidelity adalah yang biasanya dibuat saat pertama kali mendapatkan ide dan ketika desainer UI/UX berusaha merancang dasar gagasan tersebut.

    2. Wireframe mid-fidelity

    Kebanyakan desainer UI dan UX menggunakan wireframe mid-fidelity.

    Wireframe mid-fidelity memiliki detail yang lebih baik dibanding low-fidelity.

    Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan jelas pada tipe wireframe ini.

    Biasanya, wireframe mid-fidelity dibuat dengan warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang ada.

    Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah Sketch atau Balsamiq.

    3. Wireframe high-fidelity

    Nah, wireframe high-fidelity adalah tipe wireframe yang memiliki detail paling baik dibanding dua lainnya.

    Tipe wireframe ini didesain dengan layout pixel-specific.

    Rencana gambar dan konten sudah ditampilkan jelas dengan tipe wireframe ini beserta detail-detail lainnya.

    Biasanya, wireframe high-fidelity dibuat ketika konsepnya benar-benar matang dan desainer sudah siap untuk pengerjaan bagian yang lebih rumit seperti sistem menu atau peta interaktif.

    Baca Juga: Apa Itu UX Writer? Yuk Ketahui Lebih Dalam Di Sini!

    Nah, sudahkah kamu lebih memahami tentang wireframe?

    Mungkin kamu masih memiliki pertanyaan-pertanyaan seputar desain UI dan UX.

    Jika begitu, Glints punya tempat di mana kamu bisa bertanya sepuasnya dan berdiskusi tentang desain UI dan UX dengan pengguna serta praktisi di bidangnya, lho.

    Tertarik? Yuk, bergabung dengan Glints Komunitas!

    Temukan juga beragam artikel desain UI dan UX lainnya di blog Glints.

    Supaya tidak ketinggalan, kamu bisa berlangganan newsletter blog Glints agar mendapat artikel-artikel tentang desain UI dan UX langsung ke inbox emailmu.

    Daftar sekarang, ya!

    • What Exactly Is Wireframing? A Comprehensive Guide

    beginner wireframe wireframing

    Comments are closed.

    Artikel Terkait

    • CV/Portofolio 5 Jenis Cover Letter dalam Dunia Kerja serta Contohnya

      Nadiyah Rahmalia 09 Jun 2022
    • CV/Portofolio 5 Langkah Mudah Mengambil Foto Profesional Sendiri dari Rumah

      Nadiyah Rahmalia 05 Jun 2022
    • Mengawali Karier Kenali 25 Prospek Kerja Lulusan Teknik Elektro yang Bisa Jadi Pilihanmu

      Nadiyah Rahmalia 04 Jun 2022
    • Dunia Kerja Kapan Waktu yang Tepat untuk Kembali Kerja setelah Melahirkan?

      Nadiyah Rahmalia 03 Jun 2022
    Langganan untuk dapatkan info konten karier terbaru di emailmu
    Terima kasih sudah berlangganan! Nantikan info konten terbaru Glints di emailmu.
    Maaf, permintaanmu tidak bisa diproses. Silakan coba lagi.
    Kategori Topik
    • Tips Karier
    • Bidang Profesi
    • Konten Eksklusif
    • Kabar Glints
    Media Sosial
    • Facebook
    • Twitter
    • Instagram
    • LinkedIn
    Solusi Glints
    • Lowongan Kerja
    • Glints ExpertClass
    • Glints Community

    • Blog
      • Bidang Profesi
        • Marketing
        • Tech & Data
        • Media & Communications
        • Business Dev & Sales
        • Product
        • Design
      • Tips Karier
        • Mengawali Karier
        • Dunia Kerja
      • Konten Eksklusif
        • Artikel Expert
        • Panduan
        • Laporan
      • Dari Glints
        • Panduan Komunitas & Konten
        • Campaign Berlangsung
        • Kabar Produk
        • Kabar Glints
    • Lowongan Kerja
    • Glints ExpertClass
    • Glints Community



    • Bidang Profesi
    • Design
    • UI Design
    • UX Design

    Yuk, Kenalan dengan Wireframing untuk Desain UI/UX

    Diperbarui 11 Feb 2021 - Dibaca 9 mnt
    Nadiyah Rahmalia Engineering graduate with expertise in content writing and SEO; an aspiring digital/content marketer striving to create and share meaningful works.

    Isi Artikel

      Dunia desain UI/UX mengenal istilah wireframe dan wireframing. Secara sederhana, wireframe adalah sebagai kerangka awal sebelum halaman website atau antarmuka sebuah aplikasi didesain.

      Wireframing merupakan tahap penting dalam desain produk yang harus dipahami dengan baik. Untuk itu, yuk, kenali lebih lanjut tentang wireframe!

      Baca Juga: 9 Tren Desain UI/UX Tahun 2020 yang Harus Kamu Ketahui!

      Apa Itu Wireframe?

      apa itu wireframe

      © Unsplash.com

      Wireframing merupakan cara desainer UI/UX membuat rancangan website maupun aplikasi pada level struktural. 

      Wireframe sendiri dapat diartikan dengan sederhana sebagai kerangka gambar.

      Merancang sebuah wireframe berarti merencanakan kerangka garis besar sebuah aplikasi atau website.

      Dengan wireframe, kamu bisa merancang struktur halaman yang baik, layout, arsitektur informasi, user flow, fungsionalitas, dan perilaku yang diinginkan dari pengguna.

      Wireframe merupakan tahap penting sebelum stakeholder menyetujui letak-letak informasi untuk website dan aplikasi sebelum developer mulai membuat antarmukanya menggunakan kode.

      Wireframing dapat dilakukan secara sederhana menggunakan gambar dengan tangan maupun software khusus.

      Apa Keuntungan Menggunakan Wireframe?

      keuntungan wireframe adalah

      © Pexels.com

      1. Memastikan konsep fokus pada user

      Menurut Career Foundry, wireframe adalah cara pengguna dapat dengan mudah memberikan masukan dan saran mengenai desain website atau aplikasi pada tahap wireframing.

      Hal ini juga mempermudah stakeholder berkomunikasi dan memberikan ide pada desainer.

      Selain untuk mendapatkan masukan dari pengguna dan stakeholder, proses wireframing juga bertujuan untuk mengidentifikasi titik masalah yang dialami pengguna.

      Informasi yang diperoleh saat tahap wireframing dapat digunakan untuk memperbaiki konsep produk dan rancangannya.

      Selain itu, wireframe juga digunakan desainer untuk mengukur dan menilai bagaimana pengguna website atau aplikasi berinteraksi dengan antarmuka yang didesain.

      Informasi-informasi ini digunakan desainer untuk memahami pengguna lebih baik dan membuat produk yang mudah serta nyaman digunakan semua orang.

      2. Memperjelas fitur

      Ketika mengomunikasikan ide desain kepada klien, lebih baik gunakan bahasa yang sederhana dan cara yang mudah dipahami.

      Nah, wireframing merupakan metode yang tepat untuk itu.

      Dengan wireframing, kamu bisa lebih mudah mengomunikasikan fitur, fungsi, dan tujuan dari sebuah web atau aplikasi.

      Stakeholder akan dapat mengukur berapa ruang yang perlu dialokasikan untuk fitur-fitur yang dirancang, menghubungkan arsitektur informasi pada desain visual, dan memperjelas fungsionalitas sebuah web atau aplikasi.

      Wireframing membuat seluruh elemen dan fungsi desain lebih jelas.

      Selain itu, hal ini juga mempermudah pemahaman tentang cara kerjanya sehingga keputusan-keputusan tepat dapat dibuat sebelum tahap perancangan selanjutnya.

      3. Cepat dan murah

      Salah satu alasan wireframe disukai oleh banyak desainer UI dan UX adalah karena mudah dan murah untuk dibuat.

      Cukup dengan kertas dan pulpen, kamu bisa dengan cepat membuat sketsa wireframe tanpa harus mengeluarkan uang.

      Selain itu, ada banyak tools dan software yang bisa membantu desain wireframe secara digital dengan mudah.

      Baca Juga: Apa Itu UX Designer? Yuk, Kenali Peran dan Skill yang Dikuasainya!

      Elemen Wireframe

      elemen wireframe adalah

      © Pixjumbo.com

      1. Desain informasi

      Desain informasi dalam wireframe adalah bagaimana cara mempresentasikan informasi atau konten yang ingin disampaikan pada pengguna dengan baik.

      Contoh elemen dalam desain informasi adalah input, thumbnail, link, paragraf, gambar, dan lain-lain.

      2. Navigasi

      Desain antarmuka sebuah website atau aplikasi harus mudah dimengerti. 

      Jika tidak, pengguna akan meninggalkan website atau aplikasi yang kamu buat dengan cepat.

      Navigasi yang jelas adalah salah satu cara untuk memastikan pengguna tahu di mana mereka bisa menemukan informasi dan bagaimana cara untuk menemukannya.

      Navigasi yang baik tidak hanya menciptakan kenyamanan bagi pengguna, tetapi juga membuat website atau aplikasi tampak lebih profesional dan rapi.

      3. Desain interface

      Desain interface atau desain antarmuka dalam wireframe adalah proses seleksi dan penempatan elemen seperti tombol, link, judul, text-align, ukuran font, dan lain-lain.

      Elemen-elemen ini penting untuk memudahkan pengguna berinteraksi dengan desain antarmuka yang telah dibuat.

      Tipe-Tipe Wireframe

      © Pexels.com

      Terdapat tiga tipe utama wireframe yaitu low-fidelity wireframe, mid-fidelity wireframe, dan high-fidelity wireframe.

      Perbedaan ketiga tipe wireframe ini adalah detail informasi yang ditampilkan.

      1. Wireframe low-fidelity

      Wireframe low-fidelity merupakan representasi visual yang paling dasar.

      Biasanya, desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe.

      Wireframe low-fidelity adalah desain kasar yang dibuat tanpa ukuran dan akurasi piksel, jadi, desain ini masih sangat sederhana dan tidak terinci.

      Wireframe low-fidelity adalah yang biasanya dibuat saat pertama kali mendapatkan ide dan ketika desainer UI/UX berusaha merancang dasar gagasan tersebut.

      2. Wireframe mid-fidelity

      Kebanyakan desainer UI dan UX menggunakan wireframe mid-fidelity.

      Wireframe mid-fidelity memiliki detail yang lebih baik dibanding low-fidelity.

      Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan jelas pada tipe wireframe ini.

      Biasanya, wireframe mid-fidelity dibuat dengan warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang ada.

      Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah Sketch atau Balsamiq.

      3. Wireframe high-fidelity

      Nah, wireframe high-fidelity adalah tipe wireframe yang memiliki detail paling baik dibanding dua lainnya.

      Tipe wireframe ini didesain dengan layout pixel-specific.

      Rencana gambar dan konten sudah ditampilkan jelas dengan tipe wireframe ini beserta detail-detail lainnya.

      Biasanya, wireframe high-fidelity dibuat ketika konsepnya benar-benar matang dan desainer sudah siap untuk pengerjaan bagian yang lebih rumit seperti sistem menu atau peta interaktif.

      Baca Juga: Apa Itu UX Writer? Yuk Ketahui Lebih Dalam Di Sini!

      Nah, sudahkah kamu lebih memahami tentang wireframe?

      Mungkin kamu masih memiliki pertanyaan-pertanyaan seputar desain UI dan UX.

      Jika begitu, Glints punya tempat di mana kamu bisa bertanya sepuasnya dan berdiskusi tentang desain UI dan UX dengan pengguna serta praktisi di bidangnya, lho.

      Tertarik? Yuk, bergabung dengan Glints Komunitas!

      Temukan juga beragam artikel desain UI dan UX lainnya di blog Glints.

      Supaya tidak ketinggalan, kamu bisa berlangganan newsletter blog Glints agar mendapat artikel-artikel tentang desain UI dan UX langsung ke inbox emailmu.

      Daftar sekarang, ya!

      • What Exactly Is Wireframing? A Comprehensive Guide

      beginner wireframe wireframing

      Comments are closed.

      Artikel Terkait

      • CV/Portofolio 5 Jenis Cover Letter dalam Dunia Kerja serta Contohnya

        Nadiyah Rahmalia 09 Jun 2022
      • CV/Portofolio 5 Langkah Mudah Mengambil Foto Profesional Sendiri dari Rumah

        Nadiyah Rahmalia 05 Jun 2022
      • Mengawali Karier Kenali 25 Prospek Kerja Lulusan Teknik Elektro yang Bisa Jadi Pilihanmu

        Nadiyah Rahmalia 04 Jun 2022
      • Dunia Kerja Kapan Waktu yang Tepat untuk Kembali Kerja setelah Melahirkan?

        Nadiyah Rahmalia 03 Jun 2022
      Langganan untuk dapatkan info konten karier terbaru di emailmu
      Terima kasih sudah berlangganan! Nantikan info konten terbaru Glints di emailmu.
      Maaf, permintaanmu tidak bisa diproses. Silakan coba lagi.
      Kategori Topik
      • Tips Karier
      • Bidang Profesi
      • Konten Eksklusif
      • Kabar Glints
      Media Sosial
      • Facebook
      • Twitter
      • Instagram
      • LinkedIn
      Solusi Glints
      • Lowongan Kerja
      • Glints ExpertClass
      • Glints Community

      • Blog
        • Bidang Profesi
          • Marketing
          • Tech & Data
          • Media & Communications
          • Business Dev & Sales
          • Product
          • Design
        • Tips Karier
          • Mengawali Karier
          • Dunia Kerja
        • Konten Eksklusif
          • Artikel Expert
          • Panduan
          • Laporan
        • Dari Glints
          • Panduan Komunitas & Konten
          • Campaign Berlangsung
          • Kabar Produk
          • Kabar Glints
      • Lowongan Kerja
      • Glints ExpertClass
      • Glints Community



      • Bidang Profesi
      • Design
      • UI Design
      • UX Design

      Yuk, Kenalan dengan Wireframing untuk Desain UI/UX

      Diperbarui 11 Feb 2021 - Dibaca 9 mnt
      Nadiyah Rahmalia Engineering graduate with expertise in content writing and SEO; an aspiring digital/content marketer striving to create and share meaningful works.

      Isi Artikel

        Dunia desain UI/UX mengenal istilah wireframe dan wireframing. Secara sederhana, wireframe adalah sebagai kerangka awal sebelum halaman website atau antarmuka sebuah aplikasi didesain.

        Wireframing merupakan tahap penting dalam desain produk yang harus dipahami dengan baik. Untuk itu, yuk, kenali lebih lanjut tentang wireframe!

        Baca Juga: 9 Tren Desain UI/UX Tahun 2020 yang Harus Kamu Ketahui!

        Apa Itu Wireframe?

        apa itu wireframe

        © Unsplash.com

        Wireframing merupakan cara desainer UI/UX membuat rancangan website maupun aplikasi pada level struktural. 

        Wireframe sendiri dapat diartikan dengan sederhana sebagai kerangka gambar.

        Merancang sebuah wireframe berarti merencanakan kerangka garis besar sebuah aplikasi atau website.

        Dengan wireframe, kamu bisa merancang struktur halaman yang baik, layout, arsitektur informasi, user flow, fungsionalitas, dan perilaku yang diinginkan dari pengguna.

        Wireframe merupakan tahap penting sebelum stakeholder menyetujui letak-letak informasi untuk website dan aplikasi sebelum developer mulai membuat antarmukanya menggunakan kode.

        Wireframing dapat dilakukan secara sederhana menggunakan gambar dengan tangan maupun software khusus.

        Apa Keuntungan Menggunakan Wireframe?

        keuntungan wireframe adalah

        © Pexels.com

        1. Memastikan konsep fokus pada user

        Menurut Career Foundry, wireframe adalah cara pengguna dapat dengan mudah memberikan masukan dan saran mengenai desain website atau aplikasi pada tahap wireframing.

        Hal ini juga mempermudah stakeholder berkomunikasi dan memberikan ide pada desainer.

        Selain untuk mendapatkan masukan dari pengguna dan stakeholder, proses wireframing juga bertujuan untuk mengidentifikasi titik masalah yang dialami pengguna.

        Informasi yang diperoleh saat tahap wireframing dapat digunakan untuk memperbaiki konsep produk dan rancangannya.

        Selain itu, wireframe juga digunakan desainer untuk mengukur dan menilai bagaimana pengguna website atau aplikasi berinteraksi dengan antarmuka yang didesain.

        Informasi-informasi ini digunakan desainer untuk memahami pengguna lebih baik dan membuat produk yang mudah serta nyaman digunakan semua orang.

        2. Memperjelas fitur

        Ketika mengomunikasikan ide desain kepada klien, lebih baik gunakan bahasa yang sederhana dan cara yang mudah dipahami.

        Nah, wireframing merupakan metode yang tepat untuk itu.

        Dengan wireframing, kamu bisa lebih mudah mengomunikasikan fitur, fungsi, dan tujuan dari sebuah web atau aplikasi.

        Stakeholder akan dapat mengukur berapa ruang yang perlu dialokasikan untuk fitur-fitur yang dirancang, menghubungkan arsitektur informasi pada desain visual, dan memperjelas fungsionalitas sebuah web atau aplikasi.

        Wireframing membuat seluruh elemen dan fungsi desain lebih jelas.

        Selain itu, hal ini juga mempermudah pemahaman tentang cara kerjanya sehingga keputusan-keputusan tepat dapat dibuat sebelum tahap perancangan selanjutnya.

        3. Cepat dan murah

        Salah satu alasan wireframe disukai oleh banyak desainer UI dan UX adalah karena mudah dan murah untuk dibuat.

        Cukup dengan kertas dan pulpen, kamu bisa dengan cepat membuat sketsa wireframe tanpa harus mengeluarkan uang.

        Selain itu, ada banyak tools dan software yang bisa membantu desain wireframe secara digital dengan mudah.

        Baca Juga: Apa Itu UX Designer? Yuk, Kenali Peran dan Skill yang Dikuasainya!

        Elemen Wireframe

        elemen wireframe adalah

        © Pixjumbo.com

        1. Desain informasi

        Desain informasi dalam wireframe adalah bagaimana cara mempresentasikan informasi atau konten yang ingin disampaikan pada pengguna dengan baik.

        Contoh elemen dalam desain informasi adalah input, thumbnail, link, paragraf, gambar, dan lain-lain.

        2. Navigasi

        Desain antarmuka sebuah website atau aplikasi harus mudah dimengerti. 

        Jika tidak, pengguna akan meninggalkan website atau aplikasi yang kamu buat dengan cepat.

        Navigasi yang jelas adalah salah satu cara untuk memastikan pengguna tahu di mana mereka bisa menemukan informasi dan bagaimana cara untuk menemukannya.

        Navigasi yang baik tidak hanya menciptakan kenyamanan bagi pengguna, tetapi juga membuat website atau aplikasi tampak lebih profesional dan rapi.

        3. Desain interface

        Desain interface atau desain antarmuka dalam wireframe adalah proses seleksi dan penempatan elemen seperti tombol, link, judul, text-align, ukuran font, dan lain-lain.

        Elemen-elemen ini penting untuk memudahkan pengguna berinteraksi dengan desain antarmuka yang telah dibuat.

        Tipe-Tipe Wireframe

        © Pexels.com

        Terdapat tiga tipe utama wireframe yaitu low-fidelity wireframe, mid-fidelity wireframe, dan high-fidelity wireframe.

        Perbedaan ketiga tipe wireframe ini adalah detail informasi yang ditampilkan.

        1. Wireframe low-fidelity

        Wireframe low-fidelity merupakan representasi visual yang paling dasar.

        Biasanya, desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe.

        Wireframe low-fidelity adalah desain kasar yang dibuat tanpa ukuran dan akurasi piksel, jadi, desain ini masih sangat sederhana dan tidak terinci.

        Wireframe low-fidelity adalah yang biasanya dibuat saat pertama kali mendapatkan ide dan ketika desainer UI/UX berusaha merancang dasar gagasan tersebut.

        2. Wireframe mid-fidelity

        Kebanyakan desainer UI dan UX menggunakan wireframe mid-fidelity.

        Wireframe mid-fidelity memiliki detail yang lebih baik dibanding low-fidelity.

        Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan jelas pada tipe wireframe ini.

        Biasanya, wireframe mid-fidelity dibuat dengan warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang ada.

        Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah Sketch atau Balsamiq.

        3. Wireframe high-fidelity

        Nah, wireframe high-fidelity adalah tipe wireframe yang memiliki detail paling baik dibanding dua lainnya.

        Tipe wireframe ini didesain dengan layout pixel-specific.

        Rencana gambar dan konten sudah ditampilkan jelas dengan tipe wireframe ini beserta detail-detail lainnya.

        Biasanya, wireframe high-fidelity dibuat ketika konsepnya benar-benar matang dan desainer sudah siap untuk pengerjaan bagian yang lebih rumit seperti sistem menu atau peta interaktif.

        Baca Juga: Apa Itu UX Writer? Yuk Ketahui Lebih Dalam Di Sini!

        Nah, sudahkah kamu lebih memahami tentang wireframe?

        Mungkin kamu masih memiliki pertanyaan-pertanyaan seputar desain UI dan UX.

        Jika begitu, Glints punya tempat di mana kamu bisa bertanya sepuasnya dan berdiskusi tentang desain UI dan UX dengan pengguna serta praktisi di bidangnya, lho.

        Tertarik? Yuk, bergabung dengan Glints Komunitas!

        Temukan juga beragam artikel desain UI dan UX lainnya di blog Glints.

        Supaya tidak ketinggalan, kamu bisa berlangganan newsletter blog Glints agar mendapat artikel-artikel tentang desain UI dan UX langsung ke inbox emailmu.

        Daftar sekarang, ya!

        • What Exactly Is Wireframing? A Comprehensive Guide

        beginner wireframe wireframing

        Comments are closed.

        Artikel Terkait

        • CV/Portofolio 5 Jenis Cover Letter dalam Dunia Kerja serta Contohnya

          Nadiyah Rahmalia 09 Jun 2022
        • CV/Portofolio 5 Langkah Mudah Mengambil Foto Profesional Sendiri dari Rumah

          Nadiyah Rahmalia 05 Jun 2022
        • Mengawali Karier Kenali 25 Prospek Kerja Lulusan Teknik Elektro yang Bisa Jadi Pilihanmu

          Nadiyah Rahmalia 04 Jun 2022
        • Dunia Kerja Kapan Waktu yang Tepat untuk Kembali Kerja setelah Melahirkan?

          Nadiyah Rahmalia 03 Jun 2022
        Langganan untuk dapatkan info konten karier terbaru di emailmu
        Terima kasih sudah berlangganan! Nantikan info konten terbaru Glints di emailmu.
        Maaf, permintaanmu tidak bisa diproses. Silakan coba lagi.
        Kategori Topik
        • Tips Karier
        • Bidang Profesi
        • Konten Eksklusif
        • Kabar Glints
        Media Sosial
        • Facebook
        • Twitter
        • Instagram
        • LinkedIn
        Solusi Glints
        • Lowongan Kerja
        • Glints ExpertClass
        • Glints Community
        Scroll Up