Icon Fonts « Pimp your app, without bitmap » Vector Artwork PaintCode UIImageRenderingMode Retina HD @3x Dimitri Dupuis-Latour @dupuislatour Font Awesome IBDesignable

Better with icons Nom Prénom Reviews: 4,5 étoiles Ville: Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche

Better with icons Nom Prénom Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche ? ⋆ ⋆ ⋆ ⋆ ⋆ 4,5

* Icons not included • Sometimes you don’t have a dedicated designer (yet) • Sometimes design isn’t ready • Sometimes design isn’t approved by the client • Maybe it’s just a prototype / early demo • Maybe it’s just an internal app / backoffice • …

Solution

BYOIAF Bring your own icons & fonts with Style

Switch from Bitmap to Vector artwork Resolution for 2015:

1. Resolution Hell 2. Weight 3. Flexibilty Problems with Bitmap

Problem #1 : Resolution hell Retina Retina HD Normal

Android: 2 more sizes ! iOS ✅ n/a ✅ ✅ n/a Android ✅ ✅ ✅ ✅ ✅ New New

150/149 1GB A7 M 4 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 128MB 6 M 4 1 256MB 7 M 4 2 256MB 7 M 4 2 256MB 7 M 4 2 A4 512MB 7 M 4 2 A4 256MB 7 M 4 2 A4 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A5X 512MB 7 M 4 2 A5 512MB 7 M 4 2 A5 1GB 7 M 4 2 A6 1GB 7 M 4 2 A6X 1GB 7 M 4 2 A6 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 1GB 8 M 4 2 A7 [new] iPad March 2012 iPod touch September 2007 iPhone 3G July 2008 iPod touch (2nd gen) September 2008 iPhone 3GS June 2009 iPod touch (3rd gen) September 2009 iPad April 2010 iPad 2 March 2011 iPhone 4S October 2011 iPhone 5 September 2012 iPhone 5c September 2013 iPhone 5s September 2013 iPad Air October 2013 iPad mini 2 October 2013 iPhone 4 June 2010 iPad October 2012 iPad mini October 2012 iPod touch (5th gen) September 2012 iPod touch (4th gen) September 2010 iPhone June 2007 ARMv6 ARMv7 ARMv7s ARM64 Key Device Compatibility Do not support Full support Earliest release Latest release Chip generation / Device memory Geek Bench rating Single Core/Multi Core * Geekbench v2 scores only Accelerometer Bluetooth LE GPS (Cellular iPad only) Microphone Still Camera Retina Display ARM Version Camera Flash Gyroscope OpenGL ES Version Telephony Lightning Port M7/M8 Coprocessor Front Facing Camera Location Services Peer-to-Peer Video Camera TouchID Auto-Focus Camera Game Kit Magnetometer SMS Wifi Apple Pay  iOS Support Matrix Autumn 2014 Edition - v3.1.2 http://iossupportmatrix.com @isupportmatrix English iPhone OS 1.0 iPhone SDK 2.0 iPhone SDK 3.0 iPhone SDK 4.0 iOS 5 iOS 6 iOS 7 Model ID iOS 8 1GB 8 M 4 2 A8 iPhone 6 September 2014 1GB 8 M 4 2 A8 iPhone 6 Plus September 2014 2GB 8 M 4 2 A8X iPad Air 2 October 2014 1GB 8 M 4 2 A7 iPad mini 3 October 2014 iPhone5,1 iPhone5,2 iPad3,4 iPad2,5 iPad2,6 iPod5,1 iPad3,1 iPad3,2 iPod4,1 iPhone3,1 iPad1,1 iPod3,1 iPhone2,1 iPod2,1 iPhone1,2 iPod1,1 iPhone1,1 iPhone4,1 iPhone5,3 iPhone5,4 iPhone6,1 iPhone6,2 iPad4,1 iPad4,2 iPad4,4 iPad4,5 iPad2,1 iPad2,4 iPhone7,2 iPhone7,1 iPad5,3 iPad5,4 iPad4,7 iPad4,8 iPad4,9 136* 135* 136* 188* 150/149 278* 454* 209/209 7.1.2 206/206 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 262/495 215/406 260/493 215/410 260/491 712/1278 773/1408 698/1249 1363/2456 1304/2528 1418/2568 8.1 1610/2880 8.1 1596/2854 8.1 1794/4441 8.1 1418/2568 7.0 7.0 7.0 7.0 4.2.1 6.1.6 6.1.6 4.2.1 4.2.1 2.1.1 2.0 1.0 1.1 3.1.3 3.1.3 3.0 5.1.1 4.3.5 6.0 4.3.5 5.0 5.1.1 3.1.1 6.0 4.0 4.2.6 4.2.1 6.0 6.0 iPad SDK 3.2 5.1 (GSM) (CDMA)     C M Y CM MY CY CMY K 1x 1x 20% 26% 3x 5%

• You have to «handle » : • 2 resolutions (2x, 3x) for iPhone-only, ios7+ apps, • 2 resolutions (1x, 2x) for iPad-only apps, • 3 resolutions (1x, 2x, 3x) for Universal or iOS 6-compatible apps • ≃ 4/5 resolutions for cross-platform apps (iOS + Android) • «handle » : generate, manage in xcassets / rename correctly @2x~ipad or ~ipad@2x ?? Problem #1 : Resolution hell

Problem #2 : (App) Weight • Small App = Fast download • ‘Physical limit’ of 100 MB

Record Recording… recorded: Today, 7:00pm Enregistrement #1 recorded: Today, 7:00pm Enregistrement #1 2x 3x 1x 1x 2x 3x Problem #3 : (lack of) Flexibility

Solutions if you keep using bitmap

Workarounds if you keep using bitmap

Workaround Resolution Hell : Automator Script

Automator Script : Concept 3x [email protected] 2x [email protected] 1x [email protected]

Automator Script : Creation

Automator Script : Usage

Automator script : Summary • Input: @3x pngs. Output: @2x and @1x pngs • Always downscale, don’t upscale • Input images should be a multiple of 3 • Not perfect solution: could generate fuzzy images. Artwork should be aligned on the pixel grid. Ideally each resolution should be tweaked by hand by the designer.

Warning: Pixel alignement Bad Good Hand tweaked
 for @1x

Workaround Weight : Image Optim

Image Optim : Concept

Image Optim : Summary • Compress assets with ImageOptim • It tries several algorithms and keeps the best • It also removes useless EXIF data • Tip: You should automate compression of your assets
 (add a ‘compress’ build phase in your Xcode project) • Observed savings: ≃ 20 / 30%* * Results may vary

2 More Workarounds: Xcode

#1 Template image rendering mode @availability(iOS, introduced=7.0) enum UIImageRenderingMode : Int { case Automatic // Use the default rendering mode for the context where the image is used case AlwaysOriginal // Always draw the original image, without treating it as a template case AlwaysTemplate // Always draw the image as a template image, ignoring its color information } Allows image to be easily tinted

let image = UIImage(named:"foo")! let template = image.imageWithRenderingMode(.AlwaysTemplate) button.setImage(template, forState:.Normal) imageView.image = template imageView.tintColor = UIColor.redColor(), blueColor(), … 1 2 3 1 2 3 #1 Template image rendering mode Allows image to be easily tinted

#1 Template image rendering mode Allows image to be easily tinted

#2 Xcode 6 Vector Artwork Automatically generate rasterized versions at build-time

FontAwesome What else ?

FontAwesome : Set of 479 Icons

Made with FontAwesome© Nom Prénom Paris 9ème Notifications Paiements Statistiques Réglages Aide / Tutoriel Profil Discussion Recherche ? ⋆ ⋆ ⋆ ⋆ ⋆ 4,5 1x 2x 3x

Use it everywhere • Your App • Your Website • A Keynote Presentation (Mac) - Great for mockups • A Keynote Presentation (iPhone) - Great for mockups

Use it everywhere • material design icon • http://google.github.io/material-design-icons/

Installation (Mac / PC)

Installation (iPhone) • Use .mobileconfig to distribute font • Mecanism to force remote configuration of corporate devices (passcode policies, email config, custom corporate fonts) • Create with Apple Configurator (free on MAS) • .mobileconfig embeds the font (111 Ko overall) • Mail to yourself or host on a https website (similar to adhoc distribution) • Works on iOS as well as OS X

FontAwesomeKit • iOS library to ease FontAwesome Integration • pod ‘FontAwesomeKit’ • Create / Modify / Stack icons from code • Generates UIImage or NSAttributedString • 1594 icons, 380Ko (FA only: 479 icons / 86 Ko)

@IBOutlet private weak var locationLabel: UILabel! // … let icon = FAKFontAwesome.locationArrowIconWithSize(30) locationLabel.attributedText = icon.attributedString() Example: Attributed Text Nom Prénom Paris 9ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5

@IBOutlet private weak var userPicture: UIImageView! // … let icon = FAKFontAwesome.userIconWithSize(30) icon.addAttribute(NSForegroundColorAttributeName, value:UIColor.lightGrayColor()) userPicture.image = icon.imageWithSize(CGSize(width: 44, height: 44)) userPicture.layer.borderColor = UIColor.darkGrayColor().CGColor userPicture.layer.borderWidth = 1 userPicture.layer.cornerRadius = 22 Example: User Picture Placeholder Nom Prénom Paris 9ème ⋆ ⋆ ⋆ ⋆ ⋆ 4,5

Example: Stacked Icons // No Photos please ! let icons = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ] let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))

Android equivalent : Iconify Converts FontAwesome Icons into text or image « If, like me, you're tired of copying 5 images (ldpi, mdpi, hdpi, xhdpi, xxhdpi) for each icon you want to use in your app, for each color you want to use them with, and bang your head on the wall when you suddently need to change their color or size, then I think Iconify can help you. »

Google Material Design Font http://google.github.io/material-design-icons/

Create your own custom font • Useful if you have custom icons & logos • No need to embed FontAwesome (but you can if you want) • You need to create your font. Good tool: « Glyphs » • Use FontAwesomeKit infrastructure with your own font • pod ‘FontAwesomeKit/Core’

Create custom font: Glyphs.app

Create custom font: icomoon.io Import Custom Icons (Ex:Cocoa+Head+Paris) Choose stock icons Generate Font 1 2 3

Online resource: thenounproject.com

Be Creative !