10 BEST VISUAL DESIGN FOR BEGGINERS YOU SHOULD KNOW!!!!

on

|

views

and

comments

Dalam dunia desain yang indah, tidak ada terlalu banyak aturan keras dan cepat.
Itu bagian dari apa yang membuat pekerjaan ini sangat menyenangkan: Anda tidak selalu terbatas pada serangkaian persyaratan atau standar yang ketat, dan ada banyak peluang untuk bereksperimen dengan ide-ide berbeda sesuai dengan isi hati Anda!
Tetapi butuh waktu untuk mengembangkan mata untuk desain, dan jika Anda baru untuk itu, kemungkinan yang tampaknya tak terbatas dapat terasa sedikit menakutkan, untuk sedikitnya.
Jadi untuk membantu Anda memulai, kami telah membuat daftar beberapa praktik terbaik desain visual penting — dan termasuk ilustrasi dan contoh dari web. Hari ini, kami hanya berfokus pada kiat “desain visual”. Pikirkan desain visual sebagai sisi desain grafis dari desain digital: ini tentang membentuk tata letak, tampilan, dan nuansa produk digital.
Setelah Anda mencerna pengantar ini, mengapa tidak memeriksa kiat desain visual kami yang lebih rinci tentang merancang untuk inklusi dan aksesibilitas?

  1. Jangan Belajar Cara Membuat Palet Warna yang Efektif

Pikirkan merek besar (Target, Facebook, Google) dan Anda mungkin dapat mengingat warna yang terkait dengannya. Warna adalah alat desain visual yang kuat, dan palet yang digunakan di situs web dapat memiliki efek besar pada bagaimana perasaan kita tentang suatu perusahaan atau produknya.
Mempelajari cara memasangkan warna akan membantu Anda membuat desain yang menyenangkan secara visual, mudah diingat, dan menambah pengalaman pengguna secara keseluruhan di situs ini. Tetapi dengan kombinasi warna yang praktis tak terbatas, bagaimana Anda bahkan mulai membangun palet warna?
Mulailah dengan pesan dan nilai yang ingin Anda kaitkan dengan produk Anda. Apakah Anda ingin menjadi pendukung dan dapat dipercaya, awet muda dan energik, atau mutakhir dan berani? Pilih dua atau tiga kata kunci dan mulailah dengan memilih satu atau dua “warna merek” yang selaras dengan konsep-konsep itu dan terlihat baik bersama. Anda dapat membangun palet dari sana!
Saat memilih warna tambahan, ingat untuk memasukkan warna netral — warna yang sangat dekat dengan putih dan hitam. Ini akan sangat berguna sebagai warna latar belakang. Namun, cobalah untuk memastikan bahwa netral Anda memiliki koneksi ke seluruh palet Anda: pada ilustrasi di atas, kami telah mengambil warna biru dan memilih yang sangat biru muda dan biru yang sangat gelap sebagai netral.
Terakhir, pertimbangkan untuk menambahkan warna aksen — sesuatu yang kontras yang dapat Anda gunakan untuk memilih elemen kecil seperti tautan dan tombol.
Palet Warna yang Efektif Beraksi: Otherland

2. Jangan Lupa Visi Beragam Warna

Tahukah Anda bahwa sekitar 1 dari 12 anak laki-laki dan laki-laki, dan 1 dari 200 anak perempuan dan laki-laki, menderita semacam buta warna? Itu berarti 5% dari semua pengguna web!
Mengingat bagaimana produk digital sentral telah menjadi dalam kehidupan sehari-hari, lebih penting daripada sebelumnya untuk memastikan bahwa desain Anda masih dapat digunakan untuk seseorang dengan penglihatan warna terbatas, atau gangguan visual lainnya.
Bentuk buta warna yang paling umum membuat sebagian pengguna sulit membedakan antara warna-warna ini:

  • hijau dan oranye
  • merah dan hijau
  • biru dan ungu
  • merah dan coklat
  • biru dan hijau


Merupakan praktik yang baik untuk menghindari penggunaan kombinasi ini secara langsung di samping, atau di atas, satu sama lain. Anda juga ingin memastikan untuk tidak bergantung pada warna saja untuk memberi label fungsi atau perintah.
Misalnya, jika Anda menggunakan batas merah untuk menunjukkan bahwa kata sandi dimasukkan secara salah, tambahkan beberapa teks pendukung yang mengomunikasikan pesan itu dengan cara kedua (mis. “Kata sandi salah”). Dengan melakukan ini, jika seseorang tidak dapat melihat warna merah, mereka masih dapat mengetahui apa yang terjadi dan tindakan apa yang perlu mereka ambil selanjutnya.

Visi Beragam Warna Beraksi: Pemerintah New South Wales

Pemerintah New South Wales baru-baru ini mendesain ulang situs web mereka untuk memastikan itu dapat diakses oleh semua pengunjung. Anda akan melihat warnanya tebal dan cukup cerah untuk melewati pedoman kontras aksesibilitas, dan ukuran teksnya besar dan sangat mudah dibaca.

3. Jangan Sengaja dalam Memilih Typefaces Anda

Tipografi memainkan peran besar dalam bagaimana sesuatu terlihat seperti palet warna, tetapi efeknya sering lebih halus dan lebih subliminal. Sangat menggoda untuk hanya memilih font yang Anda sukai dan terbiasa dengan — desain grafis hebat Massimo Vignelli hanya menggunakan enam jenis huruf di semua karyanya!
Tetapi karena sebagian besar dari kita bukan Massimo Vignelli, penting untuk berhati-hati dan bijaksana ketika memilih font, dan untuk mengikuti proses berpikir yang sama melalui bagaimana pilihan jenis Anda terkait dengan kata kunci untuk proyek Anda.
Pertama, pertimbangkan jenis font apa yang cocok dengan nada dan tujuan proyek Anda. Misalnya, jika Anda merancang laman landas untuk perusahaan teknologi mutakhir, Anda mungkin ingin menghindari jenis huruf apa pun yang terlihat kuno — sehingga sans-serif dapat bekerja dengan baik.
Tetapi jika Anda merancang aplikasi untuk museum sejarah kuno, mungkin cocok untuk memasukkan font yang memiliki tampilan klasik dan historis — seperti jenis huruf serif.
Terakhir, pastikan bahwa apa pun yang Anda pilih dapat dibaca oleh pengguna dan mudah dibaca dalam blok teks yang lebih panjang. Fon skrip dan huruf baru lainnya tidak masalah, asalkan hanya digunakan di area kecil, seperti logo.
Pemilihan Huruf Beraksi: Bolden

Lihatlah nama firma desain ini, Bolden, dan bagaimana “keberanian” perusahaan mereka tercermin baik dalam pilihan jenis huruf yang ekstra berani (fontnya adalah Maison Neue), dan bagaimana mereka menggunakan jenis huruf itu — dalam huruf besar , dengan kontras tinggi terhadap latar belakang.
Sumber Daya Bonus

Pernah bertanya-tanya font apa yang digunakan situs web favorit Anda? Fontface Ninja adalah ekstensi chrome gratis yang memungkinkan Anda mengidentifikasi, mencicipi, dan mem-bookmark font apa pun yang Anda lihat online.

  1. Jangan Takut untuk Memasangkan Font

Setelah merasa nyaman memetik font untuk desain Anda, Anda dapat bereksperimen dengan menggunakan beberapa font. Dua font harus cukup untuk 99% kasus.
Ada banyak cara untuk melakukan pairing font, tetapi untuk memulainya, Anda dapat menganggap satu sebagai font utama yang akan Anda gunakan untuk salinan tubuh, dan lainnya sebagai font aksen yang akan Anda gunakan untuk judul. Ketika dilakukan secara efektif, pemasangan font dapat membantu desain Anda terlihat lebih bijaksana dan khas.
Cara paling umum untuk memasangkan font adalah dengan menggabungkan serif dan sans-serif. Untuk tips rinci tentang kombinasi yang baik, lihat Typewolf!
Pairing In Action: Book of the Month

Perhatikan bagaimana Book of the Month, layanan berlangganan buku, menggunakan font serif (Tanpa Judul) untuk judul dan header, dan font sans serif (GT America) untuk badan. Hasilnya adalah kombinasi yang menyenangkan secara visual — mudah dibaca, dan mencerminkan sifat sastra dari produk tersebut.
Sumber Daya Bonus

Berlatih menjadi mak comblang jenis huruf! Typeconnection adalah “permainan kencan tipografi”. Berlatih memasangkan tipografi, dan lihat bagaimana mereka terlihat bersama.

  1. Jangan Gunakan Gambar untuk Memecah Teks

Seiring dengan pilihan warna dan font Anda, gambar yang Anda gunakan dapat meningkatkan pengalaman pengguna dan membantu mengatur nada yang diinginkan. Tidak ada kekurangan ide gambar di luar sana: foto, ilustrasi, infografis, diagram, ikon … daftarnya terus berlanjut!
Tetapi Anda ingin memastikan setiap elemen visual menambahkan sesuatu yang penting dan fungsional pada solusi desain Anda: gambar tidak hanya dekoratif. Selain itu, bertujuan untuk membuat dan menyusun gambar yang cocok dengan kata kunci, palet warna, dan font Anda.
Penggunaan Gambar Beraksi: Berlapis

Disepuh, startup pengiriman kit makanan, mengisi halaman arahan mereka dengan makanan lezat: semacam aspirasi “Anda bisa makan ini” insentif untuk pelanggan potensial.
Mereka memiliki banyak foto keluarga dan pasangan yang memasak bersama, yang bertujuan untuk memposisikan Disepuh sebagai aktivitas ikatan serta layanan makan. Misi perusahaan adalah untuk memberikan “pengalaman memasak yang sempurna”, dan gambar keluarga yang bahagia dan makanan yang indah memperkuat persepsi itu.

6.Jangan Sumber Gambar Anda Tidak Bertanggung Jawab

Saat Anda baru memulai sebagai desainer, mungkin sulit untuk mengetahui di mana menemukan foto berkualitas baik untuk digunakan dalam desain Anda. Anda mungkin mendapati diri Anda ngiler melihat foto produk yang indah, atau gambar pemandangan menakjubkan di situs web favorit Anda.
Tetapi ingat bahwa banyak gambar yang Anda temukan dengan menelusuri layanan seperti Gambar Google telah dibuat secara profesional dan diarahkan untuk klien. Mereka cenderung memiliki hak cipta, artinya Anda tidak boleh hanya menyalin dan menempelkannya ke proyek Anda sendiri.
Namun, ada beberapa situs stok foto gratis yang tersedia untuk Anda, termasuk Unsplash, Burst, dan StockSnap. Akhirnya, ingat smartphone Anda! Dengan sedikit perencanaan, dan alat-alat seperti tenda ringan, Anda dapat membuat gambar berkualitas tinggi untuk proyek.
Sumber Gambar Beraksi: Unsplash

Salah satu tantangan menggunakan foto stok, terutama yang gratis, adalah menemukan serangkaian gambar yang memiliki tampilan dan rasa yang konsisten.
Tip pro untuk menggunakan layanan seperti Unsplash adalah untuk mengidentifikasi karya seorang fotografer tunggal yang gayanya cocok untuk proyek Anda, dan kemudian hanya menggunakan gambar yang diambil oleh orang itu dalam desain Anda.

7.Jangan Buat Layout yang Koheren

Mengetahui cara memilih elemen individual seperti warna, font, dan gambar adalah penting — tetapi Anda juga perlu tahu cara menggunakan elemen-elemen ini dalam tata letak halaman.
Selain membuat desain Anda terlihat ramping dan profesional, tata letak yang baik juga menciptakan struktur yang jelas, dan membantu membawa perhatian pengguna ke tempat yang tepat. Ada banyak cara untuk menata konten pada halaman, jadi jelajahi pilihan melalui banyak sketsa cepat di atas kertas.
Opsi mana pun yang Anda pilih, pastikan tata letak menarik perhatian pengguna ke elemen yang paling penting. Jika itu adalah halaman produk, itu mungkin foto item tersebut. Jika ini halaman arahan, itu bisa menjadi tombol “Daftar”.
Tempatkan diri Anda pada posisi pengguna, dan amati bagaimana mata Anda menjelajahi desain. Atau bahkan lebih baik, minta teman untuk membantu mengujinya!
Layout In Action: MakeSpace

Seperti semua halaman arahan terbaik, MakeSpace mengatur semua elemen visual secara sederhana dan dengan titik penyelarasan yang jelas.
Fokus awal untuk pengguna jelas — proposisi nilai perusahaan (“Pengalaman penyimpanan yang baru dan lebih baik”).
Selain itu, ada tombol yang jelas (“Pesan Hari Ini”, “Dapatkan Penawaran”) yang memungkinkan pengguna untuk mengambil langkah selanjutnya, dan penggunaan gambar pendukung yang bagus.

8.Gunakan Grid

Sebagai perancang baru, grid akan menjadi teman baru Anda. Intinya, kisi adalah sistem untuk mengatur konten: kolom (dan terkadang baris) yang ditempatkan secara merata di seluruh halaman.
Kisi membantu desain Anda terlihat profesional, seragam, dan selaras: mengamati kisi akan menambah konsistensi dan struktur pada tata letak Anda, serta memudahkan pengguna untuk memahami dan menavigasi.
Grid Use In Action: The New York Times

Menjelajahi situs web surat kabar dapat menjadi cara yang baik untuk memahami kekuatan penggunaan grid. Grid mulai dicetak, tentu saja, dan surat kabar telah menggunakannya selama berabad-abad.
Dalam contoh ini, The New York Times menggunakan kotak untuk memungkinkan mereka menampilkan berita utama sementara masih memiliki tautan ke cerita sekunder di kolom di sebelah kanan. Juga, perhatikan bagaimana kolom teks sejajar dengan elemen bilah navigasi di bagian atas layar. Kisi paling efektif jika digunakan secara konsisten seperti ini.

9.Jangan Abaikan Hirarki Visual

Hirarki visual lebih dari sekadar membawa perhatian pengguna ke elemen terpenting dalam tata letak. Ini juga tentang menetapkan kepentingan relatif semua elemen lain di laman.
Dalam posting blog ini, Anda mungkin telah memperhatikan bahwa judul bernomor lebih besar dari teks isi, dan dipisahkan dari bagian sebelumnya oleh ruang kosong.
Penggunaan gaya yang lebih menonjol secara visual untuk judul ini meningkatkan hierarki, membantu otak memahami bahwa ini adalah penanda jalan dalam konten. Anda dapat mengontrol hierarki visual dengan menggunakan kombinasi warna, ukuran, dan jarak pada khususnya.
Hierarki Visual Dalam Tindakan: Beranda Google

Meskipun halaman arahan ini mungkin terlihat sangat mudah pada pandangan pertama, perhatikan bagaimana hierarki visual dikelola sehingga mata pengguna mengikuti perjalanan berbentuk senyum yang halus.
Mata mungkin pertama kali mendarat pada logo “G” yang khas di sudut kiri atas sebelum melompat ke salinan (“Meet the Google Home”). Selanjutnya, dipandu oleh tepi meja di foto, mata berayun kembali ke tombol “Beli” yang menonjol di sudut kanan atas.
Perjalanan visual ini memberi pengguna semua informasi penting tentang Beranda Google (yang membuatnya, apa fungsinya, cara membelinya) tanpa harus menggulir lebih jauh ke bawah halaman.

10.Jangan Gunakan Banyak Ruang Putih

Wajar jika desainer baru ingin menerapkan semua pengetahuan baru Anda sekaligus. Anda mungkin menjejalkan sebanyak mungkin gambar dan blok teks ke dalam satu halaman!
Tapi sama seperti musik terdiri dari keheningan dan jeda serta catatan, ruang antara elemen visual sama pentingnya dengan elemen itu sendiri.
Dengan memberikan elemen seperti gambar dan blok teks banyak ruang putih di sekitarnya, Anda akan membantu pengguna mengidentifikasi pengelompokan informasi, dan karenanya membantu mereka lebih mudah memahami konten.
Menggunakan ruang kosong yang luas juga merupakan salah satu cara paling sederhana untuk membuat desain Anda terlihat lebih bersih dan lebih elegan.
Whitespace In Action: Apple

Apple bisa disebut ratu ruang putih. Presentasi yang luas dari halaman arahan ini mencerminkan minimalis dan seni produk mereka.
Perhatikan terutama bagaimana ruang putih di sekitar foto dan deskripsi produk Apple tidak menghilangkan penekanan. Sebaliknya — mengelilingi suatu elemen dengan ruang memberikannya kepentingan visual tambahan.

Terima kasih sudah membaca!

Kami harap Anda telah menemukan panduan pengantar praktik terbaik desain visual ini bermanfaat.

sumber : trydesignlab.com

Share this
Tags

Must-read

Mantaflow Creating Fire

Menciptakan efek api? Mudah dengan Mantaflow! https://www.youtube.com/watch?v=lR9vjaYzeYQ
spot_img

Recent articles

More like this