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:

1. 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
2. Molecules: atom’ları bir araya getirilerek oluşturulan daha büyük tasarım öğeleridir. Örneğin, bir form alanı veya button
3. Organisms: Molekülleri bir araya getirerek oluşturulan daha büyük tasarım öğeleridir. Örneğin, bir form veya bir menü
4. Templates ve Pages: Organizmaların bir araya getirilerek oluşturulan tasarım öğeleridir. Örneğin, bir mobile page sayfası (Viewcontroller)

Kaynak: https://bradfrost.com/blog/post/atomic-web-design/

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.

Proje dizinimizdeki hali

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… 👋