Icon Fonts« Pimp your app, without bitmap »

Vector Artwork

PaintCode

UIImageRenderingModeRetina HD

@3x

Dimitri Dupuis-Latour @dupuislatour

Font Awesome

IBDesignable

Better with iconsNom PrénomReviews: 4,5 étoiles

Ville: Paris 9ème

Notifications

Paiements

Statistiques

Réglages

Aide / Tutoriel

ProfilDiscussionRecherche

Better with iconsNom Prénom

! Paris 9ème

Notifications

Paiements

Statistiques

Réglages

Aide / Tutoriel

ProfilDiscussionRecherche

"

#

$

%

?

' (

⋆ ⋆ ⋆ ⋆ ⋆ 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

BYOIAFBring 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

RetinaRetina HD

Normal

Android: 2 more sizes !

iOS ✅ n/a ✅ ✅ n/aAndroid ✅ ✅ ✅ ✅ ✅

New New

150/1491GBA7

M

4

128MB6 M

4

1

128MB6 M

4

1

128MB6 M

4

1

128MB6 M

4

1

256MB7 M

4

2

256MB7 M

4

2

256MB7 M

4

2

A4 512MB7 M

4

2

A4 256MB7 M

4

2

A4 512MB7 M

4

2

A5 512MB7 M

4

2

A5 1GB7 M

4

2

A5X 512MB7 M

4

2

A5 512MB7 M

4

2

A5 1GB7 M

4

2

A6 1GB7 M

4

2

A6X 1GB7 M

4

2

A6 1GB8 M

4

2

A7 1GB8 M

4

2

A7 1GB8 M

4

2

A7

[new

] iPad

Mar

ch 2

012

iPod

touc

hSe

ptem

ber 2

007

iPho

ne 3

GJu

ly 20

08

iPod

touc

h(2

nd g

en) S

epte

mbe

r 200

8iP

hone

3GS

June

200

9

iPod

touc

h(3

rd g

en) S

epte

mbe

r 200

9iP

adAp

ril 2

010

iPad

2M

arch

201

1

iPho

ne 4

SO

ctob

er 2

011

iPho

ne 5

Sept

embe

r 201

2

iPho

ne 5

cSe

ptem

ber 2

013

iPho

ne 5

sSe

ptem

ber 2

013

iPad

Air

Oct

ober

201

3

iPad

mini

2O

ctob

er 2

013

iPho

ne 4

June

201

0

iPad

Oct

ober

201

2

iPad

mini

Oct

ober

201

2

iPod

touc

h(5

th g

en) S

epte

mbe

r 201

2

iPod

touc

h(4

th g

en) S

epte

mbe

r 201

0

iPho

neJu

ne 2

007

ARMv6

ARMv7

ARMv7s

ARM64

Key

DeviceCompatibility

Do not support

Full support

Earliest release

Latest release

Chip generation / Device memory GeekBenchrating

Single Core/Multi Core

* Geekbench v2 scores onlyAccelerometerBluetooth LEGPS (Cellular iPad only)MicrophoneStill CameraRetina Display

ARM VersionCamera FlashGyroscopeOpenGL ES VersionTelephonyLightning Port

M7/M8 CoprocessorFront Facing CameraLocation ServicesPeer-to-PeerVideo CameraTouchID

Auto-Focus CameraGame KitMagnetometerSMSWifiApple Pay

iOSSupportMatrixAutumn 2014 Edition - v3.1.2http://iossupportmatrix.com @isupportmatrixEnglish

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

1GB8 M

4

2

A8

iPho

ne 6

Sept

embe

r 201

4

1GB8 M

4

2

A8

iPho

ne 6

Plus

Sept

embe

r 201

4

2GB8 M

4

2

A8X

iPad

Air

2O

ctob

er 2

014

1GB8 M

4

2

A7

iPad

mini

3O

ctob

er 2

014

iPhone5,1iPhone5,2

iPad3,4iPad2,5iPad2,6

iPod5,1iPad3,1iPad3,2

iPod4,1iPhone3,1iPad1,1iPod3,1iPhone2,1iPod2,1iPhone1,2iPod1,1iPhone1,1 iPhone4,1 iPhone5,3iPhone5,4

iPhone6,1iPhone6,2

iPad4,1iPad4,2

iPad4,4iPad4,5

iPad2,1iPad2,4

iPhone7,2 iPhone7,1 iPad5,3iPad5,4

iPad4,7iPad4,8iPad4,9

136* 135*

136* 188*

150/149

278* 454*

209/209

7.1.2206/206

8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1 8.1262/495 215/406 260/493 215/410 260/491 712/1278 773/1408 698/1249 1363/2456 1304/2528 1418/2568

8.11610/2880

8.11596/2854

8.11794/4441

8.11418/2568

7.0 7.0 7.0 7.0

4.2.1

6.1.66.1.6

4.2.14.2.1

2.1.12.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.05.1.1

3.1.1

6.0

4.04.2.6

4.2.1

6.0 6.0

iPad SDK3.2

5.1

(GSM)

(CDMA)

C

M

Y

CM

MY

CY

CMY

K

iOS_Support_Matrix_v3_1-October2014 copy.pdf 1 04/11/2014 13:00

1x1x20%26%

3x5%

• 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:00pmEnregistrement #1 -

, recorded: Today, 7:00pmEnregistrement #1 -

,

2x

,

,

,

,

3x

,

,

,

,

1x

,

,

,

, , ,

1x 2x 3x

, , ,

, , ,

, , ,

,

Problem #3 : (lack of) Flexibility

,

,

,

Solutionsif you keep using bitmap

Workaroundsif you keep using bitmap

Workaround Resolution Hell : Automator Script

Automator Script : Concept

,

3x

mic@3x.png

,

2x

mic@2x.png

,

1x

mic@1x.png

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 tweakedfor @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(), …

....

12

3

1 2 3

#1 Template image rendering modeAllows image to be easily tinted

#1 Template image rendering modeAllows image to be easily tinted

#2 Xcode 6 Vector ArtworkAutomatically 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

ProfilDiscussionRecherche

"

#

$

%

?

' (

⋆ ⋆ ⋆ ⋆ ⋆ 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 TextNom 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 PlaceholderNom 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 !