Untuk Desainer Dengan Cinta (Surat Dari Pengembang Front-end)

Desainer yang terhormat,

Surat ini telah dibuat selama bertahun-tahun. Sebagian darinya telah disampaikan dalam pidato dan tulisan kepada berbagai desainer dalam jangka waktu yang lama.

Namun saya selalu takut menerbitkannya karena takut itu akan melibatkan desainer atau klien yang saya tangani saat ini. Jadi sebelum saya melanjutkan, saya ingin menekankan bahwa ini bukan keluhan khusus melainkan daftar terperinci dari 18 tahun ketidaksepakatan.

Kami telah bekerja sama selama hampir dua dekade, dan setiap file PSD yang Anda kirimkan kepada saya memiliki (kurang lebih) masalah yang sama. Maafkan saya karena ketidaksenonohan mencoba mengajari Anda pekerjaan Anda.

Saya tidak bermaksud mengajari Anda tentang grafis atau estetika. Saya tidak akan menyelidiki tipografi, keterbacaan, atau penggunaan ruang putih.

Sebaliknya, saya ingin menjelaskan bagaimana hasil kerja Anda memberi tahu saya.

Saya ingin mengingatkan Anda apa yang diperlukan untuk mereproduksi desain sebagai halaman web dengan piksel sempurna. Saya ingin memberi tahu Anda bagaimana file desain Anda akan digunakan untuk dokumentasi dan bagaimana gambar yang Anda buat menentukan teknologi yang digunakan – hingga ke tingkat skalabilitas dan kinerja yang paling dasar.

Juga, saya ingin mendemonstrasikan apa yang dapat dilakukan dengan cepat dan mudah dan apa yang akan menghasilkan overhead yang akan menyeret seluruh produksi ke perayapan.

Dan yang terpenting, saya ingin mengingatkan Anda bahwa gambar yang Anda buat sekarang akan dibuat menjadi makhluk hidup yang berinteraksi dan merespons, yang berkomunikasi dengan ribuan individu berbeda, yang perlu mengajari mereka, dan belajar darinya. mereka dengan cara yang paling mudah. Baik untuk itu maupun untuk mereka.

Merancang untuk Dokumentasi

Pertama-tama, saya ingin mengingatkan Anda bahwa file PSD yang Anda hasilkan bukan hanya sumber gambar untuk disetujui klien, tetapi juga dokumentasi teknis dan bahan sumber untuk pengembang. Oleh karena itu, harap jaga agar lapisan dan grup Anda tetap rapi, teratur, dan diberi nama .

Anotasi desain Anda. Buat file terpisah dengan konvensi yang Anda gunakan, atau catat di lapisan tersembunyi yang terpisah.

Beri tahu saya font mana yang Anda gunakan untuk apa. Beri tahu saya warna, spasi, dan konteks mana yang akan digunakan. Saya perlu tahu.

Saya juga perlu tahu apa yang harus diekstrapolasi jika tidak ada desain yang dibuat untuk fitur tertentu.

Saya kira apa yang ingin saya katakan adalah: Jika memungkinkan , buat panduan gaya singkat untuk produk yang Anda rancang.

Demi kami berdua, saat menambahkan blok teks standar – seperti judul – tambahkan persegi panjang di belakangnya untuk menunjukkan jarak di sekitarnya. Itu seharusnya memungkinkan Anda untuk menempatkannya secara konsisten setiap saat. Jika ini terlalu banyak pekerjaan, setidaknya tunjukkan contoh mana dalam dokumen yang kanon.

Saya tidak dapat memberi tahu Anda seberapa sering saya menemukan bahwa judul ditempatkan dengan mata sehingga mereka secara visual cocok dengan satu contoh di mana mereka ditempatkan, tetapi ketika diukur, mengungkapkan bahwa masing-masing memiliki spasi tersendiri.

Hal yang sama berlaku untuk blok konten. Jika Anda memiliki daftar blok konten yang berbeda, harap beri jarak secara konsisten.

Saya akan memberi tahu Anda lebih banyak di bagian Merancang untuk Konten , tetapi tolong jangan berasumsi bahwa judul Anda akan selalu berada dalam satu baris, dan gunakan informasi itu dalam file.

Saya terus menemukan judul-judul ini yang memiliki ukuran font 22px dan tinggi garis 92px (jelas salin dan tempel dari judul halaman utama). Pengaturan yang Anda pilih relevan meskipun tidak secara visual mengubah file yang diekspor.

Merancang untuk Teknologi

Ada dua sisi dalam hal ini: Apa yang bisa dilakukan dan apa yang cocok untuk media tersebut.

Sementara kami dengan cepat mencapai titik di mana semuanya secara teknis mungkin untuk pengembangan situs web (jika tidak ada yang lain, saya masih dapat menggambarnya piksel demi piksel menggunakan kanvas), banyak dari solusi tersebut tidak siap produksi.

Fakta bahwa Anda menemukan contoh di mana seseorang berhasil menggabungkan WebGL 3D dengan CSS blur plus filter mask untuk halaman demo tidak berarti Anda dapat menggunakannya sebagai panel paralaks jendela penuh dalam aplikasi satu halaman.

Dan jika Anda benar-benar ingin menjalaninya, silakan berkonsultasi dengan pengembang Anda sebelum mengirimkan desain untuk persetujuan. Jika tidak, akan sulit untuk membuat klien menerima lebih sedikit.

Jika Anda benar-benar ingin menguji keunggulannya, dan jika Anda ingin mencobanya untuk bersenang-senang, hubungi saya secara pribadi. Saya suka menciptakan hal-hal seperti itu sebanyak yang Anda lakukan. Hanya saja, jangan memasukkan barang itu ke dalam proyek produksi yang dianggarkan.

Di luar hal-hal itu – di luar menguji batas-batas apa yang dapat dilakukan, cobalah untuk peka dan masuk akal sehubungan dengan apa yang harus dilakukan .

Anda bukan seniman grafis; Anda lebih dari itu, Anda seorang desainer.

Anda tidak hanya mendesainnya agar terlihat dengan cara tertentu, Anda juga harus mendesainnya untuk berjalan dengan cara tertentu, berkomunikasi dan berperilaku dengan cara tertentu.

Untuk mencari klise yang akrab bagi desainer di mana-mana: Apa gunanya kursi yang tampak cantik jika tidak ada yang bisa duduk di atasnya ?

Anda harus memasukkan kecepatan pemuatan, dan kecepatan eksekusi dan kemudahan penggunaan dalam desain Anda agar menjadi desain , bukan gambar.

Cobalah untuk mencapai sebanyak mungkin hanya dengan HTML dan CSS. Hindari menggunakan fitur yang terlihat bagus yang tersedia di Photoshop. Jangan gunakan pencampuran! Jangan gunakan faux bold dan faux italic.

Kecuali Anda menginginkan elemen menjadi gambar, jangan gunakan filter sama sekali – selain bayangan paling sederhana.

Jangan membuat saya menghitung atau memilih warna karena Anda telah menggunakan isian warna campuran. Tolong jangan memalsukan gambar transparan dengan menggunakan campuran overlay; Saya sebenarnya membutuhkan gambar transparan di situs.

Jika kita menggunakan kerangka kerja front-end, seperti Bootstrap, banyak dari masalah ini akan diselesaikan, jadi pelajari cara melakukannya dan cara memodifikasinya. Jangan sembarangan mendesain sesuatu yang tidak berhubungan.

Jika desain Anda tidak sejalan dengan apa yang dilakukan kerangka kerja, maka mengimplementasikannya tidak mengimplementasikan desain. Alih-alih, kami akhirnya secara selektif mengesampingkan kerangka kerja, sehingga tidak mengacaukan desain kami dan kemudian mengimplementasikannya dari awal. Beban kerja berlipat ganda alih-alih berkurang setengahnya.

Dan terakhir, jangan gunakan lebih dari tiga font – atau varian font – di situs. Jika Anda membutuhkan enam bobot berbeda, masing-masing dengan varian reguler dan miringnya sendiri, Anda tidak lagi mendesain untuk web.

Mendesain untuk Interaktivitas

Ini sangat besar. Dan surat ini awalnya ditulis khusus untuk topik ini. Anda benar-benar harus mengetahui dan memahami semua cara pengguna dan fungsionalitas dapat berinteraksi.

Mari kita mulai dengan hal yang paling sederhana: tautan.

Tautan tidak hanya memiliki dua status.

Dalam navigasi yang saya terima, Anda selalu memberikan desain untuk tautan dan tautan aktif (halaman saat ini).

Dalam kasus lain, Anda biasanya memberikan status dasar dan melayang .

Jika Anda ingin menjadi yang paling ramah pengguna, Anda harus memiliki desain yang berbeda untuk status dasar, arahkan kursor, dan fokus ( dikunjungi dan aktif juga bagus untuk dimiliki untuk UX). Dan untuk navigasi, tautan dan tautan aktif masing-masing memiliki semua status di atas .

Oh, dan jangan berani-berani mengubah tata letak tautan antar negara (memvariasikan lebar batas, bantalan, dan sejenisnya).

Demikian pula, jika tidak terlihat seperti tombol, itu tidak memiliki latar belakang. Periode. Mengisi elemen teks sebaris berantakan, dan latar belakang teks yang tidak diisi tidak akan pernah berhasil.

Karena kita akan menggunakan ini di seluler, pastikan ada cukup spasi di antara elemen interaktif yang terpisah, dan setiap hitbox cukup besar. Saya pikir minimal 42px pada setiap sumbu adalah norma.

Gambarlah persegi panjang yang tidak terlihat, atau lapisan tersembunyi yang menunjukkan kotak-kotak hit; pastikan mereka tidak tumpang tindih dan interaksi pengguna tidak ambigu.

Elemen bentuk bahkan lebih buruk.

Kasus paling umum yang saya lihat adalah dengan tombol radio dan kotak centang. Yang standar jelek! Jadi, Anda mendesain sendiri, dan memberi saya status yang dicentang dan tidak, dan menganggap diri Anda sudah selesai.

Namun, ada seluruh tabel status multidimensi untuk kotak centang, dan masing-masing harus ditunjukkan secara visual kepada pengguna.

Kami memiliki status berikut:

• Dicentang atau tidak dicentang
• Arahkan kursor atau tidak
• Fokus atau tidak
• Diaktifkan atau dinonaktifkan
• Kesalahan atau tidak

Masing-masing dapat bergabung dengan yang lain.

Dinonaktifkan mencegah beberapa kombinasi (arahkan kursor dan fokus biasanya tidak relevan saat dinonaktifkan) tetapi tidak semua (kesalahan yang dicentang-dinonaktifkan adalah keadaan yang benar-benar valid dan informatif untuk kotak centang). Jadi kita berakhir dengan 16 status aktif dan empat status nonaktif, memberikan total setidaknya 20 status berbeda. Misalnya, status yang biasanya Anda berikan kepada saya dicentang-tidak-tidak-diaktifkan-tidak dan tidak dicentang-tidak-tidak-diaktifkan-tidak dalam pengaturan itu.

Elemen formulir lain mungkin tidak memiliki status dicentang-tidak dicentang tetapi bisa kosong atau tidak kosong (menampilkan teks placeholder). Mereka juga dapat memiliki status informasi yang lebih kompleks sehingga kasus error-or-not dapat serumit neutral-warning-error-success.

Kemudian, di atas itu, Anda harus memiliki indikator wajib atau opsional bersama dengan tata letak dan desain yang jelas untuk label, bantuan input, dan teks kesalahan.

Dan, jika Anda benar-benar ingin ramah pengguna, Anda memerlukan status murni-set-kotor, yang menunjukkan bahwa pengguna tidak pernah memberikan data, atau data sudah disimpan, atau telah diubah tetapi belum disimpan.

Apa yang saya katakan adalah: Merancang untuk interaktivitas itu sulit. Dan jika Anda ingin mengubah tampilan tombol radio, jangan lakukan dengan fasih dengan dua status.

Hanya satu poin terakhir dalam mendesain untuk interaktivitas: Putuskan seperti apa interaksi itu. Artinya, putuskan konvensi apa yang akan Anda gunakan untuk elemen interaktif, dan jangan gunakan untuk hal lain.

Tidak, Anda tidak diizinkan menggunakan warna merek utama untuk menunjukkan tautan, terutama jika Anda akan menggunakan solusi yang sama untuk menonjolkan konten penting!

Mendesain untuk Konten

Tata letak ideal dari setiap elemen yang diisi dengan konten lipsum cukup baik untuk menghadirkan gambar kepada klien untuk mendapatkan persetujuan pada gaya visual. Tetapi desain konten tidak dimulai atau berakhir di sana.

Setelah Anda memiliki gambaran kasar tentang apa yang ingin Anda lakukan dengan tata letak konten, ingatlah bahwa Anda bekerja dengan konten dinamis. Ada dua kasus yang harus Anda periksa untuk setiap konten:

• Bagaimana jika ada terlalu banyak?
• Bagaimana jika jumlahnya terlalu sedikit (atau tidak ada sama sekali)?

Periksa apa yang terjadi jika judulnya sangat pendek atau sangat panjang. Seperti apa seharusnya blok konten jika elemen penting hilang? Bagaimana jika tidak ada gambar?

Jika tidak ada konten untuk bagian halaman, apakah kami menghapus seluruh bagian – judul, wadah, dan semuanya – atau kami menyimpan bagian tersebut, dan menampilkan sesuatu di sepanjang baris: “Belum ada artikel, periksa kembali nanti?” Lebih baik lagi: “Apakah Anda ingin diberi tahu saat konten ini tiba? Daftar untuk buletin kami!”

Buat keputusan! Kemudian rancang hal-hal itu!

Jika Anda mendesain umpan atau konten yang dimuat dari sumber eksternal atau dinamis, jangan lupa untuk menyertakan semua kesalahan dan pemberitahuan. Bahkan, rancang konten meta notifikasi halaman untuk menunjukkan seperti apa tampilannya secara global, lalu patuhi konvensi desain tersebut untuk memberi tahu pengguna jika terjadi kesalahan.

Hindari tombol dengan lebar tetap, dan blok teks dengan tinggi tetap. Dan, jika saya belum pernah mengatakannya sebelumnya, Jika Anda pikir itu akan selalu menjadi satu baris teks, Anda salah! Sekarang, periksa cara terbaik untuk membuatnya multiline.

Pastikan bahwa konten yang sama memiliki struktur yang sama.

Jika judul yang sama terlihat di banyak tempat, jangan menebalkan satu kata dalam satu kasus dan lainnya di tempat lain!

Bahkan, cobalah untuk menghindari struktur pemformatan dalam judul sama sekali. Demikian pula, jangan pecahkan teks secara manual di satu tempat, tetapi pecahkan secara berbeda di tempat lain. Faktanya, jangan merusak teks secara manual!

Hal-hal ini mungkin membuat desain Anda lebih baik, tetapi ingat bahwa konten kemungkinan besar akan dimasukkan melalui CMS, dan orang yang memasukkannya mungkin tidak akan melihat tampilannya hingga dipublikasikan, atau bahkan mungkin tidak memiliki alat untuk memecah secara manual, atau memformat teks.

Desain dengan batasan yang sama dengan konten akhir – wadah teks dengan lebar tetap dan pembungkus kata otomatis. Jika terlihat jelek seperti itu, desainnya tidak bagus.

Merancang untuk Responsivitas

Ini telah banyak berkembang baru-baru ini. Setidaknya dalam kasus di mana ponsel benar-benar dirancang. Lebih dan lebih, kami membiarkan bootstrap mencari tahu, dan menampar Band-Aids di celah-celah.

Terlepas dari itu, ada beberapa prinsip sederhana yang harus Anda ketahui.

Pertama, varian seluler dan desktop bukanlah halaman yang terpisah. Aku tahu kamu tahu ini. Mereka hanyalah reflow dari halaman yang sama.

Sederhananya, ini sama dengan bekerja dengan teks rata kiri. Kalimat itu tidak mengubah urutan kata atau huruf hanya karena Anda meletakkannya di wadah yang lebih kecil.

Selain itu, grup konten harus dibagikan di semua tata letak. Saat Anda menambahkan kolom, pastikan jeda kolom konsisten.

Juga, konvensi Anda harus mengikuti struktur yang sama untuk versi halaman yang berbeda. Artinya, jika dua elemen terlihat identik di desktop, keduanya juga harus identik di seluler.

Oh, dan jika Anda ingin paralaks, berikan gambar yang cukup besar untuk bergerak. Jika Anda cocok, atau memotong gambar sehingga terlihat tepat pada file yang Anda tunjukkan kepada klien, maka saya tidak perlu bergerak.

Merancang Pengecualian

Tentu saja, pengecualian selalu memungkinkan. Selain itu, mereka diperlukan agar produk terlihat menarik dan efektif. Namun, jangan menambahkannya di kotak demi kotak pass pertama.

Jika Anda menemukan diri Anda memecahkan masalah desain yang sama berulang-ulang, ini tidak akan berhasil, terutama jika Anda mencari solusi yang berbeda di setiap contoh.

Setelah Anda melakukan semua hal di atas, Anda akan mendapatkan desain yang efisien, stabil, dan konsisten (jika agak membosankan). Sekarang saatnya untuk membumbui segalanya. Melihat halaman secara keseluruhan, bicaralah dengan klien untuk mengidentifikasi moneyshots – item yang akan memberi mereka keuntungan paling besar.

Kami telah bekerja sama selama bertahun-tahun, dan klien kami selalu senang dengan hasil akhirnya.

Tentu saja saya akan melompat jika Anda melewatkan beberapa poin ini, dan ketika menggunakan desain yang kompleks dibenarkan, saya akan menulis logika rendering dalam JavaScript jika perlu.

Saya akan turun tangan dan membenarkan pekerjaan ekstra kepada klien jika perlu. Heck, saya telah merancang formulir dan interaktivitas di atas desain yang diterima selama berabad-abad, jadi ini tidak akan menjadi masalah.

Saya hanya berharap, setelah membaca ini, Anda akan mengingat beberapa petunjuk ini saat kita bekerja sama lagi nanti. Saya harap mereka akan menginformasikan pekerjaan Anda dan memberikan panduan ketika Anda tidak tahu apa yang harus dilakukan. Saya ingin Anda memahami bahwa hubungan kita penting bagi saya dan bahwa saya tidak menulis ini untuk menyakiti Anda, tetapi untuk membuat hubungan kita lebih baik.

Dengan cinta,

Pengembang front-end Anda