Desain Atom: Meledakkan Apa yang Anda Pikirkan Anda Ketahui Tentang Desain Web

Sudah menjadi kepercayaan umum bahwa fleksibilitas sama dengan tidak terkendali, bahwa untuk menjadi kreatif Anda juga harus tidak terkendali. Namun, untuk menyelesaikan proyek, terutama yang serumit desain web, membuat struktur sebenarnya dapat memberi Anda lebih banyak fleksibilitas. Anda membutuhkan kerangka kerja – itu tidak bisa dinegosiasikan. Melenturkan otot artistik dan kreatif Anda di mana Anda benar-benar memiliki kebebasan untuk menghasilkan desain yang terinspirasi sekaligus fungsional dan realistis. Desain atomik adalah pendekatan metodis dan masuk akal untuk desain web yang masih memberi Anda kesempatan untuk bereksperimen dalam kerangka kerja.

Sistem Desain

Desainer tidak hanya membuat halaman web lagi; mereka membuat sistem desain. Sistem desain meliputi:

• Warna
• kisi-kisi
• Tekstur
• Tipografi
• Dll.

Saya suka bagaimana Jack Strachan di UX Planet menjelaskan sistem desain: “Singkatnya, sistem desain adalah kumpulan komponen yang dapat digunakan kembali, dipandu oleh standar yang jelas, yang dapat dirakit bersama untuk membangun sejumlah aplikasi. Sistem desain adalah metode untuk menerjemahkan pengalaman dan bahasa visual yang konsisten di seluruh produk saat mengerjakan titik sentuh yang berbeda.”

Elemen desain bisa subjektif, dan mereka bisa dengan cepat menjadi berlebihan dan kacau. Untuk mengkategorikannya, desain harus dilihat dengan cara yang lebih metodis. Itulah yang dilakukan oleh desainer web Brad Frost.

Kelahiran Desain Atom

Beginilah cara Brad membuat desain atom: “Dalam mencari inspirasi dan kesejajaran, saya terus kembali ke kimia. Pemikirannya adalah bahwa semua materi (apakah padat, cair, gas, sederhana, kompleks, dll.) terdiri dari atom. Unit-unit atom itu terikat bersama untuk membentuk molekul, yang pada gilirannya bergabung menjadi organisme yang lebih kompleks untuk akhirnya menciptakan semua materi di alam semesta kita.”

Dia melanjutkan untuk menjelaskan bahwa antarmuka terdiri dari komponen yang dapat dikategorikan ke dalam blok bangunan. Berikut urutan dari terkecil ke terbesar:

• atom
• Molekul
• organisme
• Template
• halaman

Sumber: BradFrost.com

Blok Bangunan Desain Atom

Daya tarik utama dari desain atom adalah bahwa ia mempromosikan konsistensi. Banyak elemen yang Anda buat dapat dengan mudah direplikasi, digunakan kembali, atau diskalakan. Dan untuk melacak semuanya, desainer dapat membangun perpustakaan sendiri di mana mereka dapat melihat semua elemen dan gaya mereka di satu tempat. Ada beberapa ruang untuk penyesuaian juga, tetapi hanya karena blok bangunan menjadi lebih kompleks dan lebih luas cakupannya. Mari kita masuk ke lima blok bangunan:

1. atom

Karena atom penting di alam, tag HTML adalah antarmuka web. Artinya: semua antarmuka web dimulai dengan tag HTML atau elemen dasar (animasi, tombol, palet warna, font, label formulir, dll.). Meskipun atom-atom ini tidak bermanfaat bagi desain web sendiri, atom-atom ini diperlukan untuk membangun antarmuka web.

2. Molekul

Molekul lebih kompleks daripada atom, tetapi mereka tidak kompleks secara keseluruhan. Saat Anda mengelompokkan atom yang tidak terlalu berguna, Anda memiliki molekul yang lebih berguna: Label Formulir Pencarian + Input + Tombol (atom) = Formulir Pencarian Lengkap (molekul)

3. Organisme

Saat Anda mengelompokkan molekul, Anda mendapatkan organisme, yang lebih kompleks daripada pendahulunya: Logo + Navigasi + Formulir Pencarian + Ikon Media Sosial (molekul) = Masthead (organisme) Selesai

Idealnya, Anda akan dapat menggunakan kembali organisme di situs web atau di situs web yang berbeda, menjaga tata letak umum dan menyesuaikannya dengan teks dan gambar yang berbeda. Misalnya, Anda dapat menggunakan jenis masthead yang sama di semua situs web yang Anda desain, atau Anda dapat membuat organisme khusus produk (gambar + judul + harga) yang Anda ulangi di halaman produk.

Ini adalah saat antarmuka web benar-benar mulai terbentuk dengan cara yang unik dan disesuaikan. Sebelumnya, antarmuka Anda hanyalah kumpulan elemen biasa. Selama tahap organisme, situs web menjadi lebih visual.

Jika Anda berbagi proses Anda dengan klien, ini adalah bagian di mana mereka akan pergi, "Oh, saya mengerti." Inilah saatnya untuk memulai wireframing atau menyusun maket sehingga klien dapat memberi Anda umpan balik sebelum Anda melangkah lebih jauh.

4. Template

Saat Anda mengelompokkan organisme, Anda memiliki template. Ini adalah saat tata letak halaman yang sebenarnya datang bersama-sama. Sementara molekul dan organisme memiliki tata letak internal mereka sendiri, tahap templat adalah saat Anda mulai melihat bagaimana mereka saling melengkapi dan berinteraksi satu sama lain; di mana mereka ditempatkan dalam kaitannya satu sama lain; dan bagaimana mereka mengalir secara keseluruhan. Template memberikan konteks molekul dan organisme. Perhatikan bahwa template memiliki konten placeholder, bukan konten kustom atau asli.

Sumber: BradFrost.com

5. Halaman

Halaman membawa template ke tingkat berikutnya dengan mengganti konten placeholder dengan konten yang sebenarnya. Ini mungkin tidak akan menjadi konten akhir, tetapi akan lebih mewakili desain dan konten akhir. Menambahkan konten permanen berkualitas tinggi pada saat ini dapat menjadi sia-sia karena situs web masih harus diuji, ditinjau, dan diubah. Meskipun demikian, ada kemungkinan Anda akan memasukkan konten yang sudah selesai – itu tergantung di mana Anda berada dalam proses itu.

Ini adalah tahap di mana situs web akan berada di bawah pengawasan paling ketat. Bergantung pada ulasan dan umpan balik yang Anda dapatkan, molekul, organisme, dan templat mungkin harus diubah. Ini juga saat yang tepat untuk menguji variasi desain.

Pikiran Akhir

Hal tentang desain atom adalah bahwa itu bukan hal baru – bertele-tele, tetapi teorinya tidak. Ini adalah bagaimana situs web telah dirancang untuk waktu yang lama sekarang. Berbicara dalam istilah desain atom tidak akan secara otomatis menjadikan Anda seorang desainer atau pengembang hebat; itu bukan pengganti kerja keras.

Salah satu manfaat membicarakannya dengan cara ini, dalam menggunakan terminologi semacam ini untuk memperjelas metodologi, adalah lebih mudah untuk dipahami oleh non-pengembang – Anda dapat menjelaskan proses Anda kepada klien. Dan untuk pengembang terorganisir, ini adalah cara untuk mengelompokkan desain. Anda akan dapat menelusuri satu komponen atau sekelompok kecil elemen yang tidak berfungsi. Ini dapat membantu Anda melihat hutan untuk pepohonan daripada mengatakan, "Semua ini cacat."

Desain atom memungkinkan Anda merangkul kreativitas tanpa tersesat di dalamnya. Ini mempermasalahkan elemen dasar dan sistem desain dengan cara yang membuat Anda memulai proyek lebih cepat sehingga waktu dapat dihabiskan di tempat yang paling membutuhkan seni dan keterampilan Anda – membuat adaptasi yang rumit, memecahkan masalah, memenuhi kebutuhan klien, dan akhirnya membuat situs web yang berjalan di luar norma.

Pertahankan momentum desain web itu dan lihat 10 Aturan Desain UI yang Baik untuk Diikuti di Setiap Proyek Desain Web.

Gambar Unggulan melalui ShadeDesign / shutterstock.com