The document discusses the mutualistic relationship between designers and developers in iOS development, emphasizing the importance of collaboration, education, and understanding design guidelines. It outlines the roles each party plays, noting that developers should explain technical constraints while designers should share design rationale. The conclusion stresses the need to learn, go beyond guidelines, and work together effectively.

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