4 ways to improve user interface development are: 1. Use custom fonts for icons to provide visual previews. 2. Take advantage of new Xcode features like @IBDesignable to inspect and preview views and properties. 3. Leverage layers to separate interface elements visually. 4. Use PaintCode for what-you-see-is-what-you-get drawing of dynamic colors, shapes and StyleKits.

1. 4 WAYS TO IMPROVE
USER INTERFACE
DEVELOPMENT

2. SCOTT GARDNER @SCOTTEG SCOTTEG.COM

3. tl;dr KNOW YOUR TOOLS

4. KNOW WHICH TOOLS

5. SEEING IS Believing

6. TEAR DOWN THIS WALL

7. BETWEEN Design AND
DEVELOPMENT

8. Here's how...

9. ...well, at least 4 WAYS

10. 1. USE CUSTOM FONTS FOR ICONS

13. Demo

14. 2. USE NEW-ish XCODE FEATURES
@IBDesignable class MyView: UIView {
@IBInspectable var borderWidth: CGFloat = 0.0 {
didSet {
layer.borderWidth = borderWidth
}
}
...
}

17. SUPPORTED @IBInspectable TYPES
@IBInspectable var anInt: Int = 0 // Also UInt
@IBInspectable var aDouble: Double = 0.0 // Also Float and CGFloat
@IBInspectable var aString: String = "" // Also NSString
@IBInspectable var aBool: Bool = false
@IBInspectable var aCGPoint: CGPoint = CGPointZero
@IBInspectable var aCGRect: CGRect = CGRectZero
@IBInspectable var aUIColor: UIColor = UIColor.clearColor()
@IBInspectable var aUIImage: UIImage = UIImage()

21. 3. USE LAYERS

22. Demo

23. 4. USE PAINTCODE

25. WYSIWYG DRAWING
CREATE DYNAMIC COLORS & SHAPES
StyleKits

26. Demo

27. Thanks!
SCOTT GARDNER
@SCOTTEG SCOTTEG.COM