it-swarm.asia

Menggunakan warna dalam gambar rangka ... apakah ini "tidak, tidak"?

Baru-baru ini, sebuah debat internal dimulai di tempat kerja mengenai penggunaan warna dalam gambar rangka. Seorang desainer junior telah menyelesaikan satu set gambar rangka yang bagus dan diberitahu pada akhirnya untuk mengubah semuanya menjadi abu-abu! Mereka diberitahu bahwa warna tidak boleh dalam wireframes.

Saya dapat melihat beberapa alasan di mana mendesain dalam skala abu-abu dapat membantu:

  • untuk aksesibilitas (jadi Anda tidak dipaksa bergantung pada warna untuk diferensiasi)
  • jangan salah mengomunikasikan desain visual dalam gambar rangka (kadang-kadang klien dapat mengaitkan pilihan warna menjadi keputusan desain visual sebagai lawan cara berkomunikasi perbedaan visual)

Saya sebenarnya menggunakan palet ikon berwarna dan akan menggunakan warna untuk membantu mengomunikasikan perbedaan visual. Terkadang hanya ada begitu banyak yang dapat Anda lakukan dengan menggunakan berbagai warna abu-abu atau menggunakan pola.

Apa praktik standar di luar sana? Saya telah melihat gambar rangka dengan dan tanpa warna.

22
milesmeow

Kedengarannya seperti kolega Anda tersesat dalam asumsi tanpa memikirkan tujuan dari gambar rangka. Mari kita mulai dengan definisi longgar yang disediakan oleh Wikipedia :

Wireframe situs web (juga "bingkai web wire", "wireframe web", "wireframing web") adalah panduan visual dasar yang digunakan dalam desain antarmuka untuk menyarankan struktur situs web dan hubungan antara halaman-halamannya. Sebuah wireframe halaman web adalah ilustrasi serupa dari tata letak elemen-elemen mendasar dalam antarmuka. Biasanya, wireframes selesai sebelum karya seni apa pun dikembangkan.

Seperti kata atau istilah apa pun, penting untuk mempertimbangkan apa artinya sebenarnya. A wire-frame model adalah istilah yang digunakan dalam pemodelan 3D ketika berbicara tentang representasi struktur fisik model poligon, yang diterjemahkan dengan menunjukkan titik penghubung antar simpul. Apa gunanya model kerangka kawat? Ini untuk menunjukkan "nyali" struktur sehingga dapat lebih memahami komposisinya.

Ketika dibawa ke situs web wireframing ketika Wikipedia membahasnya, kita harus mempertimbangkan bagaimana makna itu berlaku, dan definisi Wikipedia memahaminya: "panduan visual dasar yang digunakan untuk menyarankan struktur situs web dan hubungan antar halamannya".

Seperti yang Anda ketahui, tidak ada penyebutan warna atau bagaimana tampilan panduan visual itu. Yang penting adalah menyarankan bagaimana struktur situs web bekerja. Selama itu mencapai itu, itu adalah bingkai gambar yang efektif. Jadi, misalnya, ini semua gambar rangka "valid":

  • sketsa di atas serbet
  • sketsa dalam Draft 37signals 'atau aplikasi lain di iPad
  • gambar rangka yang tampak samar dibuat menggunakan alat seperti Balsamiq Mockups
  • gambar rangka yang tampak lebih kencang dibuat menggunakan sesuatu seperti Axure atau Illustrator
  • desain ringan situs yang dibuat di Photoshop, di mana struktur halaman dibuat jelas sementara termasuk elemen desain yang relevan
  • Desain HTML yang dapat diekspor dalam Fireworks yang memungkinkan Anda untuk melihat elemen apa yang terdiri dari halaman
  • wireframe HTML/CSS sepenuhnya interaktif

Itu hanya masalah kesetiaan dan detail. Mungkin Anda harus memperjelas kesetiaan seperti apa yang diharapkan dalam hasil dan membimbing desainer Anda di sepanjang jalan itu. Tapi itu bukan masalah "haruskah warna digunakan dalam bingkai gambar" - jika warna membantu mengomunikasikan struktur situs, maka warna mutlak harus digunakan dalam bingkai gambar!

18
Rahul

Sepakat.

Biasanya, warna membawa nuansa emosional/budaya ke diskusi yang "seharusnya" menjadi tentang struktur dasar, tata letak, dan IA (arsitektur informasi). Meskipun hal itu dapat diperdebatkan, kami dapat menyetujui bahwa penggunaan Warna akan, paling tidak, menyampaikan informasi LEBIH BANYAK kepada rendering.

Inti dari kerangka gambar adalah untuk HANYA berkomunikasi apa yang perlu dan tidak ada yang lain.

Dalam pengalaman saya dalam praktik, orang menggunakan istilah "bingkai gambar" untuk mengartikan setiap artefak yang dicantumkan Rahul.

7
CSSian

Dari pengalaman saya, itu terutama alasan kedua Anda mendaftar:

  • Kadang-kadang bahkan pemangku kepentingan internal menjadi bingung dengan gambar rangka yang terlihat terlalu "nyata". Maket Axure saya memiliki kesetiaan yang jauh lebih tinggi daripada maket PowerPoint lainnya yang digunakan dalam organisasi saya, jadi saya terkadang mendapatkan komentar yang berkaitan dengan desain grafis, seperti tombol yang terlihat berbeda atau panel yang tidak menyesuaikan ketinggiannya sesuai dengan kontennya, dll.
  • Seorang teman saya membuat bingkai gambar hi-fi sedemikian rupa sehingga pelanggan benar-benar menyukainya sehingga mereka segera mengimplementasikannya :)
6
Dan Barak

Saya telah beralih dari skala abu-abu ke warna penuh dan kembali lagi. Saya menemukan warna penuh cenderung menjadi gangguan nyata untuk diskusi yang perlu terjadi.

Di samping catatan, saya kebetulan berada di proyek di mana tidak ada desainer grafis antara saya dan pengembang, dan jadi wireframe "realistis" atau "benar-benar cantik" menjalankan bahaya diimplementasikan apa adanya. Ini cukup banyak menjamin bencana karena saya bukan desainer grafis ...

5
gef05

Salah satu kelemahan warna pada wireframe adalah bahwa — bersama (apa yang dianggap) kesetiaan kontrol yang lebih tinggi dan semacamnya — cepat atau lambat salah satu pengembang Anda akan menganggap mereka perlu membuat tampilan GUI seperti wireframe.

Aku tahu. Aku tahu. Ini menunjuk pada kesalahpahaman besar tentang tujuan kerangka gambar.

Tetapi itu benar-benar terjadi.

4
JeromeR

Saya cenderung mencadangkan penggunaan warna untuk komponen anotasi. Saya memastikan potongan-potongan teks yang dimaksudkan untuk berperilaku seperti hyperlink berwarna biru dan bergaris bawah, misalnya, meskipun desain situs akhir mungkin memiliki cerita warna yang sama sekali berbeda. Potongan teks yang tidak statis dan akan bervariasi per input pengguna mendapatkan warna lain. Jika ada berbagai kotak dan garis yang diragukan atau saya tahu perlu lebih banyak pemolesan maka saya akan mengatur mereka untuk memiliki garis merah. Blok teks yang merupakan anotasi yang dijatuhkan tepat di atas rangka gambar mendapatkan latar belakang kuning pucat.

Sangat menakutkan untuk dilihat secara visual, tetapi berfungsi untuk berkomunikasi. Tidak mewakili.

4
Erics

Secara pribadi, saya pikir tidak apa-apa untuk menggunakan warna jika itu memberikan semacam fungsi.

Saya cenderung menggunakan warna pada elemen interaktif wireframe saya, seperti tautan dan tombol berwarna biru. Ini membantu untuk secara jelas menyoroti elemen-elemen interaktif ketika mempresentasikan kepada klien.

Saya juga menggunakan hijau, oranye dan merah untuk menunjukkan status peringatan yang berbeda dalam daftar item. Saya menemukan ini membantu berkomunikasi fungsi ke klien lebih cepat, yang kurang jelas dalam versi sebelumnya, murni skala abu-abu.

Namun, saya tidak akan menggunakan warna sebagai elemen dekoratif, setidaknya tidak pada gambar rangka awal atau maket. Seperti beberapa orang lain merespons, klien kadang-kadang bisa terperangkap dalam bagaimana sesuatu 'terlihat', vs cara kerjanya. Ini bisa memperlambat proses sedikit.

2
Paj