Web Design 101 - Belajar bikin desain web profesional bagi pemula 2023

Web Design 101

Desain web atau Web Design sangat diperlukan bagi siapapun yang memiliki website. Pasalnya, maukah kamu melihat website yang kurang bagus dan tidak fungsional? Nyatanya, desain yang buruk dapat membuat website kamu menjadi sepi pengunjung. Itu bukanlah kemauan seorang pebisnis online bukan? Di artikel kali ini saya akan memberitahu kalian tentang belajar bikin desain web profesional bagi pemula di tahun 2023.

Kamu akan mempelajari design-design terms terutama dalam UI/UX (Namanya juga Web Design), Belajar tentang beberapa tentang alat-alat yang dapat membantu kamu dalam membuat desain Web. Lalu paling penting,

Penerapannya.

Tanpa berlama-lama lagi, selamat membaca :D

Terms - Komposisi

Yang pertama harus saya kasih tahu, terms atau ketentuan desain. Bukan berarti kamu harus mengikuti semua aturan yang ada. Ketentuan hanya dibuat untuk kemudahan dan best-practices dalam desain.

Yang kedua, tentang komposisi. Komposisi, kadang juga dipanggil layout. adalah penataan visual elemen desain yang menciptakan keselarasan. Tujuannya untuk membuat karya yang menyenangkan secara visual untuk menghasilkan tata letak yang fungsional.

Ingat, karya yang menyenangkan secara visual dan tata letak yang fungsional.

Maksudnya? Buat tampilan desain yang enak dipandang mata tetapi jangan pernah mengorbankan fungsi.

OK

Namun itu masih belum membantu untuk bisa membuat desain yang bagus? Maka dari itu yuk mulai masuk ke tekniknya.

Terms - Balance

Setiap elemen yang ditempatkan pada halaman memiliki bobot visual yang dapat dipengaruhi oleh bentuk, ukuran, warna, dan tekstur. Untuk membuat keseimbangan tata letak, beberapa elemen mungkin perlu memiliki skala tertentu.

Balance menunjukan bahwa komponen-komponen desain harus seimbang. Dalam artian memberikan bobot yang seimbang dalam bentuk ukuran, warna, tekstur.

Contohnya?

Elemen teks yang memiliki font yang sama

Elemen gambar yang memiliki panjang, tinggi, rounded yang sama dengan gambar lainnya

Elemen yang memiliki tekstur tidak boleh beda beda

Loh berarti kita cuma boleh pakai satu font, satu ukuran, satu tekstur? Ya ga gitu juga. Contohnya jika kita mau menekankan teks, kita bisa menggunakan bold text. Ini nanti akan kita bahas di terms hierarki nantinya, makanya silahkan baca sampai bawah.

Terms - Aligment

Perataan mengacu pada posisi elemen pada tata letak—cara elemen visual diatur sehingga berbaris. Perataan bisa kiri, kanan, rata, atau tengah.

Dari pengalaman saya, ini yang paling saya remehkan. Padahal, pengaruhnya paling besar. Tak sedikit desainer yang sudah profesional tapi malah melupakan hal ini. Para expert bahkan memiliki jargon desain berbunyi:

Alignment is Everything.

So, ratakan elemen anda.

Serius, ratakan elemen anda.

Gampang kok.

kalo misalnya di Figma kamu bisa pakai alt + wasd atau di Canva dengan cara yang serupa.

Ingat lagi, semua tentang desain adalah menggunakan pola manusia untuk mencapai kemudahan.

Siap? yuk lanjut lagi.

Terms - Repetition

Pengulangan menciptakan konsistensi dengan mengulang elemen yang sama dalam tata letak beberapa kali.

Tak seperti playboy yang tak pernah konsisten atau hutang yang tak pernah dibayar dengan stabil, desain yang tak memiliki repetisi akan menerima konsekuen.

Membuat desain yang tak menganut repetisi,

Acak adul, semrawut, tidak teratur, sak-sak e.

Bikin user atau pengguna, atau bahkan pelanggan anda pusing.

Jangan lupa, semua tentang desain adalah menggunakan pola manusia untuk mencapai kemudahan.

Maka mulailah membuat desain yang konsisten. Konsisten bukan berarti monoton, membosankan, boring atau jelek. Namun membuat user atau pengguna dapat memahami visual dengan mudah menggunakan repetisi memang harus diperlukan.

Demikianlah tak heran produk desain hebat UI/UX seperti Gojek, Tokopedia, Shoope atau Aplikasi dengan pengguna banyak lainnya memanglah boring dan membosankan bukan? Tak berisi warna-warni, font yang bermacam-macam, jumlah desain ukuran font yang segede gaban.

Terms - Contrast

Kontras adalah tingkat perbedaan antara elemen desain yang berbeda untuk menciptakan hierarki visual. Variasi tersebut dapat berupa bentuk, warna, tekstur, dan ukuran.

Contohnya?

teks ini lebih sulit dibaca

dibanding teks ini

Ya, kan?

Demikianlah kamu bisa menggunakan kontras untuk menciptakan hierarki. Selain itu juga membuat teks kamu lebih mudah dibaca karena tidak berkonflik di background belakangnya. Coba bayangkan saja kertas putih kamu tulis pakai spidol putih atau abu-abu. Bandingkan dengan hitam pekat, mana yang lebih mudah dibaca? Silahkan jawab sendiri.

Sebenarnya, ada 100an terms lagi yang belum saya sebutkan dan tak akan saya sebutkan karena nanti artikelnya kepanjangan. Ini adalah 5 terms yang paling saya anjurkan untuk diketahui secara umum dan profesional tentang desain.

Sekarang,

kita akan masuk ke chapter berikutnya: Tooling.

Mengetahui alat apa dan apa yang harus dilakukan dari tooling yang kita miliki. Pastinya yang membantu kita sebagai desainer pemula.

Sudah siap? Mari kita coba!

Tools - Figma

Figma, tool UI/UX paling fenomenal - dicoding

Figma adalah one-in-place desain tool yang sudah digunakan jutaan desainer di seluruh muka bumi.

Yang paling gila dari figma, teknologi cloud. Kamu bisa menyimpan file-file kamu tanpa harus menghilangkan disk space penyimpanan. Mengaksesnya dengan internet kapan saja. Membuatnya lebih fleksibel dan mudah digunakan bahkan meningkatkan performa dan produktifitas.

Komunitas yang gila besarnya. Kamu bisa mendapatkan berbagai macam sumber jenis desain di community figma.

Kalau kamu belum coba, langsung coba saja.

Saran saya, silahkan pelajari dulu toolsnya, pelajari shortcutnya kalau bisa.

Jam terbang pasti menentukan. Silahkan berlatih agar mendapatkan desain yang baik ke depannya.

Tools - Dribbble

Dribbble adalah website untuk melihat hasil-hasil karya design UI/UX terutama untuk web design. Saya tahu berpikir kreatif itu sangat susah, terutama jika kita tidak memiliki banyak jam terbang atau jarang latihan.

Maka dari itu tempat inspirasi kalian: Dribbble

Mau pake ATM (Amati, Tiru, Modifikasi) atau mau plek kek. Terserah kalian. Hanya ikuti aturan platform. Jika hasil karya dilindungi, jangan dipaksa pakai apalagi digunakan untuk komersial.

Tools - Coolors

Warna adalah aspek penting dari kehidupan kita. Pasalnya, setiap hari kita melihat warna.

Coolors adalah situs pencari theme warna favorite saya. Anda dapat memilih palete warna yang cocok dengan apa yang anda mau. Pilihan warnanya juga beragam, bisa lihat warna yang lagi trending juga.

Anda bisa belajar teori warna kalau mau. Belajar tentang psikologinya. Tetapi kalau anda tidak punya waktu atau tidak mau belajar, coolors solusinya.

Sekali lagi, masih banyak tools yang saya bisa bagikan. Namun agar artikel ini tidak terlalu panjang nanti akan saya bahas di artikel terpisah.

Summary

Tak pernah saya lupa ingatkan:

Semua tentang desain adalah menggunakan pola manusia untuk mencapai kemudahan.

Selain itu:

Ingat, karya yang menyenangkan secara visual dan tata letak yang fungsional.

Jadilah original dan sekreatif mungkin. Gunakan referensi sebagai inspirasi.

Nggak cuma harus pinter bikin copy, pengembangan atau jualan. Desain itu ilmu yang penting. Kalau kamu bisa tambahin desain yang bagus, itulah yang dinamakan

Kesempurnaan

Ilmu ini bisa kalian terapin buat banyak hal, dari desain UI/UX, web design, landing page, poster, sales page yang sukses, social media carousel, story atau sesimpel status whatsapp.

Sudah siap berkarya? Langsung praktek aja!

Semoga bermanfaat, VArtz