Saat ini situs-situs di internet banyak tumbuh dengan desain tampilannya yang unik dan menarik. Dalam membuat desain, pembuat situs biasanya memanfaatkan user interface. Tahukah kamu, ada beberapa cara yang bisa kamu gunakan agar user interface-mu semakin menarik? Nah, salah satunya adalah dengan atomic design.
Atomic design ini berguna untuk mendesain komponen dari yang paling kecil hingga paling besar. Dengan ini juga, para UI designer akan lebih terbantu untuk memerhatikan hierarki desain.
Penasaran apa saja tingkatan dari atomic design? Yuk, mari simak!
1. Tingkatan Atom
Dalam user interface, atom adalah tingkatan yang paling kecil dan tidak bisa “terbelah” lagi. Atom menjadi hal fundamental yang membangun desain user interface. Layaknya atom di dunia sains, atom dalam desain UI terlihat abstrak dan tidak akan berguna jika berdiri sendiri.
Contoh atom dalam user interface, yaitu warna, jenis huruf, animasi, serta gambar-gambar atau logo sederhana. Atom ini berguna untuk memetakan desainmu di bagian-bagian selanjutnya.
2. Tingkatan Molekul
Seperti dalam sains, suatu hal baru bisa tergambar ketika atom-atom berhasil bergabung membentuk molekul. Molekul adalah sekelompok atom yang bersatu dan mulai membentuk sesuatu. Dalam desain user interface, molekul menjadi tulang belakang dari sebuah desain.
Dalam hal user interface, pada tingkatan ini molekul berfungsi secara sederhana dan kolektif. Contoh dari tingkatan molekul, yaitu form label, search button, dan lain-lain.
Baca juga: Yuk, Kenalan dengan Profesi UI/UX Designer Lewat MySkill.id!
3. Tingkatan Organisme
Tingkatan molekul akan membangun fondasi untuk tingkat selanjutnya. Gabungan dari beberapa molekul akan membentuk suatu organisme. Organisme lalu membentuk user interface yang lebih kompleks dan beragam daripada tingkatan sebelumnya.
Biasanya para UI designer akan menggunakan tingkatan ini untuk memberikan ide dan gambaran awal desain kepada klien. Contohnya, gambaran tentang halaman situs Google image yang memiliki search button, enter button, recommendation table, logo, serta gambar-gambar lain.
4. Tingkatan Template
Template berisikan kumpulan organisme yang membentuk satu halaman utuh. Pada tahap ini template sudah terbentuk jelas dan menggambarkan sebuah konteks. Dalam hal ini klien sudah bisa melihat ide utama dari desain yang dibuat.
Baca juga: Ini Dia 4 Aplikasi Wajib Buat Kamu yang Ingin Menjadi Designer UI/UX!
5. Tingkatan Pages
Pages adalah bagian spesifik dari template. Pada tahap ini akan diberikan gambaran kasar dari template dengan menyisipkan konten representatif yang sesuai dengan apa yang klien inginkan. Uji coba terhadap efektivitas user interface juga mulai dilakukan. Tahapan ini menjadi penghujung dari atomic design dalam user experience.
Selanjutnya, kamu tertarik untuk mulai berkecimpung dalam dunia user interface design? Hebatnya, MySkill memiliki kelas-kelas yang dapat membantumu untuk belajar dan mempersiapkan karier dalam bidang UI and UX design. Yuk, kembangkan karier impianmu bersama MySkill!
Baca juga: Ini Dia 4 Tips Belajar yang Bisa Ngebantu Kalian Menjadi UI/UX Designer Handal!
Editor: Resti Hanafiani
