Guide to name iOS assets
This guide outlines best practices and naming conventions to help graphic designers and developers manage a large number of icons prepared for an iOS project.
Your input is welcome: pull requests or Twitter 😄
Naming an asset starts with breaking up the user interface of each screen into namespaces (or sections). Each namespace represents a logical grouping for the assets and can be used to create asset names.
Namespaces can correspond to view controllers, typical namespaces are top
, bottom
, content
although more specific names are better.
Examples
Twitter Profile | Tumblr Home | Instagram Explore |
---|---|---|
top actions tweet tab
|
post tab
|
top photo tab
|
assets
or images
). This may seem radical but it works in conjunction with prefixing.
PNG is typically used for icons (JPG is better for photos).
To use PNG assets:
@2x
or @3x
at the end of the appropriate asset name.asset.png
[email protected]
[email protected]
To save disk space or time, one can omit the 1x, 2x or 3x asset: the system automatically scales up or down for the appropriate resolution (in particular, you could provide only 2x/3x assets when targeting retina devices).
Xcode 6 added support for PDF / vector icons eliminating the need for multiple resolution per asset (goodbye 1x, 2x, 3x). However doing so will
re-create PNG assets at compile time, embedding the rasterized bitmaps in the final application instead of embedding the original PDF vector image.
If you add PDF files directly as resources, they can be used as vector assets which have no size restriction (like an icon font).
If you still want to use a PDF asset with assets catalogs, create an image set for each PDF asset in Xcode. Then in the Utility panel (right) set:
Universal
Single Vector
Template Image
(corresponds to setting the UIImageRenderingMode
property to UIImageRenderingModeAlwaysTemplate
)This last setting allows an asset to be tinted (colored). If setting up a large number of assets sounds tedious, check out a tool appropriately called pdf_xcassets
.
PDF assets still need to be sized appropriately, i.e. the designer would provide 2 assets for an arrow if the mockup required assets sized 20x20
and 40x40
. For more details, read this article.
Another alternative for icon generation is to use icon fonts. These can be scaled without quality loss and colored just like any text. For more details, read this article.
Here are some tools to help you manage your assets.
An important attribute of an asset name is uniqueness.
share
assets (say one for iPhone and one for iPad, or one in a main view and one in a detail view).+ (UIImage *)imageNamed:(NSString *)name
."properties" : {
"provides-namespace" : true
}
Prefixing is optional but it ensures that asset names are unique across the project.
namespace
prefix so you can quickly organize your assets.project
-device
-namespace
-asset-name
.pngss-ipad-intro-arrow-right.png
bpc-iphone-intro-arrow-right.png
twitter-iphone-top-user.png
twitter-iphone-top-search.png
twitter-iphone-top-write.png
tumblr-iphone-card-action.png
tumblr-iphone-card-comment.png
tumblr-iphone-card-reblog.png
tumblr-iphone-card-heart.png
Examples
ss-rack-minus.png
ss-top-bars.png
ss-tree-check.png
Not
delete.png
menu.png
selected.png
While CamelCase is the convention in Objective-C, it does not necessarily mean it needs to be applied to asset names (by all means feel free to use it if you prefer SSRackMinus.png
).
chevron
for >
caret
for ►
Sometimes the name is well represented by its function (refer to Charbase for Unicode).
refresh
for open circle arrow
(⟳ U+21BB)edit
for pencil
(✎ U+270E)search
for magnifying glass
(🔍 U+1F50D)user
for bust in silhouette
(👤 U+1F464)comment
for speech balloon
(💬 U+1F4AC)Should two assets have the same name, add a qualifier at the end.
ss-top-plus-pink.png
ss-top-plus-gray.png
*-square
*-circle
*-outline
ss-top-arrow-right-circle.png
ss-top-arrow-right-square.png
*-square-outline
for square and outline*-right
*-left
*-up
, etcss-top-arrow-right.png
ss-top-arrow-square-right.png
*-normal
*-selected
*-highlighted
, etcss-profile-gear-normal.png
ss-profile-gear-highlighted.png
*-portrait
*-landscape
*-landscape-right
, etcApple recommends using Xcode storyboards for launch screens.
In the US, we would favor American over British spelling (sorry M'lady).
Examples
ss-top-hanger-gray.png
ss-tree-color-swatch.png
Not
hanger-grey.png
colour-swatch.png
Do not abbreviate.
Examples
ss-share-facebook.png
ss-share-twitter.png
Not
fb.png
tw.png
This guide was inspired by the NYTimes Objective-C Style Guide and Font Awesome.
Special thanks to the following individuals for their feedback: Ash Furrow, Sergio Campama, Matteo Crippa, Marco Sousa, Dave McKinney.