Sepuluh Aturan Desain Front-End Teratas Untuk Pengembang

Sebagai pengembang front-end, tugas kami pada dasarnya adalah mengubah desain menjadi kenyataan melalui kode. Memahami, dan menjadi kompeten dalam, desain adalah komponen penting dari itu. Sayangnya, benar-benar memahami desain front-end lebih mudah diucapkan daripada dilakukan. Pengodean dan desain estetika memerlukan beberapa keahlian yang sangat berbeda. Karena itu, beberapa pengembang front-end tidak mahir dalam aspek desain sebagaimana mestinya, dan akibatnya, pekerjaan mereka terganggu.

Tujuan saya adalah memberi Anda beberapa aturan dan konsep yang mudah diikuti, dari satu pengembang front-end ke yang lain, yang akan membantu Anda memulai dari awal hingga akhir proyek tanpa mengacaukan apa yang dikerjakan dengan sangat keras oleh desainer Anda (atau mungkin bahkan memungkinkan Anda untuk merancang proyek Anda sendiri dengan hasil yang layak).

Tentu saja, aturan-aturan ini tidak akan membawa Anda dari buruk menjadi luar biasa dalam waktu yang dibutuhkan untuk membaca satu artikel, tetapi jika Anda menerapkannya pada pekerjaan Anda, mereka akan membuat perbedaan besar.

Lakukan Hal-Hal Dalam Program Grafis

Sangat jarang Anda menyelesaikan sebuah proyek, dan mengerjakannya dari awal hingga akhir sambil mempertahankan setiap mutasi estetika dalam file desain. Dan, sayangnya, desainer tidak selalu ada untuk mencari perbaikan cepat.

Oleh karena itu, selalu ada titik dalam pekerjaan front-end di mana Anda akhirnya harus membuat beberapa penyesuaian terkait estetika. Baik itu membuat tanda centang yang muncul saat Anda mencentang kotak, atau membuat tata letak halaman yang terlewatkan oleh PSD, front-ender sering kali berakhir dengan menangani tugas-tugas yang tampaknya kecil ini. Secara alami, di dunia yang sempurna ini tidak akan terjadi, tetapi saya belum menemukan dunia yang sempurna, maka kita harus fleksibel.

Untuk situasi ini, Anda harus selalu menggunakan program grafis untuk maket. Saya tidak peduli alat mana yang Anda pilih: Photoshop, Illustrator, Fireworks, GIMP, apa pun. Hanya saja, jangan hanya mencoba mendesain dari kode Anda. Luangkan waktu sebentar untuk meluncurkan program grafik nyata dan mencari tahu bagaimana tampilannya, lalu buka kodenya dan wujudkan. Anda mungkin bukan seorang desainer ahli, tetapi Anda akan tetap mendapatkan hasil yang lebih baik.

Cocokkan Desainnya, Jangan Mencoba Mengalahkannya

Tugas Anda bukanlah untuk mengesankan betapa uniknya tanda centang Anda; tugas Anda adalah mencocokkannya dengan desain lainnya.

Mereka yang tidak memiliki banyak pengalaman desain dapat dengan mudah tergoda untuk meninggalkan jejak mereka pada proyek dengan detail yang tampaknya kecil. Silakan serahkan itu kepada para desainer.

Alih-alih bertanya "Apakah tanda centang saya terlihat luar biasa?" Anda seharusnya bertanya, “Seberapa baik tanda centang saya cocok dengan desainnya?”

Fokus Anda harus selalu bekerja dengan desain, bukan mencoba untuk mengalahkannya.

Tipografi Membuat Semua Perbedaan

Anda akan terkejut mengetahui seberapa besar tampilan akhir sebuah desain dipengaruhi oleh tipografi. Anda akan terkejut mengetahui berapa banyak waktu yang dihabiskan desainer untuk itu. Ini bukan upaya "ambil-dan-pergi", beberapa waktu dan usaha yang serius masuk ke dalamnya.

Jika Anda berakhir dalam situasi di mana Anda benar-benar harus memilih tipografi, Anda harus meluangkan banyak waktu untuk melakukannya. Online dan teliti pasangan font yang bagus. Luangkan beberapa jam untuk mencoba pasangan tersebut dan pastikan Anda mendapatkan tipografi terbaik untuk proyek tersebut.

Jika Anda bekerja dengan desain, pastikan Anda mengikuti pilihan tipografi desainer. Ini tidak hanya berarti memilih font juga. Perhatikan spasi baris, spasi huruf, dan sebagainya. Jangan abaikan betapa pentingnya mencocokkan tipografi desain.

Juga, pastikan Anda menggunakan font yang tepat di tempat yang benar. Jika desainer menggunakan Georgia untuk header saja dan Open Sans untuk body, maka Anda tidak boleh menggunakan Georgia untuk body dan Open Sans untuk header. Tipografi dapat membuat atau menghancurkan estetika dengan mudah. Luangkan cukup waktu untuk memastikan Anda cocok dengan tipografi desainer Anda. Ini akan menghabiskan waktu dengan baik.

Desain Front-end Tidak Menoleransi Visi Terowongan

Anda mungkin akan membuat bagian-bagian kecil dari keseluruhan desain.

Contoh yang telah saya lakukan adalah membuat tanda centang untuk desain yang menyertakan kotak centang khusus, tanpa menunjukkannya dicentang. Penting untuk diingat bahwa bagian yang Anda buat adalah bagian kecil dari keseluruhan desain. Jadikan tanda centang Anda sama pentingnya dengan tanda centang pada halaman yang seharusnya terlihat, tidak lebih, tidak kurang. Jangan mendapatkan visi terowongan tentang satu bagian kecil Anda dan menjadikannya sesuatu yang tidak seharusnya.

Sebenarnya, teknik yang baik untuk melakukan ini adalah dengan mengambil tangkapan layar dari program sejauh ini, atau file desain, dan desain di dalamnya, dalam konteks di mana program itu akan digunakan. Dengan begitu, Anda benar-benar melihat bagaimana pengaruhnya terhadap elemen desain lain pada halaman, dan apakah itu sesuai dengan perannya dengan benar.

Hubungan dan Hirarki

Berikan perhatian khusus pada bagaimana desain bekerja dengan hierarki. Seberapa dekat judul dengan isi teks? Seberapa jauh mereka dari teks di atas mereka? Bagaimana desainer tampaknya menunjukkan elemen/judul/badan teks mana yang terkait dan mana yang tidak? Mereka biasanya akan melakukan hal-hal ini dengan menggabungkan konten terkait, menggunakan spasi putih yang bervariasi untuk menunjukkan hubungan, menggunakan warna yang serupa atau kontras untuk menunjukkan konten terkait/tidak terkait, dan seterusnya.

Adalah tugas Anda untuk memastikan bahwa Anda mengenali cara desain menyelesaikan hubungan dan hierarki dan untuk memastikan konsep tersebut tercermin dalam produk akhir (termasuk untuk konten yang tidak dirancang secara khusus, dan/atau konten dinamis). Ini adalah area lain (seperti tipografi) di mana perlu waktu ekstra untuk memastikan Anda melakukan pekerjaan dengan baik.

Pilih-pilih Tentang Whitespace Dan Alignment

Ini adalah tip yang bagus untuk meningkatkan desain Anda dan/atau menerapkan desain orang lain dengan lebih baik: Jika desain tampaknya menggunakan jarak 20 unit, 40 unit, dll., maka pastikan setiap jarak adalah kelipatan dari 20 unit.

Ini adalah cara sederhana yang benar-benar mematikan bagi seseorang yang tidak memperhatikan estetika untuk membuat peningkatan yang signifikan dengan cepat. Pastikan elemen Anda sejajar dengan piksel, dan jarak di sekitar setiap tepi setiap elemen seseragam mungkin. Di mana Anda tidak dapat melakukannya (seperti tempat di mana Anda memerlukan ruang ekstra untuk menunjukkan hierarki), buatlah kelipatan tepat dari jarak yang Anda gunakan di tempat lain, misalnya dua kali default Anda untuk membuat beberapa pemisahan, tiga kali untuk membuat lebih banyak , dan seterusnya.

Banyak pengembang mencapai ini untuk konten tertentu dalam file desain, tetapi ketika harus menambahkan/mengedit konten, atau mengimplementasikan konten dinamis, jaraknya dapat menyebar ke mana-mana karena mereka tidak benar-benar memahami apa yang mereka terapkan.

Lakukan yang terbaik untuk memahami bagaimana desainer menggunakan spasi dan ikuti konsep tersebut dalam bangunan Anda. Dan ya, habiskan waktu untuk ini. Setelah Anda merasa pekerjaan Anda selesai, kembali dan ukur jarak untuk memastikan Anda telah menyelaraskan dan memberi jarak yang seragam sebanyak mungkin, lalu coba kode dengan banyak konten yang bervariasi untuk memastikannya fleksibel .

Jika Anda Tidak Tahu Apa yang Anda Lakukan, Lakukan Lebih Sedikit

Saya bukan salah satu dari orang-orang yang berpikir bahwa setiap proyek harus menggunakan desain minimalis, tetapi jika Anda tidak yakin dengan potongan desain Anda dan Anda perlu menambahkan sesuatu, maka lebih sedikit lebih baik.

Perancang mengurus hal-hal utama; Anda hanya perlu melakukan filler kecil. Jika Anda tidak pandai mendesain, maka taruhan yang baik adalah melakukan jumlah seminimal mungkin untuk membuat elemen itu berfungsi. Dengan begitu, Anda akan lebih sedikit menyuntikkan desain Anda sendiri ke dalam karya desainer, dan memengaruhinya sesedikit mungkin.

Biarkan karya desainer menjadi pusat perhatian dan biarkan karya Anda mengambil alih kursi belakang.

Waktu Membuat Kita Semua Bodoh

Saya akan memberi tahu Anda sebuah rahasia tentang desainer: 90 persen (atau lebih) dari apa yang sebenarnya mereka tulis di atas kertas, atau kanvas Photoshop, tidak terlalu bagus.

Mereka membuang jauh lebih banyak daripada yang pernah Anda lihat. Sering kali dibutuhkan banyak revisi dan mengutak-atik desain untuk mencapai titik di mana mereka bahkan membiarkan orang di bilik berikutnya melihat pekerjaan mereka, apalagi klien yang sebenarnya. Anda biasanya tidak beralih dari kanvas kosong ke desain yang bagus dalam satu langkah; ada banyak iterasi di antaranya. Orang jarang membuat pekerjaan yang baik sampai mereka memahaminya dan mengizinkannya dalam proses mereka.

Jadi bagaimana Anda menerapkan ini? Salah satu metode penting adalah meluangkan waktu antar versi. Kerjakan sampai terlihat seperti sesuatu yang Anda sukai lalu simpan. Berikan beberapa jam (biarkan semalaman lebih baik), lalu buka lagi dan lihat. Anda akan kagum melihat betapa berbedanya tampilannya dengan mata yang segar. Anda akan segera memilih area untuk perbaikan. Mereka akan sangat jelas sehingga Anda akan bertanya-tanya bagaimana Anda bisa melewatkannya sejak awal.

Faktanya, salah satu desainer terbaik yang saya kenal mengambil ide ini lebih jauh. Dia akan mulai dengan membuat tiga desain yang berbeda. Kemudian, dia akan menunggu setidaknya 24 jam, melihat mereka lagi dan membuang semuanya dan mulai dari awal di urutan keempat. Selanjutnya, dia akan mengizinkan satu hari di antara setiap iterasi saat itu menjadi lebih baik dan lebih baik. Hanya ketika dia membukanya suatu pagi, dan benar-benar bahagia, atau setidaknya, sedekat mungkin dengan seorang desainer untuk benar-benar bahagia, dia akan mengirimkannya ke klien. Ini adalah proses yang dia gunakan untuk setiap desain yang dia buat, dan itu sangat membantunya.

Saya tidak mengharapkan Anda untuk mengambil sejauh itu , tapi itu menyoroti betapa membantu waktu tanpa "mata pada desain" dapat. Ini adalah bagian integral dari proses desain dan dapat membuat peningkatan dengan cepat.

Piksel Penting

Anda harus melakukan segala daya Anda untuk mencocokkan desain asli dalam program Anda yang telah selesai, hingga piksel terakhir.

Di beberapa area Anda tidak bisa sempurna. Misalnya, kontrol Anda terhadap spasi huruf mungkin tidak setepat yang dimiliki desainer, dan bayangan CSS mungkin tidak sama persis dengan bayangan Photoshop, tetapi Anda tetap harus berusaha sedekat mungkin. Untuk banyak aspek desain, Anda benar-benar bisa mendapatkan presisi piksel yang sempurna. Melakukannya dapat membuat perbedaan besar dalam hasil akhirnya. Sebuah piksel di sana-sini sepertinya tidak banyak, tetapi itu bertambah dan memengaruhi estetika keseluruhan lebih dari yang Anda kira. Jadi awasi terus.

Ada sejumlah [alat] yang membantu Anda membandingkan desain asli dengan hasil akhir, atau Anda bisa mengambil tangkapan layar dan menempelkannya ke file desain untuk membandingkan setiap elemen sedekat mungkin. Letakkan saja tangkapan layar di atas desain dan buat semi-transparan sehingga Anda dapat melihat perbedaannya. Kemudian Anda tahu berapa banyak penyesuaian yang harus Anda lakukan untuk membuatnya tepat.

Dapatkan Umpan Balik

Sulit untuk mendapatkan "mata untuk desain." Bahkan lebih sulit untuk melakukannya sendiri. Anda harus mencari masukan dari orang lain untuk benar-benar melihat bagaimana Anda dapat melakukan perbaikan.

Saya tidak menyarankan Anda mengambil tetangga Anda dan meminta saran, maksud saya Anda harus berkonsultasi dengan desainer nyata dan membiarkan mereka mengkritik pekerjaan Anda dan menawarkan saran.

Dibutuhkan beberapa keberanian untuk melakukannya, tetapi pada akhirnya itu adalah salah satu hal paling kuat yang dapat Anda lakukan untuk meningkatkan proyek dalam jangka pendek, dan untuk meningkatkan tingkat keterampilan Anda dalam jangka panjang.

Bahkan jika Anda hanya perlu menyetel tanda centang sederhana, ada banyak orang yang bersedia membantu Anda. Baik itu teman desainer, atau forum online, cari orang yang memenuhi syarat dan dapatkan umpan balik mereka.

Ini mungkin terdengar memakan waktu, dan dapat menyebabkan gesekan antara Anda dan desainer Anda, tetapi dalam skema besar, itu sepadan. Pengembang front-end yang baik mengandalkan masukan berharga dari desainer, bahkan ketika itu bukan sesuatu yang mereka suka dengar.

Oleh karena itu, sangat penting untuk membangun dan memelihara hubungan yang konstruktif dengan desainer Anda. Anda semua berada di kapal yang sama, jadi untuk mendapatkan hasil terbaik Anda harus berkolaborasi dan berkomunikasi di setiap langkah. Investasi dalam membangun ikatan dengan desainer Anda sangat berharga, karena akan membantu semua orang melakukan pekerjaan yang lebih baik dan melaksanakan semuanya tepat waktu.

Kesimpulan

Untuk meringkas, berikut adalah daftar singkat tip desain untuk pengembang front-end:

• Desain dalam program grafis. Jangan mendesain dari kode, bahkan hal-hal kecil.
• Cocokkan desainnya. Sadar akan desain aslinya dan jangan mencoba untuk memperbaikinya, cocokkan saja.
• Tipografi sangat besar. Waktu yang Anda habiskan untuk memastikan itu benar harus mencerminkan pentingnya.
• Hindari penglihatan terowongan. Pastikan tambahan Anda hanya menonjol sebagaimana mestinya. Mereka tidak lebih penting hanya karena Anda mendesainnya.
• Hubungan dan hierarki: Pahami cara kerjanya dalam desain sehingga Anda dapat menerapkannya dengan benar.
• Spasi dan penyelarasan itu penting. Buat mereka akurat ke piksel dan membuatnya merata di seluruh apa pun yang Anda tambahkan.
• Jika Anda tidak yakin dengan keterampilan Anda, buat tambahan Anda dengan gaya seminimal mungkin.
• Luangkan waktu di antara revisi. Kembali lagi nanti untuk melihat karya desain Anda dengan pandangan yang segar.
• Implementasi piksel-sempurna penting jika memungkinkan.
• Beranilah. Carilah desainer berpengalaman untuk mengkritik pekerjaan Anda.

Tidak setiap pengembang front-end akan menjadi desainer yang fantastis, tetapi setiap pengembang front-end setidaknya harus kompeten dalam hal desain.

Anda perlu cukup memahami tentang konsep desain untuk mengidentifikasi apa yang terjadi, dan menerapkan desain dengan benar ke produk akhir Anda. Terkadang, Anda dapat lolos dari penyalinan buta jika Anda memiliki perancang yang teliti (dan jika Anda cukup berorientasi pada detail untuk benar-benar menyalinnya piksel demi piksel).

Namun, untuk membuat proyek besar bersinar di banyak variasi konten, Anda memerlukan pemahaman tentang apa yang ada di kepala desainer. Anda tidak hanya perlu melihat seperti apa desainnya, Anda perlu tahu mengapa itu terlihat seperti itu , dan dengan begitu Anda dapat memperhatikan batasan teknis dan estetika yang akan memengaruhi pekerjaan Anda.

Jadi, bahkan sebagai pengembang front-end, bagian dari peningkatan diri Anda yang biasa harus selalu mencakup belajar lebih banyak tentang desain.