iOS Development:
Designers +
Developers
A Mutualistic Relationship
Rachel Parsons
@pinkeerach
Cardinal Solutions Group
Mon...
Mutualism
“the way two organisms of different species
exist in a relationship in which each individual
benefits”
http://en....
Mutualism
source: http://en.wikipedia.org/wiki/File:Bee_carpenter_with_pollen.jpg
Monday, September 9, 13
Mutualism
source: http://en.wikipedia.org/wiki/File:Common_clownfish_curves_dnsmpl.jpg
Monday, September 9, 13
Mutualism
source: http://en.wikipedia.org/wiki/File:Impala_mutualim_with_birds_wide.jpg
Monday, September 9, 13
Mutualism?
Monday, September 9, 13
Mutualism
Monday, September 9, 13
Developer’s Design
Monday, September 9, 13
Designer + Developer
Monday, September 9, 13
How?
• Educate each other
• Learn user interface guidelines
• Collaborate on implementation
Monday, September 9, 13
Developers
• Explain clearly why something won’t work
• Develop the details
• Learn about good design
Monday, September 9,...
Designers
• Explain the reasoning behind the design
• Explore good examples of other designs
• Learn what’s possible with ...
UI Guidelines
Each platform has design + development guidelines
Monday, September 9, 13
UI Guidelines
Each platform has design + development guidelines
Read them, Learn them, Love them
Monday, September 9, 13
UI Guidelines
Be consistent
Monday, September 9, 13
UI Guidelines
Be consistent
Monday, September 9, 13
UI Guidelines
Be consistent
Monday, September 9, 13
UI Guidelines
Focus on the primary task
Monday, September 9, 13
UI Guidelines
Be prepared for curve balls
Monday, September 9, 13
Beyond the Guidelines
Monday, September 9, 13
Beyond the Guidelines
Monday, September 9, 13
Beyond the Guidelines
Monday, September 9, 13
Beyond the Guidelines
Monday, September 9, 13
Implementation
• Collaborate on implementation
• Know the tooling
Monday, September 9, 13
Implementation
Image Slices vs. Core Graphics
Monday, September 9, 13
Image Slices
Monday, September 9, 13
Stamp Slices
Monday, September 9, 13
Core Drawing
Monday, September 9, 13
Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231....
Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231....
Header Drawing
//draw the gradient background
UIColor *top = [UIColor colorWithRed:226.0/255.0 green:228.0/255.0 blue:231....
Core Drawing
Monday, September 9, 13
Paint Code
Monday, September 9, 13
Know the Tools
Interface Builder is your friend!
Monday, September 9, 13
Wrap Up
• Educate each other!
• Learn, utilize, & go beyond the guidelines
• Collaborate on implementation options
• Under...
Harmony
source: http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/
Monday, Septembe...
Upcoming SlideShare
Loading in …5
×

Developers + Designers: A Mutalistic Relationship - From BlendConf 2013

800 views

Published on

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!

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
800
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developers + Designers: A Mutalistic Relationship - From BlendConf 2013

  1. 1. iOS Development: Designers + Developers A Mutualistic Relationship Rachel Parsons @pinkeerach Cardinal Solutions Group Monday, September 9, 13
  2. 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. 3. Mutualism source: http://en.wikipedia.org/wiki/File:Bee_carpenter_with_pollen.jpg Monday, September 9, 13
  4. 4. Mutualism source: http://en.wikipedia.org/wiki/File:Common_clownfish_curves_dnsmpl.jpg Monday, September 9, 13
  5. 5. Mutualism source: http://en.wikipedia.org/wiki/File:Impala_mutualim_with_birds_wide.jpg Monday, September 9, 13
  6. 6. Mutualism? Monday, September 9, 13
  7. 7. Mutualism Monday, September 9, 13
  8. 8. Developer’s Design Monday, September 9, 13
  9. 9. Designer + Developer Monday, September 9, 13
  10. 10. How? • Educate each other • Learn user interface guidelines • Collaborate on implementation Monday, September 9, 13
  11. 11. Developers • Explain clearly why something won’t work • Develop the details • Learn about good design Monday, September 9, 13
  12. 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. 13. UI Guidelines Each platform has design + development guidelines Monday, September 9, 13
  14. 14. UI Guidelines Each platform has design + development guidelines Read them, Learn them, Love them Monday, September 9, 13
  15. 15. UI Guidelines Be consistent Monday, September 9, 13
  16. 16. UI Guidelines Be consistent Monday, September 9, 13
  17. 17. UI Guidelines Be consistent Monday, September 9, 13
  18. 18. UI Guidelines Focus on the primary task Monday, September 9, 13
  19. 19. UI Guidelines Be prepared for curve balls Monday, September 9, 13
  20. 20. Beyond the Guidelines Monday, September 9, 13
  21. 21. Beyond the Guidelines Monday, September 9, 13
  22. 22. Beyond the Guidelines Monday, September 9, 13
  23. 23. Beyond the Guidelines Monday, September 9, 13
  24. 24. Implementation • Collaborate on implementation • Know the tooling Monday, September 9, 13
  25. 25. Implementation Image Slices vs. Core Graphics Monday, September 9, 13
  26. 26. Image Slices Monday, September 9, 13
  27. 27. Stamp Slices Monday, September 9, 13
  28. 28. Core Drawing Monday, September 9, 13
  29. 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. 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. 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. 32. Core Drawing Monday, September 9, 13
  33. 33. Paint Code Monday, September 9, 13
  34. 34. Know the Tools Interface Builder is your friend! Monday, September 9, 13
  35. 35. Wrap Up • Educate each other! • Learn, utilize, & go beyond the guidelines • Collaborate on implementation options • Understand the tooling Monday, September 9, 13
  36. 36. Harmony source: http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/ Monday, September 9, 13

×