Tips for Passing Your Website Mockup to a Developer

Posted on

If you are a web designer who works mainly on the front-end, there may be times when you need to hand over your work to a developer. Their job is to take your mockup and turn it into a working website.

It’s a big step in the process. To achieve a successful outcome, designers and developers need to be on the same page, so to speak. But that’s easier said than done.

Quite often certain aspects of a design and layout can be lost in translation. This leads to something looking different in the browser than in your prototyping app. Even subtle differences can detract from overall usability and aesthetics.

And while it might be easier to blame the situation on a dishonest developer, it’s not always that simple. Communication is key, as is a clear understanding of the design itself.

Let’s explore some ideas for making the designer-to-developer handover productive.

Provide project details

One of the most common problems in the mock-up to build process is neglecting detail. Things like fonts used, spacing between elements, and design enhancements (shadows, borders, etc.) can easily be misinterpreted or even completely missed.

This may be due to a lack of clarity. Without explicit instructions, a developer may have to look into a prototype to determine how these elements were implemented. And not everyone will take the time to do it.

We can assume that these aspects of our design will be obvious – they are not. It is therefore important to document the various elements. This provides a point of reference for developers when working on the build.

Luckily, many apps offer style guides that will help avoid confusion. However, if you are designing in an application such as Photoshop, you may need to generate this information yourself.

Project UI elements displayed on a screen and desktop

Keep the model and assets organized

Speaking of Photoshop, have you ever opened a PSD file only to see a large number of nameless layers in seemingly random order? The ability to determine the content of each layer can be extremely frustrating.

Not only does this waste time, but it’s also another way for a developer to miss these design details. Beyond that, forcing a developer to navigate an unorganized mess isn’t a great way to make friends.

Organizing a mockup is key to a smooth transfer. Take the time to label the different elements of your work and place them in a logical order.

As for additional resources such as images and fonts, place them in folders. It is also helpful to name images in a way that reflects their content and/or use.

neatly arranged colored pencils

Don’t Forget Responsive Styles

When it comes to how your design looks and works on mobile devices, it’s best not to leave things to chance. Responsive styles are just as important as the desktop.

Again, this is where the help of a good prototyping app can be invaluable. The ability to add responsiveness to a mockup makes things much easier for a developer to implement.

Even so, some aspects may still benefit from further explanation. For example, how should multi-column layouts respond to tablets as opposed to phones? Will the typography change? And navigation? These are all important things to consider.

Include mobile device notes in style guides and documentation. This will ensure a consistent user experience for every screen.

A person uses a smartphone

Be a tour guide

The interactive models and written instructions are excellent. But there’s still something to be said for having a conversation about the details of a project.

With the ease of video conferencing, a virtual meeting with a developer should be on your to-do list. This allows you to act as a sort of “tour guide”, explaining all the moving parts of your creative work.

In addition, it is also an opportunity to receive valuable feedback. There may be times when a developer detects an issue that could negatively impact users. It is better to discover it now, rather than in the middle of construction.

Participants can also ask each other questions and clear up any misunderstandings. The goal is for everyone to be in tune with what is happening. Spending even a few minutes discussing the project will help you get there.

People point to places on a map

Designers and developers working in harmony

Ultimately, everyone involved in the design and development of a website has the same goal: a successful outcome. A seamless transfer from designer to developer plays an important role.

For designers, it takes a little extra effort to ensure success. This is to provide a well-organized and documented model. This includes all the details regarding how the website should work on different screen sizes.

Finally, an effort to engage with colleagues is vital. Spending time together (virtually or in person) to discuss details should be a priority.

It takes practice to get it right. And there is always the possibility of an error. But by following the steps above, you will put your projects on the most direct path to success.

Leave a Reply

Your email address will not be published.