• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Riot Customs

Genesis WordPress Development, Maintenance & Support

  • About
  • Services
  • Blog
  • Shop
  • Contact

6 Steps To A Developer Friendly File

Written by Katrina

developer friendly file

Developers love working with designers who make creating well-organized files a priority. It makes our job so much easier.

Since I’ve gone full time as a developer only. I’ve noticed that there are still some designers that aren’t familiar with web design. So here are some steps that will keep your developer happy and out of your inbox.

Step One: Organize Your Layers

I’m not sure how I can stress enough on how important it is to have organized layers and groups with layers. Life is easy when we can just turn a group or layer on or off when created it in a live usable version.

If I just want to focus on the navigation, I can’t do that if I’m searching for your layers for it. It should be placed in a group with layers.
developer friendly file

*Yes you CAN use groups and layers in Adobe Illustrator.
I found this really cool site called Photoshop Etiquette that will help you out.

Step Two: Use Full Pixels

I’ve run across this a few times. The internet runs on pixels (72 dpi or dots per inch), your tv and computer displays in pixels. A half pixel isn’t a thing and you shouldn’t make it a thing either. The interweb counts pixels to determine size, shape, width, and height. Using a half pixel or something insane like 78.86px will force the developer to adjust your entire mockup.

Also, note that not using full pixels in print can cause issues as well.

Step Three: Use Fonts with a Web License

I guess we start at the begining and answer the question. What are web fonts? It works the same way as the one you would install on your computer. However, this will be installed for your browser use. So that anything time someone is on that site it will show that fonts that are installed regardless if the visitor has them installed on their computer or not.

When you select the fonts you’ll be using on someone’s website (header and body fonts). Please make sure there is a web font available because desktop fonts and web fonts are not one in the same. I’ve seen this happen a few times where I’m sent font files and the web fonts are missing.

Here’s a good read on Web Font Licensing.

Step Four: Use A Grid

So in design school, you’ll learn about using a grid system when designing websites. Now I know not every designer went to college to become a web designer but it is important to understand design fully.

Now there are several types of grid systems you can use. Pick one. Anyone. Everything has a place and that place is a grid.

You can read more about Grid Systems.

Step Five: Be Consistent

Ideally, you should be creating a style guide for the website you’re building. This would include the various THML text options and color schemes. For an example:

  • Headers (1 – 6)
  • Body Text
  • Bold (Strong) Text
  • Italic Text
  • Buttons
  • List
  • Blockquotes
  • Links
  • Hover effect (Links & Buttons)
  • Form Fileds

Knowing and most importantly seeing these visual will make it easier for your developer to code those into the custom theme.

developer friendly file
Credit

Check out this great post about Web Design Elements by Spruce Rd.

Step Six: Provide Screenshot

I love having screenshots because if I’m honest shit happens. Sometimes on either side, we can mess up the PSD file and accidentally save a change. This is why having a screenshot of each page can be helpful. It ensures that we are seeing the same thing when it comes to the design of the site.
developer friendly file

Tech Translations:
DPI is used to measure the resolution of an image both on screen and in print. As the name suggests, the DPI measures how many dots fit into a linear inch. Therefore, the higher the DPI, the more detail can be shown in an image.

Designer to Developer Handoff Checklist

Before sending your web files over to your developer. Use this checklist to make sure that you'll end up with a happy developer.

Success! Now check your email to confirm your subscription.

There was an error submitting your subscription. Please try again.

We won't send you spam. Unsubscribe at any time. Powered by Kit

Previous Post
Next Post

Business, Web Design 1 Comment

Reader Interactions

Comments

  1. Kara says

    February 27, 2018 at 8:47 am

    Thanks for the tips! This is definitely something I need to implement. #blmgirl

    Reply

Share Your Thoughts
Cancel reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Categories

  • Blogging
  • Business
  • Client Work
  • ConvertKit
  • Freebie
  • GenesisWP
  • Interact
  • Personal
  • Theme Releases
  • Theme Updates
  • Tools & Software
  • Tutorials
  • Web Design
  • WordPress

Master ConvertKit

A kick ass tech course on using the ConvertKit software. Want to start growing your list with the best email marketing software out there? What are you waiting for? Grab this course now!

Enroll Now!
Buy me a coffee
Newsletter

Tails from the Beast

Join our newsletter for tips on how to use the WordPress platforms. Advance your skills, and most importantly, puppy photos.

Please enter your name.
Please enter a valid email address.
Sign Me Up!

Thanks for subscribing! Please check your email for further instructions.

Something went wrong. Please check your entries and try again.

Development Information

  • How it Works
  • Trusted Partners
  • Portfolio
  • Client Portal

Explore

  • Resources
  • ConvertKit Services
  • Terms of Service
  • Privacy Policy
  • Disclamier

Summer is right around the corner. You have summer Summer is right around the corner. You have summer plans but does your WordPress site? 

Join the Tune Up today for all your WordPress maintenance needs. No more hassling about updates and when to update them. No worrying about malware, hacking or what tools to use for your site. 

Riot Customs is your partner in code. Link n bio.
Having a dedicated space has made life so much eas Having a dedicated space has made life so much easier. Especially since I’m still to this day dealing with migraines. Yes I still have them. 

How are you making work life easier for 2023?
Just here to show proof of life. Still dealing wit Just here to show proof of life. Still dealing with the migraine that I’ve had since July. 

I’ve been a busy bee working at ConvertKit doing migrations. Working on new digital products and keeping WordPress sites secure and up to date.

You can always sign up for my services, link in bio.
Late night work sessions. Something I’m still wo Late night work sessions. Something I’m still working on about my boundaries in my business.
The last cosmetic upgrade for now. Doing hardware The last cosmetic upgrade for now. Doing hardware upgrades next week. I swear.
Summer is here. It's vacation time for everyone ex Summer is here. It's vacation time for everyone except your website.​​​​​​​​
​​​​​​​​
Your website works for you 24/7 but that doesn't mean it doesn't need maintenance. Don't come back from vacation with tons of updates pinging on your dashboard. Get emails while you're enjoying time off that your site went down. ​​​​​​​​
​​​​​​​​
Let us take care of that for you. Join the tuneup today!​​​​​​​​
​​​​​​​​
Link in bio.

© 2009 - 2025 Riot Customs, LLC.

Powered by Flywheel & Beaver Builder.