WeLearn

Saya Adnan yang suka berbagi informasi lowongan pekerjaan, pengalaman hidup, berbagi makanan orang lain (LOL), olahraga sambil bermain seperti sepedahan, joging, berenang, futsal, dan badminton. Pekerjaan yang saya lakoni sebagai web development mencakup web sketch, web design, web program, web testing, dll. Saya akan berbagi dan berdiskusi dengan teman-teman tentang banyak hal seperti pengalaman saya sebagai web development, pengalaman hidup & juga pengetahuan yang saya miliki.

Membuat website mudah dengan cara modular Part 3 - Atomic design

atomic design

image from google

Pada artikel sebelumnya saya menjelaskan penerapan modular pada level template, dan ternyata masih ada level-level lainnnya hingga ke bagian terkecil yang disebut Atomic design.

Atomic Design adalah pendekatan desain yang dipopulerkan oleh Brad Frost, yang memecah elemen aplikasi web menjadi bagian-bagian modular hingga yang paling kecil.

Elemen-elemen tadi dibagi menjadi beberapa level atau hirarki: atom, molekul, organisme, template, dan laman.Tujuannya adalah untuk mereduksi adanya kode berulang, mereduksi waktu set up, dan meningkatkan konsistensi antar komponen dan tampilan.

Sistem ini menggunakan pattern library sebagai repository dari komponen-komponen web yang bisa diimport (importable) dan dapat digunakan kembali (reusable). Hal ini juga sudah diterapkan, misalnya oleh Shopify yang memiliki Polaris, IBM yang memiliki Carbon, atau Lonely Planet yang memiiki Rizzo.

Dengan pattern library ini,biasanya waktu yang dibutuhkan memang lebih panjang daripada pendekatan desain laman (pages) biasa. Namun, metode ini lebih kolaboratif dan menjamin reusability dan maintainability untuk jangka panjang.

Dalam prakteknya, komponen-komponen web dipecah menjadi bagian-bagian yang lebih kecil (modular) dan dikelompokkan sesuai level dan hirarki.

Misalnya pada level atom, telah ditentukan komponen-komponen kecil seperti tombol ‘Search’, input pencarian beserta placeholder, dan pelabelan ‘Search the Site’. Tak ketinggalan pula penentuan elemen-elemen palet warna, tipografi, ukuran teks, dan margin dilakukan pada level ini.

Di level molekul (molecule), elemen-elemen pada level atomis dikelompokkan dan diatur dalam modul yang lebih besar. Misalnya modul pencarian yang tersusun dari komponen-komponen: tombol Search, input pencarian (text field), dan label ‘Search the Site’.

Selanjutnya pada level organisme (organism), modul pencarian juga dikelompokkan dengan elemen-elemen lain seperti menu dan logo sebagai elemen header. Meningkat lagi ke hirarki di atasnya, modul header kemudian diatur bersama-sama dengan elemen-elemen lainnya menjadi sebuah template.

Yang terakhir, template yang sudah ada dibuat menjadi sebuah halaman spesifik yang sudah dilengkapi dengan representasi konten yang nyata dan menunjukkan antarmuka yang sebenarnya dari sebuah website. Misalnya laman Home/ Beranda, atau laman blog yang dibangun dari sebuah template.

Kelebihan yang ditawarkan oleh metode Atomic Design, adalah kemampuan untuk pindah dari konsep yang abstrak kepada hal yang konkrit. Selain itu, ada pemisahan yang jelas antara struktur sebuah website dengan konten.

Adapun kekurangan dari sistem ini adalah tidak ada orang khusus yang merawat pattern library. Oleh karenanya, komponen-komponen di pattern library bisa menjadi usang, atau tidak terpantau sehingga menjadi penuh.

Oleh karenanya, perlu sebuah tim khusus yang bertanggung jawab menangani pattern library. Bila Anda yakin akan menggunakan lagi komponen-komponen tertentu di masa yang akan datang, taruh di pattern library.Tapi kalau tidak, letakkan saja langsung dalam situs web, dan secara berkala bersihkan komponen yang sudah tidak dibutuhkan.

modular dengan atomic design

Kesimpulan

Penerapan modular menjadi keseharusan dalam membuat sebuah project dengan skala besar dengan maintenance yang dilakukan berkala dan penambahan fitur-fitur dikemudian hari.


Semoga bermanfaat :)


  • Silahkan masukan huruf yang tertulis pada gambar di atas dengan benar.

    Isi tulisan akan diterbitkan dan hanya pemilik blog yang dapat menghapusnya.

    削除
    Membuat website mudah dengan cara modular Part 3 - Atomic design
      Komentar(0)