Lesson Nineteen

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.

gerrySmith_design.psd

But then, inevitably, comes feedback. And along with it, new filenames.

gerrySmith_design1.psd
gerrySmith_designRevision1.psd
gerrySmith_designfinal.psd
gerrySmith_designfinal_withRevisions.psd
gerrySmith_designRevisionFinal1.psd

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_v2_newest.psd and homepage_final_v4.psd (which one do I use?!).

Properly named design files for a website would look like this:

Properly named design files

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:

  • icon_menu.svg
  • icon_pause.svg
  • icon_play.svg
  • background_homepage.png
  • background_about.png
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:

htbaob-19-04
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.

An example photoshop file
An example photoshop file

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:

Typekit (Adobe)

Large set of high-quality typefaces and foundries to choose from
Cost:
Free to start
Font selection volume:
High
Selection quality:
High

Google Fonts

Large set of open-source typefaces
Cost:
Free
Font selection volume:
Moderate
Selection quality:
Low to Moderate

Cloud Typography (Hoefler & Co.)

Some of the most sought after fonts in the industry
Cost:
Free to start
Font selection volume:
Moderate
Selection quality:
Very High

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:

Unsplash
For photos: Unsplash
The Noun Project
For icons: The Noun Project
Colorful Gradients
For gradients: Colorful Gradients
Subtle Patterns
For textures: Subtle Patterns

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 repository

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…).

Github Bitbucket
SSH / HTTPS
Free public Repo
Free private repo ×
Repo security
Issue tracker integration
SVN Compatibility ×
Charge per private repo ×
Charge per private user ×
Domain Registrar

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.

htbaob-19-10

Some popular services to buy your domain from are:

Hover

Easy to understand user interface that supports hundreds of domain extensions. Dot com addresses start at $12.99/yr USD.

Namecheckr

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.

Panabee

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

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:

Website Hosting

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.

Siteground

A solid hosting infrastructure that has beat its price point competitors in various speed tests.
Cost:
$3.95/mo USD
Advantage:
Fast delivery speeds

Bluehost

Reliability is their middle name as their server uptime has been over 99.97% for the last 2 years running.
Cost:
$3.49/mo USD
Advantage:
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.

Rackspace

Tailor your server setup to exactly what you need by mixing public and private cloud servers and dedicated servers.
Cost:
Moderate
Type:
IaaS (Infrastructure as a service)
Technical knowledge required:
High

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.
Cost:
Moderate
Type:
PaaS (Platform as a service)
Technical knowledge required:
Moderate

Amazon Web Services (AWS)

The leader in the Cloud infrastructure space, companies like Netflix and Expedia rely on it everyday.
Cost:
Low
Type:
IaaS (Infrastructure as a service)
Technical knowledge required:
Very High

WordPress Hosting

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.

WPEngine

The leader in the WordPress hosting space, they’ve built their reputation through reliability and solid custom service.
Cost:
Plans start at $29/mo USD

Synthesis

Offers a hybrid solution where, in addition to a dedicated WordPress platform, they also provide tools for SEO and marketing.
Cost:
Plans start at $47.00/mo USD

Hostgator

A great choice for WordPress powered websites looking for a customized hosting dashboard specific to their needs.
Cost:
$5.97/mo USD

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.

iOS

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.

Cost:
$99/year USD

Android

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.

Cost:
$25 USD one time fee

Windows

Once you fill out the basic registration information and submit payment your account will be approved.

Cost:
$19/year USD

Email Server

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)

Recommended for:
Startups who are looking for a business-grade email platform that will scale with them as they grow.

Rackspace

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.

Recommended for:
Rackspace hosting users and companies that don’t need their storage and documents directly integrated with their email service.

Windows

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.

Recommended for:
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.

htbaob-19-11

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.


Previous Lesson
Next Lesson