Mockups: Pengodean vs Menggambar?

Ini bukan tentang desain web tetapi tentang desain antarmuka secara umum. Apakah lebih baik untuk memberi kode Antarmuka Maket atau "menggambar" mereka dalam program grafis, seperti GIMP, Photoshop, dll?

Tanyakan pada diri Anda pertanyaan-pertanyaan ini:

• Berapa banyak tata letak / opsi UI yang dapat Anda jelajahi dalam 30 menit dengan coding? Berapa banyak yang bisa Anda jelajahi dengan membuat sketsa?

• Seberapa sering Anda mendapatkan desain UI tepat pada percobaan pertama? Jika tidak terlalu sering, seberapa cepat / mudah mengubah sketsa versus maket kode?

• Bisakah Anda secara instan mengidentifikasi warna hanya dengan melihat kode hex / rgb (bukan hanya dugaan kasar, tetapi warna / warna yang tepat)? Ketika Anda menggambarkan warna dalam pikiran Anda, dapatkah Anda segera menerjemahkannya ke hex? Seberapa cepat Anda bisa memilih skema warna dengan mengetikkan kode hex dibandingkan menggunakan color picker nyata?

Fakta bahwa Anda mengajukan pertanyaan ini memberi tahu saya bahwa Anda kemungkinan besar adalah seorang programmer, bukan seorang desainer, melalui pelatihan. Jika Anda seorang desainer, maka akan sama absurdnya dengan mengembangkan aplikasi tanpa merencanakan struktur kelas, desain basis data, arsitektur aplikasi, dll. Dan langsung beralih ke pengkodean — dan jika Anda adalah pengembang yang berpengalaman, maka Anda tahu masalah apa yang menyebabkan pengembangan bottom-up semacam ini.

Demikian pula, jika Anda langsung melompat ke kode tanpa benar-benar merancang UI Anda terlebih dahulu, maka hasilnya tidak akan cantik, jika hanya karena tidak praktis untuk menyempurnakan desain yang baik dengan pengkodean secara membabi buta.

Saya akan memilih "menggambar" terlebih dahulu. Dalam GUI, tata letak / presentasi yang tepat adalah kuncinya dan membutuhkan sarana visual untuk dirancang. Merancang GUI secara visual memungkinkan Anda dengan cepat mengubah desain Anda tanpa harus "membayangkan" setiap perubahan, "menerjemahkannya ke kode" dan akhirnya mengujinya. Cara lain juga mungkin, tetapi jarang lebih baik (misalnya proyek sangat kecil, seperti hanya beberapa tombol dan Anda terbiasa dan terbiasa bekerja di tingkat "kode"; selama desain beberapa pola mungkin muncul, itu bisa saja digunakan kembali dengan sedikit modifikasi).

Jika Anda mendesain untuk widget alat tertentu, Anda juga dapat menggunakan beberapa aplikasi "perancang GUI" jika tersedia. Ini akan mempercepat lebih banyak proses desain GUI, karena keduanya menunjukkan persis bagaimana desain GUI akan terlihat seperti dalam menjalankan program dan dapat mengekspor siap untuk menggunakan deskripsi GUI di tingkat presentasi.

Untuk desain UI saya memiliki tiga tahap dengan tujuan yang berbeda:

1. Membuat sketsa. Pertama, Anda ingin mendapatkan ide dasar dari elemen apa yang akan ada dan bagaimana mereka akan cocok bersama. Setiap detail halus atau perfeksionisme estetika pada tahap ini adalah gangguan. Saya menggunakan papan tulis dan pulpen yang bisa dihapus sehingga tidak mungkin teralihkan oleh terlalu banyak detail dan mudah untuk mencoret-coret banyak ide yang berbeda dan mulai lagi kapan saja. Saya pernah mendengar tentang orang yang hanya membuat sketsa pada kertas post-it kecil atau hanya menggunakan tangan mereka (misalnya tangan kiri jika Anda kidal) untuk memaksa diri mereka sendiri untuk tidak memperhatikan estetika dan fokus 100% pada ide dan fungsi. (gambar bukan milikku, dari Frank Prendegast )

2. (2!) Mensimulasikan.Kedua, Anda ingin melihat ke bawah dan mendapatkan umpan balik, mencari tahu sebanyak mungkin tentang intuisi orang-orang dan tanggapan tanpa kompromi sebelum Anda memulai pekerjaan implementasi yang memakan waktu. Ini harus dalam apa pun yang Anda kerjakan paling efisien karena jika Anda melakukannya dengan benar, Anda harus sering 'kembali ke papan gambar', mencari kritik dan bertujuan mengidentifikasi sebanyak mungkin masalah tak terduga sedini mungkin. Jika Anda adalah mesin pengkodean gila dan ini adalah pekerjaan yang paling nyaman bagi Anda, maka pengkodean baik-baik saja, tetapi kebanyakan orang akan bekerja lebih cepat dalam hal-hal seperti Fireworks, Photoshop, perangkat lunak wireframing khusus, atau mungkin pembangun antarmuka berbasis-UI seperti Flash Catalyst (baik jika produk akhir bukan Flash, tujuannya adalah untuk mendapatkan umpan balik yang baik sebelum Anda memulai implementasi).

3. (3!) Pelaksana. Akhirnya, Anda menerapkan hal itu dan bertujuan melakukannya dengan cara yang memungkinkan Anda mendapatkan lebih banyak umpan balik lebih awal dan sering.

Ketiga bagian dari siklus proyek ini memiliki tujuan yang berbeda, jadi jika ini adalah proyek besar, masuk akal untuk menggunakan alat yang paling cocok untuk pekerjaan di setiap tahap.

Pertanyaan ini agak kabur dan, karena itu, seperti jawabannya.

Selain itu, proyek akan sangat bervariasi, seperti halnya tim.

Konon, tidak ada yang 'terbaik'. Ini tentang menggunakan semua alat dalam alur kerja yang paling masuk akal untuk Anda dan tim Anda.

Secara umum, saya akan mengatakan ini adalah jenis alur kerja yang harus Anda tuju:

1. Sketsa. Pensil + kertas. Papan tulis. Pengulangan. Bekerjalah dengan sebanyak mungkin anggota tim.
2. mock-up rendah fi. Bisa jadi PSD, bisa berupa visio. Bisa jadi kertas. Pengguna menguji ini.
3. Dapatkan untuk membuat prototipe. Di sinilah Anda ingin mulai melakukan sebanyak yang Anda bisa dalam kode kerja. Langsung ke Photoshop yang Anda butuhkan dan dapatkan barang-barang itu ke dalam kode secepat mungkin. Lanjutkan pengujian / iterasi pengguna.

Apa yang berhasil bagi saya adalah membuat maket menggunakan program yang menekankan tidak membuat tata letak pixel-sempurna. Bagi saya itu adalah Balsamiq Mockups, yang dapat Anda lihat di http://www.balsamiq.com/products/mockups