Cara Mendekati Desain untuk Pengembang

Meskipun mereka mungkin mengerjakan proyek dan produk yang sama, pengembang dan perancang sering kali bekerja terpisah satu sama lain dalam silo. Desain seringkali dianggap oleh para developer sebagai hal yang sekunder, tidak penting jika dibandingkan dengan fungsionalitas sebuah produk.

Pemikiran seperti itu dapat merusak hubungan pengembang-perancang. Tidak memiliki pemahaman dasar tentang desain dapat menghambat pengembang dalam karir mereka, atau mencegah mereka mengejar proyek hanya karena mereka tidak memiliki desainer di dalamnya.

Mengapa Pengembang Harus Belajar Desain

Sementara desain dan pengembangan sering dianggap sebagai disiplin ilmu yang terpisah, ada orang di luar sana yang telah menguasai keduanya. Bahkan jika seseorang hanya tertarik untuk menjadi seorang desainer atau pengembang—bukan keduanya—sangat berharga untuk mempelajari setidaknya dasar-dasar disiplin ilmu lainnya.

Ada beberapa alasan mengapa pengembang mungkin ingin belajar desain, atau setidaknya mengembangkan dasar dasar pengetahuan desain.

Pertama-tama, tim kecil mungkin tidak memiliki desainer khusus. Lebih jauh, ada pengembang di luar sana yang ingin menangani proyek sepenuhnya sendiri, yang tidak mampu menyewa seorang desainer (atau ingin menghabiskan uangnya di tempat lain). Belajar merancang produk mereka sendiri, setidaknya cukup baik untuk bertahan sampai seorang desainer dapat dipekerjakan adalah sumber daya yang tak ternilai.

Alasan besar lainnya bagi pengembang untuk mempelajari desain adalah agar mereka dapat bekerja lebih efektif dengan desainer. Sangat membuat frustrasi bagi seorang desainer untuk menyerahkan file yang dirancang sepenuhnya untuk situs web atau aplikasi yang mereka harapkan menjadi piksel-sempurna dalam produk jadi, hanya untuk menemukan bahwa desain mereka telah diubah secara signifikan oleh pengembang yang mengkodekannya.

Jika pengembang tidak memahami dasar-dasar desain, mereka mungkin mengabaikan detail kecil yang membuat UI sangat ramah pengguna dan secara tidak sengaja menyabot pengalaman pengguna proyek. Ketika desainer mengirim kembali banyak koreksi, itu dapat meregangkan hubungan pengembang-desainer, belum lagi memperlambat penyelesaian proyek.

Untuk meningkatkan hubungan dan kerja tim antara tim interdisipliner, pengembang akan membantu diri mereka sendiri dengan belajar melihat desain melalui "mata desainer" daripada melihatnya murni dari perspektif pengembangan—menguasai keterampilan itu akan sangat meningkatkan proyek mereka.

Menyusun Pola Pikir Desain

Terlalu sering, pengembang yang belajar mendesain terlalu fokus pada estetika desain yang mereka sukai dan ingin tiru, daripada prinsip dasar yang mendukung desain tersebut. Mereka melihat hal-hal seperti warna dan ukuran tombol, font tertentu, atau cara batas digunakan tanpa memahami alasan di balik pilihan tersebut.

Mereka mulai menyemprotkan cat ke dinding dan mendekorasi ruangan tanpa memahami tujuan dari ruangan yang mereka dekorasi (atau bahkan memastikan hal-hal seperti pipa ledeng dan pekerjaan listrik selesai), bisa dikatakan.

Sangat penting untuk memahami dan menghormati prinsip-prinsip di balik mengapa desainer membuat keputusan yang mereka lakukan. Siapa pun yang baru dalam desain membutuhkan pemahaman yang kuat tentang prinsip dan teori yang membentuk desain yang baik—hal-hal seperti Prinsip Gestalt dan hierarki visual dasar—sebelum mereka terjun dan mulai menyemprotkan cat ke mana-mana.

Yang mengatakan, itu juga umum bagi desainer baru, apakah mereka memiliki latar belakang dalam pengembangan atau tidak, untuk terjebak dalam teori. Mereka menghabiskan begitu banyak waktu untuk belajar dan berpikir tentang hal-hal yang tidak pernah mereka dapatkan untuk benar-benar menerapkan apa yang mereka pelajari.

Baik desainer maupun pengembang cenderung perfeksionis. Tetapi mendorong desain sebelum sempurna (karena kemungkinan tidak akan pernah sempurna) penting untuk prosesnya. Desainer baru khususnya, perlu mendorong rasa tidak aman mereka, menempatkan pekerjaan mereka di luar sana, dan belajar dari umpan balik yang mereka terima.

Salah satu cara terbaik untuk benar-benar mempelajari desain adalah dengan mencoba membuat ulang desain orang lain. Memilah apa yang berhasil dan yang tidak, dan mencari tahu mengapa desain tertentu menarik adalah salah satu keterampilan paling berharga yang dapat dipelajari oleh seorang desainer atau pengembang baru. Menempatkan putaran unik pada desain yang ada adalah hal biasa di industri (dibuktikan dengan fitur "Rebound" Dribbble).

Mendesain di Browser

Banyak desainer menolak mendesain secara langsung di browser, karena ini biasanya berarti mereka harus nyaman menulis setidaknya kode HTML dan CSS dasar. Itulah alasan yang tepat mengapa sering kali sangat cocok untuk pengembang yang masuk ke desain—mereka sudah nyaman menulis kode.

Ada alat yang dapat membantu mendesain di browser dan dapat membuat hidup desainer dan pengembang lebih mudah. Plugin browser sederhana tersedia untuk semuanya, mulai dari memilih palet warna hingga menjelajahi kode CSS dan HTML situs lain.

Ada juga alat yang lebih kompleks seperti Figma yang bertindak seperti alat desain berfitur lengkap langsung di browser. Figma memungkinkan desainer untuk berkolaborasi, mengirim aset ke pemangku kepentingan (dan bahkan membiarkan mereka membuat perubahan pada konten dan salinan desain), dan memungkinkan pengembang memiliki akses ke desain aktual secara real-time. Ini adalah opsi yang bagus untuk desainer-developer yang ingin membuat desain dan sistem desain yang dapat ditingkatkan dari waktu ke waktu.

Webflow adalah opsi lain untuk mendesain di browser yang mungkin disukai pengembang. Sementara antarmuka desain visual, kode yang diekspor bersih, CSS semantik dan HTML yang akan dihargai pengembang (tidak semua alat desain visual mengekspor kode bersih). Webflow mencakup alat untuk desain dan tata letak, serta alat CMS dan eCommerce bawaan, serta opsi hosting.

Penggunaan Warna, Tipografi, dan Tata Letak

Sebelum menyelami prinsip visual warna, tipografi, dan tata letak, penting untuk membicarakan kegunaan dasar. Desain yang paling estetis di dunia tidak berguna jika tidak dapat digunakan.

Salah satu prinsip kegunaan yang paling penting adalah ide konsistensi atau prediktabilitas. Desain harus cukup dapat diprediksi sehingga pengguna dapat secara intuitif memahami cara menggunakannya. Misalnya, teks bergaris bawah biru untuk tautan yang dapat diklik, menu navigasi yang lengkap dan diberi label dengan baik, dll. Jarak antar elemen, tipografi, dan skema warna juga harus konsisten.

Prinsip kegunaan lain yang harus dipertimbangkan dalam setiap proyek desain mencakup hal-hal seperti pencegahan kesalahan (dan pesan kesalahan yang informatif ketika kesalahan terjadi), bahasa yang familiar (menggunakan bahasa yang biasa digunakan orang, daripada alternatif "lucu" atau kreatif yang mungkin tidak jelas. ), fleksibilitas dan efisiensi, dan bantuan yang tersedia dengan mudah. Nielsen Norman Group memiliki heuristik kegunaan tambahan yang juga harus diingat.

Evaluasi kegunaan harus dilakukan selama proses desain dan pengembangan untuk memastikan produk berfungsi seperti yang dimaksudkan oleh tim desain dan pengembangan, dan agar pengguna tidak bingung. Evaluasi heuristik melibatkan membandingkan daftar prinsip-prinsip desain yang telah ditetapkan bahwa suatu produk harus mengikuti dengan produk yang sebenarnya untuk melihat di mana penyimpangan terjadi (dan kemudian memperbaiki penyimpangan tersebut).

Setelah kegunaan dipahami secara menyeluruh dalam kaitannya dengan produk yang ada, desainer-pengembang dapat beralih ke aspek desain yang lebih visual.

Teori Warna Dasar

Teori warna adalah salah satu aspek yang paling kompleks dari desain visual. Mengubah sedikit nuansa dapat sepenuhnya mengubah dampak visual dan efek emosional dari suatu warna. Itu salah satu alasan banyak desainer yang telah berkecimpung di industri ini selama bertahun-tahun masih berjuang dengan warna.

Sementara banyak buku telah ditulis tentang teori warna, ada beberapa prinsip dasar yang dapat dipelajari oleh desainer-pengembang untuk memulai. Gabungkan dengan salah satu dari banyak alat desain warna yang tersedia, dan palet warna yang menyenangkan dapat dibuat dengan cukup mudah.

Pertama, perbedaan antara warna hangat, warna dingin, dan warna netral. Warna-warna hangat termasuk merah, oranye, dan kuning. Warna-warna hangat umumnya akan bersemangat dan memberi energi. Warna-warna dingin termasuk hijau, biru, dan ungu. Warna-warna ini biasanya lebih tenang dan santai.

Netral termasuk putih, hitam, abu-abu, coklat, dan krem. Menambahkan warna putih, hitam, atau abu-abu ke warna hangat atau dingin akan mengubah makna dan dampaknya. Putih akan mencerahkan warna dan umumnya membuat efeknya kurang intens atau lebih positif (misalnya, ungu dianggap sebagai warna agung yang misterius, sedangkan lilac sering dikaitkan dengan musim semi dan kebahagiaan). Abu-abu akan menonaktifkan warna dan dapat mengurangi dampaknya. Hitam menggelapkan warna dan dapat membuatnya tampak lebih konservatif (pertimbangkan dampak berbeda dari warna seperti biru terang vs biru tua).

Setelah seorang desainer memiliki pemahaman dasar tentang makna warna, mereka dapat menggunakan alat seperti Coolors, Design Seeds, atau Colormind untuk menghasilkan palet akhir yang terkoordinasi untuk desain mereka.

Menggunakan Warna HSL

Ketika seorang desainer memikirkan warna web, mereka sering berpikir dalam hal nilai hex. Meskipun ini telah menjadi standar industri dalam hal warna web, pengembang mungkin menemukan bahwa bekerja dengan nilai warna HSL lebih masuk akal.

Bagi kebanyakan orang (termasuk desainer), nilai hex tampaknya tidak memiliki korelasi satu sama lain. Dua warna yang terlihat sangat mirip mungkin memiliki nilai heksagonal yang sama sekali berbeda. Misalnya, #68B4D4 dan #92C8E0 adalah nuansa biru yang cukup mirip (satu hanya sedikit lebih terang dan lebih terang dari yang lain) namun nilai hex mereka tidak memiliki korelasi yang jelas.

Nilai HSL mereka, bagaimanapun, menunjukkan seberapa dekat hubungannya: #68B4D4 menjadi HSL (198, 58%, 62%) dan #92C8E0 menjadi HSL (198, 56%, 73%). Angka pertama dalam urutan (198 dalam hal ini) menunjukkan rona tertentu. Angka kedua adalah persentase saturasi (seberapa cerah atau semarak warnanya). Angka ketiga adalah persentase kecerahan (atau putih tambahan) warna.

Karena korelasi antara nilai warna sangat mudah dilihat dengan HSL vs hex, pengembang sering menemukan bahwa memanipulasi warna melalui kode dengan HSL jauh lebih mudah.

Prinsip Tipografi

Tipografi adalah area lain yang dapat menjebak bahkan desainer berpengalaman. Tetapi seperti teori warna, ada beberapa alat hebat di luar sana yang dapat membantu.

Hirarki tipografi adalah salah satu hal pertama yang harus dipelajari desainer-pengembang. Hubungan antara elemen tipe yang berbeda dalam sebuah desain sangat penting untuk membuat desain itu lebih bermanfaat.

Setidaknya, sebuah desain harus memiliki tiga tingkat hierarki tipografi: judul, subjudul, dan font isi. Judul harus yang paling menonjol secara visual, sub judul berikutnya, dan kemudian font tubuh, yang harus sangat mudah dibaca.

Banyak desainer baru terlalu fokus pada ukuran font dalam membuat hierarki mereka, dan tidak cukup pada gaya font . Terkadang, alih-alih membuat judul secara signifikan lebih besar dari subjudul, misalnya, judul dapat dibuat tebal atau kapital, sedangkan subjudul dibiarkan dalam huruf besar dan berat normal. Warna juga dapat digunakan untuk membedakan antara subjudul dan judul, dan antara elemen tersebut dan teks isi.

Menggabungkan font yang berbeda juga dapat membingungkan banyak desainer, namun ini adalah cara umum untuk membuat hierarki visual. Mereka termasuk memilih font pelengkap (kebalikan sering menarik, tetapi sampai batas tertentu, seberapa baik font menggabungkan harus ditentukan berdasarkan firasat yang diasah dari waktu ke waktu), memilih font yang sesuai (jangan gunakan Comic Sans pada dokumen hukum, untuk misalnya, atau tampilan font untuk tipe tubuh yang tidak akan terbaca pada ukuran yang lebih kecil), dan membuat kontras antar tipografi (jangan gunakan dua yang sangat mirip).

Cara sederhana lain untuk menggabungkan font adalah dengan memilih font dari keluarga font besar. Bahkan ada keluarga di luar sana yang menyertakan versi tampilan, serif, dan sans serif yang bekerja sama dengan baik (seperti Mrs Eaves dan Mr Eaves, Fedra, atau Museo dan Museo Sans). Ini bisa menjadi cara termudah untuk mulai benar-benar bereksperimen dengan menggabungkan font karena mereka dirancang agar terlihat bagus bersama.

Saat bekerja dengan hierarki tipografi yang lebih besar (seperti menambahkan H1, H2, H3, H4, dll.), penting untuk mengikuti semacam alasan dalam skala tipografi. Deret Fibonacci adalah salah satu skala yang mungkin untuk memulai, meskipun ada skala tipografi mapan lainnya.

Satu skala umum yang digunakan di kedua tipografi (dan umumnya dalam tata letak desain) terdiri dari 4, 8, 16, 24, 36, 48, 72, 108, dll. Angka-angka ini dapat digabungkan dengan berbagai cara untuk membuat desain dengan visual yang menyenangkan. proporsi (misalnya, font 24 piksel dikombinasikan dengan tinggi garis 36 piksel).

Prinsip Tata Letak Dasar

Sejak awal web, ada pola tata letak tertentu yang muncul sebagai "standar". Contohnya termasuk navigasi utama di bilah sisi atas, kiri atau kanan dengan informasi tambahan atau opsi navigasi, dan konten isi mengisi sisa ruang.

Meskipun ada penyimpangan yang pasti dari tata letak dasar ini (bukan navigasi atas, tidak ada bilah sisi, dua bilah sisi, dll.), ini sering kali merupakan taruhan yang cukup aman saat membuat tata letak baru. Penyimpangan dari pola dasar ini seharusnya hanya dilakukan dengan suatu tujuan, terutama oleh desainer-developer baru dan belum berpengalaman.

Membuat desain yang dapat diprediksi — ini biasanya berarti konsisten — sangat bermanfaat bagi kegunaan suatu produk. Penyimpangan dari apa yang diharapkan pengguna untuk dilihat saat menggunakan suatu produk hanya boleh dilakukan ketika keuntungan kegunaan lebih besar daripada kerugiannya.

Sebaiknya jangan gunakan judul biru tebal 72 piksel pada satu halaman dan kemudian judul merah 36 piksel pada halaman lain untuk jenis konten yang sama—karena konsistensi tata letak adalah kuncinya. Demikian pula, spasi (pengisian) antara judul dan teks isi 36 piksel di satu bagian dan kemudian 32 piksel di bagian lain akan menciptakan inkonsistensi visual. Meskipun seseorang mungkin tidak langsung mengerti mengapa perbedaan itu menggelegar, mereka akan merasakannya.

Mirip dengan skala tipografi yang disebutkan di atas, elemen spasi pada skala 4, 8, 16, 24, 36, 48, 72, atau 108 piksel akan menciptakan desain yang menyenangkan secara visual. Sebaiknya gunakan ruang yang cukup di antara elemen, beri mereka ruang untuk bernapas; desainer baru sering menghindari ruang putih dan dapat berakhir dengan desain yang terlihat berantakan dan berlebihan.

Beberapa mungkin mempertanyakan mengapa skala diberi jarak seperti itu. Mengapa hanya ada perbedaan 4 piksel antara dua angka pertama, tetapi lompatan 36 piksel antara dua angka terakhir? Alasannya sederhana: pada skala kecil, peningkatan 4 piksel mudah dikenali (8 piksel dua kali lebih besar dari 4, yang dapat dengan mudah dilihat). Namun dengan angka yang lebih besar, perbedaan antara 72 piksel dan 76 piksel tidak mudah terlihat. Perbedaan yang lebih besar lebih mudah dilihat seiring bertambahnya ukuran.

Jarak yang konsisten adalah salah satu alasan mengapa pendekatan desain berbasis grid menjadi begitu populer. Dimulai dengan grid (umumnya 12-, 16-, atau 24-kolom) memberi desainer kerangka kerja untuk bekerja yang akan menjaga semuanya tetap konsisten. Talang built-in di antara kolom juga membantu memastikan bahwa elemen desain yang berbeda dan konten di dalamnya memiliki ruang untuk bernafas.

Kesimpulan

Desainer dan pengembang sama-sama harus fokus pada pengembangan keahlian mereka untuk memajukan karir mereka. Waktu yang dihabiskan pengembang untuk mempelajari prinsip-prinsip dasar desain akan menghemat waktu di masa depan ketika mereka bekerja dengan desainer, atau membuat produk mereka sendiri.

Pemahaman tentang prinsip dasar desain—prinsip kegunaan, teori warna, tipografi, tata letak, dan UX—juga akan membuat pengembang lebih baik dalam pengembangan . Ketika mereka dapat melihat mengapa desainer membuat pilihan yang mereka buat, pengembang dapat bekerja lebih baik dengan desainer untuk menciptakan produk yang benar-benar luar biasa.

Bacaan lebih lanjut di Blog Desain Toptal:

• Prinsip Desain dan Kepentingannya
• Berapa Banyak Coding yang Harus Diketahui Desainer?
• Spektrum Kemungkinan: Panduan Warna Go-To UI
• Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini
• Landasan Desain – Panduan Hirarki Visual (dengan Infografis)