Developers and designers have historically been at odds, but we are in a brave new world where designs aren't automatically thrown "over the wall" for developers to implement. In a world of agile software development, design is important to every aspect of development just as development is important to implementing a design. Thus, it's imperative that designers and developers take a cue from Mother Nature and enter into a mutualistic relationship. We need each other, so let's educate, communicate, and collaborate!

1. iOS Development:
Designers +
Developers
A Mutualistic Relationship
Rachel Parsons
@pinkeerach
Cardinal Solutions Group
Monday, September 9, 13

2. Mutualism
“the way two organisms of different species
exist in a relationship in which each individual
benefits”
http://en.wikipedia.org/wiki/Mutualism_(biology)
Monday, September 9, 13

3. Mutualism
source: http://en.wikipedia.org/wiki/File:Bee_carpenter_with_pollen.jpg
Monday, September 9, 13

4. Mutualism
source: http://en.wikipedia.org/wiki/File:Common_clownfish_curves_dnsmpl.jpg
Monday, September 9, 13

5. Mutualism
source: http://en.wikipedia.org/wiki/File:Impala_mutualim_with_birds_wide.jpg
Monday, September 9, 13

6. Mutualism?
Monday, September 9, 13

7. Mutualism
Monday, September 9, 13

8. Developer’s Design
Monday, September 9, 13

9. Designer + Developer
Monday, September 9, 13

10. How?
• Educate each other
• Learn user interface guidelines
• Collaborate on implementation
Monday, September 9, 13

11. Developers
• Explain clearly why something won’t work
• Develop the details
• Learn about good design
Monday, September 9, 13

12. Designers
• Explain the reasoning behind the design
• Explore good examples of other designs
• Learn what’s possible with a technology
Monday, September 9, 13

13. UI Guidelines
Each platform has design + development guidelines
Monday, September 9, 13

14. UI Guidelines
Each platform has design + development guidelines
Read them, Learn them, Love them
Monday, September 9, 13

15. UI Guidelines
Be consistent
Monday, September 9, 13

16. UI Guidelines
Be consistent
Monday, September 9, 13

17. UI Guidelines
Be consistent
Monday, September 9, 13

18. UI Guidelines
Focus on the primary task
Monday, September 9, 13

19. UI Guidelines
Be prepared for curve balls
Monday, September 9, 13

20. Beyond the Guidelines
Monday, September 9, 13

21. Beyond the Guidelines
Monday, September 9, 13

22. Beyond the Guidelines
Monday, September 9, 13

23. Beyond the Guidelines
Monday, September 9, 13

24. Implementation
• Collaborate on implementation
• Know the tooling
Monday, September 9, 13

25. Implementation
Image Slices vs. Core Graphics
Monday, September 9, 13

26. Image Slices
Monday, September 9, 13

27. Stamp Slices
Monday, September 9, 13

28. Core Drawing
Monday, September 9, 13

29. Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231.0/255.0 alpha:1];
UIColor *bottom = [UIColor colorWithRed:209.0/255.0 green:212.0/255.0 blue:218.0/255.0 alpha:1];
NSArray *gradientColors = @[(id)top.CGColor, (id)bottom.CGColor];
CGFloat gradientLocations[] = {0,0.5,1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors,
gradientLocations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
Monday, September 9, 13

30. Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231.0/255.0 alpha:1];
UIColor *bottom = [UIColor colorWithRed:209.0/255.0 green:212.0/255.0 blue:218.0/255.0 alpha:1];
NSArray *gradientColors = @[(id)top.CGColor, (id)bottom.CGColor];
CGFloat gradientLocations[] = {0,0.5,1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors,
gradientLocations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
//draw black line aka "inner shadow" at the bottom
CGContextBeginPath(context);
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextClosePath(context);
CGPathRef linePath = CGContextCopyPath(context);
CGContextAddPath(context, linePath);
UIColor *black = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:.3];
CGContextSetStrokeColorWithColor(context, black.CGColor);
CGContextStrokePath(context);
Monday, September 9, 13

31. Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231.0/255.0 alpha:1];
UIColor *bottom = [UIColor colorWithRed:209.0/255.0 green:212.0/255.0 blue:218.0/255.0 alpha:1];
NSArray *gradientColors = @[(id)top.CGColor, (id)bottom.CGColor];
CGFloat gradientLocations[] = {0,0.5,1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors,
gradientLocations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
//draw black line aka "inner shadow" at the bottom
CGContextBeginPath(context);
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextClosePath(context);
CGPathRef linePath = CGContextCopyPath(context);
CGContextAddPath(context, linePath);
UIColor *black = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:.3];
CGContextSetStrokeColorWithColor(context, black.CGColor);
CGContextStrokePath(context);
//draw drop shadow at bottom
CGRect shadowPath = CGRectMake(self.layer.bounds.origin.x-2, self.layer.bounds.size.height,
self.layer.bounds.size.width+3, 5);
self.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowPath].CGPath;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowRadius = 1;
self.layer.shadowOpacity = .25;
self.layer.masksToBounds = NO;
Monday, September 9, 13

32. Core Drawing
Monday, September 9, 13

33. Paint Code
Monday, September 9, 13

34. Know the Tools
Interface Builder is your friend!
Monday, September 9, 13

35. Wrap Up
• Educate each other!
• Learn, utilize, & go beyond the guidelines
• Collaborate on implementation options
• Understand the tooling
Monday, September 9, 13

36. Harmony
source: http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/
Monday, September 9, 13