Atom Tasarımı: Web Tasarımı Hakkında Bildiğinizi Düşündüğünüz Şeyleri Şişirmek

Esnekliğin sınırsız olmakla aynı şey olduğu, yaratıcı olmak için aynı zamanda dizginsiz olmanız gerektiği yaygın bir inançtır. Yine de, özellikle web tasarımı kadar karmaşık bir projeyi tamamlamak için, yapı oluşturmak size daha fazla esneklik sağlayabilir. Bir çerçeveye ihtiyacınız var - bu pazarlık edilemez. Sanatsal, yaratıcı kaslarınızı gerçekten özgür olduğunuz yerde esnetmek, işlevsel ve gerçekçi oldukları kadar ilham veren tasarımlarla sonuçlanacaktır. Atomik tasarım, web tasarımına hala çerçeve içinde deney yapma şansı veren mantıklı, metodik bir yaklaşımdır.

Tasarım Sistemleri

Tasarımcılar artık sadece web sayfaları oluşturmuyor; tasarım sistemleri oluştururlar. Tasarım sistemleri şunları içerir:

• Renk
• ızgaralar
• Doku
• tipografi
• Vesaire.

UX Planet'te Jack Strachan'ın tasarım sistemlerini nasıl tanımladığını seviyorum: "Kısacası, bir tasarım sistemi, herhangi bir sayıda uygulama oluşturmak için bir araya getirilebilen, net standartlar tarafından yönlendirilen, yeniden kullanılabilir bileşenlerden oluşan bir koleksiyondur. Tasarım sistemleri, farklı temas noktalarında çalışırken tutarlı bir deneyimi ve görsel dili bir ürüne çevirmenin bir yöntemidir.”

Tasarım öğeleri öznel olabilir ve hızla bunaltıcı ve kaotik hale gelebilirler. Bunları kategorize etmek için tasarıma daha metodik bir şekilde bakmak gerekir. Web tasarımcısı Brad Frost'un yaptığı buydu.

Atom Tasarımının Doğuşu

Brad atomik tasarımı şu şekilde ortaya çıkardı: “İlham ve paralellikler ararken kimyaya geri dönmeye devam ettim. Düşünce, tüm maddelerin (ister katı, ister sıvı, gaz, basit, karmaşık, vb.) atomlardan oluştuğudur. Bu atomik birimler bir araya gelerek molekülleri oluştururlar ve bu da sonunda evrenimizdeki tüm maddeyi yaratmak için daha karmaşık organizmalara dönüşür.”

Arayüzlerin yapı taşları olarak sınıflandırılabilecek bileşenlerden oluştuğunu açıklamaya devam ediyor. İşte küçükten büyüğe sıralama:

• atomlar
• moleküller
• organizmalar
• şablonlar
• Sayfalar

Kaynak: BradFrost.com

Atom Tasarımının Yapı Taşları

Atom tasarımının ana özelliği, tutarlılığı teşvik etmesidir. Oluşturduğunuz öğelerin çoğu kolayca çoğaltılabilir, yeniden kullanılabilir veya ölçeklenebilir. Ve hepsini takip etmek için tasarımcılar kendilerine tüm öğelerini ve stillerini tek bir yerde görebilecekleri bir kitaplık oluşturabilirler. Özelleştirme için de biraz alan var, ancak yalnızca yapı taşları kapsam olarak daha karmaşık ve daha büyük hale geldikçe. Beş yapı taşına girelim:

1. Atomlar

Atomlar doğal dünyada önemliyse, HTML etiketleri de web arayüzleri içindir. Anlamı: tüm web arayüzleri HTML etiketleri veya temel öğelerle (animasyonlar, düğmeler, renk paletleri, yazı tipleri, form etiketleri vb.) başlar. Bu atomlar kendi başlarına web tasarımına faydalı olmasalar da web arayüzünü oluşturmaları gerekir.

2. Moleküller

Moleküller atomlardan daha karmaşıktır, ancak genel olarak karmaşık değildirler. Kullanışlı olmayan atomları birlikte grupladığınızda, daha kullanışlı molekülleriniz olur: Arama Formu Etiket + Giriş + Düğme (atomlar) = Tamamlanmış Arama Formu (molekül)

3. Organizmalar

Molekülleri birlikte grupladığınızda, öncekilerden daha karmaşık organizmalar elde edersiniz: Logo + Gezinme + Arama Formu + Sosyal Medya Simgeleri (moleküller) = Tamamlanmış Masthead (organizma)

İdeal olarak, genel düzeni koruyarak ve farklı metin ve resimlerle özelleştirerek organizmaları web sitesinde veya farklı web sitelerinde yeniden kullanabileceksiniz. Örneğin, tasarladığınız tüm web sitelerinde aynı tip masthead kullanabilir veya ürün sayfasında tekrarladığınız ürüne özel bir organizma (resim + başlık + fiyat) oluşturabilirsiniz.

Bu, web arayüzünün gerçekten benzersiz, özelleştirilmiş bir şekilde şekillenmeye başladığı zamandır. Şimdiye kadar, arayüzünüz sadece düz öğelerden oluşan bir koleksiyondur. Organizmalar aşamasında, web sitesi daha görsel hale gelir.

Sürecinizi bir müşteriyle paylaşacak olsaydınız, "Oh, anladım" diyecekleri kısım burasıdır. Bu, tel çerçeve oluşturmaya başlamanın veya maketleri bir araya getirmenin zamanıdır, böylece müşteri daha ilerlemeden önce size geri bildirim verebilir.

4. Şablonlar

Organizmaları birlikte grupladığınızda şablonlarınız olur. Bu, gerçek sayfa düzeninin bir araya geldiği zamandır. Moleküllerin ve organizmaların kendi iç düzenleri olsa da, şablonlar aşaması, bunların birbirlerini nasıl tamamladığını ve etkileşime girdiğini görmeye başladığınız zamandır; birbirlerine göre yerleştirildikleri yer; ve bir bütün olarak nasıl aktıklarını. Şablon, moleküllere ve organizmalara bağlam verir. Şablonların özel veya orijinal içeriğe değil, yer tutucu içeriğe sahip olduğunu unutmayın.

Kaynak: BradFrost.com

5. Sayfalar

Sayfalar, yer tutucu içeriği gerçek içerikle değiştirerek şablonları bir sonraki düzeye taşır. Muhtemelen nihai içerik olmayacak, ancak nihai tasarım ve içeriği daha fazla temsil edecek. Bu noktada yüksek kaliteli, kalıcı içerik eklemek israf olabilir çünkü web sitesinin hala test edilmesi, gözden geçirilmesi ve ayarlanması gerekiyor. Eğer bu süreçte nerede bağlıdır - Bu size kesinleşmiş içeriğinde fiş olasıdır olduğunu söyledi.

Bu, web sitesinin en çok incelemeye tabi tutulacağı aşamadır. Aldığınız incelemelere ve geri bildirimlere bağlı olarak moleküller, organizmalar ve şablonların değiştirilmesi gerekebilir. Bu aynı zamanda tasarım varyasyonlarını test etmek için de iyi bir zamandır.

Son düşünceler

Atom tasarımıyla ilgili olan şey, bunun yeni olmamasıdır - laf kalabalığıdır, ancak teori değildir. Web siteleri uzun süredir bu şekilde tasarlanıyor. Atomik tasarım terimleriyle konuşmak sizi otomatik olarak harika bir tasarımcı veya geliştirici yapmaz; sağlam çalışmanın yerini tutmaz.

Metodolojiyi açıklığa kavuşturmak için bu tür terminolojiyi kullanmanın bu şekilde konuşmanın bir yararı, geliştirici olmayanların anlamasının daha kolay olmasıdır - sürecinizi müşterilere açıklayabilirsiniz. Ve organize geliştirici için tasarımları bölümlere ayırmanın bir yolu. Çalışmayan bir bileşeni veya küçük bir öğe grubunu ayrıntılı olarak inceleyebileceksiniz. “Bütün bu şey kusurlu” demek yerine, ağaçlar için ormanı görmenize yardımcı olabilir.

Atomik tasarım, yaratıcılığın içinde kaybolmadan kucaklamanızı sağlar. Temel öğeleri ve tasarım sistemlerini, bir projeye daha hızlı başlamanızı sağlayacak şekilde karıştırır, böylece zaman, sanat ve becerilerinizin en çok ihtiyaç duyulduğu yerde harcanabilir - karmaşık uyarlamalar yapmak, sorunları çözmek, müşteri ihtiyaçlarını karşılamak ve nihayetinde bir web sitesi oluşturmak. normun ötesinde.

Bu web tasarımı ivmesini sürdürün ve Her Web Tasarım Projesinde İzlenecek 10 İyi Kullanıcı Arayüzü Tasarımı Kuralına göz atın.

ShadeDesign / Shutterstock.com aracılığıyla Öne Çıkan Görsel