• Pengaturcaraan
    • Laravel
    • UI/UX
    • SEO
  • Teknologi
    • Mata Wang Kripto
  • Filem & Siri
  • Motivasi
    • Agama
    • Kata Inspirasi
    • Viral
  • How to?
Mencari
Facebook Twitter Instagram
Azmir Shah
  • Pengaturcaraan
    1. Laravel
    2. UI/UX
    3. SEO
    4. View All

    Apa itu Laravel? Adakah ia lebih baik berbanding Core PHP?

    24/04/2019

    4 laman web yang memberi inspirasi UIUX

    28/02/2021

    4 aplikasi rekaan UI/UX yang menjadi kegemaran saya

    25/06/2019

    Perbezaan wireframe, mockup dan prototaip untuk UI/UX

    18/06/2019

    Panduan On-page SEO yang semua orang wajib tahu!

    08/02/2021

    Apa itu SEO? Kenapa ia penting kepada laman web?

    10/10/2020

    LT Browser: Menguji reka bentuk responsif laman web anda secara offline

    22/02/2022

    Bagaimana cara debug ghost CSS secara manual

    15/02/2022

    Beza camel, snake, kebab dan pascal case dalam penulisan kod

    12/02/2020
  • Teknologi
    1. Mata Wang Kripto
    2. View All

    Cara beli token di Pancakeswap

    08/01/2022

    11 tip trade kripto untuk golongan pemula

    05/10/2021

    Panduan menjual mata wang kripto di Binance P2P Malaysia?

    10/06/2021

    5 platform jual beli Bitcoin di Malaysia untuk pemula

    21/02/2021

    Tiktok memintas Google sebagai laman web paling popular

    02/01/2022

    Keburukan ekonomi gig kepada gigger

    18/01/2021

    Apa itu ekonomi gig? Adakah Malaysia terkesan?

    09/12/2019

    Pemuda Ini Meramalkan Teknologi Dan Masa Hadapan

    24/08/2016
  • Filem & Siri

    Idiocracy (2006): Filem bodoh yang buat anda berfikir sejenak

    7.0 01/01/2022

    Ulasan Love Destiny (2018), Drama Thai yang anda patut tonton

    7.3 24/09/2021

    7 Drama Korea terbaik lakonan Lee Jong-Suk

    06/02/2021

    Tonton movie online secara percuma dengan Streamio

    17/01/2021

    7 filem manusia genius terbaik sepanjang zaman

    16/12/2019
  • Motivasi
    1. Agama
    2. Kata Inspirasi
    3. Viral
    4. View All

    Panduan melaksanakan solat jenazah dengan sempurna

    22/01/2017

    Peranan Yang Dimainkan Si Ayah Mempengaruhi Tingkah Laku Anak-Anak

    22/12/2015

    Pengisian Kuliah Ustaz Azhar Idrus Di Surau Al-Iman

    13/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 3

    12/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 2

    29/10/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 1

    22/10/2015

    Kisah Katak : Apa Beza Diri Anda Dan Katak Ini?

    20/12/2015

    Kisah Penjual Tempe Yang Penuh Dengan Pengajaran

    27/11/2015

    Cerita Rakyat Daripada Jepun Ini Sarat Dengan Pengajaran

    23/10/2015

    Mesej Seorang Bapa Kepada Anaknya Ini Pasti Membuatkan Anda Tersentuh

    15/10/2015

    Matlamat: Jangan Fokus Padanya, Jangan Berkongsi Pada Sesiapa

    28/03/2019

    Pakar Psikologi Berpendapat Kita Perlu Menerima Diri Kita Yang Seadanya Sebelum Bersedia Untuk Berubah

    17/01/2016

    7 Perbezaan Golongan Menengah dan Orang Kaya Yang Anda Kena Tahu

    16/01/2016

    7 Tabiat Yang Mampu Meningkatkan Produktiviti Kerja Anda

    14/01/2016
  • How to?

    Cara hantar Whatsapp tanpa save nombor seseorang

    17/10/2022

    Cara install aplikasi Disney+ Hotstar di Samsung TV Malaysia

    08/02/2022

    Cara menyelesaikan masalah “card information is invalid” di Samsung Pay

    12/06/2021

    Terlupa judul lagu? Ini cara cari lagu dengan bersenandung

    23/02/2021

    Buka akaun perniagaan Maybank online tanpa introducer

    02/02/2021
Azmir Shah
wireframe mockup dan prototaip, wireframe, mockup, prototype, rekaan, design, uiux,
UI/UX

Perbezaan wireframe, mockup dan prototaip untuk UI/UX

Azmir ShahBy Azmir ShahNo Comments6 Mins ReadUpdated:12/02/2021
Share
Facebook Twitter Telegram WhatsApp

Ramai sebenarnya yang keliru mengenai perbezaan wireframe, mockup dan prototaip dalam rekaan UI/UX. Jangan tidak percaya kalau saya cakapkan yang kekeliruan itu turut berlaku dikalangan mereka yang berada didalam bidang IT. Sunguh!!

Kebiasaannya mereka menganggap ketiga-tiga rekaan ini adalah benda yang sama. Maklumlah wireframe, mockup dan prototaip ini adalah rekaan yang kebiasaannya dibuat sebelum pelaksanaan projek. Jadi jangan peliklah kalau ada business executive atau System Analysis marah kenapa mockup tak boleh tekan (diklik).Ehh!!

Kepentingan wireframe, mockup dan prototaip

Rekaan sistem kebiasaannya melalui beberapa fasa rekaan yang menterjemahkan masalah kepada keperluan, keperluan kepada fungsi, fungsi kepada rekaan dan rekaan membentuk grafik dan pengalaman. Kesemua ini berkait rapat dengan idea yang perlu konsisten dengan semua keperluan. Yang paling penting idea itu perlu diterjemahkan. Disitulah peranan wireframe, mockup dan prototaip.

Wireframe, mockup dan prototaip ini merupakan terjemahan idea tentang bagaimana sesuatu sistem atau aplikasi itu berfungsi menerusi paparan skrin yang merangkumi user interface (UI) dan user experience (UX) yang dihasilkan menerusi lakaran (sketch) diatas kertas mahukan grafik. Menerusi lakaran atau grafik itu tadi, anda akan nampak sistem flow bagaimana ia berfungsi. Lebih kurang macam storyboard la nak senang cerita.

Malahan implimentasi ini merupakan hasil daripada analisis pelanggan dan pesaing, struktur produk, strategi serta pembangunan kandungan produk. Ianya akan dijadikan rujukan sepanjang fasa pembangunan berlangsung.

Rujukan inilah yang akan digunakan oleh pihak pembangunan untuk berkomunikasi dengan client mereka mengenai keperluan sistem sama ada dipenuhi atau tidak. Jadi tak adalah berlaku isu seperti ayam bercakap dengan itik. Kita cakap bahasa IT yang bombastik, client cakap benda yang tidak jelas. Kemudian buat rekaan sistem yang tidak selari dengan kehendak pelanggan. Jangan pelik ye, saya pernah dapat client yang tak tau pun apa yang dia nak.

Sebagai contohnya jika dia berkata yang dia memerlukan sistem Customer relationship management (CRM), maknanya dia memang nak sistem CRM tanpa tau secara terperinci tentang apa yang dia hendak sebenarnya. Serius memang perkara seperti ini terjadi. Sebab itulah kita perlu memainkan peranan sebagai pembangun untuk mengumpulkan segala keperluan sistem yang merangkumi kehendak client dan dicadangkan kepadanya. Ketiga-tiga jenis rekaan ini adalah salah satu daripada kaedah yang saya maksudkan kerana ia berbentuk visual. Secara tak langsung ia jadi pemudah cara.

Perbezaan wireframe, mockup dan prototaip?

Baiklah, terdapat beberapa perbezaan yang sangat ketara yang melibatkan wireframe, mockup dan prototaip. Ianya melibatkan rekaan asas, statik dan dinamik yang mempengaruhi navigasi, struktur dan susun atur halaman. Perbezaan yang saya maksudkan adalah seperti berikut:

1. Wireframe

interactive wireframe, working wireframe, wireframe prototype, contoh wireframe aplikasi, storyboard vs wireframe, fungsi wireframe, perbedaan wireframe, how to create wireframe, beza wireframe,wireframe mockup, wireframe ux, wireframe, rekaan uiux, contoh wireframe,
contoh lakaran awal wireframe yang menggunakan pen dan kertas

Wireframe ini turut dikenali sebagai low fidelity mockup merupakan sebuah blueprint atau kerangka yang menyampaikan susunan, struktur, navigasi dan pengurusan konten. Kebiasaannya wireframe ini dibuat dalam bentuk yang cukup asas seperti hitam putih kerana ketika proses ini, bukan rekaan visual yang menjadi keutamaan. Sebaliknya stuktur dan kerangka sistem termasuk susunan butang, elemen, teks, icon dan navigasi yang lebih menjadi agenda utama pembuatan.

Wireframe ini tidak semestinya dibuat menerusi lakaran diatas kertas. Sebaliknya ia juga boleh dibuat dalam bentuk digital dengan paparan yang lebih kemas asalnya fungsi-fungsi aplikasi ditunjukkan dengan jelas. Kebiasaannya wireframe ini diimplimentasikan ketika peringkat awal proses rekaan sebelum dikembangkan dalam bentuk konsep visual. Terdapat beberapa kebaikan yang boleh anda dapati menerusi penggunaa wireframe ini. Antaranya..

Kelebihan wireframe:

  1. Anda boleh dapat gambaran idea secara umum.
  2. Memudahkan proses cadangan flow sistem dengan client.
  3. Menjimatkan waktu rekaan outline dan struktur aplikasi.
  4. Murah untuk diubah jika outsourcing.
  5. Rekaan boleh dibuat hanya diatas kertas sahaja.

2. Mockup

design mockup sendiri, mock-up, computer mockup, design mockup, mockup app, figma, design mockup, mockup mockup using figma,
Proses visual wireframe menjadi mockup. Warna dan konsep yang sesuai disatukan.

Mockup yang juga dikenali sebagai high fidelity mockup merupakan satu rekaan yang menunjukkan visual akhir bagi sesebuah produk. Setiap perincian rekaan menunjukkan bagaimana rupa sesebuah aplikasi yang merangkumi kandungan, butang, warna dan juga aset. Walau bagaimanapun seperti mana wireframe, mockup tidak boleh diklik dan hanya memaparkan rekaan grafik sahaja (bersifat statik).

Mockup membantu anda membuat keputusan akhir mengenai skema warna produk, gaya visual, tipografi. Dengan mockup, anda boleh membenarkan diri anda bereksperimen dengan sisi visual produk untuk melihat apa yang kelihatan paling baik. Di sini sekali lagi, anda boleh meminta pengguna untuk memberi komen dan maklumbalas yang diperlukan segera.

Mengenai cara pembikinannya pula, anda tidak boleh melukiskannya diatas kertas. Sebaliknya anda memerlukan aplikasi rekaan yang boleh membantu untuk menghasilkan mockup yang berkualiti dan cantik.

Kelebihan mockup

  1. Rekaan user interface (UI) dapat diselaraskan 100% berdasarkan mockup,
  2. Projek boleh  finalize tanpa perlu tunggu prototaip.
  3. Mockup menyerupai produk sebenar versi statik.

3. Prototaip

https://azmirshah.com/wp-content/uploads/2019/06/prototaip.mp4

Persembahan prototaip tanpa kod menggunakan lakaran mockup

Prototaip juga dikira sebagai high fidelity kerana ia merupakan kesinambungan kepada rekaan mockup. Beza antara mockup dan prototaip ialah mockup itu lebih berfokus kepada visual dan rekaan, prototaip pula fokus kepada kesemuanya sekali termasuk flow sistem, rekaan serta fungsi yang disediakan dalam aplikasi anda. Yang paling penting, protaip boleh diklik dan ianya mempunyai kandungan yang memberi pengalaman sebenar kepada sesiapa yang menggunakannya. Erti kata lain, prototaip ini hampir menyerupai produk akhir projek.

Lebih menarik penghasilan prototaip tidak memerlukan anda untuk menulis walau sebaris pun kod pengaturcaraan. Kesemuanya boleh dihasilkan menggunakan perisian penyedia perkhidmatan prototaiping seperti Adobe XD. Jadi bolehlah anda tunjukkan kepada pengguna, pemilik perniagaan serta pembangun tentang bagaimana aplikasi atau sistem anda berfungsi. Jika fungsi tersebut tidak menepati piawaian yang diletakkan, anda boleh mengubahnya kerana protaip ini sesuatu yang nampak, bukan seperti mockup yang memerlukan anda membayangkan flow sistemnya.

Kelebihan prototaip

  1. Prototaip menyerupai produk sebenar versi dinamik.
  2. Pengguna dapat merasai sendiri pengalaman menggunakan aplikasi.
  3. Penjimatan tanpa perlu menulis kod sebenar.

Kesimpulannya

Apabila bermula dengan projek yang melibatkan rekabentuk, ada beberapa perkara yang anda perlu pertimbangkan. Pertama ia kerumitan UI. Kerumitan UI anda mempengaruhi dateline yang telah ditetapkan. Jika anda bekerja dalam kumpulan kecil dan punyai dateline yang singkat, pembinaan wireframe sudah memadaikan. Sentiasa mengutamakan client dan mereka yang bakal berinteraksi dengan reka bentuk sistem anda. Selain daripada benar-benar memikat client anda, fikirkan tentang pengguna akhir yang akan membantu anda melakukan ujian kebolehgunaan (usability test), dan akhirnya menilai sama ada produk anda baik atau tidak.

Baca juga: 7 sebab mengapa Boost e-wallet menjadi pilihan warga Kuala Lumpur

Baca juga: 7 Fakta Mengenai Google Yang Anda Mungkin Tidak Tahu

Jika saya kelapangan, minggu depan saya tuliskan pula tentang aplikasi yang saya gunakan untuk membuat rekaan wireframe, mockup dan prototaip. Mungkin ada diantara aplikasi tersebut mampu membantu anda untuk merancang perjalanan projek anda. Jika anda mempunyai pendapat dan cadangan, jangan segan dan silu untuk menulis diruangan komen. See ya.

adobe xd adobe xd design aplikasi prototaip beza prototaip beza wireframe contoh prototaip contoh wireframe contoh wireframe aplikasi definisi mockup definisi prototaip definisi wireframe figma fungsi wireframe how to create wireframe interactive wireframe konsep wireframe pada website membuat prototaip mockup world perbedaan wireframe perbedaan wireframe dan mockup prototaip prototaip produk prototype using figma rekaan uiux storyboard vs wireframe wireframe wireframe free tool wireframe mobile wireframe mockup wireframe prototype wireframe ux wireframe vs mockup vs prototaip working wireframe
Share. Facebook Twitter Telegram WhatsApp
Previous ArticleAdakah ads.txt mampu meningkatan pendapatan Google Adsense anda?
Next Article 4 aplikasi rekaan UI/UX yang menjadi kegemaran saya
Azmir Shah
  • Website
  • Facebook
  • Twitter
  • Instagram

Seorang programmer yang mempunyai pengalaman yang tidak seberapa. Memiliki kelulusan daripada universiti terkemuka di Malaysia dan secara jujurnya beliau meminati Elon Mask lebih daripada Bill Gate.Seorang yang bercita-cita tinggi, kini bekerja sebagai Front-End developer di salah sebuah syarikat di Shah Alam.

Artikel Berkaitan

4 laman web yang memberi inspirasi UIUX

4 aplikasi rekaan UI/UX yang menjadi kegemaran saya

Leave A Reply Cancel Reply

Cari Sesuatu?
Sosial Media
  • Facebook
  • Twitter
  • Instagram
  • Telegram
Artikel Terbaru
Review

Cara beli kad NFC Touch N Go dengan mudah dan pantas

By Azmir Shah11/02/2023
Review

Ulasan projektor murah Q3 Pro dan pengalaman menggunakannya

By Azmir Shah26/10/2022
Tutorial

Cara hantar Whatsapp tanpa save nombor seseorang

By Azmir Shah17/10/2022
Review

Pengalaman tukar skrin samsung s20+ secara percuma

By Azmir Shah10/10/2022
Makanan

5 Sarapan tidak sihat menurut Pakar Perunding Kardiologi

By Azmir Shah01/03/2022
Kategori
Mengenai Kami
Mengenai Kami

Platform penulisan untuk kami kongsikan segala informasi yang bersarang di minda. Berkongsi pengetahuan untuk anda para pembaca yang budiman.

Pautan Berkaitan
  • Dasar Privasi
  • Hubungi
  • Tentang
Artikel Terbaru

Cara beli kad NFC Touch N Go dengan mudah dan pantas

11/02/2023

Ulasan projektor murah Q3 Pro dan pengalaman menggunakannya

26/10/2022

Cara hantar Whatsapp tanpa save nombor seseorang

17/10/2022

Pengalaman tukar skrin samsung s20+ secara percuma

10/10/2022
© 2023 Hak Cipta Terpelihara. Direka untuk Azmir Shah.

Type above and press Enter to search. Press Esc to cancel.

Go to mobile version