Bangun Perpustakaan Visual Anda: Tip dan Tantangan Desain

Diterbitkan: 2020-12-17

Salah satu perbedaan besar antara desainer berpengalaman dan desainer junior adalah perpustakaan visual yang dibangunnya.

Apa Itu Perpustakaan Visual?

Ini adalah hal yang ada di kepala Anda saat berhubungan dengan elemen UI dan praktik UX. Apa yang telah Anda bangun dan memiliki pemahaman tentang cara kerjanya. Semakin kaya perpustakaan Anda, semakin cepat Anda dapat menemukan solusi saat itu juga.

Mari kita beri contoh: Sebagai seorang desainer, Anda bertugas membangun situs web baru.

Situs web apa? Anda mungkin bertanya. Nah, itu saja persyaratan yang Anda miliki. Tantangan dari rekan kerja. Oh, juga, kamu punya satu jam untuk melakukannya. Ini adalah tantangan yang kami lakukan di DevriX dan inilah salah satu hasilnya setelah 3600 detik:

Desain oleh Alex Dimitrov

Tidak banyak waktu untuk mempertimbangkan topik, jadi itu langsung masuk ke header. Komponen apa yang dimiliki header?

  • Judul yang pasti
  • Navigasi
  • Bilah pencarian
  • Beberapa tautan sosial
  • Beberapa tombol ajakan bertindak, terutama untuk mendaftar dan / atau membuat akun
  • Beberapa navigasi membuatnya menarik

Darimana semua ini berasal? Itu adalah halaman kosong sebelumnya. Bahkan tidak ada topik, untuk memulai. Itu semua terjadi karena perpustakaan visual yang telah dibuat di benak desainer selama bertahun-tahun membangun situs web, aplikasi, dan segala sesuatu di sekitarnya.

Berapa banyak cara Anda bisa mendesain tajuk? Ratusan cara. Ada banyak sekali jenis elemen, topografi, warna, overlay, tombol, elemen dan banyak lagi. Ini eksperimen yang menarik untuk dilakukan.

Cara Membangun Perpustakaan Visual

Sementara jawaban paling sederhana adalah "membuat lebih banyak desain", itu tidak terlalu memuaskan hanya karena ada lebih banyak desain. Yang lebih penting adalah keragaman. Membangun desain yang berbeda. Salah satu cara langsung untuk melakukan pendekatan ini adalah dengan mendesain ulang situs-situs besar.

Berikut beberapa contohnya:

Facebook:

Sumber Gambar: Dribbble

Gmail:

Sumber Gambar: Dribbble

Indonesia:

Sumber Gambar: Dribbble

Ada begitu banyak contoh. Semakin kompleks desainnya, semakin cepat Anda akan maju. Tapi, bagaimana tepatnya cara kerjanya?

Mari kita lihat daftar sebagai contoh. Sebuah daftar dapat memiliki tajuk yang menamainya, dapat memiliki ikon yang dapat diwarnai, serupa dalam desain atau berbeda dalam desain. Itu juga dapat memiliki judul dan subjudul yang lebih besar, mungkin label dengan angka. Kemudian Anda dapat menambahkan status hover, item yang dapat dipilih atau, dinonaktifkan, dan sebagainya. Dengan semua variasi ini, Anda dapat membuat berbagai macam desain daftar.

Sumber Gambar: Dribbble

Mampu menghasilkan begitu banyak konfigurasi dan tata letak berarti memiliki perpustakaan visual yang baik. Untuk mengetahui bahwa Anda bisa melakukannya seperti itu. Ini seperti memiliki seseorang di samping Anda yang mengatakan "Gambarkan saya kotak", lalu "Tambahkan judul" dan Anda melakukannya tanpa berpikir. Semua keputusan ini dibuat karena Anda pernah melakukannya sebelumnya. Memang, ini juga mengikuti dasar-dasar desain, tetapi Anda tidak dapat selalu membaca catatan atau buku Anda. Ini seperti melatih AI - Anda perlu membangun pola menggunakan "urutan elemen yang berhasil".

Semua Seniman Visual Perlu Membangun Perpustakaan

Contoh nyata dari ini adalah Kim Jung Gi - seorang jenius yang dapat membuat karya seni seperti kehidupan menggunakan perspektif apa pun.

Seni oleh Kim Jung Gi

Dalam sebuah wawancara dia mengatakan bagaimana sepanjang hidupnya dia telah melihat semua benda di sekitarnya, mencoba memahami bentuknya dan menggambarnya dari perspektif yang berbeda. Dengan keterampilan ini, dia sekarang mampu menggambar semua yang Anda lihat pada gambar di atas hanya dengan memulai dari selembar kertas putih tanpa referensi apa pun.

Atau lebih baik dikatakan - tanpa referensi yang bisa dia raih karena referensinya ada di benaknya - perpustakaan visualnya. Ini adalah contoh karya seorang master, yang merupakan tujuan yang bagus untuk memperjuangkan seorang desainer.

Dengan cara yang sama seperti perancang web belajar tentang tombol, daftar, kartu, bidang masukan, sembulan, dan banyak lagi, seniman digital belajar tentang bahan, pencahayaan, siluet, cara kerja otot, bagaimana gravitasi menarik Anda ke bawah, dan membebani Anda. tubuh dan sebagainya.

Grafis oleh Suzanne Helmigh

Ini adalah contoh bagaimana seniman digital mempelajari berbagai materi dengan mencoba mengaplikasikannya pada sebuah ranah. Magma, kayu, bulu, anggur, telur, keju, apapun itu sah. Mempelajarinya, melakukannya dengan tangan Anda, menanamkannya sedikit demi sedikit di otak Anda. Dan ketika saatnya tiba untuk mengaplikasikan bahan itu pada lukisan sungguhan, Anda sekarang memiliki pemahaman yang lebih baik tentang cara kerjanya yang sebenarnya dan bagaimana hasil akhirnya harus terlihat realistis.

Berikut adalah contoh di mana kulit, kulit, logam, dan rambut semuanya digunakan untuk menghasilkan produk akhir yang sangat bagus. Kurangnya pemahaman mendasar tentang bahan-bahan tersebut bisa membuat logam tersebut terlihat seperti plastik, kertas seperti kulit, dan sebagainya.

Sumber Gambar: Artstation

Tantangan Komponen Desain Web

Sekarang, mari kita lihat kembali beberapa komponen umum yang akan sering Anda gunakan dalam desain web dan beberapa praktik yang harus dilakukan:

1 - Tombol

Salah satu komponen paling mendasar di situs web. Tombol tersedia dalam berbagai bentuk dan ukuran. Anda dapat mengatur gradien, mengubah warna, menambahkan bayangan teks, menambahkan batas (lebih dari satu), menambahkan gaya gloss, menguraikannya, mengubah bentuknya (persegi, sudut membulat, lingkaran), beberapa dilengkapi dengan ikon, yang lain memiliki ikon yang dipisahkan area yang dapat diklik.

Sumber Gambar: Dribbble

Tugas : Mendesain tombol dalam 20 gaya berbeda. Semakin besar perbedaan di antara mereka semakin baik. Untuk masing-masing, terus ikuti praktik desain terbaik dalam hal kontras, keseimbangan, dan sebagainya.

2 - Kartu

Kartu atau kotak adalah komponen umum lainnya. Itu dapat menampung semua jenis konten, meskipun beberapa elemen umum bisa menjadi header / footer + konten utama.

Sumber Gambar: Dribbble

Tugas : Menggunakan konten, bentuk kartu di atas, rancang 10 variasi, idealnya dibuat berbeda. Ubah gaya, tambahkan elemen baru, putar, gunakan gradien, bayangan, ikon, dan ilustrasi. Cobalah bersikap liar dengannya.

3 - Komentar

Hampir semua blog memiliki beberapa bentuk sistem komentar. Tetapi apakah Anda menganggap bahwa komponen komentar mungkin tidak benar-benar menyimpan komentar sebenarnya tetapi lebih seperti perubahan "status"?

Sumber Gambar: Dribbble

Tugas: Contoh di atas menunjukkan hal itu. Sekarang, coba buat apa pun yang terkait dengan komponen komentar - komentar dari pengguna, status pembaruan tugas (yang ada di area komentar), komentar seperti obrolan, apa saja. Apa pun di antara 7-10 variasi akan menjadi angka yang bagus. Sekali lagi - cobalah untuk membuat semuanya berbeda. Riset lebih lanjut, temukan ide, telusuri situs.

Tujuan dari latihan ini adalah untuk menemukan cara melakukan elemen umum dengan cara baru yang tidak Anda ketahui sebelumnya.

4 - Penggeser

Penggeser adalah salah satu komponen yang dibenci banyak pengembang front-end karena banyaknya masalah yang mereka buat serta JavaScript yang berat yang mungkin berjalan di latar belakang. Tetapi itu tidak berarti bahwa Anda tidak perlu membuatnya.

Sumber Gambar: Dribbble

Tugas: Jelajahi web dan berbagai desain untuk mempelajari lebih lanjut tentang berbagai tata letak dan pendekatan. Mungkin lihatlah library JS tempat mereka melakukan slide untuk melihat apa yang mereka miliki. Dari sana, rancang 10-15 desain berbeda untuk slider. Sekali lagi - cobalah untuk membuat setiap desain berbeda dari sebelumnya, jangan hanya menggunakan sedikit peningkatan.

5 - Formulir masukan

Formulir masukan adalah bagian inti lain dari hampir semua situs web. Yang menarik bagi mereka adalah bahwa mereka menerima informasi, bukan keluaran.

Sumber Gambar: Dribbble

Tugas: Tugas Anda di sini adalah menghasilkan jenis informasi paling aneh yang mungkin dibutuhkan seseorang di situs web. Unggah PDF atau PSD (pilih satu), informasi kartu kredit, tambahkan resep kue, hitung rasio pencampuran cat, buat konfigurator dealer mobil. Apa pun yang terlintas dalam pikiran, semakin unik semakin baik. Sekali lagi terus menjelajahi situs web untuk melihat solusi nyata. Desain minimal 10 bentuk unik berbeda dengan desain unik.

Ringkasan

Membangun perpustakaan desain sebagai desainer adalah salah satu batu loncatan utama untuk meningkatkan alur kerja Anda, menghasilkan desain dengan cepat, memecahkan masalah untuk klien Anda, dan menemukan cara unik dan jenius untuk meningkatkan pengalaman pengguna. Saat Anda mulai menjelajahi dan mencermati setiap elemen di web, Anda mulai mempertimbangkan tindakan pengguna, apa yang mereka lihat, dan bagaimana hal itu dapat ditingkatkan.

Menggunakan tugas-tugas di atas sebagai pekerjaan rumah akan membantu Anda mengisi portofolio Anda. Jangan batasi diri Anda hanya pada 5 tugas yang disebutkan, pergilah ke sana, jelajahi situs web, lakukan desain ulang, pelajari, dan terus kembangkan indra desain Anda dan bangun perpustakaan visual Anda sendiri!