• 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

Yuk, Memahami Mockup dan Pentingnya untuk Desain Produk!

Diperbarui 10 Mar 2021 - Dibaca 8 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

    Mockup adalah sesuatu yang cukup berkaitan dengan dunia desain desain produk. Lalu, apa pengertian dari mockup itu sendiri dan bagaimanakah cara kerjanya?

    Jangan bingung, Glints sudah siapkan semua jawaban pertanyaanmu tentang mockup di bawah ini.

    Yuk, simak lebih lanjut tentang mockup!

    Baca Juga: Ingin Membuat Mockup Desain? Ketahui 10 Aplikasi Ini!

    Apa Itu Mockup?

    apa itu mockup

    © Freepik.com

    Dalam proses desain dan pengembangan produk, mockup adalah visualisasi sebuah konsep desain. 

    Dilansir dari Keenethics, bentuk mockup adalah gambaran mid-fidelity ataupun high-fidelity yang menggambarkan pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan produk yang didesain.

    Keuntungan Mockup

    keuntungan mockup

    © Freepik.com

    1. Mempermudah stakeholder

    Menurut UXPin, mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan dibuat. 

    Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan memahami produk final yang akan dibuat.

    Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju ke proses selanjutnya.

    2.  Memberi perspektif realistis

    Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan.

    Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.

    Hal ini sulit diketahui hanya dengan desain di atas kertas seperti pemilihan warna yang kurang padu, kesulitan navigasi, dan lain-lain.

    3. Mempermudah perbaikan

    Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain sebelum desain tersebut dilanjutkan ke tahap coding.

    Ketika sudah masuk tahap coding, perbaikan akan lebih rumit.

    Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa desain yang mereka buat kodenya telah benar-benar final

    4. Hemat anggaran

    Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal jika melakukan proses desain produk tanpa mockup.

    Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi lainnya.

    Mengapa Mockup Penting?

    mengapa mockup penting

    © Freepik.com

    1. Perkiraan waktu pengembangan

    Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan berapa lama proses pengembangan produk akan berjalan.

    Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan didesain bergerak atau menggunakan animasi.

    Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih dahulu sehingga developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan desain mockup menjadi produk nyata.

    2. Coding HTML

    Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode.

    Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi lebih lama.

    3. Mendatangkan investor

    Mockup adalah cara awal agar sebuah rancangan produk dilirik investor.

    Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs atau aplikasi yang kamu rencanakan, dan tentu saja akan sulit untuk merealisasikan sebuah proyek tanpa investor dan dana yang cukup.

    4. Kenyamanan pengguna

    Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan. 

    Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.

    Baca Juga: Ingin Belajar Web Developer? Pelajari Langkah-langkahnya di Sini!

    Anatomi Mockup

    Anatomi mockup adalah beberapa aspek yang perlu kamu perhatikan saat membuat mockup sebuah desain UI/UX.

    Nah, ini adalah contoh mockup dan bagian-bagiannya.

    © Glints

    1. Layout konten

    Pikirkan bagaimana konten akan ditampilkan dalam desain mockup, contohnya adalah menimbang antara F-pattern, Z-pattern, card, atau teks.

    Selain itu, penting juga untuk memikirkan ukuran setiap bagian konten pada tampilan antarmuka dan berapa banyak yang ingin ditampilkan di layar pada satu waktu.

    2. Kontras

    Kontras tampilan antarmuka sebuah situs atau aplikasi penting untuk dipikirkan untuk mendukung kenyamanan pengguna.

    Tanpa kontras yang baik, pengguna akan kesulitan membaca teks yang ditampilkan.

    Kamu bisa menggunakan color contrast tool untuk menguji seberapa mudah tulisan atau teks di tampilan situs atau aplikasi dapat dibaca.

    3. Warna

    Warna bisa memengaruhi perasaan pengguna saat berada di situs atau aplikasimu.

    Oleh karena itu, penting untuk benar-benar memikirkan warna yang tepat untuk produk yang kamu kembangkan agar bisa merepresentasikan suasana yang ingin diciptakan.

    Penentuan warna dalam proses mockup adalah aspek penting untuk memastikan kenyamanan pengguna.

    4. Tipografi

    Dengan mockup, kamu bisa bebas mencoba banyak tipe font, beragam ukuran, style, spacing, dan lain-lain untuk mendapatkan tampilan yang paling sesuai.

    5. Spacing

    Space atau ruang kosong yang ada di desain mockup bukan berarti harus diisi. Ruang kosong justru adalah elemen desain yang bagus.

    Sebuah desain harus mempunyai ruangan kosong untuk memudahkan pengguna membaca konten yang ditampilkan sehingga tidak lelah membaca apa yang ada di tampilan antarmuka.

    6. Navigasi

    Pengguna harus dapat dengan mudah menjelajahi situs maupun aplikasi yang kamu kembangkan, maka dari itu perancangan navigasi menjadi sangat penting.

    Rancang navigasi yang sederhana untuk dipahami semua orang, padukan warna, tipografi, dan spacing untuk membuat pengguna dapat berinteraksi dengan semua elemen lebih baik. 

    Baca Juga: Seberapa Penting User Experience (UX) Design dalam Dunia Digital?

    Begitulah sekilas tentang mockup. Sudahkah lebih paham, kan? Jika kamu masih penasaran dengan berbagai bahasan terkait mockup atau desain, bisa langsung berkunjung ke Glints Komunitas, lho.

    Di Glints Komunitas kamu bisa diskusi dan bertanya jawab dengan sesama pengguna atau para profesional yang sudah lebih paham dengan hal ini.

    Yuk daftarkan akunmu sekarang dan mulai diskusi di Glints Komunitas.

    • What Is a Mockup and Why Do We Need It
    • What is a Mockup: The Final Layer of UI Design

    beginner mockup mockup adalah ui user interface

    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

    Yuk, Memahami Mockup dan Pentingnya untuk Desain Produk!

    Diperbarui 10 Mar 2021 - Dibaca 8 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

      Mockup adalah sesuatu yang cukup berkaitan dengan dunia desain desain produk. Lalu, apa pengertian dari mockup itu sendiri dan bagaimanakah cara kerjanya?

      Jangan bingung, Glints sudah siapkan semua jawaban pertanyaanmu tentang mockup di bawah ini.

      Yuk, simak lebih lanjut tentang mockup!

      Baca Juga: Ingin Membuat Mockup Desain? Ketahui 10 Aplikasi Ini!

      Apa Itu Mockup?

      apa itu mockup

      © Freepik.com

      Dalam proses desain dan pengembangan produk, mockup adalah visualisasi sebuah konsep desain. 

      Dilansir dari Keenethics, bentuk mockup adalah gambaran mid-fidelity ataupun high-fidelity yang menggambarkan pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan produk yang didesain.

      Keuntungan Mockup

      keuntungan mockup

      © Freepik.com

      1. Mempermudah stakeholder

      Menurut UXPin, mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan dibuat. 

      Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan memahami produk final yang akan dibuat.

      Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju ke proses selanjutnya.

      2.  Memberi perspektif realistis

      Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan.

      Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.

      Hal ini sulit diketahui hanya dengan desain di atas kertas seperti pemilihan warna yang kurang padu, kesulitan navigasi, dan lain-lain.

      3. Mempermudah perbaikan

      Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain sebelum desain tersebut dilanjutkan ke tahap coding.

      Ketika sudah masuk tahap coding, perbaikan akan lebih rumit.

      Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa desain yang mereka buat kodenya telah benar-benar final

      4. Hemat anggaran

      Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal jika melakukan proses desain produk tanpa mockup.

      Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi lainnya.

      Mengapa Mockup Penting?

      mengapa mockup penting

      © Freepik.com

      1. Perkiraan waktu pengembangan

      Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan berapa lama proses pengembangan produk akan berjalan.

      Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan didesain bergerak atau menggunakan animasi.

      Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih dahulu sehingga developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan desain mockup menjadi produk nyata.

      2. Coding HTML

      Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode.

      Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi lebih lama.

      3. Mendatangkan investor

      Mockup adalah cara awal agar sebuah rancangan produk dilirik investor.

      Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs atau aplikasi yang kamu rencanakan, dan tentu saja akan sulit untuk merealisasikan sebuah proyek tanpa investor dan dana yang cukup.

      4. Kenyamanan pengguna

      Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan. 

      Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.

      Baca Juga: Ingin Belajar Web Developer? Pelajari Langkah-langkahnya di Sini!

      Anatomi Mockup

      Anatomi mockup adalah beberapa aspek yang perlu kamu perhatikan saat membuat mockup sebuah desain UI/UX.

      Nah, ini adalah contoh mockup dan bagian-bagiannya.

      © Glints

      1. Layout konten

      Pikirkan bagaimana konten akan ditampilkan dalam desain mockup, contohnya adalah menimbang antara F-pattern, Z-pattern, card, atau teks.

      Selain itu, penting juga untuk memikirkan ukuran setiap bagian konten pada tampilan antarmuka dan berapa banyak yang ingin ditampilkan di layar pada satu waktu.

      2. Kontras

      Kontras tampilan antarmuka sebuah situs atau aplikasi penting untuk dipikirkan untuk mendukung kenyamanan pengguna.

      Tanpa kontras yang baik, pengguna akan kesulitan membaca teks yang ditampilkan.

      Kamu bisa menggunakan color contrast tool untuk menguji seberapa mudah tulisan atau teks di tampilan situs atau aplikasi dapat dibaca.

      3. Warna

      Warna bisa memengaruhi perasaan pengguna saat berada di situs atau aplikasimu.

      Oleh karena itu, penting untuk benar-benar memikirkan warna yang tepat untuk produk yang kamu kembangkan agar bisa merepresentasikan suasana yang ingin diciptakan.

      Penentuan warna dalam proses mockup adalah aspek penting untuk memastikan kenyamanan pengguna.

      4. Tipografi

      Dengan mockup, kamu bisa bebas mencoba banyak tipe font, beragam ukuran, style, spacing, dan lain-lain untuk mendapatkan tampilan yang paling sesuai.

      5. Spacing

      Space atau ruang kosong yang ada di desain mockup bukan berarti harus diisi. Ruang kosong justru adalah elemen desain yang bagus.

      Sebuah desain harus mempunyai ruangan kosong untuk memudahkan pengguna membaca konten yang ditampilkan sehingga tidak lelah membaca apa yang ada di tampilan antarmuka.

      6. Navigasi

      Pengguna harus dapat dengan mudah menjelajahi situs maupun aplikasi yang kamu kembangkan, maka dari itu perancangan navigasi menjadi sangat penting.

      Rancang navigasi yang sederhana untuk dipahami semua orang, padukan warna, tipografi, dan spacing untuk membuat pengguna dapat berinteraksi dengan semua elemen lebih baik. 

      Baca Juga: Seberapa Penting User Experience (UX) Design dalam Dunia Digital?

      Begitulah sekilas tentang mockup. Sudahkah lebih paham, kan? Jika kamu masih penasaran dengan berbagai bahasan terkait mockup atau desain, bisa langsung berkunjung ke Glints Komunitas, lho.

      Di Glints Komunitas kamu bisa diskusi dan bertanya jawab dengan sesama pengguna atau para profesional yang sudah lebih paham dengan hal ini.

      Yuk daftarkan akunmu sekarang dan mulai diskusi di Glints Komunitas.

      • What Is a Mockup and Why Do We Need It
      • What is a Mockup: The Final Layer of UI Design

      beginner mockup mockup adalah ui user interface

      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

      Yuk, Memahami Mockup dan Pentingnya untuk Desain Produk!

      Diperbarui 10 Mar 2021 - Dibaca 8 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

        Mockup adalah sesuatu yang cukup berkaitan dengan dunia desain desain produk. Lalu, apa pengertian dari mockup itu sendiri dan bagaimanakah cara kerjanya?

        Jangan bingung, Glints sudah siapkan semua jawaban pertanyaanmu tentang mockup di bawah ini.

        Yuk, simak lebih lanjut tentang mockup!

        Baca Juga: Ingin Membuat Mockup Desain? Ketahui 10 Aplikasi Ini!

        Apa Itu Mockup?

        apa itu mockup

        © Freepik.com

        Dalam proses desain dan pengembangan produk, mockup adalah visualisasi sebuah konsep desain. 

        Dilansir dari Keenethics, bentuk mockup adalah gambaran mid-fidelity ataupun high-fidelity yang menggambarkan pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan produk yang didesain.

        Keuntungan Mockup

        keuntungan mockup

        © Freepik.com

        1. Mempermudah stakeholder

        Menurut UXPin, mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan dibuat. 

        Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan memahami produk final yang akan dibuat.

        Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju ke proses selanjutnya.

        2.  Memberi perspektif realistis

        Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan.

        Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.

        Hal ini sulit diketahui hanya dengan desain di atas kertas seperti pemilihan warna yang kurang padu, kesulitan navigasi, dan lain-lain.

        3. Mempermudah perbaikan

        Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain sebelum desain tersebut dilanjutkan ke tahap coding.

        Ketika sudah masuk tahap coding, perbaikan akan lebih rumit.

        Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa desain yang mereka buat kodenya telah benar-benar final

        4. Hemat anggaran

        Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal jika melakukan proses desain produk tanpa mockup.

        Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi lainnya.

        Mengapa Mockup Penting?

        mengapa mockup penting

        © Freepik.com

        1. Perkiraan waktu pengembangan

        Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan berapa lama proses pengembangan produk akan berjalan.

        Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan didesain bergerak atau menggunakan animasi.

        Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih dahulu sehingga developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan desain mockup menjadi produk nyata.

        2. Coding HTML

        Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode.

        Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi lebih lama.

        3. Mendatangkan investor

        Mockup adalah cara awal agar sebuah rancangan produk dilirik investor.

        Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs atau aplikasi yang kamu rencanakan, dan tentu saja akan sulit untuk merealisasikan sebuah proyek tanpa investor dan dana yang cukup.

        4. Kenyamanan pengguna

        Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan. 

        Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.

        Baca Juga: Ingin Belajar Web Developer? Pelajari Langkah-langkahnya di Sini!

        Anatomi Mockup

        Anatomi mockup adalah beberapa aspek yang perlu kamu perhatikan saat membuat mockup sebuah desain UI/UX.

        Nah, ini adalah contoh mockup dan bagian-bagiannya.

        © Glints

        1. Layout konten

        Pikirkan bagaimana konten akan ditampilkan dalam desain mockup, contohnya adalah menimbang antara F-pattern, Z-pattern, card, atau teks.

        Selain itu, penting juga untuk memikirkan ukuran setiap bagian konten pada tampilan antarmuka dan berapa banyak yang ingin ditampilkan di layar pada satu waktu.

        2. Kontras

        Kontras tampilan antarmuka sebuah situs atau aplikasi penting untuk dipikirkan untuk mendukung kenyamanan pengguna.

        Tanpa kontras yang baik, pengguna akan kesulitan membaca teks yang ditampilkan.

        Kamu bisa menggunakan color contrast tool untuk menguji seberapa mudah tulisan atau teks di tampilan situs atau aplikasi dapat dibaca.

        3. Warna

        Warna bisa memengaruhi perasaan pengguna saat berada di situs atau aplikasimu.

        Oleh karena itu, penting untuk benar-benar memikirkan warna yang tepat untuk produk yang kamu kembangkan agar bisa merepresentasikan suasana yang ingin diciptakan.

        Penentuan warna dalam proses mockup adalah aspek penting untuk memastikan kenyamanan pengguna.

        4. Tipografi

        Dengan mockup, kamu bisa bebas mencoba banyak tipe font, beragam ukuran, style, spacing, dan lain-lain untuk mendapatkan tampilan yang paling sesuai.

        5. Spacing

        Space atau ruang kosong yang ada di desain mockup bukan berarti harus diisi. Ruang kosong justru adalah elemen desain yang bagus.

        Sebuah desain harus mempunyai ruangan kosong untuk memudahkan pengguna membaca konten yang ditampilkan sehingga tidak lelah membaca apa yang ada di tampilan antarmuka.

        6. Navigasi

        Pengguna harus dapat dengan mudah menjelajahi situs maupun aplikasi yang kamu kembangkan, maka dari itu perancangan navigasi menjadi sangat penting.

        Rancang navigasi yang sederhana untuk dipahami semua orang, padukan warna, tipografi, dan spacing untuk membuat pengguna dapat berinteraksi dengan semua elemen lebih baik. 

        Baca Juga: Seberapa Penting User Experience (UX) Design dalam Dunia Digital?

        Begitulah sekilas tentang mockup. Sudahkah lebih paham, kan? Jika kamu masih penasaran dengan berbagai bahasan terkait mockup atau desain, bisa langsung berkunjung ke Glints Komunitas, lho.

        Di Glints Komunitas kamu bisa diskusi dan bertanya jawab dengan sesama pengguna atau para profesional yang sudah lebih paham dengan hal ini.

        Yuk daftarkan akunmu sekarang dan mulai diskusi di Glints Komunitas.

        • What Is a Mockup and Why Do We Need It
        • What is a Mockup: The Final Layer of UI Design

        beginner mockup mockup adalah ui user interface

        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