5 Tips on Preparing Your Designs for Coders

Although designers and coders don’t have too much in common in terms of programs used or work perspective, good workflow and smart communication between the two can make the difference between a mediocre online project and an award winning one.

How to improve your work with a coder? Implement and respect a clear workflow and a plan of action, establish a feedback flow between the two parties and keep your mindset on collaboration.

Start with a Solid Planning of the Project

Shipping a design off to a developer, along with a few requirements, may work for a very small project, but for any medium to large-size project, and particularly a complex one, it can be a recipe for disaster. Planning needs to be put in place as part of the workflow.


Planning is caring: a project manager always shows you the way.

A plan should include cost and schedule estimates. If a client is involved, a set of estimates is likely to be mandatory. The means for collaboration also needs to be established. How optimal collaboration is to be accomplished is a vital part of project planning, but one that is all too often overlooked.

We asked Xfive, the 10 year old web development agency that worked with clients such as Twitter, eBay or Microsoft, how do they integrate the planning stage into their workflow:

We believe the pre-development part of the project is almost equally important as the development itself. In Xfive, we are dedicated to understanding the customer’s needs from the early discussions on the project, so that later on, our project management team can choose the proper solutions for each client” says Milosz Bazela, COO, Xfive.


Milosz Bazela, aiming for 3500 users from the early stage of the project.

Tips for Preparing Designs for Coding

Rather than tossing a design along with a set of requirements over the infamous “wall” and awaiting the results, web designers need to focus on doing things that will enable the coders to help them.

We’ve already mentioned the need to establish a plan, including one that includes the means of collaboration. Here are a few additional tips:

  • Pixel Perfect is a Key Objective – If a professional coder is to implement your design down to the last detail, a specific level of design detail has to be provided. That is why it’s necessary to exactly specify elements such as padding and margins, font usage, style, and colors, and a range of other things. When greater detail is provided, a need for changes or revisions is lessened; this allows the project to be completed earlier and at less cost.
  • The Importance of Photoshop Etiquette – Make an extra effort to properly name your layers, logically structure your files, align your images, and perform all those related housekeeping chores that provide the coder with the needed information; and thereby keep the workflow moving smoothly.
  • Communicate with the Coder – Do this on a regular basis, not for the purpose of getting the latest status, but as a means to ensure the coder is getting all the information needed, and to answer any questions. Developers appreciate it when you show an interest in helping them meet your project’s objectives.


Coders’ meeting: preparing a short email response for the web designer.

  • Don’t Forget Designs for Interactions – These designs can help a coder a great. The interactions in questions would include dropdown menus, button hover states, the intended use of sliders, etc.
  • Get a Grasp of the Technology – By keeping up to speed on the latest technological trends, you will gain a better understanding of what is possible along with what is not. It is not uncommon for a coder, or even a coding guru, to be presented with a design feature that is impossible to implement.

Time is On Your Side

Plan ahead, get meaningful estimates, and coordinate with the coder and with your client. When everyone has bought into the process, you will definitely feel that time is on your side. One of the key factors in all of this is transparency. When everyone involved is in the loop, participants are much less apt to become worried or nervous, even if a project hits a bump in the road.

Here’s Xfive’s approach to the issue:

Although we have developed some pretty advanced time management skills during our ten-year experience, and each project has its own Project manager, we only count the development time. This is because we believe that quality project management is not a service, but a norm.

If a customer is in a hurry, we wither include additional developers or discuss it with the team and add some extra-hours on the schedule. We believe in flexibility, since every project has its own traits. We try not to cause a situation when the time is running out because of our precise estimation process focus and the clear reporting on the burned hours on each task” details Milosz, from Xfive.


The coder and the PM are taking their coffee with a touch of task management.

About Xfive

Xfive is a highly-respected software developer, whose approach is to work as an extension of your design team. Xfive’s staff of project managers, core developers, along with a supporting team of freelancers, operates on a global basis.

Xfive has a physical home office location and a physical develop center; even though a portion of its workforce provides support to designers and creative agencies from several worldwide locations.

Xfive has a caring culture, and one that is typified by high fives. The element of partnership is a strong one, both in-house, and with customers and clients.

Ask Xfive about a free quote for your project, regardless of its size, if you value cost-effective, high quality code and you enjoy working with a development agency that has the skills and experience to take care of your web design.

Comments

  • I am Front-End Designer & Developer, It is a Great Article to read and follow upon, I proudly says that I follow these 5 steps in my regular routine, that is why Developers are my friends :-)