Atomik Tasarım ve Eskiz – İş Akışını İyileştirme Kılavuzu

Sketch ve Atomic Design, tasarımcıların standardizasyona ve daha verimli bir iş akışına izin veren tasarım sistemleri oluşturmak için kullanabilecekleri güçlü bir araç ve metodoloji setidir.

Tasarım Sistemleri: Bir Astar

Tasarım sistemi, bir ürünün oluşturulması ve ömrü boyunca ekiplerin ortak bir dil etrafında birleşmesine yardımcı olan bir dizi yeniden kullanılabilir bileşen ve yönergedir.

Çoğu durumda, tasarım sistemleri bir stil kılavuzundan ve bir bileşen kitaplığından oluşur. Marka değerlerinin yanı sıra ses ve ton gibi unsurları da içerebilirler. Bir tasarım sistemine sahip olmanın amacı, bir ürün veya marka için tek bir gerçek kaynağı olarak hareket eden bir dizi standart oluşturmaktır.

Google'ın Materyal Tasarımı, yapılandırılmış bir UI tasarım sistemine bir örnektir. Materyal Tasarımı, uyumlu Android uygulamaları tasarlamanın ve geliştirmenin bir yolu olarak 2014 yılında tanıtıldı.

Başka bir örnek Mailchimp'in Sesi ve Tonu'dur. Kişinin sesinin nasıl her zaman aynı olduğunu ancak tonunun bağlama göre değiştiğini açıklar. Bunun farkında olmak, içeriği güçlendirmeye ve markaya kişilik kazandırmaya yardımcı olur.

Bir tasarım sistemi oluşturmak için kullanılabilecek birçok farklı yöntem olsa da, ekibin ortak bir dil ve standartlar dizisi etrafında birleşmesini sağlayan bir çerçeve seçmek iyi bir fikirdir. Atomik Tasarım, bu iki hedefe ulaşan bir çerçevenin harika bir örneğidir.

Atom Tasarımı: Bina Tasarım Sistemleri

2013 yılında Brad Frost tarafından tanıtılan bir metodoloji olan Atomik Tasarım, her tasarım sisteminin bir arada var olan bir dizi yapı taşı olarak tanımlanabileceği fikrine dayanmaktadır.

Atomik Tasarım bileşenlerine hızlı bir genel bakış:

• atomlar Bir tasarım sisteminin temel yapı taşlarını temsil eder. Bir örnek, bir düğme veya bir metin stilidir.
• moleküller Bir birim olarak birlikte çalışan bir grup atom. Moleküller somut UI öğeleridir. Örneğin, bir arama formu oluşturmak için bir düğme ve metin alanı gruplandırılabilir.
• organizmalar . Karmaşık bir yapıda birlikte çalışan atomlar ve moleküller. Gezinme çubuğuyla gruplandırılmış bir arama alanı, bir web sitesinde bir başlık organizması oluşturur.
• Şablonlar. Bileşenleri içerik yapısını tanımlayan bir düzene yerleştiren sayfa düzeyindeki nesneler. Örneğin, bir başlık organizmasını alıp bir ana sayfa şablonuna yerleştirmek.
• Sayfalar. Nihai ürünü temsil eden şablon örnekleri.

“Her zamankinden daha fazla ekran boyutuna ve daha fazla yeteneğe sahip daha fazla cihazda daha fazla tarayıcı kullanarak daha fazla bağlamda daha fazla kullanıcı için arayüzler yapmakla görevlendirildik. Bu gerçekten göz korkutucu bir görev. Neyse ki tasarım sistemleri yardım etmek için burada.”—Brad Frost, Atomik Tasarım ve tasarım sistemlerine giriş olarak.

Bir tasarım sistemi oluşturmak ve sürdürmek için Atom Tasarımını kullanmak, tasarımcıların daha verimli çalışmasına ve ekipleri içinde daha iyi iletişim kurmasına yardımcı olacaktır. Tasarım sistemleri oluşturmak ve sürdürmek için çok sayıda araç ve yöntem vardır, ancak genellikle en iyi araçlar en aşina olduğumuz araçlardır.

Sketch ile Atom Tasarımı Nasıl Kullanılır

Atomik Tasarım kullanarak bir tasarım sistemi geliştirmek için harika (ve zaten tanıdık) bir araç Sketch'tir. Atomlar, moleküller ve organizmalar yaratmamız için bir tuval sağlar: bir tasarım sisteminin özünü tanımlamak için gereken elementler.

Atomlar Yaratmak

Sketch'te üç tür atom oluşturarak başlıyoruz: semboller, katman stilleri ve metin stilleri.

Semboller. Semboller, yeniden kullanılabilir bileşenlerden başka bir şey değildir. Bir ürün boyunca somutlaştırılabildikleri için bir kez tanımlanırlar. Örneğin, bir ok sembolü (atom) kenarlık rengi, boyutu vb. özelliklerle tanımlanabilir. Daha sonra bu sembolü her seferinde yeniden oluşturmak zorunda kalmadan yeniden kullanabiliriz.

Katman Stilleri . Katman stilleri, her katmanda tutarlı kalan yeniden kullanılabilir görsel stil öğeleridir. Örneğin, önceden tanımlanmış olan okun dolgu rengi.

Metin Stilleri. Katman stillerine benzer metin stilleri, benzer metin nesneleri arasında tutarlılık sağlayan yeniden kullanılabilir öğelerdir. Örneğin, bir h1 öğesinin yazı tipi boyutunu ve rengini tanımlamak. Google Dokümanlar veya Microsoft Word'deki metin stillerine benzer şekilde çalışır.

Sembolleri, katman stillerini ve metin stillerini tanımladığımızda, Sketch bunları semboller ve metin stilleri menülerinde “/” (eğik çizgi) kullanarak hiyerarşik kategorilere ayırabilir. Adlandırma kurallarına uymak ve iyi tanımlanmış bir ana kategori kümesine sahip olmak, dosyalara düzenli bir yapı vererek karışıklığı ve tutarsızlıkları azaltır.

Sketch'te semboller, metin ve katman stilleri için hiyerarşik kategoriler oluşturmanın bazı yolları.

Atoms/ altında aşağıdaki önerilen adlandırma kuralını kullanarak sembolleri temsil edebiliriz:

• Varlıklar
• Düğmeler
• Giriş Kontrolleri
• Görüntüler
• Navigasyon
• Bilgi

Katman stillerini sembollere dönüştürmeyeceğiz, bu nedenle onları semantik gruplarıyla tanımlamak yeterlidir. Yine, Atomları / kullanarak:

• Dolgular
• Sınırlar
• gölgeler
• Gradyanlar

Katman stillerine benzer şekilde, Atoms / altında metin stillerini şu şekilde oluşturabiliriz:

• Başlıklar
• Gövde
• Altyazı
• Etiketler
• Bağlantılar

Birleşik bir tasarım dili yalnızca bir dizi statik kural ve tek tek atomdan oluşmamalıdır; gelişen bir ekosistem olmalıdır.—Airbnb, Görsel Dil Oluşturma konusunda.

Moleküller Yaratmak

Atomlar, bir ürünün tasarım yönergelerinin temel bölümünü tanımlar, ancak kendi başlarına tamamen yararlı değildir. Bazı işlevler elde etmek için atomları birleştirir ve moleküller oluştururuz.

Bir arama işlevi oluşturmak için bir etiketin (atomun) bir giriş düğmesiyle (atom) birleştirilmesi, yaygın olarak kullanılan bir molekül öğesinin iyi bir örneğidir.

Burada biraz gri alan olabileceğinden dikkatli olun. Kod düzeyinde bir düğme bir atom olarak kabul edilir, ancak bir katman stili ve bir metin stili atomu gruplandırdığımız için tasarım düzeyinde bir düğme bir molekül olarak kabul edilir. Herhangi bir karışıklığı önlemek için yalnızca kod düzeyindeki öğeler hakkında düşünmek iyi bir fikirdir.

Moleküller/ kategorisine giren ana kategoriler şunlardır:

• Bilgi
• Navigasyon
• Giriş Kontrolleri

Moleküller ürünlerimizi etkileşimli bir şekilde şekillendirmeye başlayacağından, yukarıdaki kategorileri daha fazla tanımlamak iyi bir fikirdir. Bu durumda, bir kalıp kitaplığını temsil eden bir dizi alt kategori tanımlayacağız:

• Açılır Listeler
• geçiş yapar
• kaydırıcılar
• Sekmeler
• sayfalandırma
• İlerleme Göstergeleri
• Tarih Alanları
• Metin Alanları
• onay kutuları
• Radyo Düğmeleri
• Modüller

Organizmalar Yaratmak

Organizmalar atom ve molekül gruplarıdır. Ayrıca diğer organizmaların bir parçası olabilirler.

Atomların ve moleküllerin aksine, organizmaların tasarladığımız ürünlerde soyut bir içeriği yoktur; belirli eylemlerle kolayca tanımlanabilen somut, yeniden kullanılabilir bileşenlerdir. Yapıları bir atom veya molekülden daha karmaşıktır.

Önceden tanımlanmış arama alanı, gezinme çubuğu (molekül) ve logo (atom) gibi diğer bileşenlerle gruplandırılırsa, bir organizma oluşturulur. Bir örnek, bir gezinme çubuğu veya bir takvimdir.

Moleküller gibi organizmalar da aynı kategorilere ve alt kategorilere sığabilir:

Organizmalar için oluşturacağımız ana kategoriler/:

• Bilgi
• Navigasyon
• Giriş Kontrolleri

Moleküllerde olduğu gibi, organizmalar için de alt kategoriler oluşturacağız:

• Açılır Listeler
• geçiş yapar
• kaydırıcılar
• Sekmeler
• sayfalandırma
• İlerleme Göstergeleri
• Tarih Alanları

Bu noktaya kadar, kullanıcı arayüzünün çoğu zaten tasarlandı, bu yüzden artık tasarım için ihtiyaç duyulduğunda bileşenlerimizin örneklerini çağırmak kadar basit.

Bu bileşenlerin her birini semantik gruplarına göre bulmak, onları doğrudan Sketch araç çubuğundaki ekleme panelini kullanarak arayarak, burada iyi organize edilmiş bir 3 ana kategori seti bulacağımız veya bir eklenti kullanarak bulmak kolaydır. Sketch koşucusu.

Runner for Sketch , sonsuz menülerde bir şeyler bulmak yerine kullanabilecekleri bir dizi klavye komutu sağlayarak bir tasarımcının iş akışını optimize eder. Örneğin, insert kelimesini yazabilir, sekme tuşuna basabilir ve ihtiyaç duydukları bileşenleri arayabilirler.

atoms yazarak, bir açılır liste bize o kategoriye giren tüm elementleri gösterecektir. Atomların ve moleküllerin ortak kategorileri varsa, yalnızca atomlar görülecek ve tüm moleküller yok sayılacaktır.

Sarmalamak

Sketch ve Atomic Design, tasarım iş akışlarını iyileştirmek ve etkili bir tasarım sistemi çerçevesini kolaylaştırmak için birlikte kullanılabilecek güçlü bir araç setidir.

Atom , molekül ve organizma kavramını bileşen temeli olarak kullanan Atomic Design, tasarımcıların bir ürünün yaratılması ve ömrü boyunca ortak bir dil etrafında birleşmesine yardımcı olur.

Tasarımcılar, daha verimli bir iş akışı ve projenin son aşamalarında geliştiriciler de dahil olmak üzere tasarım ekibindeki herkes tarafından benimsenen bir dizi standart sağlayan Atomik Tasarım'ı uygulamak için Sketch gibi araçları kullanabilir.

Toptal Tasarım Blogunda daha fazla okuma:

• Etkili Bir Tasarım Çerçevesi Nasıl Oluşturulur
• Tasarım Sistemlerini ve Kalıpları Anlama
• Eskiz Stil Kılavuzu, Kitaplık ve UI Kiti Nasıl Oluşturulur
• Startup'ların Neden Bir Stil Rehberine İhtiyacı Var?
• Zeplin Sketch Plugin – Tasarım ve Mühendislik Arasındaki İş Akışı Köprüsü