Apa perbedaan antara wireframes dan mockup?

Saya ingin tahu perbedaan antara Wireframes dan Mockups. Saya berharap untuk mendapatkan pemahaman sederhana tentang perbedaan atau untuk secara pasti tahu bahwa keduanya sama.

Saya mencari di Google tetapi saya tidak bisa mengerti apa perbedaannya, saya akan sangat menghargai jika seseorang dapat menjelaskannya dengan singkat.

Gambar rangka adalah tentang fungsionalitas. Ini bisa berupa sketsa sederhana yang menunjukkan hal-hal seperti apa yang dapat Anda lakukan dalam desain Anda. Misalnya, bingkai gambar situs web akan menampilkan navigasi, tombol utama, kolom, penempatan elemen yang berbeda. Anda dapat menganggapnya sebagai cetak biru untuk situs web.

Sebuah mockup adalah representasi yang realistis dari produk apa yang akan terlihat seperti, dalam hal ini: sebuah website. Hasil akhir dapat terlihat persis seperti mockup, atau menjadi variasi setelah revisi versi. Sementara beberapa orang lebih suka menggambar maket menggunakan perangkat lunak grafis, yang lain melakukannya langsung dalam HTML / CSS.

Saya menggunakan Balsamiq untuk gambar rangka, dan baik Photoshop / Illustrator atau HTML + CSS (tergantung pada kompleksitas) untuk mockup.

Contoh bingkai foto:

Wireframes adalah bentuk atau garis yang belum sempurna yang digunakan untuk menentukan posisi dan / atau ukuran saja. Tujuan dari wireframe adalah untuk "memasukan" elemen ke dalam tata letak, bukan menunjukkan bagaimana elemen dapat benar-benar muncul dalam desain akhir, hanya di mana mereka akan berada.

Maket dibuat di atas gambar rangka dan melangkah lebih jauh untuk menunjukkan aspek penampilan keseluruhan dari suatu desain termasuk pilihan jenis, pilihan warna, dll. Tujuan dari mock up adalah untuk menunjukkan, sedekat mungkin, bagaimana semua tampilan akhir akan ditampilkan.

Saya mendukung balasan terperinci dari @Yisela, juga untuk menambahkan visi ini terungkap dalam presentasi berikut

Berikut ini ringkasan singkat artikel oleh Marcin Treder :

Wireframe

Bingkai gambar adalah representasi kesetiaan yang rendah dari suatu desain. Itu harus jelas menunjukkan:

1. • Grup utama konten (apa?)

2. • Struktur informasi (di mana?)

3. • Deskripsi dan visualisasi dasar interaksi antarmuka pengguna (bagaimana?)

4. Anggap mereka sebagai tulang punggung desain Anda dan ingat bahwa gambar rangka harus mengandung representasi dari setiap bagian penting dari produk akhir.

Maket

1. Mockup adalah kesetiaan desain statis, menengah ke tinggi. Sangat sering maket adalah rancangan desain visual
2. Merupakan struktur informasi, memvisualisasikan konten dan menunjukkan fungsi dasar secara statis
3. Mendorong orang untuk benar-benar meninjau sisi visual proyek

Wireframes digunakan untuk mendefinisikan kerangka kerja, hierarki informasi, mendemonstrasikan alur kerja, memberikan detail tentang apa yang ada di layar, dan deskripsi tentang cara kerja komponen (anotasi). Bergantung pada kompleksitas aplikasi atau situs, gambar rangka harus dibangun di atas persyaratan lain yang dapat dikirimkan; model proses. Wireframes dapat digunakan untuk memperoleh persyaratan dari klien, dan pada akhirnya mengkonfirmasi persyaratan dengan klien. Wireframes adalah model visual dari struktur situs atau aplikasi. Mereka tidak mendefinisikan font yang akan digunakan, padding, warna, style dll. Mereka tidak untuk skala, dan mereka tidak memiliki nada atau gradien. Semua ini perlu dikomunikasikan dengan klien sehingga mereka memahami proses dan konteks kiriman rangka kawat yang disampaikan, bersama dengan kiriman persyaratan lainnya.

Sebuah mock-up biasanya dibuat dalam Photoshop dan meskipun didasarkan pada struktur, atau kerangka kerja pengiriman gambar rangka yang dikonfirmasi, itu adalah pengiriman yang berbeda, dengan jadwal dan proses persetujuan yang berbeda. Mock-up atau comps, tentukan gaya visual, atau nada antarmuka. Setelah diterima, mock-up menerjemahkan ke dalam sejumlah persyaratan tambahan atau produk kerja, seperti kode CSS, panduan gaya, aset grafis, dll.

Wireframes tidak pernah menjadi mock-up. Mock-up dapat digunakan sebagai gambar rangka tetapi ini akan memiliki implikasi untuk setiap revisi yang mungkin diperlukan dan berdampak signifikan pada anggaran Anda.

Sumber: 15 tahun sebagai Desainer Komunikasi, Pimpinan UX, Analis Bisnis dalam lingkungan perusahaan yang mengembangkan situs web dan aplikasi. Dan BABOK tercinta

Saya belum mendapatkan reputasi untuk mengomentari tanggapan Dave Kaye sehingga saya harus merespons secara langsung. Sangat berharga untuk mencatat jawabannya dibandingkan dengan jawaban brilian Rachuru.

Dalam interpretasi frasa modern, penjelasan orang awam bisa / seharusnya;

1. Wireframes adalah "desain"
2. Maket adalah "demo yang diberikan"

Terminologi yang sebenarnya berasal dari tahun 80-an. Saat itu, Anda tidak memiliki kekuatan komputasi untuk menghasilkan citra waktu nyata, tetapi Anda dapat menonton "gambar rangka" grafik yang melayang di layar dalam waktu nyata. "Demo" yang tepat membutuhkan rendering semalam, dll.

Pada masa-masa ini, "bingkai gambar" mewakili kerangka "desain" dan, dengan proses desain iteratif yang baik, orang-orang harus membuat maket dari bingkai gambar, mendapatkan umpan balik dan meneruskannya kembali untuk meningkatkan desain bingkai gambar.

Sayangnya, saat ini, ada banyak perangkat lunak yang tersedia bagi pelanggan yang memungkinkan mereka untuk merancang maket yang tidak menggunakan apa pun yang langsung dapat digunakan oleh programmer. Seringkali, desain mereka dibangun oleh orang lain sehingga maket akan ditambah secara pribadi daripada dibawa kembali ke programer untuk dimasukkan ke dalam desain besar.

Saya pikir itu efektif apa yang Dave menjadi sedikit lebih sopan tentang menyebutkan :-)

Keith

Sederhananya:

Wireframes : kerangka / struktur

Maket : kulit / aspek visual

Seperti yang dicatat oleh beberapa orang, saat ini wireframes semakin penting sementara maket menyatu menjadi prototipe.

Harus menambahkan satu poin yang belum dibuat orang ... jawaban ini semua memberikan deskripsi teknis yang layak tetapi dalam lingkungan kerja perbedaannya tidak selalu begitu jelas. Beberapa perusahaan mungkin menambahkan fungsionalitas ke mockup dan beberapa mungkin menempatkan persyaratan desain tingkat tinggi dalam bingkai gambar. Saya akan berhati-hati tentang terlalu terkunci ke dalam jawaban tentang hal-hal apa "seharusnya" sebagai perusahaan pertama yang Anda pergi mungkin melakukan sesuatu yang bukan salah satu dari ini!

Sesuai pengetahuan saya layar mockup adalah representasi akhir dari UI, tampilan dan nuansa. Apa yang akan menjadi aliran normal dan apa yang akan menjadi aliran alternatif. Saya pikir itu bisa menjadi semacam prototipe web yang sebagian besar dibuat dalam HTML dan CSS. Kami membuat sebagian besar selama fase HLD untuk menunjukkan dan menerima dari klien.

Wireframes sebagai konsentrat membandingkan lebih seperti diagram alir di mana deskripsi umum ada. Jika tidak menampilkan beberapa deskripsi detail seperti apa yang terjadi pada mengklik acara, ubah acara dan hal serupa. Mereka sebagian besar dilakukan oleh SA / BA dan mock up dilakukan oleh desainer / pengembang. Terlebih lagi beberapa orang melampirkan spesifikasi teknis dengan gambar rangka seperti DB yang terlibat dengan UI tertentu.

Tetapi sekali lagi itu tergantung pada proyek ke proyek. Dalam kasus kami gambar rangka berdiri sumber kebenaran.

Inilah yang saya pahami sebagai perbedaan di dalamnya

Bingkai gambar bisa berupa mockup. Maket dan dianggap sebagai bingkai gambar. Sementara mereka kadang-kadang hal-hal yang terpisah (seperti yang orang lain katakan) mereka sama sering tidak hal-hal yang terpisah.

Pada suatu waktu, orang mungkin mempertimbangkan wireframes apa yang akan dibuat Visio. Dan Mockup akan menjadi apa yang dihasilkan PhotoShop.

Tetapi hari ini, dengan berbagai alat yang kami miliki, mereka seringkali merupakan dokumen aktual yang sama. Pada awalnya mereka mungkin mulai sebagai wireframe (tata letak dan fungsi murni) tetapi seiring waktu menjadi lebih dan lebih rinci ke titik di mana mereka dapat dianggap sebagai mockup. Dan jika menggunakan alat interaktif seperti Axure, pada titik tertentu orang dapat menganggapnya sebagai prototipe.

Jadi itu spektrum dengan banyak tumpang tindih.

Wireframes

Saat Anda bermaksud merancang aplikasi seluler atau aplikasi web, pertama-tama Anda perlu membuat sketsa bagaimana tampilan setiap halaman. Hanya berdasarkan konsep bisnis, seorang desainer dapat menentukan aliran aplikasi dan rancangan desain pertama, yang memiliki sketsa bagaimana tampilannya, tombol apa yang akan ada, bidang apa yang akan ada, dll. dimaksudkan untuk.

Maket

Maket adalah gambar yang lebih hidup. Mereka secara visual lebih menarik, memiliki warna, font, tema, tombol, logo, dll. Pada tahap ini label bidang, catatan, jenis font, menu navigasi, dll ditentukan dalam desain. Ini adalah representasi yang tepat tentang bagaimana tampilan aplikasi seluler atau halaman web akan terlihat.

Anda dapat menemukan perbandingan terperinci antara Wireframes dan Mockups dalam artikel informatif ini: Perbedaan Antara Wireframe, Mockup, dan Prototipe