Pengantar Desain Atom untuk Desainer Web

Atom bukan hanya elemen HTML tetapi juga gaya milik mereka: font, warna, dimensi, dan aturan gaya CSS lainnya. Dengan kata-kata Brad sendiri, atom “tunjukkan sekilas semua gaya dasar Anda”.

Atom - Contoh

Berikut ini contoh dari situs web kami. Tajuk utama dari pos yang disarankan dapat menjelaskan satu jenis atom; mereka menggunakan kode HTML dan CSS yang sama dan bisa mudah dibedakan dari sisa konten.

Perhatikan bahwa Hongkiat.com tidak dirancang dengan desain atom, ini hanya digunakan untuk tujuan demonstrasi.

Inti dari desain atom adalah untuk desain UI dari bawah ke atas menggunakan lima tahap ini, tidak untuk mengidentifikasi komponen desain atom sesudahnya.

2. Molekul

SEBUAH molekul terbentuk oleh sekelompok atom. Molekul merupakan tahap selanjutnya dalam hirarki desain atom. Pikirkan tentang elemen UI yang lebih sederhana yang sudah ada terbuat dari lebih dari satu elemen HTML, seperti formulir pencarian atau posting yang direkomendasikan di sidebar.

Diorganisasikan menjadi molekul memberi tujuan untuk setiap atom. Dalam kelompok yang lebih besar (molekul), atom harus mendukung dan melengkapi satu sama lain, mereka harus bekerja sama dengan baik untuk membuat desain yang dapat digunakan.

Misalnya, judul (satu atom) harus dapatkan lebih banyak penekanan (font lebih besar, lebih berat, dll.) daripada nama penulis (atom lain) di blok posting yang disarankan. Dengan cara ini, kedua atom itu “dimaksud” untuk bekerja sebagai tim untuk mendapatkan hasil terbaik.

Molekul - Contoh

Dengan menggunakan contoh kami sebelumnya, Anda dapat melihat bahwa di bilah sisi Hongkiat, satu blok pos yang direkomendasikan dapat dilihat sebagai molekul. Molekul post yang direkomendasikan adalah dibangun dari tiga atom: thumbnail, judul, dan atom nama penulis.

3. Organisme

Organisme terdiri dari a kelompok molekul, atom (dan terkadang organisme lain). Dalam desain web, organisme komponen UI yang lebih kompleks yang mewakili bagian definitif halaman, seperti header, footer, atau sidebar.

Organisme dapat terdiri dari berbagai jenis molekul, misalnya bilah sisi dapat terdiri dari bilah pencarian dan berbagai jenis widget, atau dari molekul yang sama berulang beberapa kali, misalnya beberapa blok posting terkait satu sama lain. Dan, bisa jadi kombinasi keduanya.

Organisme - Contoh

Di situs web Hongkiat, sidebar bisa menjadi organisme. Ini terdiri dari a bilah pencarian (satu jenis molekul, hanya ditampilkan sekali) dan beberapa posting yang direkomendasikan (jenis molekul lain, ditampilkan berulang kali).

Namun, organisme sidebar juga dapat dilihat sebagai komposisi a molekul (bilah pencarian) dan organisme lain (widget posting yang disarankan dengan beberapa posting yang disarankan). Desain atom adalah a model yang fleksibel, aturannya tidak terlalu ketat, jadi dalam hal ini kita dapat mendefinisikan blok penyusun yang sama baik sebagai molekul maupun organisme.

4. Templat

Tahap selanjutnya dalam hirarki desain atom adalah template. Seperti yang Anda lihat, ini adalah saat desain atom berhenti menggunakan analogi kimia. Brad menahan diri dari terminologi pada saat ini karena menurutnya itu kurang dimengerti untuk klien dan pemangku kepentingan lainnya, dan pada dasarnya ini adalah dua tahap terakhir (template dan halaman) yang harus dijual oleh desainer.

Templat dibangun oleh organisme. Mereka objek tingkat halaman tapi tanpa konten akhir. Tujuan templat adalah untuk mewakili struktur dari konten yang mendasarinya.

Templat menampilkan betapa berbedanya atom, molekul, organisme “berfungsi bersama dalam konteks tata letak”. Mereka pada dasarnya mewakili kerangka sebuah halaman.

Template - Contoh

Sebagai contoh, pikirkan tentang a templat beranda dengan gambar placeholder dan blok teks lorem ipsum.

Di bawah, Anda dapat melihat contoh dari buku Desain Atom. Ini adalah templat laman beranda majalah TimeInc. Atom, molekul, dan organisme semuanya ada di tempatnya masing-masing hanya dengan konten skematik.

5. Halaman

Halaman mewakili tahap terakhir dari hirarki desain atom. Halaman adalah “contoh templat tertentu”. Di tahap halaman, templat dapatkan diisi dengan konten nyata (salin, salinan mikro, gambar, video, dll.), sama seperti yang akan muncul di UI asli.

Halaman memungkinkan desainer melihat bagaimana pengalaman pengguna akhir akan terlihat seperti, untuk uji desainnya dengan pengguna nyata, dan untuk mengukur seberapa baik kinerjanya dalam hal kegunaan, konversi, aksesibilitas, dan metrik lainnya.

Variasi halaman & templat

Tujuan lain dari tahap halaman adalah membuat variasi templat mungkin. Kami berbicara tentang variasi templat ketika mendasari Templatnya sama tapi penduduknya konten (sedikit) berbeda. Misalnya, jika Anda ingin menampilkan konten yang berbeda untuk grup pengguna yang berbeda (mis. Untuk pengunjung dibandingkan pengguna yang masuk), atau ketika satu tajuk jauh lebih panjang daripada yang lain.

Menggunakan variasi templat sangat penting jika kita ingin membuat konsisten dan ulet antarmuka pengguna. Komponen yang lebih kecil (atom, molekul, organisme) harus berfungsi dengan baik dalam skenario yang berbeda.

Misalnya, sebuah tombol harus terlihat dapat diklik dengan apa pun elemen sekitarnya di sekitar. Jika tidak terlihat dapat ditindaklanjuti dalam variasi tertentu, Anda perlu mendesain ulang tombol atom sampai itu cocok untuk semua kasus penggunaan.

Halaman - Contoh

Di bawah, Anda dapat melihat tahap halaman dari templat halaman beranda TimeInc sebelumnya. Terlihat berbeda, ya? Ini hanya satu variasi templat, meskipun. Untuk memiliki UI yang efektif, tim desain harus berpikir keras apa yang bisa berubah di situs nyata. Kemudian, mereka perlu menguji desain untuk variasi templat itu (halaman) juga.