User Interface Design · Front end

How to solve the gap between UI design and Coding?

Gerard Consegal Torrent

October 27th, 2015

My teammates and I are currently working on the integration of the design (UI) within the app we are developing. Nevertheless and considering that is our first mobile app, we are now facing the problem that the designer works the images/icones/structure-of-the-app at visual level but the app-devs need to know exactly the measures, proportions, distances, etc of every single image in order to properly introduce them in the source code.

Do any of you know if there is any tool that allows us to upload images or screenshots and they return the measures, proportions and this staff? 

Or, in other words, how you guys deal with this situation?

Michael Mancuso Product Design Lead

October 27th, 2015

Take a look at Zeplin.io which works with Sketch files and creates a "living style guide" for the developers to have access to font sizes, margins, padding, object dimensions, font faces, color values, and even automatically generate PNG and SVG assets from well-organized source files. InVision is set to release a beta called "Insight" soon which will offer a similar tool to their workflow.

Rajesh Kumar Founder & CEO INKONIQ - India's leading User Experience Design Company

October 27th, 2015

Best way to achieve this is having tightly integrated design and engineering teams. Sometimes this might not be the case.

We use specctr & ink for measuring. Unfortunately these tools doesn't support slicing as it has be done separately.

But there is another tool which is really really efficient and jack of all the trades

If you like Sketch then Zeplin is the best choice.

Stephen Salaka Product Development Manager at Tsunami Tsolutions LLC.

October 27th, 2015

Usually I have the designers include the dimensions on the designs they produce so that they can easily be translated into code.

Scott Saunders Game Director at Storm8

October 27th, 2015

As some have pointed out, your designer should be able to provide all of those numbers to your dev team. The designer should have a mechanical wireframe that describes all asset dimensions, padding, spacing, font size etc. 

However, the other problem that I sense from your email is that you seem to have people working in silo's. Regardless of how detailed the wireframes are, you are going to need to iterate and polish once they are implemented. The designer and engineer should be working very closely on the project. I've never seen a perfect design or a perfect implementation. It always takes several passes to get it right. Make sure people are working together and are in constant communication!

Vishwesh Jirgale

October 27th, 2015

Have you tried zeplin?

Todd Kovalsky

October 28th, 2015

If you are using photoshop, there should be a settinnd to print the style guide, and l/or export to html file. As far as wire framing tools, I like omnigraffle on the mac. But there is always keynotopia and PowerPoint keynote Etc. 

Mary Camacho Product & Develoment Management | UI/UX

October 28th, 2015

JustInMind or inVision can be used - these are great for full prototype wireframes - where you want to test out the UX and they have collaboration built in. I know in the Denver area - inVision is used by a lot of the larger companies. Not as certain about JustInMind - but they do have a free version you can start out with. If you are looking for iOS, Sketch is what everyone around here uses.

Toby Trembath Digital Designer

October 28th, 2015

I can second Omnigraffle which allows you to pull lines over a design and automatically adds pixel measures to the visual. Great for wire framing too but might just be for mac.

For positioning I have found it is generally faster to get the developer to use his eyes and open the visuals in whatever authoring tool they were designed in to access positioning data directly.

Irina Balko Founder of www.skyette.com

October 27th, 2015

Unfortunately, I can't help you with tools but your designer should be able to provide you with coordinates of the assets. You can definitely ask him to. At least thats how it was done in projects I participated in.

Gerard Consegal Torrent

October 28th, 2015

Thank you so much guys for your advices ! I really appreciate. By the way, do any of you might recommend me a wireframe software to professionalize our (current and non-pro) wireframe and so start having implemented the measures and so on?