Memulai Modul dan Pengembangan Front-End Modular

Semua orang tahu dan menyukai batu bata Lego. Saya terpikat pada Lego ketika saya masih kecil, dan saya masih menyukainya sampai sekarang. Anda dapat merakit mainan Anda dari semua jenis Lego dengan berbagai cara, satu per satu. Anda kemudian dapat memulai dari awal dan membuat mainan yang berbeda dari potongan yang sama. Kemungkinannya tidak terbatas.

Modul di situs web sangat mirip dengan Lego. Pikirkan modul sebagai potongan Lego yang memungkinkan Anda membangun situs web Anda. Ketika Anda menghubungkannya bersama-sama dengan cara yang benar, mereka membentuk halaman web. Untuk membangun situs web seperti Lego, Anda harus menganggap situs web sebagai kumpulan modul independen. Artikel ini akan membantu Anda melakukan hal itu dengan pengembangan dan desain front-end Anda.

Kolase Modul

Saat memasuki fase desain sebuah proyek, saya cenderung memulai dengan merakit kolase inspirasi desain dan kolase modul. Ini adalah proses yang mirip dengan Dan Mall, yang menyebut hasil desain kolase ini untuk era pascakompilasi. Kolase inspirasi adalah kumpulan tangkapan layar yang saya sajikan kepada klien, hanya untuk mendapatkan gambaran umum tentang arah visual yang kami tuju. Mereka hanyalah tangkapan layar situs web yang saya dan klien sukai.

Setelah kami mendapatkan konfirmasi bahwa kami berada di halaman yang sama dalam hal gaya, saya dapat masuk ke editor grafis saya (saya lebih suka Sketch) dan membuat kolase modul. Kolase ini adalah kumpulan modul yang paling umum digunakan - tombol, formulir, judul, paragraf, daftar, gambar, dan sebagainya. Kolase modul memungkinkan saya untuk dengan cepat membuat bagian dari tampilan dan nuansa situs web.

Berikut adalah bagian dari kolase modul terbaru saya, contoh tombol yang saya rancang di Sketch pada awal proyek:

Mungkin Anda bertanya-tanya kapan kompilasi statis dan menghadirkan desain piksel yang sempurna kepada klien ikut bermain. Mereka tidak — saya melewatkannya hampir seluruhnya dalam proses saya. Melewati bagian dari proses itu memungkinkan saya untuk masuk ke kode sangat awal dalam proyek dan prototipe kode (saya akan segera mendapatkannya), atau dengan kata lain, desain di browser. Berikut adalah beberapa keuntungan mendesain di browser:

• Peramban adalah lingkungan alami untuk situs web, dan berpegang teguh pada ide yang dibuat dalam editor grafis dapat menjadi bumerang. Itu wajar untuk menguji dan membuat keputusan desain di browser. Anda pernah mendengarnya sebelumnya, Anda akan mendengarnya lagi — ini bukan tentang tampilannya, ini tentang cara kerjanya.

• Akan selalu ada inkonsistensi desain antara tiruan statis dan apa yang akhirnya Anda dapatkan di browser setelah diterjemahkan ke dalam kode. Untuk menghindari inkonsistensi tersebut, masuk ke editor kode dan browser untuk memecahkan masalah desain yang sebenarnya.

• Komps statis mungkin tidak menyampaikan pesan yang tepat. Tampilan dan nuansa akan jauh berbeda setelah Anda mengintegrasikan interaktivitas — seperti status melayang, transisi, dan animasi.

• Alih-alih menghabiskan berjam-jam merancang beberapa maket statis untuk beberapa resolusi, saya dapat menghemat banyak waktu dengan masuk ke kode lebih awal. Tweak CSS memungkinkan saya untuk dengan cepat mendemonstrasikan perubahan dan aspek responsif kepada klien di berbagai perangkat — smartphone, tablet, dll.

Jadi, hemat waktu dan buka editor kode dan browser Anda untuk mulai membuat UX sedini mungkin. Dalam pengalaman saya, sebagian besar klien akan meminta mockup penuh satu atau dua halaman sebelum kami dapat melanjutkan dengan pengkodean, dan itu tidak masalah. Penting bagi klien untuk memiliki pemahaman yang baik tentang desain masa depan. Saya biasanya menggunakan InVision, yang merupakan alat yang hebat untuk melacak mockup awal, perubahan, komentar, dan banyak lagi. Namun, sangat penting bagi klien untuk memahami bahwa Sketch dan InVision tidak akan membawa mereka terlalu jauh.

Membangun Modul untuk Pengembangan Front-end

Setelah klien puas dengan kolase modul dan maket yang telah saya rancang, saya dapat mulai mengkode dan menentukan tampilan dan nuansa sebenarnya dari elemen-elemen tersebut.

Desain modular terjalin dengan pengembangan modular dalam proses berulang. Saya membuat kode modul, lalu mencobanya di browser untuk melihat cara kerjanya, lalu mengulanginya jika perlu. Sekali lagi, proses ini sangat mirip dengan membuat Lego — Anda pada dasarnya mendesain dan mengembangkan pada saat yang sama dan mencoba variasi yang berbeda sampai Anda merasa nyaman dengannya.

Saya sering memulai pengembangan modul dengan membangun sesuatu yang sederhana, seperti tombol. Bayangkan Anda sedang membangunnya sendiri dan Anda perlu mengkodekan tombol oranye, biasanya digunakan untuk formulir kontak. Inilah yang mungkin Anda dapatkan:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Cukup sederhana, bukan? Anda akan menerapkan kelas .submit-button ke HTML Anda dan itu akan menyelesaikan masalah Anda saat ini. Sekarang, apa yang akan terjadi ketika Anda perlu membuat tombol baru, seperti itu, tetapi dengan warna latar belakang biru? Anda mungkin akan menyalin kelas yang sama, lalu mengubah nama kelas dan warna latar belakang. Cepat dan kotor. Sekarang, bayangkan Anda perlu menggunakan tombol yang sama, tetapi dengan latar belakang oranye. Anda dapat melihat ke mana arahnya — Anda mungkin berakhir dengan banyak CSS yang diulang. Pada proyek yang sangat kecil, ini mungkin tidak menjadi masalah nyata, tetapi pada proyek yang lebih besar mungkin akan terjadi. Sebelum Anda menyadarinya, CSS Anda membengkak dan sulit dirawat.

Jika Anda pernah mengembangkan proyek skala menengah hingga besar, Anda pasti pernah mengalami sakit kepala. Itu mungkin disebabkan oleh salah satu alasan berikut:

• Kode yang berantakan, tidak konsisten, sulit untuk dipindai dan dipahami.
• Kode kembung dan file CSS XXL dengan banyak duplikasi.
• Kode yang sulit untuk dipertahankan.
• Kurangnya pemisahan struktur dan kulit.

Jangan khawatir, Anda tidak sendirian. Saya berani bertaruh semua pengembang front-end pernah mengalami masalah menyakitkan itu dari waktu ke waktu, dan mungkin lebih banyak lagi. Saya dapat dengan aman mengatakan bahwa saya memiliki banyak proyek di masa lalu di mana saya menghadapi semua masalah tipikal itu.

Salah satu cara untuk menghindari atau meminimalkan masalah tersebut adalah dengan membangun secara modular.

Tombol Modular

Bagaimana cara membuat kode tombol itu dengan cara modular? Pendekatan modular adalah dengan menulis kode yang dapat Anda gunakan kembali. Ingat Lego itu, yang dapat digunakan dan digunakan kembali lagi.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Apa yang telah kami lakukan adalah pemisahan gaya yang cerdas. Kelas .button berisi gaya yang digunakan setiap tombol dalam proyek Anda, jadi Anda tidak perlu mengulanginya. Kelas .button-orange hanya menggunakan gaya yang relevan untuk tombol oranye. Anda akan melakukan hal yang sama untuk semua tombol lainnya dan menentukan latar belakang dan warna teksnya.

Modul tombol Anda dapat terdiri dari beberapa tombol independen, siap digunakan kapan pun Anda membutuhkannya.

Bagaimana Dengan Hal-Hal yang Lebih Kompleks?

Anda mengikuti prinsip yang sama untuk setiap komponen lain yang mungkin Anda perlukan. Tujuannya adalah untuk membuat modul yang merupakan elemen mandiri, independen dari modul lain. Ketika digabungkan, modul-modul ini akan membentuk templat, di mana Anda cukup menggunakan kembali modul sesuai kebutuhan dan bekerja untuk menyelesaikan desain Anda.

Untuk bacaan lebih lanjut tentang pengembangan front-end modular, saya sangat merekomendasikan SMACSS, yang merupakan arsitektur yang cenderung saya gunakan pada semua proyek saya, besar atau kecil.

Ingat, proses modular adalah tentang membangun, menguji, dan mengulangi. Modul pertama-tama diproduksi di editor Anda, lalu diuji di browser, lalu diulang jika diperlukan. Ulangi siklus itu kapan pun diperlukan.

Melibatkan Klien

Jangan lupakan kebutuhan klien — mereka ingin tetap terhubung dan mendapatkan konfirmasi bahwa mereka mendapatkan nilai uang mereka. Keindahan dari proses pengembangan ini adalah bahwa klien dapat menjadi anggota aktif dari tim Anda. Anda dapat dengan aman menunjukkan modul kepada mereka dan mereka dapat mengabaikan proses pengembangan dan memasukkan setiap saat untuk membuat produk lebih baik. Mereka tidak harus menunggu kompilasi statis selesai atau pencapaian yang dicapai sebelum melihat kemajuan nyata. Jika Anda meluangkan waktu untuk menjelaskan cara kerja modul kepada klien Anda, mereka akan memiliki pemahaman dan apresiasi yang lebih baik terhadap proses desain dan waktu yang dihabiskan untuk membangunnya.

Cara saya biasanya menyajikan modul ke klien sama seperti yang dilakukan Bootstrap — menyiapkan modul yang terisolasi bersama dengan kodenya adalah cara yang bagus untuk melibatkan semua desainer, pengembang, dan klien ke dalam proses.

Gunakan modul yang telah Anda buat sebagai blok pembangun untuk halaman. Untuk halaman indeks Anda, Anda dapat meletakkan modul navigasi di atas, modul pahlawan berikutnya, beberapa modul konten berikutnya, lalu footer Anda di bawah. Sebelum Anda menyadarinya, Anda sudah memiliki halaman untuk prototipe HTML. Tapi apa sebenarnya prototipe itu? Saya selalu menyukai definisi Leah Buley tentang prototipe dari bukunya yang luar biasa The User Experience Team of One:

Contoh berfungsi atau semi-berfungsi tentang bagaimana desain harus berperilaku dan beroperasi setelah diimplementasikan.

Dengan membangun prototipe, itulah yang akan Anda dapatkan di fase awal proyek — situs web semi-fungsi. Di mana mockup statis dan InVision gagal, prototipe HTML unggul. Prototipe berfungsi sebagai pengiriman responsif yang sempurna untuk klien Anda. Dan begitu klien setuju dengan tampilan dan nuansa prototipe Anda, yang perlu Anda lakukan hanyalah memolesnya sampai berfungsi sebagaimana mestinya. Bangun, uji, ulangi.

Gunakan kembali Blok Bangunan

Modul dan prototipe akan memungkinkan Anda untuk menggunakan kembali kode untuk proyek saat ini, tetapi juga untuk proyek mendatang. Mengubah modul dari proyek terakhir Anda dapat menghemat banyak waktu — modul yang Anda butuhkan di setiap proyek seringkali serupa. Saya memiliki perpustakaan besar modul yang sering saya gunakan kembali: tab, menu navigasi, tombol, remah roti, formulir, tabel, pagination, daftar, dll. Sementara kode modul tersebut tidak persis sama di semua proyek, bagian yang bagus dari itu dapat digunakan kembali, menghemat banyak waktu pengembangan. Saran saya untuk Anda adalah membuat modul yang dapat digunakan kembali untuk Anda sendiri juga. Lihat BASSCSS, Pure dan Refills untuk mendapatkan inspirasi.

Jangan berkecil hati jika beralih ke desain dan pengembangan modular membutuhkan waktu. Secara alami, jika prinsip-prinsip modular baru bagi Anda, mereka akan memerlukan perubahan desain dan proses pengembangan Anda, tetapi perubahan itu mungkin terbukti bermanfaat.

Metode dan teknik modular yang saya bahas dalam artikel ini hanya menggores permukaan. Namun demikian, saya sangat berharap artikel ini bermanfaat dan membuat Anda tertarik untuk mendalami desain dan pengembangan modular.