What the sheet?

Devs are from Mars and designers from Venus? Maybe, but the truth is that we both are human beings and we don't speak such different languages. We must understand each other. In this talk, we'd like to show our approach working with a global style sheet.

Transcript

1. iOS Team StyleSh**t: A way to communicate with designers
2. iOS Team @polenoso @tr3sG
3. iOS Team What designers want What developers deliver
4. iOS Team
5. iOS Team 4 pixels 2560 x 1440 3,686,400
6. iOS Team
7. iOS Team
8. iOS Team
9. iOS Team
10. iOS Team R: 19
 G: 193
 B: 172 R: 15
 G: 153
 B: 137 R: 193
 G: 245
 B: 230 R: 74
 G: 205
 B: 232 R: 61
 G: 170
 B: 191 R: 198
 G: 237
 B: 246 R: 56
 G: 94
 B: 249 R: 67
 G: 104
 B: 204 R: 191
 G: 203
 B: 249
11. iOS Team
12. iOS Team
13. iOS Team
14. iOS Team
15. iOS Team
16. iOS Team Stylesheet as a common language
17. iOS Team
18. iOS Team enum Margin: CGFloat { case zero = 0 case XXS = 2 case XS = 4 case S = 8 case SM = 12 case M = 16 case ML = 20 case L = 26 case XL = 32 case XXL = 44 case XXXL = 60 }
19. iOS Team
20. iOS Team enum ColorPalette { case walla case yellow case skyBlue case softBlue case magenta case negative case positive } enum Variant { case normal case dark case soft }
21. iOS Team enum DarkPalette: Int { case grey1 case grey2 case grey3 case grey4 case grey5 case grey6 }
22. iOS Team
23. iOS Team enum Typeface { case thin case regular case bold }
24. iOS Team enum Font { case commonDisplay case titleHighlighted case title case displayHighlighted case display case displaySkinny case headlineHighlighted case headline case headlineSkinny case bodyHighlighted case body case caption case tiny case extraInfoHighlighted case extraInfo }
25. iOS Team protocol StylesheetConfigurable { static func typeface(_ typeface: Typeface) -> String static func font(_ font: Font) -> UIFont static func margin(_ margin: Margin) -> CGFloat static func color(_ color: ColorPalette, variant: Variant, alpha: Double) -> UIColor static func color(_ color: DarkPalette, alpha: Double) -> UIColor }
26. iOS Team struct StylesheetWallapop: StylesheetConfigurable { static public func color(_ color: ColorPalette, variant: Variant = .normal, alpha: Double = 1) -> UIColor { switch color { case .walla: switch variant { case .normal: return UIColor(r: 19, g: 193, b: 172, a: alpha) case .dark: return UIColor(r: 15, g: 153, b: 137, a: alpha) case .soft: return UIColor(r: 193, g: 245, b: 230, a: alpha) } } }
27. iOS Team static public func font(_ font: Font) -> UIFont { switch font { case .commonDisplay: return UIFont.font(type: typeface(.bold), size: 100) } }
28. iOS Team
29. iOS Team label.font = Stylesheet.font(.extraInfo) label.textColor = Stylesheet.color(.grey3) NSLayoutConstraint.activateNested([ label.constraintTop(constant: .XL), label.constraintLeading(constant: .M), public let Stylesheet: StylesheetConfigurable.Type = StylesheetWallapop.self How to use it How to declare it
30. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
31. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
32. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
33. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
34. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
35. iOS Team static func icon(_ icon: Icon, state: UIControl.State, tintable: Bool) -> UIImage static public func image(_ image: Image, state: UIControl.State, tintable: Bool)-> UIImage static public func animation(_ animation: Animation) -> String static public func movie(_ movie: Movie) -> String static public func cornerRadius(_ cornerRadius: CornerRadius) -> CGFloat
36. iOS Team Q&A wallapop si no lo usas, súbelo
37. iOS Team Resources Story Time: https://www.salidalibrary.org/event/story-time-29/ AliExpress vs Reality: https://ecodiario.eleconomista.es/viralplus/noticias/9210211/06/18/Aliexpress-vs- Realidad-cuando-los-vendedores-online-se-pasan-con-el-Photoshop.html Jony Ive: https://actualidadwatch.com/tranquilos-jony-se-queda/ X-Men: https://www.hobbyconsolas.com/reportajes/x-men-como-acabo-serie-animada-anos-90-88978 Fonts: https://betterthansuccess.com/5-guidelines-choosing-right-fonts-website/ Kryptonite: https://medium.com/@ebonstorm/is-kryptonite-made-from-the-element- krypton-4303d237208b Design fails: https://medium.com/@oueryan/dive-into-the-details-of-ios-11-is-apple-still-detail-oriented- fe70af065a7d Styleguide: https://dribbble.com/shots/5928802-Kenobi-Foundation-Brand-Stylesheet