Belajar mengenai desain website bisa kamu peroleh melalui bootcamp atau kelas khusus. Belakangan ini kelas mengenai desain website cukup laris manis, terutama untuk kamu yang tertarik berkarier di digital marketing. Pasalnya, pemasaran digital rasanya tidak bisa lepas dari keberadaan website.
Website seolah menjadi “rumah” bagi brand atau perusahaan. Lewat website, pelanggan dapat menemukan apa yang mereka butuhkan. Bahkan, citra dari sebuah brand pun haruslah tercermin dari tampilan website secara keseluruhan.
Berkaca dari hal tersebut, wajar jika kemudian desain website menjadi hal menarik yang bisa kamu pelajari. Andai kamu tertarik mempelajarinya, mengikuti kursus desain website adalah solusi terbaik. Dari situ, kamu bisa mendapatkan banyak materi seputar desain secara komprehensif.
Sebelum memutuskan bootcamp desain website yang tepat, ada baiknya kamu pahami dulu beberapa dasar dari bidang tersebut. Kali ini Tim Belajar Lagi sudah merangkumnya buat kamu. Simak ya!
Panduan dasar desain website
Saat berbicara tentang mendesain website, orang-orang pasti terpaku pada estetika tampilannya. Apakah warna pada website sudah tepat? Apakah posisi logo sebaiknya sebelah kanan atau kiri? Apakah web banner yang terpasang cukup pas untuk pengunjung lihat?
Namun, bukan berarti bagus tidaknya sebuah website hanya bergantung pada estetika semata. Ada hal yang tidak kalah penting dari itu. Misalnya, kenyamanan pengunjung saat menggunakannya, fungsi website sudah tepat guna, dan lain-lain. Oleh sebab itu, mendesain website sifatnya cukup kompleks karena melibatkan banyak aspek.
Berikut beberapa prinsip-prinsip dasar dalam mendesain website yang biasa jadi patokan para website designer dalam bekerja. Pelajari dan cermati satu per satu ya!
1. Simplicity
Meskipun tampilan website itu penting, tetapi ingat bahwa tidak semua orang menjadikan itu sebagai hal utama. Bagi pengunjung, yang terpenting adalah informasi apa saja yang bisa mereka dapatkan dari website. Maka, para website designer biasanya menghindari penggunaan elemen-elemen yang sifatnya kurang fungsional.
Dari perspektif user experience (UX), simplicity alias kesederhanaan adalah poin utama. Saat tampilan website terlalu rumit, tentu pengunjung akan cepat meninggalkan situs tersebut. Berikut beberapa poin penting dalam prinsip simplicity:
- Warna. Jangan gunakan terlalu banyak warna. Gunakan maksimal lima warna berbeda saat mendesain website.
- Jenis huruf. Penting untuk memilih jenis huruf yang mudah terbaca. Warna pada teks juga pastikan kontras dengan warna background. Gunakan maksimal tiga tipografi berbeda dalam website.
- Grafis. Gunakan grafis dalam porsi cukup, bukan berlebihan. Apalagi jika tujuannya hanya ingin terlihat lebih “ramai”.
2. Visual hierarchy
Terkait dengan prinsip sebelumnya, visual hierarchy berperan dalam pengaturan berbagai elemen dalam website. Tujuan utamanya adalah menggiring pengunjung pada elemen paling penting. Misalnya, CTA, promo, pembelian produk, dan lain-lain.
Elemen yang menjadi target buat pengunjung haruslah menarik dan menonjol. Itu artinya, pengunjung nantinya dapat mudah menemukan elemen tersebut tanpa harus membaca keseluruhan isi website. Hal penting yang terkait dengan itu antara lain penyesuaian posisi, warna, teks, hingga ukuran.
Berikut contoh visual hierarchy yang bisa kamu pelajari dari Spotify. Pada desain website ini, headline “Get 3 months of Premium for free” terletak pada bagian atas dengan mode bold. Saat pertama kali pengunjung mendatangi website ini, tentu saja elemen tersebut mampu menarik minat mereka. Pengunjung tinggal meng-klik CTA untuk melanjutkan tindakan.
3. Navigability
Perencanaan navigasi menjadi hal penting dalam mendesain sebuah website. Pasalnya, pengunjung harus merasakan kemudahan saat menjelajahi website. Bergerak dari satu tindakan ke tindakan tanpa kesulitan sehingga pengunjung pun nyaman.
Melansir dari HubSpot, berikut beberapa tips dalam mengoptimalkan navigasi website:
- Pertahankan struktur navigasi pada halaman utama tetap sederhana
- Sertakan juga navigasi pada bagian footer website
- Tampilkan kolom pencarian untuk memudahkan pengunjung mencari sesuatu
- Hindari memberi banyak navigasi pada setiap halaman, buatlah sederhana
- Tautkan link dalam sebuah copywriting
- Buat wireframe map sesederhana mungkin, misalnya seperti:
4. Consistency
Ingat pula untuk selalu konsisten, terutama jika berhubungan dengan background, warna, tipografi, hingga bentuk copywriting-nya. Tampilan website yang konsisten akan menaikkan kenyamanan pengunjung saat berselancar di website.
Namun, bukan berarti mesti membuat layout atau tata letak yang sama persis pada setiap halaman. Agar lebih menarik bagi pengunjung, mengubah layout boleh dilakukan asalkan tetap konsisten pada hal-hal tadi.
5. Responsivity
Menurut HubSpot, sebuah website paling banyak orang kunjungi lewat perangkat mobile. Mulai dari smartphone hingga tablet. Ketika tampilan website kurang mobile friendly, pengunjung dapat dengan mudah meninggalkan situs tersebut.
Itu artinya, inilah pentingnya sebuah website mesti responsif untuk berbagai perangkat. Bukan hanya sekadar computer friendly. Apalagi kemudahan teknologi membuat orang-orang bisa menjelajah dunia lewat smartphone.
Responsive design berarti harus berfungsi secara fleksibel. Konten dapat otomatis berubah ukurannya, menyesuaikan perangkat yang orang gunakan. Dengan begitu, pengunjung dapat memperoleh kepuasan yang sama dari berbagai perangkat.
Selain itu, penting juga untuk mengecek kompatibilitas website pada berbagai web browser. Misalnya, Google Chrome, Firefox, dan lain-lain. Pasalnya, tidak semua orang akan memakai web browser yang sama bukan?
6. Accessibility
Tujuan utama dari accessibility adalah siapa pun dapat mengakses website, termasuk orang dengan disabilitas tertentu. Seorang website designer ada kalanya butuh memikirkan hal ini juga.
Sama halnya seperti responsive tadi, accessibility di sini cakupannya termasuk struktur, format halaman, hingga konten (baik tulisan maupun visual). Melansir dari HubSpot, berikut beberapa rambu-rambu yang berkenaan dengan accessibility:
- Perceivable: Pengunjung sadar akan keberadaan website
- Operable: Website dapat dioperasikan dalam berbagai cara
- Understandable: Pengunjung mudah memahami semua isi konten dalam website
- Robust: Website ramah dikunjungi dari berbagai perangkat, teknologi, dan browser
7. Conventionality
Tantangan terbesar dalam mendesain website adalah menjaga conventionality. Beberapa hal yang termasuk dalam conventionality adalah:
- Meletakkan navigasi utama pada bagian atas halaman
- Menempatkan logo pada kiri atas halaman
- Membuat sebuah logo dapat di-klik untuk membawa pengunjung ke halaman utama
- Membuat tautan dan tombol yang dapat berubah warna ketika pengunjung mengarahkan kursor ke arahnya
- Dan lain-lain.
Mengapa hal-hal tersebut menjadi tantangan? Kebanyakan web designer pasti punya ekspektasi sendiri terhadap website yang mereka desain. Membuat tampilan website tetap “konvensional” terasa sulit bagi sebagian orang yang suka berinovasi.
Maka, sekalipun ingin membuat website semenarik apa pun, web designer mesti tetap berpegang pada dasar-dasar tadi. Ingat, kenyamanan pengunjung adalah tujuan utamanya.
8. Credibility
Yang tidak kalah penting dalam pembuatan desain website adalah kredibilitas. Tampilan website haruslah mencerminkan kredibilitas sehingga pengunjung pun lebih mudah percaya. Oleh sebab itu, penting juga untuk tetap berpatokan pada conventionality yang sudah kamu baca sebelumnya.
Cara termudah untuk meningkatkan kredibilitas adalah dengan jujur memaparkan jasa atau produk yang ditawarkan. Jangan biarkan pengunjung berputar-putar menjelajahi website untuk menemukan hal tersebut. Berikan hal yang pengunjung butuhkan pada beranda halaman.
Tips lainnya, cantumkan harga produk atau jasa pada bagian beranda. Dengan begitu, pengunjung dapat langsung menemukan apa yang mereka butuhkan. Contohnya seperti ini:
9. User-centricity
Akhirnya, kunci terakhir dari prinsip-prinsip dasar dalam mendesain website terletak pada pengujian pada pengguna. Dalam hal ini, seorang web designer akan mengumpulkan banyak feedback guna meningkatkan tampilan website.
Saat pengujian, sebaiknya web designer tidak mengujinya sendiri. Artinya, hal tersebut mesti dilakukan oleh orang lain. Dengan begitu, bagus tidaknya tampilan website menjadi lebih objektif.
Selain itu, bisa juga melalui testing tools seperti Website Grader, Crazy Egg, Loop11, dan lain-lain. Dari tools tersebut, web designer dapat mengevaluasi berbagai hal. Mulai dari performa, mobile, desain, dan lain-lain.
Baca Juga: Mengenal tentang UI/UX dan Prospek Kerjanya
Tips membuat desain website
Setelah mempelajari dasar-dasar penting dalam mendesain website, kamu jadi punya gambaran hal-hal apa saja yang mesti kamu perhatikan. Berikut tips-tips dalam mendesain website yang kamu pelajari sebelum ikut bootcamp desain website:
Tipografi mudah dibaca
Konteks tipografi pada aspek ini bukan sebatas jenis huruf dan ukurannya, melainkan juga maknanya. Karakter huruf haruslah mencerminkan citra sebuah brand. Bahkan, cara mengatur tulisan atau copywriting-nya haruslah menggugah perasaan pengunjung website.
Idealnya, jenis dan bentuk huruf pada desain website haruslah:
- Mudah terbaca
- Mudah terakses pengunjung
- Mudah terbaca dengan berbagai perangkat (komputer, smartphone, tablet, dan lain-lain)
Pilih warna sesuai brand
Sama halnya seperti tipografi, pemilihan warna pada desain website bukan hanya untuk estetika semata. Lewat warna-warna yang ada, harapannya pengunjung website dapat merasakan nilai atau value yang sebuah brand usung.
Melansir dari HubSpot, warna pada website haruslah:
- Memperkuat identitas sebuah brand
- Membuat website mudah terbaca
- Memunculkan emosi pengunjung
- Terlihat bagus dan menarik
Contoh pemilihan warna yang cukup bagus dan mampu menarik perhatian pengunjung ada pada website Buzzfeed. Warna kuning dan merah yang berfungsi sebagai warna primer terlihat mencolok dan menarik. Sementara, warna pada judul artikel adalah biru. Kombinasi warna-warna tersebut sangat bagus untuk menarik rasa ingin tahu pengunjung.
Tambahkan tekstur
Penambahan tekstur tertentu pada website bertujuan untuk mereplikasikan sensasi visual yang berbeda kepada pengunjung. Memunculkan tekstur dapat juga memperdalam citra brand, terlebih untuk brand yang punya kekuatan pada storytelling.
Berikut contoh penggunaan tekstur pada sebuah website restoran Mony’s Tacos. Dalam desain tersebut, ilustrasi yang ada tampak seperti kapur yang tertulis pada papan tulis. Meski tidak nyata, tekstur yang ada sangat menyerupai versi aslinya.
Penggunaan desain ala papan tulis ini bertujuan mendekatkan pengunjung pada restoran, sama seperti saat mereka datang langsung ke sana. Ya, penulisan menu pada papan memang menjadi ciri khas restoran tersebut.
Tambahkan gambar dan informasi
Dalam mendesain sebuah website, keseimbangan antara tulisan dan gambar adalah hal penting. Sebuah website akan terasa menjemukan bagi pengunjung saat isinya hanya berupa tulisan. Sebaliknya, pengunjung juga akan kesulitan mendapatkan informasi jika isi website kebanyakan berupa gambar saja.
Agar lebih informatif dan menarik, seorang web designer mesti memadukan komposisi gambar dan informasi dengan tepat. Sifat dasar manusia adalah lebih mudah mengingat secara visual daripada sekadar membacanya. Jadi, sebisa mungkin masukkan gambar relevan ke dalam website.
Berikut ini contoh sebuah desain website yang memadukan gambar sekaligus tulisan dalam satu copywriting. Ide ini cukup menarik karena simpel sekaligus menjelaskan informasi secara visual dengan apik.
CTA harus jelas
Ingat, CTA adalah elemen terpenting untuk menarik pengunjung melakukan suatu tindakan. CTA kerap orang pakai baik itu dalam konten, iklan, hingga website. Saking pentingnya CTA ini, keberadaannya tidaklah boleh disepelekan.
Bentuk CTA juga beragam, mulai dari ajakan membeli, ajakan berlangganan, ajakan mencoba gratis, dan lain-lain. Biasanya CTA inilah yang paling pengunjung cari setelah menjelalah website. Untuk memunculkan CTA dalam website, pertimbangkan untuk pemilihan warna background, jenis huruf, gambar background, dan lain-lain.
Bentuk CTA paling umum adalah berbentuk persegi panjang dengan warna lebih mencolok daripada warna lain. Huruf untuk CTA biasanya berupa bold dengan warna yang kontras dengan background-nya.
Optimasi versi mobile
Sekali lagi, membuat desain website yang mobile friendly sangat penting. Ingat, kebanyakan pengunjung mengakses website dari perangkat pribadi seperti smartphone. Maka, pastikan tampilan website lewat mobile benar-benar rapi dan baik.
Saat melakukan optimasi versi mobile, bisa jadi seorang web designer mesti menghapus beberapa elemen. Sebagai contoh, kamu bisa pelajari perbedaan tampilan website sebuah brand dalam versi desktop dan mobile berikut ini.
Dalam versi mobile, gambar pada menu tampak lebih besar sehingga memungkinkan pengunjung lebih mudah meng-klik. Ukuran tulisan versi mobile juga menyesuaikan agar lebih nyaman terbaca.
Bootcamp desain website online
Nah, belajar desain website dapat melalui bootcamp atau kelas khusus. Zaman sekarang, sudah banyak tempat kursus desain website yang bisa kamu akses secara online. Mulai dari yang gratis hingga berbayar, lumayan kan!
Kamu dapat memilih kelas yang sesuai dengan tujuan dan bujetmu terlebih dahulu. Jika merasa butuh belajar dari paling dasar, mengikuti kelas yang gratis juga bisa kok. Andai kamu merasa lebih membutuhkan sertifikasi untuk berkarier, pilihan yang berbayar juga ada.
Berikut beberapa rekomendasi kelas yang bisa kamu ikuti:
1. Responsive Web Design
Bootcamp desain website yang pertama ini sifatnya gratis. Penyelenggaranya adalah freeCodeCamp yang sudah terkenal sebagai platform belajar terbaik untuk sertifikasi web developer.
Topik utama dalam pembelajaran ini adalah basic responsive design, accessibility, dan typography. Total waktu belajarnya kurang lebih 300 jam. Kelebihan kelas ini adalah adanya tugas-tugas sebagai media praktik langsung. Selain itu, kamu bisa juga belajar membangun portofolio sendiri selepas mengikuti kursus ini.
Kelas Responsive Web Design juga memberikan sertifikasi secara gratis. Pas banget buat bekal kamu melamar kerja. Karena sifatnya belajar dari dasar, kelas ini kurang cocok untuk kategori advanced ya.
2. Dash By General Assembly
Kursus dari General Assembly sifatnya lebih fleksibel karena peserta dapat memilih jenis kelas mingguan ataupun harian. Platform ini juga menyediakan tutor berpengalaman yang dapat membimbing para peserta secara intensif.
Kelas ini memberikan keterampilan dalam HTML, CSS, dan JavaScript untuk membuat desain website yang dinamis. Sifat kelasnya juga sangat interaktif dengan tambahan tugas untuk memperdalam kemampuan peserta.
Kelas Dash by General Assembly ini juga gratis dengan total jam belajar kurang lebih 10 jam. Hanya saja, kamu butuh upgrade jika ingin mendapatkan materi yang dalam.
3. Webflow University Ultimate Web Design Course
Kursus ini juga gratis dengan menawarkan tutorial desain website secara komprehensif. Kurikulumnya cukup lengkap, mulai dari HTML dasar, CSS, desain 3D, tipografi, bahkan hingga SEO. Dengan durasi hanya lima jam, peserta dapat belajar dasar-dasar mendesain website dengan lebih ringkas.
Kelas ini lebih cocok sebagai pengenalan akan desain website sebelum nanti lanjut ke kelas yang tingkatannya lebih tinggi. Buat kamu yang masih awam dengan desain website, bisa lho mengikuti Ultimate Web Design Course ini. Meski tidak menyediakan sertifikat, kelas ini cukup fleksibel untuk kamu ikuti.
4. Udemy Web Design for Beginners
Nah, salah kursus dari Udemy ini berbayar. Dengan harga $19.99, peserta mendapatkan pembelajaran mengenai HTML5, CSS3, JavaScript, Bootstrap, dan responsive design selama 11 jam. Lumayan juga ya?
Dalam kursus in, terdapat 71 modul yang terdiri dari video berdurasi sepuluh hingga enam puluh menit. Beberapa perusahaan besar menggunakan kursus ini untuk meningkatkan keterampilan karyawan dalam desain website. Nah, sepertinya ini cocok buat kamu yang ingin meningkatkan skill saat bekerja nanti.
5. Alison How to Create Your First Website
Satu lagi bootcamp desain website yang gratis ada di platform Alison. Kelas ini memberikan pengajaran pada peserta yang ingin membangun website pertama kali. Maka, materi-materi yang ada dalam kursus ini tentu saja dari dasar-dasarnya.
Meskipun kelas ini tidak secara utuh menyiapkanmu untuk berkarier dalam pengembangan website, ini jadi awal mula paling pas untuk belajar. Setidaknya, kamu tidak terlalu kesulitan mengikuti materi karena benar-benar dari nol. Bonusnya, kamu bisa membuat website sendiri.
Total durasi belajarnya adalah tiga jam dengan jam kelas yang fleksibel. Sertifikat akan diberikan bagi peserta yang mampu menunjukkan website buatannya. Lumayan nih untuk mempermanis portofolio.
Baca Juga: Kamu Wajib Tahu, Kenali Seluk-Beluk UI UX untuk Pemula
Kesimpulan
Mengikuti bootcamp desain website dapat menjadi alternatif belajar terbaik untuk kamu yang tertarik menjadi web designer. Sebelum mengikuti kursus, ada baiknya kamu pelajari dulu beberapa dasar dalam mendesain website. Dengan begitu, kamu tidak akan terlalu kesulitan saat mengikuti kelas nanti.
Tentukan juga tujuanmu mengikuti kelas agar bisa memilih kursus yang paling cocok. Entah itu berbayar atau gratis, pastikan kamu punya tujuan jelas ya. Jika berniat mengembangkan skill mendesain website, kelas berbayar mungkin jadi opsi terbaik.
