Design Mockup Tips to Help Your Developer Nail Your Design


Disclaimer: This post may contain affiliate links, which means you may be sending some love my way!

Deciding to partner with a developer is a major step in your design or agency business.

Often times designers have a concern about whether their design will look like their mockups.

I totally get it you want the designs you work so hard to put together to look like you intended.

Well, there are some practices that really help your developer nail your design to the vision you made.

They are easy to implement and can save a bunch of frustration.

Let’s start with the basics.

1 | Have A Meeting to Discuss Your Designs

It’s important to meet and actually go over your design with the person or team you intend to work with it. Especially if you are passing over any elaborate designs that are outside the normal or typical format.

Plus it’s just great to meet to ensure everyone is on the same page to get any questions addressed.

Maybe some changes need to be made or it’s completely outside the scope of the project.

Reduce surprises by meeting to have a discussion.

2 | Use Industry Standard Tools to Create Your Designs

Industry standard design tools can help communicate design elements between you and your developer. Such as correct pixel sizes, typography selections, color codes, etc.

Which are all important and ensuring your designs are reflected correctly when translated into a website.

Industry standard design tools such as Photoshop, Illustrator, XD, Sketch and others allow you set the website dimensions of your design for various screen sizes. By properly setting your mockup dimensions to match the standard screen sizes, your heading titles, paragraph font sizes, etc will be more accurate.

For example, I’ve received design mockups where the font size for titles are 150px. Which on an actual website is way too big. Leaving me to either touch base with the designer for the correct size or guessing an appropriate font size.

Related post: How to Work With A Web Developer As A Designer

The more accurate your mockups are the better your designs can be translated by your developer.

Also, make sure your developer is familiar with the tools you are using, this will cut down on a lot of development time and reduce errors. Definitely, have this discussion during the discovery phase of your partnership.

3 l Provide a Brand Style Guide

A brand style guide is great for helping to reference essential brand elements such as the correct brand fonts, hex codes for colors, logo elements, etc.

It also serves as a backup just in case the mockups are not properly scaled to screen sizes.

As a developer I like to have a brand style guide to quickly reference to double check that the brand colors are consistent, heading titles are properly sized and on brand.

One hex color letter or number off can make a dramatic difference no matter how close the colors are.

4 | Use Video to Communicate Interactivity

I love technology and with the invention of screen capturing tools, recording a quick video is easier than ever.

Use a tool such as Loom or CloudApp to record your desired outcome your design mockups. Such as any hover state changes, parallax effects, custom content, etc.

This will help set a clearer explanation to your developer how your designs are intended to work. Plus it serves as a reference point in case something is forgotten.

Receiving a design that matches your mockups is essential your overall client experience. Use these tips as a reference before your next collaboration.

If you want to have a handy reference guide then download your free guide to crafting a mockup your developer will appreciate. It provides you with additional tips and examples on nailing your mockups before passing them over to be professionally crafted. Grab it below for free in the Designer Resource Library!

Don't leave without checking out...

Drop a Comment