it-swarm.asia

Pro / Kontra dari mockup PSD vs. mockup HTML

Saya telah membaca beberapa artikel ( yang ini dan yang ini ) baru-baru ini yang membuka mata saya terhadap mockup HTML yang bertentangan dengan mockup PSD biasa.

Dalam artikel itu mereka mengutip beberapa pro:

  • Perubahan jauh lebih cepat (termasuk perubahan warna, dan sedikit banyak font).
  • Saat Anda meletakkan halaman sebagai HTML, Anda menunjukkan kepada klien sesuatu yang lebih dekat dengan seperti apa produk akhir nantinya.
  • Mereka dapat melihat efek dari tata letak cair dengan mengubah ukuran jendela.

Cons:

  • Tidak semua desainer visual dapat membuat mockup dalam HTML. Itu harus menjadi tugas dua orang. Orang HTML dan orang Photoshop.

Apa yang kalian lihat sebagai pro/kontra untuk kedua pendekatan tersebut?

24
milesmeow

Jika Anda membuat situs web atau aplikasi, maket HTML jauh lebih unggul karena Anda merancang maket dalam format sedekat mungkin dengan produk akhir. Ini memungkinkan Anda untuk menetapkan harapan jauh lebih mudah, itu membatasi Anda pada apa yang mungkin terjadi pada produk akhir, dan memberikan fleksibilitas yang jauh lebih besar.

Konvensi ini secara bertahap dikenal sebagai "desain di browser". Merancang di browser menghindari metode air terjun pada dasarnya. Photoshop mockups memperkenalkan penghalang antara desainer visual dan desainer interaksi/UX: orang yang bekerja di Photoshop dapat berada jauh, berpikir sepenuhnya dalam hal kesetiaan visual, tanpa mempertimbangkan produk akhir dan kendala browser yang menyertainya. Setelah maket photoshop siap, ia akan "dilempar" ke tim UX untuk naik ke tahap berikutnya. Ini tidak mempromosikan proses berulang, berorientasi pada umpan balik.

Saya menulis posting blog beberapa bulan yang lalu tentang filosofi ini, yang telah kami gunakan dalam membangun alat prototyping kami. Berikut adalah beberapa artikel yang saya referensikan di sana yang mungkin berguna (termasuk yang oleh Megan Fisher Anda tautkan):

Desainer dan pengembang lain setuju dengannya:

  • 37signals ’ Mengapa kami melewatkan Photoshop menjelaskan prosesnya: Photoshop mockups tidak interaktif; mereka tidak memberi Anda perasaan untuk aliran aplikasi; mereka mendorong Anda untuk fokus pada detail terlalu dini.
  • Artikel Meagan Fisher 24ways.org Jadikan Mockup Anda di Markup berbicara lebih banyak tentang prinsip-prinsip Clarke dan menjelaskan bagaimana memulainya dengan struktur HTML memungkinkan desainer untuk dengan cepat beralih ke beberapa tata letak halaman.
  • Ini 12 tips untuk mendesain di browser di Design Shack menawarkan beberapa wawasan yang bagus juga.
18
Rahul

Ini masalah kesetiaan.

Tangkapannya adalah bahwa salah satu dokumen bisa lebih tinggi daripada yang lain tergantung pada apa yang Anda fokuskan.

Prototipe HTML adalah satu-satunya cara untuk benar-benar mengejek setiap interaksi dengan kompleksitas moderat sekalipun. Tidak ada cara untuk sepenuhnya mendokumentasikan desain interaksi dalam file PSD.

Sebaliknya, jika Anda berada di lingkungan di mana desain visual terus-menerus diubah/ditingkatkan/diulangi, PSD mungkin menjadi 'dokumen catatan' yang lebih baik untuk menangani elemen desain visual.

Pada akhirnya, saya tidak berpikir itu turun ke PSD vs. HTML. Anda membutuhkan keduanya dalam jumlah yang berbeda tergantung pada spesifikasi kebutuhan Anda berdasarkan proyek dan anggota tim.

13
DA01

Salah satu potensi kelemahan menggunakan mockup HTML adalah bahwa klien dapat berpikir bahwa Anda telah menyelesaikan aplikasi - bahkan jika Anda sudah memberi tahu mereka apa itu.

Serius, saya kenal orang - baik klien maupun manajer - yang melihat mockup menggunakan alat yang biasa Anda gunakan untuk membangun produk yang sebenarnya berpikir bahwa Anda telah melakukan sebagian besar pekerjaan dan terkejut ketika Anda mengatakan akan butuh 6 minggu (atau seberapa lama) untuk benar-benar melakukan pekerjaan.

Mockup dihapus satu langkah mungkin membantu menghilangkan kesalahpahaman ini.

Namun, setelah mengatakan bahwa mockup dinamis akan memungkinkan Anda dan klien untuk memiliki pemahaman yang lebih baik tentang cara kerja sistem dan bagaimana Anda menavigasi melalui aplikasi.

7
ChrisF

Bukan perancang visual tugas untuk menyiapkan maket interaktif, melainkan pekerjaan perancang UI/UX. Benar - seringkali mereka satu dan sama, terutama karena alasan anggaran, tetapi pekerjaan mereka sangat berbeda.

Pertanyaan Anda sebenarnya bisa diulangi sebagai Statis vs Dinamis mockups.

Menurut pendapat saya, mockup dinamis hampir selalu lebih baik daripada yang statis:

Alasan utama menurut saya adalah mereka dapat digunakan untuk pengujian kegunaan yang akurat - membayangkan Anda melakukan sesuatu sangat berbeda dari benar-benar melakukannya, menyadari waktu yang dibutuhkan, jumlah klik, pergerakan, dll. Dengan demikian ia menyediakan nuansa nyata dari aliran dalam sistem.

Namun, tidak ada yang tanpa harga - membuat mockup yang dinamis biasanya membutuhkan lebih banyak waktu. Selain itu, ini menciptakan harapan yang lebih tinggi dengan pelanggan - jika Anda menekan satu tombol dan melakukan sesuatu dalam sistem, Anda akan mengharapkan semua tombol melakukan hal yang sama (dan beberapa mungkin kurang relevan dengan skenario utama).

Dengan mockup statis mungkin juga lebih mudah untuk memandu pelanggan dan pengembang melalui kasus penggunaan - Anda cukup menampilkan layar satu per satu dalam urutan "benar", memastikan semua kasus penggunaan telah tercakup. seperti yang Anda maksudkan. Saat menggunakan yang dinamis mungkin memberi pengguna "terlalu banyak" kebebasan, membuat mereka kehilangan kasus penggunaan utama, dll.

BTW - Anda tidak harus menjadi seorang programmer untuk membuat maket html. Ada banyak alat (misalnya Axure, Balsamic, Flair Builder dan banyak lainnya) yang memungkinkan pembuatan maket seperti itu oleh non-programmer.

5
Dan Barak

Dengan semakin populernya desain responsif, bahkan lebih masuk akal untuk menggunakan model dinamis (mungkin HTML). Ketika mendesain tata letak kasar awal, saya menemukan diri saya terus mengubah ukuran peramban untuk melihat bagaimana tata letak bekerja di banyak lebar.

Mencoba menentukan desain responsif dengan gambar statis tidak mungkin, dan mengekspresikannya dengan banyak gambar statis memakan waktu dan terlalu rumit.

2
obelia

Jawaban Anekdotal

Saya baru-baru ini bekerja di sebuah situs di mana templat utama dirancang di Photoshop (yang saya sebut sebagai "PS"), tetapi bagian individual dari situs tersebut masih perlu dirancang. Saya sedang mengerjakan beberapa bagian dengan beberapa persyaratan UI non-standar dan saya harus memutuskan apakah saya akan mengejeknya di Photoshop atau hanya melakukannya dengan HTML/CSS. Saya memilih yang terakhir dan SANGAT berterima kasih karenanya.

Saya sebenarnya memulai dengan menandai konten halaman dan elemen navigasi dalam HTML. Setelah itu, saya mulai bermain dengan CSS dan melihat apa yang berhasil. Saya dapat dengan cepat membuat beberapa tata letak yang sama sekali berbeda dan benar-benar mengujinya di browser segera. Ada beberapa opsi yang saya tahu tidak akan berfungsi hampir secara instan dan dapat meninggalkan mereka dengan cepat (di mana saya biasanya menyelesaikan desain di PS). Saya juga bisa menambahkan elemen interaktif (tampilkan/sembunyikan/dll) yang tidak mungkin dilakukan di Photoshop.

Ada beberapa hal yang berjalan cara lebih cepat dalam HTML vs PS, misalnya tabel. Dibutuhkan upaya nyata untuk mendesain tabel secara visual dalam PS dengan konten teks variabel di dalam sel dan header. Ini sangat cepat dalam HTML dan Anda benar-benar melihat seperti apa bentuknya.

Tentu saja ini hanya membuat Anda sejauh ini karena Anda tidak dapat melakukan semuanya dengan CSS. Saya kadang-kadang akan kembali ke Photoshop dan membuat gambar ini dan itu untuk bagian tertentu, tetapi sebagian besar saya terkejut melihat seberapa banyak yang bisa saya lakukan dengan CSS saja.

Saya ambil

Saya masih akan mengambil ini berdasarkan kasus per kasus. Tapi saya pasti akan condong ke arah mockup HTML di masa depan.

2
jessegavin

Jika saya benar, saya percaya VB pada awalnya ditulis sebagai cara cepat mengetuk beberapa maket ... Dengan itu dalam pikiran, saya akan mengatakan bahwa jawaban "benar" mungkin adalah untuk pergi jalan mockup HTML.

Namun, saya sedang dalam proses membuat maket untuk produk baru saat saya mengetik, dan terus terang, saya tidak percaya upaya yang terlibat dalam membuat maket html yang terlihat sebagus yang mereka lakukan dalam format PSD, bermanfaat. Mendapatkan sedikit teks, atau gambar, atau lain-lain, untuk muncul tepat di tempat yang Anda inginkan, dengan desain tata letak yang rumit akan membutuhkan waktu lebih lama bagi pengembang web daripada artis photoshop dengan tingkat keterampilan yang sama.

Juga, jika Anda akan melakukan lebih dari desain teks dan dasar, Anda mungkin akan menggunakan Photoshop (atau paket grafis serupa) untuk melakukan pekerjaan desain itu - mengapa repot-repot memperumit masalah ini?

Memang, jika ada pembenaran nyata untuk menggunakan maket interaktif (misalnya, kelompok pengguna besar untuk menunjukkan bagaimana Anda berpikir beberapa tampilan interaktif tertentu akan bekerja), maka upaya ekstra sepadan.

Tetapi jika Anda hanya menunjukkan kepada klien bagaimana menurut Anda beberapa jendela aplikasi seharusnya terlihat, saya kira tidak ada justifikasi untuk upaya ekstra itu?

1
Sk93