developers + designers: a mutalistic relationship - from blendconf 2013
DESCRIPTION
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!TRANSCRIPT
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