Are my assets okay?

A quick checklist for designers to see if assets are up to par.

Dear designer, I love you, I would be nothing without you. But, getting your assets right on the first go is a huge timesaver for me. Missing assets are the biggest blockers in my day to day working life. So, here’s a friendly checklist for you, to make our time in the office a bit smoother.

Items in the lists are ordered roughly according to importance.

Bitmap image assets

Please check that:

  1. All the images that are in the mockup are included in the assets.
  2. Right image format is used. jpg for photos, png or gif for screen captures. If you’re unsure, please ask me.
  3. All the images are double the size of the original. I have script that chops up the image in half, so no need for the 1x image.
  4. Images have no padding around them, but are cropped exactly to the dimensions.
  5. All the images are compressed. Take pride in small image size, own the task (sometimes there is an automated script to do that, but not always).
  6. All the images are saved to Google Drive or to a Jira ticket (or whatever it is that you use).
  7. All the images have no drop shadow, I’ll add that programmatically. This rule might vary greatly depending on the required browser support, and the complexity of the drop shadow.
  8. Possible old versions of images are deleted.
  9. Don’t send images via email, please.

Video assets

Please check that:

  1. The videos are in mp4 or webm format (this might vary per project basis).
  2. It’s minified.
  3. The videos are exactly the right size. Scaling down video doesn’t work well in some browsers.
  4. Videos have no padding around them, but are cropped exactly to the dimensions.
  5. Poster image is provided. Usually this should be same as the first frame of the video.
  6. The videos are saved to Google Drive or to a Jira ticket (or whatever it is that you use).
  7. Possible stale versions are deleted.

SVG assets

Please check that:

  1. The SVG is the right size when you export it. This will ensure that the viewbox is set right
  2. It’s not minified (I’ll handle that).
  3. SVGs have no padding around them, but are cropped exactly to the dimensions.
  4. That the SVGs are saved to Google Drive or to a Jira ticket (or whatever it is that you use).
  5. Possible old versions of images are deleted.

Rationale behind this checklist

Pilots have dedicated preflight checklists that have dramatically improved flight safety and provided peace of mind for pilots and passengers. We can use the same logic to solve the asset problem.

Tools

zeplin.io is nice tool to make the asset exporting and sizing less laborious for designers.

Got more tips on this topic? Drop a comment below.

Club-Mate, the beverage → club-mate.fi