Grafik Produk 6 Teknik Membuat Gambar Lebih Informatif

Desainer web telah menjadi sangat licik dengan teknik pemasaran. Memikat konten halaman selalu bagus, tetapi ketika ingin menarik perhatian pengunjung, gambar adalah bentuk media yang paling populer. Mereka tidak memerlukan suara seperti video demo dan mereka dapat dengan cepat menyampaikan informasi penting dalam hitungan detik. Ini mungkin tampak mudah, tetapi ada beberapa teknik penting untuk membangun gambar informatif di situs web.

Ini termasuk label fitur, screenshot close-up, perbandingan harga, dan detail menit lainnya. Desainer web dapat menggunakan grafik informasi untuk memodelkan aplikasi, perangkat lunak, permainan video, atau banyak produk baru lainnya! Meskipun paling umum Anda melihat teknik ini digunakan dalam berbagai bidang teknologi.

Lihatlah ide-ide di bawah ini di mana kami menawarkan tidak hanya tips tetapi contoh nyata dari produk yang indah yang penuh sesak dengan info hebat.

1. Perluas Konten Anda

Gambar informatif tidak boleh digunakan sebagai pengganti konten halaman web yang bagus. Sebagai gantinya gunakan citra untuk memperluas poin kunci Anda dan ilustrasikan dengan jelas untuk pengunjung Anda. Salah satu cara terbaik untuk melakukan ini adalah membangun demo kecil untuk menyoroti area-area penting tutorial. Dengan beberapa grafik dan tangkapan layar yang informatif, jauh lebih mudah untuk menjaga minat pembaca Anda bergerak di setiap langkah.

Ketika Anda mencoba mendemonstrasikan tutorial perangkat lunak (seperti tutorial Photoshop), mungkin sulit untuk melakukannya menyampaikan pesan ke dalam teks tertulis. Pengunjung akan mendarat di artikel Anda dan segera mulai secara sadar menilai materi dalam sepersekian detik. Web Designer Wall memiliki tutorial yang luar biasa dalam membangun gambar bulat CSS3 disertai dengan grafik yang praktis. Ini termasuk beberapa label dan foto efek close-up.

Pada halaman artikel asli gambar ini menambahkan gambar yang jauh lebih jelas ke kepala Anda ke arah apa yang akan Anda buat. Penulis telah menambahkan tautan demo kecil, tetapi mengapa tidak menyertakan beberapa gambar demo juga? Anda akan lebih cenderung menarik perhatian dengan foto demo yang diberi label dengan benar.

Mencoba untuk hindari menambahkan gambar hanya untuk konten media di pos Anda. Jika Anda dapat menjelaskan metode atau alasan Anda tanpa gambar, mulailah dari sini dulu. Hanya setelah melihat kembali salinan web Anda, Anda dapat mempertimbangkan untuk mengulangi beberapa poin dalam grafik gambar terperinci. Secara khusus Anda mungkin menemukan a tutorial membutuhkan lebih banyak isyarat visual seiring meningkatnya kompleksitas. Dua contoh dapat termasuk membangun database situs web atau dataset tabel.

2. Sorot Fitur Penting

Karena setiap perangkat lunak / teknologi akan memiliki banyak fitur sehingga hampir tidak mungkin untuk menjelaskan setiap bit. Bukan hanya ini, tetapi sangat tidak mungkin pengunjung Anda akan tertarik membaca 20+ label pada grafik informasi Anda. Tetap berpegang pada fitur yang paling menarik dan gunakan label untuk menjelaskan lebih mendalam.

Saat menulis salinan web untuk konten label Anda hindari bahasa yang membosankan bila memungkinkan. Jika pengunjung melihat versi terbaru dari aplikasi Anda, mereka mungkin tidak terlalu peduli dengan perubahan skema warna. Bagaimana hal itu akan memengaruhi alur kerja harian mereka? Mungkin sebaliknya sorot apa yang bermanfaat bagi mereka, seperti panel antarmuka baru atau konektivitas multi-pengguna. Ini seharusnya secara umum fitur abstrak yang tidak bisa Anda lihat hanya dengan “mencari” pada produk.

Memiliki label seperti itu untuk menjelaskan fitur-fitur ini secara langsung akan memberikan respons paling berlimpah. Pengunjung akan merasa diperlakukan sebagai pembeli yang cerdas dan dewasa, yang mampu membuat keputusan sendiri. Jika mereka benar-benar menyukai fitur Anda, ini memberikan dorongan lebih besar untuk membeli perangkat lunak atau produk Anda.

Di bawah ini adalah contoh dari halaman pembaruan Mozilla Firefox.

Anda dapat melihat desainer telah menggunakan garis lengkung putus-putus untuk menunjukkan label dan fitur baru. Ini sebenarnya adalah gambar latar yang diposisikan benar-benar di dalam wadah div. Anehnya semua teks label juga ditulis di dalam tag HTML (tidak hanya satu gambar besar).

Saya merasa metode ini tidak hanya berguna untuk bot perayap Google, tetapi juga pengguna seluler yang biasanya tidak bisa merasakan halaman web lengkap.

Juga perhatikan bagaimana fitur Panorama ke kiri menawarkan yang kecil “Belajarlah lagi” link. Ini mungkin praktik terbaik yang dapat Anda lakukan ketika membuat grafik informasi! Jika Anda memiliki halaman alternatif atau jangkar di halaman yang sama, pengunjung Anda dapat mengklik tautan ini untuk memahami lebih lanjut tentang fitur yang rumit.

Ingatlah bahwa grafik informatif digunakan untuk dengan mudah menampilkan permainan asah dan fitur produk kepada pengunjung Anda. Jadi meskipun Anda terbatas dalam ruang di sekitar grafik Anda bisa selalu menawarkan kesempatan untuk belajar lebih banyak di halaman eksternal.

3. Label Sederhana dan Tidak Mengganggu

Label benar-benar aspek terpenting dalam membuat grafik produk informatif. Pengunjung mungkin perlu memahami area yang berbeda dalam produk, perangkat lunak, situs web, aplikasi seluler, dll. Sayangnya penggunaan tabel dan daftar berpoin hanya bisa sejauh ini. Ketika Anda benar-benar perlu menjelaskan fitur produk, penting untuk memilih hotspot untuk pelabelan.

Apple Computers mungkin adalah contoh terbaik dari detail label yang sederhana. Anda mungkin memperhatikan teknik-teknik ini pada grafik mereka ketika melihat-lihat tablet, laptop, atau iPhone yang terkenal. Fitur dan spesifikasi teknis mereka umumnya sama dengan produsen komputer merek besar lainnya. Namun model grafis mereka begitu murni sehingga produk tersebut praktis menjual diri mereka sendiri.

Perhatikan bahwa ketika Anda memecah proses itu jauh lebih sederhana daripada yang Anda pikirkan! Grafik produk hanyalah bagian standar dari keseluruhan desain situs web. Bahkan jika Anda menjual pupuk atau sprei atau kartu perdagangan, Anda mungkin dapat menggunakan teknik pelabelan ini dengan baik. Dan meskipun Apple memiliki beberapa grafik informatif yang sangat sederhana, mereka bukan satu-satunya perusahaan yang melakukannya. Mencoba Googling untuk bisnis di niche Anda untuk melihat apakah mereka memakai label info mewah atau layar penggoda di situs web mereka.

4. Pencitraan dengan Konten Dinamis

Untuk beberapa pengembang web mungkin tidak cukup hanya dengan membuat grafik berlabel perangkat lunak Anda. Mungkin ada banyak fitur unik yang ingin Anda kunjungi tetapi mengandung sebagian kecil dari halaman web Anda. Itu mungkin membangun serangkaian langkah pengantar mengarahkan pengunjung Anda ke seluruh demo produk kecil.

Newsberry menggambarkan contoh ini dengan elegan. Pada beranda mereka akan melihat area blok dengan navigasi mini kecil di bawahnya. Mereka termasuk 5 langkah di sepanjang proses dengan screenshot yang berbeda dan beberapa teks deskriptif yang menyertainya. Bahkan jika Anda tidak tahu untuk apa Newsberry digunakan, mereka konten pengantar menjelaskan hal-hal dengan sangat jelas. Anda bahkan ditawari beberapa tautan demo di seluruh rangkaian slide.

Saat Anda menelusuri kontennya, Anda akan melihat banyak slide berisi tangkapan layar di dalam jendela browser kecil. Efek ini sebenarnya sangat sederhana untuk ditiru! Anda hanya perlu melakukannya menemukan gambar untuk digunakan sebagai gambar latar belakang Anda dan ukuran ulang tangkapan layar untuk masuk ke dalamnya. Memang efek ini tidak akan bekerja untuk setiap produk, tetapi ini cara yang bagus untuk membingkai layar dari aplikasi web.

5. Hapus Screenshot dan Foto Produk

Dimungkinkan untuk memasukkan semua label dan fitur terbaik untuk produk Anda tetapi masih kehilangan penjualan. Itu tangkapan layar dan foto yang Anda pilih untuk grafik Anda pada akhirnya sama pentingnya dengan semua detail yang lebih halus. Pada Windows dan Mac OS X ada beberapa cara untuk mengambil tangkapan layar seluruh desktop Anda dengan pintasan keyboard. Menggunakan metode ini dikombinasikan dengan beberapa waktu di Photoshop Anda dapat mengumpulkan demo fitur yang sangat menarik.

Jika produk Anda sangat berbelit-belit, Anda harus mencobanya menyusun beberapa gambar yang berbeda. Contoh di atas dari situs web Tweetbot menggunakan lingkaran biru untuk menunjukkan tindakan mengetuk pada aplikasi. Alih-alih tangkapan layar tunggal dengan banyak label pertimbangkan untuk menggunakan galeri gambar jQuery kecil untuk menggabungkan 3-5 grafik yang berbeda. Ini memberi Anda lebih banyak kesempatan fokus pada berbagai perspektif produk sementara pengunjung ditawari pengalaman yang jauh lebih kaya.

Saat Anda mengambil bidikan dari PC atau ponsel cerdas, gambar selalu disimpan pada zoom 100%. Editor gambar seperti Photoshop memiliki kemampuan untuk mengubah ukurannya, tetapi mereka sering kehilangan detail. Jadi bagaimana Anda bisa memasukkan gambar seperti itu ke situs web kecil Anda? Salah satu teknik terbaik adalah pembesaran di mana Anda menurunkan aplikasi dan membuat bagian yang diperbesar dari bagian yang paling penting. Teknik ini terlihat lebih umum dalam perangkat lunak daripada produk fisik - Saya telah merinci proses desain di bawah ini.

6. Membangun Efek "Lensa Zoom"

Saya akan membangun langkah-langkah untuk membangun efek kaca pembesar di Adobe Photoshop. Jika Anda menggunakan editor grafis lain, kemungkinan besar Anda dapat melakukan tugas yang sama, tetapi menu dan perintah akan berbeda.

Salah satu contoh terbaik dari teknik ini adalah pada beranda aplikasi Things for Mac. Grafik memiliki aplikasi diperkecil kecil sehingga akan pas dengan sempurna ke halaman, bersama dengan drop shadow kecil. Namun pada beberapa area penting Anda akan melihat lingkaran dengan konten di dalamnya jauh lebih besar. Mereka bahkan menambahkan cahaya bagian dalam putih agar tampak sebagai cahaya yang dibiaskan yang bersinar melalui lensa!

Bonus: "Zoom Lens" Efek Photoshop Tutorial

Untuk mulai mengambil tangkapan layar yang ingin Anda gunakan untuk grafik Anda. Saya telah mengambil layar cepat dari halaman utama Hongkiat. Saya akan memotong hanya jendela browser dan mengubah ukuran menjadi sekitar 700px. Anda harus mengubah ukuran lebarnya agar sesuai dengan area konten situs web Anda sendiri. Sekarang buat layer baru di atas latar belakang ini dan buat seleksi melingkar sambil menahan shift agar proporsional. Isi dengan warna apa pun yang Anda suka.

Langkah 1

Jika lingkaran tetap dipilih, ubah fill% di panel layer menjadi 0%. Di bawah lapisan FX tambahkan stroke hitam 1px-2px dan cahaya batin putih. Anda dapat mengurangi opacity untuk pencahayaan kurang putih.

Langkah 2

Tetap mempertahankan lingkaran yang dipilih, pindah ke lapisan latar belakang Anda dan tekan ctrl (Untuk pengguna Mac, itu perintah atau kunci cmd.) + c untuk menyalin. Kemudian buat layer baru di atas latar tetapi di bawah lingkaran pembesar dan tempel. Anda juga bisa menekan ctrl + j untuk menduplikasi layer baru dengan hanya pemilihan in-tact.

Tekan ctrl + t untuk membuka alat transformasi. Sekarang skala keluar layer duplikat baru sambil menahan bergeser untuk menjaga semuanya proporsional dan alt untuk menjaga stasioner pusat.

Langkah 3

Tekan ctrl dan klik pada ikon lapisan kaca pembesar untuk membuat pilihan Anda lagi. Catatan Anda masih harus menyoroti lapisan latar belakang duplikat di panel lapisan (yang langsung di bawah kaca pembesar kami) yang berarti ia akan memiliki latar belakang biru muda.

Tekan Ctrl + Shift + i untuk membalikkan pilihan saat ini. Sekarang tekan delete untuk menghapus sampah tambahan dari tangkapan layar skala ulang kami. Untuk sedikit efek tambahan, tarik menu FX layer untuk menambahkan drop shadow kecil. Anda juga dapat menggambar garis vertikal tipis 1px dan menggunakan Filter Liquify (Filter> Liquify) membuat pegangan kecil!

Kesimpulan

Untuk merancang grafis produk yang fantastis, Anda harus mengingat dasar-dasarnya. Pengunjung hanya ingin memahami apa yang Anda coba jual! Cara termudah untuk menyampaikan informasi ini adalah melalui serangkaian tangkapan layar atau grafik detail tunggal. Label hanyalah bagian kedua dari teka-teki ini, di mana Anda dapat menguraikan set fitur yang paling penting.

Ketika Anda menggabungkan semua teknik ini, Anda akan mulai melihat gambaran yang lebih besar. Unduhan dan pembelian akan meroket - terutama jika Anda menempatkan gambar depan-dan-tengah pada halaman rumah Anda. Teknik-teknik ini sangat cocok untuk desainer grafis dan web untuk memulai di bidang desain produk. Kami telah merinci beberapa ide abstrak, tetapi kami akan senang mendengar pendapat Anda di area diskusi di bawah ini!