What to prepare for a developer
It never seems like a big deal.
I’d finish a design, proud of the final work, and eagerly save the file to send off to the client.
But then, inevitably, comes feedback. And along with it, new filenames.
After a few rounds of back and forths, it would reach a point where I no longer knew which file was the latest version and would need to open multiple files just to confirm. When it came time to share it with the developer I was working with he would have the same problem and we’d end up spending 20% of our time just figuring out which file was the right one for each page he needed to code.
That’s how I learned (the hard way) the importance of something seemingly so small: file preparing.
Whether you’re personally handling the design assets and then giving them to a developer (as in my case) or the designer you’re working with is communicating directly with the developer, you should be able to outline how those assets are handed off to make sure everyone is on the same page and has what they need to continue working on the project.
With a process in place, you’ll be able to eliminate the chance of any miscommunications and ensure nothing is lost in the handoff.
To get started, we’ve created a checklist of everything contained in this post below so you can make sure you’re covered:
What should my designer’s files look like?
The file names and organization of your design files says a lot about what the rest of your project most likely looks like.
If you see file names like
final_v2_final_final.psd that’s a pretty clear indication that what’s under the hood is just as disorganized and will be hard for the development team to work with.
Just through the simple act of properly naming and organizing files you can get rid of countless back-and-forths between designer and developer, and keep your project on schedule.
Naming the files
Make sure there is a recognizable convention to your files that is easy to follow and don’t fall into a common naming mistake such as
homepage_final_v4.psd (which one do I use?!).
Properly named design files for a website would look like this:
When naming assets you should use a clear and consistent convention so the developer you’re working with knows how to use them. There are several naming conventions that programmers have developed over the years to make reading and identifying file names, identifiers, and variables in their code easier.
The three main ones are:
- Camelcase – writing words or phrases starting each new work with a capital letter ie:
myFirstDraft. This practice developed as many early programming languages forbid the use of spaces in identifiers or variable names. While there are many forms of Camelcase, most developers use the “camel-back” approach as variables in code are generally lowercase to avoid typos so the first letter is always lowercase with the follower words being capitalized. This isn’t a requirement of filenames but helps to keep the same practice to avoid confusion.
- Hyphen – writing words or phrases with a hyphen (“-”) in between each word ie:
my-first-draft. This was popularized by the early programming language LISP. Typically programs would interpret the hyphen (“-”) as a minus sign so only particular languages allowed this.
- Underscore – Writing words or phrases with an underscore (“_”) separating each word ie:
my_first_draft. This was introduced in the 1960’s when the ASCII character set was made widely available. The programming language C adopted this as the default convention for separating words and it has recently been popularized by the web framework Ruby on Rails.
No matter what you choose, stick with it. Consistency makes these assets easy to work with, so don’t mix different naming conventions like icon_menu.png and iconMenu.png.
Here’s an example of properly organized file names:
Organizing your assets
With your naming conventions in place, the next step is to make assets easy for a designer/developer to find. The easiest way to do this is to make sure any assets that are associated with the PSD or Sketch files are in the same folder as the file itself.
(The designer/developer you’re working with will certainly thank you for not sending them on an asset hunt!)
Here’s an idea of how your folder structure might look:
Organizing the design file itself
Whether the designer is using Photoshop, Sketch, or another program to create mockups, there are always layers inside of the file that need to be organized.
The developer will most likely need to jump into the file and grab an asset at some point and the last thing you want to do is give them another mess to clean up.
Much like organizing folders, the layers in your design file should follow a naming convention and be organized into folders.
If you see layer after layer with no clear naming convention or organization, the development team is going to have a hard time finding what they need, and you’ll most likely be stuck going back to the designer several times to make sense of it all. It’s better to make sure this is done properly when the file is delivered rather than trying to track the designer down when they’ve moved on to other projects.
A couple of things you can ask your designer to do:
- Delete unnecessary layers
- Use colors to differentiate folders or groups so they’re easy to see
- Pick a naming convention and use it throughout
- Collapse everything before delivering the file
Making fonts easy for a developer to work with
Your design files aren’t the only thing you can supply the developer you’re working with to make their life easier. Making sure you’ve got the proper usage rights to design assets like typefaces and photography is essential to making your work look great and will save you from some serious headaches down the road.
When the designer you’re working with is choosing the typeface(s) for your project, make sure they’re choosing an agreed upon service or foundry to serve them from and that all of the fonts are from the same service.
A few popular font services are:
Large set of high-quality typefaces and foundries to choose from
Free to start
Font selection volume:
Large set of open-source typefaces
Font selection volume:
Low to Moderate
Cloud Typography (Hoefler & Co.)
Some of the most sought after fonts in the industry
Free to start
Font selection volume:
If you choose to self-host your fonts, it’s essential that you agree with the designer you’re working with on what they can use. Some fonts can cost upwards of $250.00 per weight for a license (most projects use 2 or 3 weights per font) so make sure you’ve both agreed on a price and source before finalizing the designs.
It’s also important that the designer has used and outlined consistent sizing and styles throughout their design that a developer can then codify. If each heading and paragraph are in a slightly different style it’s going to be frustrating to code and keep consistent with the design.
Handling images, photos, and illustrations
The last thing you want is to find the perfect image for a homepage and to have its commercial rights be out of your budget range. So, similar to fonts, make sure you have all of the image attributions and licenses you need before delivering the assets to a developer.
There are plenty of amazing stock photography, image and illustration websites designers can use, in fact we created Unsplash to solve this exact problem. On Unsplash, you can find free, quality photos you can use for your product.
Here are a couple more of our favorites:
Making a designer/developer feel at home
For every project you’ll need to set up ways of delivering and hosting your code and having these set up beforehand makes it easy for the developer you’re working with to jump in and start working.
Here are some common accounts that need to be set up before a developer can begin working.
Code repositories are used to share and store the code a developer writes. With a repository, your code is stored ‘in the cloud’ so it can be accessed by your team anywhere.
The most commonly used repositories are Github and Bitbucket.
Github is the most popular code repository for storing and keeping track of changes in your codebase. We recommend it for all development projects where you want to control who has access to your codebase and visualize individual contributions.
Bitbucket is a robust code repository perfect for storing and keeping track of who’s contributing to your project. The advantage of BitBucket is its free private repos and integrations with other Atlassian products (Jira, HipChat, etc…).
|SSH / HTTPS||✓||✓|
|Free public Repo||✓||✓|
|Free private repo||×||✓|
|Issue tracker integration||✓||✓|
|Charge per private repo||✓||×|
|Charge per private user||×||✓|
A domain registrar is the phone book of the internet. You buy your projects domain name from a domain registrar and then point that to your hosting.
Some popular services to buy your domain from are:
Easy to understand user interface that supports hundreds of domain extensions. Dot com addresses start at $12.99/yr USD.
Not only does Namecheckr help you find your business’s domain name from the popular .com, .net, .org and .io extensions it searches the top 24 social sites and let’s you know if the username is available.
Not sure what to name your company? Panabee is a business name generator that helps you generate a name for your business and register the domain name across the top 105 domain extensions.
Hosting is where your code is stored and is accessed on the world wide web. Projects have different hosting requirements and some services are better suited than others for particular coding languages. It’s always best to check with the developer you’re working with before paying for a service but here are some popular options:
You don’t always need the latest and greatest in web development technology to host a marketing site. If you’re looking to get up and running easily with minimal cost these are some great options for you.
A solid hosting infrastructure that has beat its price point competitors in various speed tests.
Fast delivery speeds
Reliability is their middle name as their server uptime has been over 99.97% for the last 2 years running.
Website uptime reliability
Web Application Hosting
The hosting of your web application is one of the most important decisions you’ll make. Changing servers can be time-consuming and expensive once your application is live so it’s best to find a service that you and your team is comfortable with from the get go. There are two main types of services when it comes to Web Application hosting, IaaS (Infrastructure as a service) and PaaS (Platform as a service). IaaS services wil require you to have a system admin available for changes to your hosting environment while PaaS services depend on their software to make it easier for you to maintain yourself if necessary.
Tailor your server setup to exactly what you need by mixing public and private cloud servers and dedicated servers.
IaaS (Infrastructure as a service)
Technical knowledge required:
Google App Engine
With App Engine you’ll have no need for a network admin. It’s easy to setup and deploy with default code written for most major application languages.
PaaS (Platform as a service)
Technical knowledge required:
Amazon Web Services (AWS)
The leader in the Cloud infrastructure space, companies like Netflix and Expedia rely on it everyday.
IaaS (Infrastructure as a service)
Technical knowledge required:
While many hosting companies have specialized WordPress offerings, sometimes you want the speed, security and service that comes from a company that has dedicated itself to hosting WordPress sites.
The leader in the WordPress hosting space, they’ve built their reputation through reliability and solid custom service.
Plans start at $29/mo USD
Offers a hybrid solution where, in addition to a dedicated WordPress platform, they also provide tools for SEO and marketing.
Plans start at $47.00/mo USD
A great choice for WordPress powered websites looking for a customized hosting dashboard specific to their needs.
Native Application Accounts
When building a native application like an iOS or Android app you will need to have accounts set up so the developer you’re working with can test and deploy your application.
To enroll as a company you’ll need a D-U-N-S numbers. Visit the D-U-N-S Request Service to get your number. At most it will take 24 hours to obtain it. It’s completely free
You’ll need to login with, or create a new, apple ID which your account will be associated with.
After filling out your account information your account is instantly setup.
Once you complete your basic account information and pay, you’ll receive a verification email that your account has been approved. If registering as a company, it’s recommended that you start a new account rather than registering under your personal email account.
$25 USD one time fee
Once you fill out the basic registration information and submit payment your account will be approved.
If you’re building an app that will be required to send emails to your customers you’re going to need to set up an email account for your domain (so your developer can have it send emails on your app’s behalf).
Here are some popular email services:
Gmail for work
Google Business Email is a go-to email provider for young companies because of its powerful infrastructure (Google) and low cost ($5 per user per month). Google business email also comes with their powerful calendar, storage (Google Drive), document collaboration (Google Docs), and company only video conferencing (Hangouts)
Startups who are looking for a business-grade email platform that will scale with them as they grow.
If you’re already hosting with Rackspace, this is an easy choice. While not as robust an offering as Google Business, at $2 per user it’s a great value. Rackspace also integrates nicely with your current email program.
Rackspace hosting users and companies that don’t need their storage and documents directly integrated with their email service.
Always a big name in the business software space, Microsoft has been improving its enterprise-grade email offering with recent updates to its calendar and Outlook products. One of the big advantages is the ability to send large email documents up to 150k MB (typically 20k MB). Starts at $4 per user, per month.
Companies that want the reliability and security a name like Microsoft brings and may be comfortable with Microsoft’s other products.
Once you’ve set up the accounts you’ll need, it’s best to share a document of all accounts and passwords with the developer you’re working with [see example]. Alternatively, at Crew we use a service called Meldium to manage logins before the project starts so they are all available to the developer once you get rolling. With Meldium you can onboard your team members with one-click and when they’re work is completed, you can easily remove them from accounts which helps you keep your product secure.
One of the most powerful things you can do as the owner of a project is to help your team stay organized. While things like file names and easy to find logins might not seem like a big deal in the beginning of a project, setting these up early on will help remove any confusion and frustration down the line. This helps your team focus on building a great product instead of worrying about where a login is stored or trying to decode a folder structure.
With a little pre-planning you not only show your team you’re working with them, you express your empathy for their role in the project.