iOS Development: Designers + Developers A Mutualistic Relationship Rachel Parsons @pinkeerach Cardinal Solutions Group Monday, September 9, 13
Jan 15, 2015
iOS Development:Designers + DevelopersA Mutualistic Relationship
Rachel Parsons@pinkeerach
Cardinal Solutions Group
Monday, September 9, 13
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
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, 13
Designers
• Explain the reasoning behind the design
• Explore good examples of other designs
• Learn what’s possible with a technology
Monday, September 9, 13
UI GuidelinesEach platform has design + development guidelines
Monday, September 9, 13
UI GuidelinesEach platform has design + development guidelines
Read them, Learn them, Love them
Monday, September 9, 13
UI GuidelinesBe consistent
Monday, September 9, 13
UI GuidelinesBe consistent
Monday, September 9, 13
UI GuidelinesBe consistent
Monday, September 9, 13
UI GuidelinesFocus on the primary task
Monday, September 9, 13
UI GuidelinesBe 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.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
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
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
Core Drawing
Monday, September 9, 13
Paint Code
Monday, September 9, 13
Know the ToolsInterface Builder is your friend!
Monday, September 9, 13
Wrap Up
• Educate each other!
• Learn, utilize, & go beyond the guidelines
• Collaborate on implementation options
• Understand the tooling
Monday, September 9, 13
Harmony
source: http://www.smashingmagazine.com/2011/05/13/two-cats-in-a-sack-designer-developer-discord/
Monday, September 9, 13