I'm looking for best practices on how to name exported assets, especially in User Interface Design (e.g. icons) in order to create a unified naming scheme among all assets. I'd like to stick with Camel Case but I'm facing the problem on how to name assets that show the same content but in different size. How do you name these files, what are your/your team's naming conventions?
2
-
What filetype are the assets? Because if, for example, they a svg then you would deal with scaling etc with CSS classes in the app, and not in the filename.– mayersdesignApr 23, 2018 at 16:14
-
Mostly they're PNGs, used in iOS and Android development (should have been mentioning this in the first place). SVG would be the perfect option in case of web development, that's right.– ThomasApr 24, 2018 at 11:30
Add a comment
|
2 Answers
I typically create namespaces for the "type" of image asset (icon, image, logo, etc), and then provide a suffix for differentiating sizes. That way, the first word denotes the "type" of image asset, so that those get grouped in the list, and the end of the file name gets more descriptive, down to the size variations, if there are any.
For example, if you have some icons, some bitmap images (photos), and some company logos, your list of assets might look like this: (SVG are resolution independent, so only one version is needed)
icon-arrow-down.svg
icon-calendar.svg
icon-magnifying-glass.svg
logo-coca-cola-100.png
logo-coca-cola-400.png
logo-pepsi-100.png
logo-pepsi-400.png
photo-professional-workspace-640.jpg
photo-professional-workspace-1200.jpg
photo-desktop-hardware-640.jpg
photo-desktop-hardware-1200.jpg
...
You can also use labels as a suffix, if that's easier (like -sm, -md, -lg, -xl) to prevent having the numeric dimension within the filename.
Also, within the world of high-resolution versions of graphics for mobile apps (specifically iOS), the convention is to have a "standard" 1x asset, and to append @2x (or @3x for a triple-resolution, etc.) to the high-resolution version of the same asset. So that might look like:
icon-touch-fingerprint.png
[email protected]
[email protected]
...
-
That's actually a good approach, thanks for sharing! Since I started this question back in April I learned a lot about how to better handoff these kind of assets and I currently use a very similar approach which is Camel Case combined with a number that resembles the asset size.– ThomasJan 20, 2019 at 15:36
Some suggestions: Use camel case for the actual name of the image and underscore to note different attributes or alternate versions of the same image. Start with number so you can control sort order. On a team project the last person who worked on it can add initials and last modified date -- I like to use YYYY_MMDD because it sorts in logical order. It makes for very long filenames but may keep something important from being accidentally overwritten, and leaves a trail of everything that has been done.
00_MightUseForGeneralInformationNamingSpecsOrNotes.txt
01_SomeImage_700px.png
02_AnotherImage_700px.png
02_AnotherImage_080px.png
03_ThirdImage_orig_700px.png
03_ThirdImage_layered_LL_2018_0516.psd
03_ThirdImage_alternate_EV_2018_0507.psd
03_ThirdImage_4Colors_700px.png
03_ThirdImage_blankOutline_100px.jpg
03_ThirdImage_noBG_700px.png
03_ThirdImage_noBG_700px.gif
99_InCaseYouNeedToPutSomethingAtTheBottom.txt
Hope some of that will be useful for your situation.
