developers + designers: a mutalistic relationship - from blendconf 2013

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