Mobil projemizde Atomic Design kavramını nasıl uygulayabiliriz?
Merhabalar, ben Aybars ve bu yazıda size Atomic Design hakkında bilgi vermek istiyorum.
Atomic Design, bir tasarım sistemi oluşturma yöntemidir ve tasarım dilini, tasarım ilkelerini, komponentleri ve hiyerarşiyi tanımlayan bir sistemdir. Bu yöntem, tasarım ekibinin daha az karışıklığa ve kullanıcı deneyimini iyileştirmek için tasarım kalitesini artıran bir araçtır.
Beş ana bileşenden oluşur:
- Atoms: En küçük tasarım ögesidir ve genellikler birbirleriye bir arada kullanılır. Örneğin, renkler, tipografi ,boşluklar ve görsel öğerler
- Molecules: atom’ları bir araya getirilerek oluşturulan daha büyük tasarım öğeleridir. Örneğin, bir form alanı veya button
- Organisms: Molekülleri bir araya getirerek oluşturulan daha büyük tasarım öğeleridir. Örneğin, bir form veya bir menü
- Templates ve Pages: Organizmaların bir araya getirilerek oluşturulan tasarım öğeleridir. Örneğin, bir mobile page sayfası (Viewcontroller)
Neden kullanmalıyız?
Günümüzde mobil cihazların ekran boyutlarının büyümesi ve hızlı cihazlar üretilmesi sebebiyle karmaşık tasarımlarda ortaya çıkıyor. Bu durum yazılım ekipleri ve tasarımcılar arasında bir iletişim problemine dönüşüyor. Atomic Design mantığını bilmeyen bir tasarımcı ekranları geliştirirken component yapısı kullanmaz. Yazı fontlarını, renklerini her bir ekran için ayarlamaya çalışır. Fakat tasarımcı belli bir süre sonra ekranlarda yapılacak değişiklikler için her ekranda tekrar tekrar yapmak durumunda kalacak ve çok büyük bir zaman kaybı olacaktır. Diğer bir sebep ise; Tasarımda belli bir standart getirmesidir. Bu sayede tasarımcı ve geliştirici arasında iletişim problemleri en aza iner.
Nasıl kullanırız?
Kendi projelerimizde kullandığımız dosya yapısı aşağıdaki gibidir.
Basit bir örnek kod ile devam edelim.
import UIKit
// Atoms
class Color {
let red: CGFloat
let green: CGFloat
let blue: CGFloat
init(red: CGFloat, green: CGFloat, blue: CGFloat) {
self.red = red
self.green = green
self.blue = blue
}
}
class Font {
let name: String
let size: CGFloat
init(name: String, size: CGFloat) {
self.name = name
self.size = size
}
}
class Spacing {
let value: CGFloat
init(value: CGFloat) {
self.value = value
}
}
import UIKit
// Molecules
class TextField {
let font: Font
let color: Color
let placeholder: String
init(font: Font, color: Color, placeholder: String) {
self.font = font
self.color = color
self.placeholder = placeholder
}
}
class Button {
let font: Font
let color: Color
let backgroundColor: Color
let title: String
init(font: Font, color: Color, backgroundColor: Color, title: String) {
self.font = font
self.color = color
self.backgroundColor = backgroundColor
self.title = title
}
}
import UIKit
// Organisms
class Form {
let textFields: [TextField]
let submitButton: Button
init(textFields: [TextField], submitButton: Button) {
self.textFields = textFields
self.submitButton = submitButton
}
}
class Menu {
let buttons: [Button]
init(buttons: [Button]) {
self.buttons = buttons
}
}
import UIKit
// Templates
class PageTemplate {
let menu: Menu
let content: UIView
init(menu: Menu, content: UIView) {
self.menu = menu
self.content = content
}
}
import UIKit
// Pages
class HomePage {
let templates: [PageTemplate]
init(templates: [PageTemplate]) {
self.templates = templates
}
}
// Example usage
let font = Font(name: "Arial", size: 16)
let color = Color(red: 0, green: 0, blue: 0)
let textField = TextField(font: font, color: color, placeholder: "Enter your email")
let buttonFont = Font(name: "Arial", size: 14)
let buttonColor = Color(red: 255, green: 255, blue: 255)
let buttonBackgroundColor = Color(red: 0, green: 0, blue: 255)
let submitButton = Button(font: buttonFont, color: buttonColor, backgroundColor: buttonBackgroundColor, title: "Submit")
let form = Form(textFields: [textField], submitButton: submitButton)
let menuButton1 = Button(font: font, color: color, backgroundColor: buttonBackgroundColor, title: "Home")
let menuButton2 = Button(font: font, color: color, backgroundColor: buttonBackgroundColor, title: "About")
let menu = Menu(buttons: [menuButton1, menuButton2])
let contentView = UIView()
let template = PageTemplate(menu: menu, content: contentView)
let website = WebSite(templates: [template])
let appTemplate1 = PageTemplate(menu: menu, content: contentView)
let appTemplate2 = PageTemplate(menu: menu, content: contentView)
let app = HomePage(templates: [appTemplate1, appTemplate2])
Sonuç olarak, Atomic Design yeniden kullanılabilir komponentler yapmamızı sağlar. Eğer köklü bir değişiklik var ise komponentlerin değiştirilmesi Atomic Design ile mümkün.
Umarım keyifli bir yazı olmuştur.
Diğer makalelerde görüşmek üzere… 👋