When working with developers designers often go an extra mile to make sure the fonts are set exactly as specified, the colors match the mockups and the spacing of the elements is pixel perfect. How do I know that? I am a designer myself.
Unfortunately, quite often, when the developers complete their work, the results don’t always match what the designers envisioned. So how do you bridge the gap between the designs and the development?
Start with the right tools
The first step in creating the pages to match the designs starts with the right tools. There are a few options available on the market now.
Adobe XD is a vector-based user experience design tool that combines design, prototyping and a powerful developer interface that simplifies the handoff and gives the developers precise view of the page with all elements – fonts, colors, spacings, assets and chunks of CSS code.
Sketch, is another popular tool that is often used in conjunction with Zeplin for developer hand off, is very similar. When the files are imported into Zeplin, the developers see all page elements, similar to Adobe XD. Additionally, designers can connect their design systems to give a comprehensive overview of the project.
Finally, there is Figma, a relatively newcomer, which describes itself as a tool that “connects everyone in the design process so teams can deliver better products, faster”, by combining UX/UI design, prototyping, collaboration and developer handoff into one package, easily accessible online.
Establish “Pixel Perfect” Culture
This happened many times in the past: I would get an email from our development team asking to review pages they had built. I would dread those emails because I expected those pages to look nothing like the designs I provided. At some point it became clear that I could either keep getting frustrated and spend time on multiple design reviews or come up with a different approach by getting a “buy in” from the developers on the value of following the designs precisely.
This process took a little bit of time but once the developers understood what my expectations were, the need for multiple reviews disappeared. I would look at the page, provide feedback and they would do a few small tweaks to make the pages look perfect. Establishing a “pixel perfect” culture became a huge time saver!
Also, before starting the design, having a direct conversation with the developers to hear their “side of the story” is extremely beneficial. This is the perfect time to go over the development requirements and how they would dictate visual and functional approaches. Once these requirements are established, the final designs should be something the developers understand and support fully.
Work with the Right Hosting Partners
Now you have your design in place and you have a developer who is ready and willing to make it happen. The next step is working with a host that has the capability to make your vision become a reality.
You want a company that is scalable, secure, but most importantly gives you the power to innovate. A good host will allow your developers to have more time to focus on the design and bringing the site to life.
When Design Meets Development
While achieving the perfect marriage of design and development can be tricky, it is absolutely worth it. Not only will you have a site you’re proud of, you’ll bring more people to your site. Customers will want to stay and explore if you provide them with something aesthetic and user friendly.
All these tips will let you level-up your site-building and ultimately make more money.
