Kode VS Desain – Mengapa keduanya harus berjalan beriringan?

Haruskah desainer hanya fokus pada seni visual branding situs web? Apakah pengembang hanya seharusnya tahu cara membuat kode? Apa pentingnya pengembangan Front-end di Drupal? Temukan jawaban atas semua pertanyaan Anda di artikel ini.

Ketika kita mempelajari lebih dalam teka-teki desain vs kode ini, terpikir oleh kita bahwa keduanya sebenarnya saling melengkapi. Tapi pertanyaannya adalah mengapa? Mengapa desainer UI/UX harus mempelajari kode dan dasar-dasarnya dan hal yang sama berlaku untuk pengembang juga dalam hal desain.

Kedua domain melibatkan menjadi kreatif, memahami pengguna dan perilaku mereka. Menjadi seorang desainer tanpa mengetahui keterampilan pengkodean dasar dan struktur kode seperti menyiapkan kue setengah matang, yang setelah makan mungkin membawa Anda ke kamar mandi.

Tapi pertama-tama, mari kita ke dasar-dasarnya dengan sebuah contoh.

Merancang Vs Coding : Kesamaan dengan Perbedaan

Bagi seorang penulis, seseorang harus membayangkan dan menyimpulkan pemikirannya sebelum benar-benar menuliskannya. Tidak ada yang hanya mengambil buku harian atau pergi ke blog atau platform media sosial dan langsung mulai menulis. Itulah mengapa seluruh prosedur disebut menulis. Dan ya, menulis email di Gmail juga disebut "menulis". Sekarang, mengapa kita berbicara tentang penulis, komposisi, dan semuanya. Mari kita potong untuk mengejar. Dalam hal ini, imajinasi adalah desain Anda dan menuliskan pemikiran Anda adalah pengembangan. Saya harap Anda mendapatkan gambaran yang lebih baik sekarang; mari kita beralih ke sisi yang berbeda dari topik ini.

Haruskah Desainer belajar Kode dan Pengembang belajar tentang UI/UX?

Selama sprint kode-desain, Anda mungkin menemukan situasi di mana semua desain yang dibuat tidak layak. Akhirnya, produk akhir menjadi versi tweak dari desain asli. Diskusi terjadi, klien mengubah persyaratan, tetapi masalah tetap konsisten. Situasi ini dapat dihindari jika tim desain dan pengembangan akan bekerja sama secara bersamaan sejak awal. Dengan begitu, pekerjaan dapat diselesaikan dengan lebih efisien karena mereka terus mendapatkan umpan balik dari satu sama lain tentang apa yang bisa dilakukan atau tidak.

Memahami kedua domain tidak sesulit yang Anda bayangkan. Dalam keduanya, dibutuhkan imajinasi, proses berpikir dan latihan. Dan ya, belum lagi, keterampilan dasarnya adalah desain dan kode, yang merupakan pilihan untuk dipelajari tetapi tidak wajib jika Anda mengetahuinya.

Seorang desainer harus mengetahui kelayakan, kemungkinan dan tantangan dari sebuah desain dan Anda hanya bisa mengetahuinya jika Anda tahu bagaimana mencapainya melalui kode. Hal yang sama berlaku untuk pengembang juga. Ketika pengembang memahami berbagai skenario yang dapat dilalui pengguna, pengalaman pengguna, pemecahan masalah, solusi, dll., itu dapat membuat segalanya jauh lebih disederhanakan dan efisien.

Berikut adalah alasan mengapa seseorang harus mempelajari dasar-dasar salah satu keterampilan (kode atau desain) selain dari keahlian inti mereka

1. Kontrol lebih besar atas tampilan dan nuansa produk: Pada dasarnya ini berarti bahwa ketika pengembang mengetahui cara kerja analisis desain dan proses desain apa yang terlibat, ia dapat mengadaptasi ide desain tersebut dan memiliki kontrol lebih besar atas produk akhir dan dengan demikian menghasilkan pengiriman produk yang lebih cepat.
2. Memahami pengguna dan menerapkannya pada desain: Ketika seorang pengembang memahami produk dari sudut pandang pengguna, itu memberinya kekuatan besar untuk membangun sesuatu yang benar-benar dibutuhkan dan diinginkan pengguna. Misalnya, dia akan memahami bagaimana pengguna akan bereaksi terhadap tipografi yang berbeda, gaya tombol yang berbeda, skema warna, dll.
3. Adaptasi Desain: Sama pentingnya bagi desainer untuk mengetahui kode. Ketika dia tahu bagaimana produk yang dirancang akan terstruktur saat sedang dikembangkan, dia idealnya dapat meningkatkan desain dan membuatnya lebih efisien, sehingga mengurangi waktu dan tenaga yang dikeluarkan oleh pengembang.

Menguraikan konsekuensi hanya memiliki keahlian inti dengan Contoh

Untuk pemahaman yang lebih baik tentang mengapa Perancangan dan Pengodean harus berjalan beriringan, mari selami beberapa contoh.

Di atas adalah contoh klasik penggunaan struktur non-sekuensial. Di sini strukturnya diatur ulang saat sedang dikembangkan untuk seluler. Ini bukan hanya praktik yang buruk; itu juga memakan waktu dan rumit. Namun, jika seorang desainer mengetahui struktur kode yang sedang dikembangkan, itu bisa dengan mudah dan mungkin dihindari.

Pertimbangkan contoh overlay pop-up dengan scroll di atas. Hamparan pop-up dirancang sedemikian rupa sehingga harus mengalihkan perhatian pengguna ke satu subjek dan hanya digunakan sebagai fokus saat informasi tertentu perlu ditampilkan. Di sini, hamparan pop-up memiliki gulungan di latar belakang yang mungkin mengalihkan perhatian pengguna dan mungkin tidak membuktikan bahwa pop-up tidak efektif

Pengembang selalu berfokus untuk menyelesaikan tugas dengan lebih efisien dan dengan kecepatan yang lebih cepat, dan dalam prosesnya ia melewatkan beberapa aspek desain, yang mungkin dianggap tidak perlu atau dapat dilakukan dengan sedikit mengubah desain. Contoh yang disebutkan di atas menunjukkan skenario yang tepat ketika seorang pengembang melakukan pekerjaan mereka tetapi akhirnya mengorbankan desain. Jadi, jika pengembang memiliki paparan UI/UX dasar, masalah ini mungkin dan dengan mudah dapat dihindari.

Sebagai contoh lain, mari kita ambil screenshot di atas yang berasal dari aplikasi penghemat uang. Tugas itu sendiri tidak memiliki bidang input untuk tanda tangan digital. Selain itu, saat mengirimkan formulir, pesan kesalahan tidak memberikan panduan atau saran kepada pengguna tentang cara mendapatkan tanda tangan digital yang valid. Jika pengembang mengetahui dasar-dasar UI/UX, ia dapat dengan mudah memandu pengguna pada proses selanjutnya atau dapat menampilkan pesan dengan cara yang lebih sederhana dengan referensi yang tepat ke bidang atau saran.

Mulai dari mana?

Memulai selalu merupakan ide yang bagus. Untuk desainer, dasar-dasar yang harus dipelajari adalah HTML, CSS dan sedikit JS/jQuery. Ada banyak platform pembelajaran online dan situs web dengan alat IDE langsung untuk Anda praktikkan dan pelajari.

HTML : Struktur dasar desain apa pun didahulukan, dan ini adalah kode produk apa pun.
JS/jQuery: Slider, pop-up, drop-down, dan banyak lagi dapat dicapai dengan ini
Sandbox : Alat langsung untuk bermain-main dengan kode Anda
CSS/SCSS : Menata struktur adalah proses kreatif dan Anda dapat mencapainya dengan CSS/SCSS
W3Schools: Platform pembelajaran online sederhana dan bagus untuk memulai
Codrops (Tympanus): Perpustakaan yang luas dengan desain dan pikiran pengembang di platform yang sama

Untuk pengembang, Anda dapat memulai dengan mengikuti praktik terbaik tentang UI/UX dengan -
Behance: Tumpukan desain lengkap untuk portofolio dan inspirasi profesional
Dribbble: Rancang ide untuk diposkan dan dapatkan inspirasi dari
Muzli: Blog, inspirasi, ide
Medium : Blog tentang bidang apa pun (hampir), praktik terbaik, dan tutorial
Awwwards: Situs web yang dinominasikan untuk desain terbaik dan pemenang untuk mendapatkan inspirasi
XD/Figma/Sketsa: Alat untuk mendesain maket, gambar rangka untuk UI/UX

Untuk Desainer

Untuk Pengembang

Pengembangan Front-end di Drupal

Drupal 8 sebagai CMS adalah kerangka kerja manajemen konten yang sangat ramah-desainer UI/UX karena memiliki banyak hal yang ditawarkan langsung, yang paling signifikan adalah variasi tema yang tersedia dan desain responsif. Tentu saja, ada lebih banyak fitur yang dapat saya pikirkan sekarang, tetapi mari kita simpan itu untuk hari lain.

Sementara desainer UX menerapkan keterampilan kreatif mereka dan fokus pada presentasi visual situs web Drupal, pengembang Front-end Drupal menjembatani kesenjangan antara desainer UX dan pengembang Drupal back-end. Merekalah yang mengimplementasikan komponen visual yang disampaikan oleh desainer di situs web Drupal. Meskipun perancang UX dan pengembang Front-end Drupal berpikir dalam hal pengalaman pengguna dan memecahkan masalah yang berkaitan dengan UX, mereka mengambil pendekatan yang berbeda untuk menyelesaikannya. Yang terakhir, bagaimanapun, selalu menemukan resolusi melalui kode.
Pengembang Drupal front-end bertanggung jawab untuk memberikan situs web Drupal yang indah dengan mengerjakan dan menyesuaikan tema Drupal. Mereka harus dapat memecahkan masalah front-end yang perlu dilengkapi dengan pengetahuan tentang PHP, CSS, jQuery, CSS, HTML, dan yang paling penting – mendesain situs web yang mengutamakan seluler.

Dengan semakin populernya situs web Drupal tanpa kepala dan arsitektur yang dipisahkan, pengembang Front-end Drupal yang memiliki pemahaman tentang kerangka kerja pengembangan frontend seperti Angular, ReactJS, Vue.js, selalu memiliki keunggulan kompetitif.
Jadi secara keseluruhan, untuk dapat unggul dalam pengembangan Front-end Drupal, seseorang perlu keluar dari zona nyaman mereka dan mempelajari cara terbaik untuk menciptakan dan menerapkan pengalaman digital modern yang dilengkapi dengan teknologi terbaru.