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!
Mau jadi Digital Marketer? Baca panduan lengkap Digital Marketing berikut.
Daftar Isi
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.
Tertarik jadi Data Analyst? Baca panduan lengkap Data Analysis ini.
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.
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.
Mau jago Microsoft Excel? Simak panduan lengkap Excel di sini.
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.
Mau jadi UI-UX Designer? Cek panduan lengkap UI-UX Design berikut.
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!
Mari terus belajar dan kembangkan skill di MySkill
Dibuat oleh tim MySkill, startup pengembangan skill dan karir terbesar di Indonesia. MySkill juga mendapatkan penghargaan dari LinkedIn sebagai Top Startup Indonesia pada 2022 dan 2023. Beberapa sumber referensi tulisan di blog MySkill seperti: Kompas, IDN Times, Forbes, Indeed, Semrush, Hubspot, AIHR, Nielsen Norman Group, Xero, Atlassian, Canva, W3, Grammarly dan sebagainya.