Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Penggunaan Gambar dan Grafik yang Dijamin Efektif dalam Desain UX, Yuk Simak!

- Advertisement -
- Advertisement -
- Advertisement -

Perumpamaan memungkinkan Anda melakukan lebih banyak dengan lebih sedikit. Mereka mengatakan gambar bernilai ribuan kata , bukan? Sekarang, lebih dari sebelumnya, citra adalah yang membedakan suatu produk dari para pesaingnya, memperkuat pengakuan merek dan pengalaman pengguna. Penggunaan gambar dan grafik adalah alat visual yang kuat yang mendahului era digital dan ada alasan selalu seperti itu.

Ketika desainer tahu cara bekerja dengan citra, mereka lebih mampu memanipulasi reaksi emosional audiens. Desain produk dapat naik atau turun pada kualitas gambar pengalaman pengguna mereka — itulah sebabnya sangat penting untuk memperbaikinya.

Rian Dutra |

Peran citra dalam desain

Kesan pertama penting, bahkan dalam desain web. Menurut penelitian , kami hanya memiliki 50 milidetik untuk membuat kesan yang menentukan apakah seseorang akan melanjutkan atau pergi. Tampilan dan nuansa situs web memiliki semua yang berkaitan dengan identitas visual suatu produk, tetapi identitas visual dan pengalaman pengguna berjalan seiring. Tanpa satu, seluruh pengalaman menderita.

Itulah mengapa penting untuk mengatur tahapan pencitraan di awal proses desain Anda. Saat menggambar, Anda dapat mewakili citra dengan kotak dan garis. Ini akan mengatur panggung untuk grafik masa depan, sementara pertama-tama memberi fokus pada kegunaan pengalaman Anda. Pada akhirnya, Anda akan ingin menguji keefektifan gambar yang digunakan untuk memastikan makna yang ingin Anda terjemahkan kepada pengguna Anda.

Gambar rangka situs web berisi placeholder untuk berbagai jenis gambar dan grafik yang akan dimasukkan dalam desain akhir.
Kredit gambar JT Grauke .

Saat memutuskan kapan dan di mana menggunakan citra dalam desain Anda, tanyakan pada diri sendiri ini:

Apakah pencitraan mengilustrasikan poin atau meningkatkan cerita yang Anda coba sampaikan?

Bayangkan Anda sedang mendesain blog web untuk resep dengan teknik yang sulit dijelaskan. Daripada menulis blok teks yang panjang untuk menjelaskan suatu teknik (yang dapat ditafsirkan berbeda oleh pembaca Anda), Anda bisa memasukkan video atau grafik gerak yang menunjukkan teknik tersebut dalam tindakan . Di sinilah isyarat visual dalam bentuk citra bisa efektif dalam menciptakan kejelasan.

Jenis-jenis Citra

Citra di UX terutama mengacu pada penggunaan foto, ilustrasi, animasi, dan video. Paling umum, citra digunakan untuk:

  • Spanduk pahlawan
  • Foto Produk
  • Gambar kecil
  • Avatar
  • Ikon
  • Email Pemasaran

Memasukkan citra ke dalam pekerjaan Anda

Sulit untuk memutuskan apakah akan memasukkan foto atau ilustrasi. Untungnya, Anda dapat menggunakan foto dan ilustrasi dengan sukses dalam desain Anda. Foto paling efektif dalam menunjukkan sesuatu yang spesifik, sedangkan ilustrasi dapat mewakili sesuatu yang konseptual . Namun seringkali, pilihan Anda bergantung pada anggaran dan waktu.

Kapan menggunakan foto atau video

  • Untuk menampilkan skenario tertentu . Foto sangat bagus untuk digunakan ketika Anda memiliki visi dalam pikiran. Anda dapat menugaskan seorang fotografer untuk melaksanakan visi itu atau menggunakan fungsi pencarian yang kuat di situs web stok foto untuk mencoba menemukan yang tepat.
  • Untuk memamerkan produk. Jika Anda merancang situs web atau aplikasi yang berfokus pada produk tertentu, Anda pasti ingin menampilkan gambar produk itu. Anda dapat menggunakan video atau menghentikan gerakan untuk menampilkan bagaimana produk digunakan atau gambar diam dari berbagai sudut.
  • Untuk faktor wow. Ketika digunakan dengan tepat, gambar dapat memicu respons emosional yang kuat yang akan diingat pengguna.
Gambar produk untuk sepatu Allbirds menggambarkan seorang pria berjalan di atas awan.
Gambar situs web untuk sepatu berkelanjutan. Kredit gambar AllBirds .

Kapan menggunakan ilustrasi atau ilustrasi animasi

  • Untuk menyampaikan sesuatu yang abstrak . Saat merancang sesuatu yang futuristik, misalnya, foto yang tepat mungkin tidak ada. Sebuah ilustrasi lebih efektif dalam menyampaikan sesuatu yang abstrak atau konseptual, daripada kenyataan.
  • Untuk menambah kepribadian. Dengan ilustrasi vektor, Anda dapat bermain-main dengan warna, ukuran, dan gaya ilustrasi agar sesuai dengan gaya Anda dan menambahkan suar. Menambahkan kepribadian pada desain Anda akan memperkuat hubungan pengguna dengan merek Anda dan membuat produk Anda berkesan.
 Ilustrasi untuk Headspace, aplikasi mindfulness dan meditasi.
Ilustrasi untuk Headspace , aplikasi mindfulness dan meditasi.
  • Untuk memvisualisasikan data . Manusia merespons lebih cepat pada data visual daripada jenis data lainnya . Visualisasi data yang disampaikan melalui ilustrasi adalah cara terbaik untuk memadukan identitas visual Anda dengan data yang dapat dicerna pengguna Anda.
  • Untuk memandu pengguna atau menceritakan sebuah kisah . Adegan dan karakter ilustrasi dapat efektif dalam membawa pengguna dalam perjalanan yang menarik dan informatif. Baik digunakan dalam orientasi, atau menambahkan makna pada ikon, ilustrasi dapat membantu memandu pengguna melalui pengalaman.
Mode cahaya dan gelap beralih animasi yang menggabungkan grafik scape siang dan malam ke dalam tombol.
Mode terang dan gelap beralih animasi. Kredit GIF Tiantian Xu .

Praktik terbaik untuk merancang dengan citra

Saat memutuskan cara menggunakan citra dalam pekerjaan Anda, penting untuk mempertimbangkan hal-hal seperti konteks, kualitas, dan aksesibilitas. Berikut adalah beberapa praktik terbaik yang harus diikuti:

Pertimbangkan audiens target Anda

Menemukan citra yang relevan dan autentik berasal dari siapa audiens target Anda. Sebagai desainer UX, kami tahu banyak tentang berempati dengan pengguna kami. Pertama, pikirkan tentang konteks gambar: Untuk siapa produk Anda? Di mana foto ini akan dikonsumsi? Di perangkat apa? Dalam orientasi layar apa? Anda ingin memastikan bahwa foto itu relevan dan membangkitkan perasaan yang tepat. Sama seperti Anda akan menguji elemen apa pun dalam desain Anda, Anda dapat menguji citra Anda dengan pengguna Anda untuk memastikan Anda melakukannya dengan benar.

Ikuti panduan merek Anda

Dalam hampir semua yang kita lakukan, konsistensi mengarah pada kesuksesan. Saat memutuskan citra apa yang paling cocok untuk desain Anda, lihat pedoman merek apa pun yang Anda miliki. Jika Anda belum mendefinisikan apa pun, temukan gaya yang mencerminkan audiens Anda dan buat pedoman sederhana yang menampilkan “Lakukan” dan “Larangan.” Saat menggunakan citra stok, Anda ingin memastikan bahwa Anda akan dapat sumber gaya yang sama untuk penggunaan gambar di masa depan. Di sinilah menemukan koleksi gambar dapat memastikan konsistensi. Jangan takut untuk menggunakan kembali & mendaur ulang! Selama Anda memiliki hak yang sesuai, Anda dapat menggunakan ilustrasi untuk gambar pahlawan, avatar, atau ikon dan sebaliknya.

Buku Merek Vitamin Water oleh Collins .

Dapatkan hak yang tepat

Saat menggunakan pencitraan stok atau menugaskan seorang artis, sangat penting untuk memastikan Anda mendapatkan lisensi yang tepat untuk gambar tersebut. Banyak situs web pencitraan stok seperti Unsplash atau saham Adobe memiliki lisensi bebas-royalti dengan atribusi tidak diperlukan. Untuk menghemat waktu di masa depan dan mungkin beberapa konsekuensi yang tidak diinginkan, pantau dari mana Anda mendapatkan gambar dan lisensi masing-masing. Dan ingat, Anda tidak akan bisa menjual gambar-gambar itu, kecuali Anda memiliki hak cipta.

Pastikan itu dapat diakses

Bahkan dengan alat aksesibilitas canggih seperti rasio kontras dan pedoman dari Inisiatif Aksesibilitas Web , hanya sebagian kecil situs web yang dapat diakses. Ini merugikan bagi yang tunanetra dan juga peluang yang hilang untuk optimasi mesin pencari (SEO). Saat menggunakan citra dalam desain Anda, Anda dapat menambahkan apa yang disebut teks alternatif atau “teks-alt,” yang merupakan deskripsi citra yang dapat dibaca oleh pembaca layar. Bekerja dengan pengembang Anda untuk menambahkan “teks-alt” ke citra Anda ketika:

  • Gambar lebih dari sekadar dekoratif
  • Gambar tidak memiliki teks atau konten di sekitar grafik
  • Grafik memiliki fungsi, seperti ikon

Semakin banyak, grafik SVG menjadi format file pilihan, dan untuk alasan yang baik. Mereka mengurangi waktu pemuatan halaman dan dapat mengukur secara tak terbatas tanpa kehilangan kualitas, memungkinkan pengguna untuk mencubit dan memperbesar agar sesuai dengan kebutuhan mereka.

Uji citra Anda pada berbagai ukuran layar

Saat ini, gambar berkualitas adalah harapan, bukan yang baik untuk dimiliki . Saat mencari gambar resolusi tinggi, pastikan Anda mempertimbangkan ukuran layar, bahkan jika Anda mendesain terutama untuk desktop. Hindari penskalaan foto yang lebih besar dari 100% dan cari gambar dengan titik fokus , sehingga dapat dipangkas tanpa kehilangan konteks. Aturan praktisnya adalah bahwa Jika sulit untuk menafsirkan pada layar kecil, itu mungkin bukan foto terbaik. Seperti biasa, uji gambar Anda dalam berbagai ukuran layar dan rasio aspek.

Titik fokus ikonik dilapis pada gambar dengan variasi yang menunjukkan bagaimana gambar memotong rasio yang berbeda.
Kredit gambar Material.io .

Tempat sumber pencitraan

Jika Anda memiliki visi dalam pikiran atau sedang merancang untuk klien dengan anggaran yang tersedia, metode terbaik untuk sumber pencitraan seringkali dengan menugaskan seorang artis. Jika Anda memiliki anggaran yang ketat atau kendala waktu, untungnya ada jutaan gambar, video, dan ilustrasi yang tersedia online untuk Anda gunakan. Mengisi desain Anda dengan stok foto dapat dianggap klise dan tidak asli sehingga penting untuk menggunakannya dengan hati-hati dan selalu merujuk pada pedoman merek Anda.

Foto & Video

  • Adobe Stock : Jelajahi gambar & video beresolusi tinggi, bebas royalti dari kontributor di seluruh dunia. Coba stok Adobe secara gratis selama sebulan dan dapatkan 10 aset standar .
  • Unsplash : Gambar beresolusi tinggi gratis untuk penggunaan komersial dan pribadi.
  • Pexels : Temukan koleksi gambar dan video bebas hak cipta yang dikuratori.
  • Pixaby : Lebih dari 1,7 juta stok gambar dan video tersedia untuk diunduh gratis.

Ilustrasi vektor

  • Humaaans : perpustakaan ilustrasi campuran dan cocok oleh Pablo Stanley , gratis untuk penggunaan komersial dan pribadi. 
  • Black Illustrations : serangkaian desain digital yang dibuat oleh 5Four menampilkan orang-orang berwarna, yang sering kurang terwakili dalam ilustrasi digital.
  • Undraw:perpustakaan open source oleh Katerina Limpitsouni dari ilustrasi gratis untuk setiap ide yang dapat Anda bayangkan dan buat. Unduh plugin Undraw Adobe XD . 
  • Adobe Stock: Jelajahi grafik vektor termasuk ikon, logo, infografis, dan latar belakang. 10 lisensi gratis dengan Adobe Creative Cloud sign up Coba stok Adobe gratis selama sebulan dan dapatkan 10 aset standar .

Kesimpulannya

Menemukan citra yang tepat untuk digunakan dapat membuat atau merusak desain Anda. Ketika digunakan dengan tepat, citra dapat mengarahkan lalu lintas ke situs web, meningkatkan pengalaman pengguna, memperkuat identitas merek, dan membangun ikatan yang loyal dengan pengguna. Tetapi tanpa pertimbangan hati-hati, itu dapat mengirim pesan yang salah dan memiliki efek buruk yang tahan lama. Seperti setiap elemen dalam desain Anda, penting untuk membuat keputusan secara sadar tentang kapan dan di mana menggabungkan citra, menguji efektivitasnya di sepanjang jalan. Jangan pernah menambahkan citra hanya karena itu cantik. Tanyakan kepada diri Anda pertanyaan-pertanyaan seperti, “Apakah cerita akan terus hidup tanpanya?” dan “Apakah ini mencerminkan merek atau bisnis saya secara otentik?” Ini akan membantu Anda menghindari visual berlebihan dan sebaliknya, memikat pengguna Anda dengan cara yang benar.

sumber: xd.adobe.com

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles