<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/">
	<channel>
		<title>Designer Woes How to Name Files and Where to Put Them? | Infinum</title>
		<atom:link href="https://infinum.com/blog/designer-woes-how-to-name-files-and-where-to-put-them/feed/" rel="self" type="application/rss+xml" />
		<link>https://infinum.com/blog/designer-woes-how-to-name-files-and-where-to-put-them/</link>
		<description>Building digital products</description>
		<lastBuildDate>Fri, 08 May 2026 14:23:15 +0000</lastBuildDate>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>

					<item>
				<image>
					<url>7845https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-0.webp</url>
				</image>
				<title>Designer Woes  How to Name Files and Where to Put Them?</title>
				<link>https://infinum.com/blog/designer-woes-how-to-name-files-and-where-to-put-them/</link>
				<pubDate>Wed, 18 Dec 2013 07:28:00 +0000</pubDate>
				<dc:creator>Darko Skulj</dc:creator>
				<guid isPermaLink="false">https://infinum.com/the-capsized-eight/designer-woes-how-to-name-files-and-where-to-put-them/</guid>
				<description>
					<![CDATA[<p>We realized that we need to implement a well-defined folder structure and naming convention to keep things running smoothly.</p>
<p>The post <a href="https://infinum.com/blog/designer-woes-how-to-name-files-and-where-to-put-them/">Designer Woes  How to Name Files and Where to Put Them?</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</description>
				<content:encoded>
					<![CDATA[<div
	class="wrapper"
	data-id="es-163"
	 data-animation-target='inner-items'>
		
			<div class="wrapper__inner">
			<div class="block-blog-content js-block-blog-content">
	
<div class="block-blog-content-sidebar" data-id="es-92">
	</div>

<div class="block-blog-content-main">
	
<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-95"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-93">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-94'
	>
	As our company grows, we handle more and more projects simultaneously. We soon realized that we need to implement a well-defined folder structure and naming convention to keep things running smoothly.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-98"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-96">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-97'
	>
	A part of the <a href="https://infinum.com/news/deloitte-technology-fast-50-central-europe/">success</a> as a consulting company is having a steady stream of new projects coming your way. If you want to tackle them all, you need to have multiple teams working on multiple projects at the same time. At Infinum the developers are organized into teams according to the target platform – iOS, Android, Windows Phone and Web.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-101"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-99">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-100'
	>
	The design team closely cooperates with the development teams to provide them with the required assets – fonts, backgrounds, icons and everything else they need. We use this basic structure to organize our folders, as our main focus is to help each employee locate and access the required file or folder as quickly as possible.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-104"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-102">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-103'
	>
	Folders</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-107"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-105">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-106'
	>
	Each folder should be named after the project and it should contain the following subfolders: Resources, Design, Screenshots and Export.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-110"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-108"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-109">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-1.webp"
					class="image__img block-media__image-img"
					alt=""
										height="306"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-113"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-111">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-112'
	>
	If the project includes doing work for more than one platform (e.g. Android and iPhone), the folder structure changes a little. The root folder is still named after the project itself, but files in it are grouped under the respective platform names (e.g. Android, iOS or Web). The only exception is the Resources folder, which stays just one level below the project folder.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-116"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-114"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-115">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-2.webp"
					class="image__img block-media__image-img"
					alt=""
										height="464"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-119"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-117">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-118'
	>
	If you are wondering what’s located in all these folders, here’s how it works:</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-122"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="lists" data-id="es-120">
	<ul	class='typography typography--size-16-text-roman js-typography lists__typography'
	data-id='es-121'
	>
	<li><strong>Resources</strong> – this folder is split up into two folders, and generally holds any assets, documentation, materials and other files supplied by the client. <strong>Materials</strong> contains guidelines, photos, brochures and other materials. <strong>Documentation</strong> contains technical or functional specifications for a project and is also useful to developers.</li><li><strong>Design</strong> – this folder contains the design source files adhering to a naming convention explained below. These are mostly Adobe Fireworks (.fw.png) files, but also Photoshop (.psd) and others.</li><li><strong>Screenshots</strong> – this folder contains screenshots for an app/website grouped into folders named after the iteration. These screenshots are used to coordinate with the client and developers in various phases of the project. Basically, these screenshots tell other stakeholders: <em>This is what it’s going to look like.</em></li><li><strong>Export</strong> – this folder contains exported (<em>sliced</em>) graphics for developers. This could be anything from a header image to a button background. Developers use these graphics to build the final product. The graphics are grouped in folders, and each of these folders carries the name of a particular screen (for a mobile project) or page (for a web project).</li></ul></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-125"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-123"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-124">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-3.webp"
					class="image__img block-media__image-img"
					alt=""
										height="548"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-128"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-126">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-127'
	>
	File naming</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-131"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-129">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-130'
	>
	The name of a source design file has to contain the name of the project, platform name and version number, in this exact order. Every iteration of the source file should be saved as the next version. This enables us to easily find an earlier iteration, compare and discuss the different stages of design.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-134"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-132"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-133">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-4.webp"
					class="image__img block-media__image-img"
					alt=""
										height="306"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-137"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-135">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-136'
	>
	Screenshots</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-140"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-138">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-139'
	>
	We still use Adobe Fireworks as the primary software for screen design. Naming pages in it is the easiest way to keep screenshots organized after export. Each page name should contain an ordinal number and a screen name. After exporting pages to a folder, each JPG file inherits the name of the page.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-143"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-141"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-142">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-5.webp"
					class="image__img block-media__image-img"
					alt=""
										height="464"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-146"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-heading" data-id="es-144">
	<h2	class='typography typography--size-52-default js-typography block-heading__heading'
	data-id='es-145'
	>
	Using Dropbox and Alfred</h2></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-149"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-147"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-148">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-6.webp"
					class="image__img block-media__image-img"
					alt=""
										height="306"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-152"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-150">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-151'
	>
	Since the design team cooperates with all other teams at the company (and basically works on all the projects), the list of our projects is a lot bigger than theirs. Therefore, clicking through <a href="http://en.wikipedia.org/wiki/Finder_(software)">Finder</a> can be really frustrating. For much easier access to files and folders we use <a href="http://www.alfredapp.com/">Alfred</a>.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-155"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-media">
	<div	class="media block-media__media media__border--none media__align--center-center"
	data-id="es-153"
	 data-media-type='image'>

	<figure class="image block-media__image-figure image--size-stretch" data-id="es-154">
	<picture class="image__picture block-media__image-picture">
												<img
					src="https://infinum.com/uploads/2013/12/designer-woes-how-to-name-files-and-where-to-put-them-7.webp"
					class="image__img block-media__image-img"
					alt=""
										height="400"
															width="700"
										loading="lazy"
					 />
					</picture>

	</figure></div></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-158"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-156">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-157'
	>
	With Alfred you can easily access applications, files and folders, quickly search the web and much more. As we have a very strict structure of file names, Alfred allows us to access them directly and open them with Fireworks, which is a lot more convenient and faster than doing the same thing with Finder.</p></div>	</div>

<div
	class="wrapper wrapper__use-simple--true"
	data-id="es-161"
	 data-animation='slideFade' data-animation-target='inner-items'>
		
			<div class="block-paragraph" data-id="es-159">
	<p	class='typography typography--size-16-text-roman js-typography block-paragraph__paragraph'
	data-id='es-160'
	>
	Instead of using a local server or network storage infrastructure, we trust <a href="https://www.dropbox.com/">Dropbox</a> with our files. Our Internet connection is pretty reliable, and even if it fails, we still have local copies of all the files we are working on. There are two more big perks of using Dropbox – automatic cloud backup and automatic resolving of conflicted copies. Best of all, basic accounts with 2 gigs of storage space are free and additional space is not that expensive.</p></div>	</div>
</div>
</div>		</div>
	</div><p>The post <a href="https://infinum.com/blog/designer-woes-how-to-name-files-and-where-to-put-them/">Designer Woes  How to Name Files and Where to Put Them?</a> appeared first on <a href="https://infinum.com">Infinum</a>.</p>
]]>
				</content:encoded>
			</item>
		
	</channel>
</rss>