Big News: FounderDating is joining OneVest to build the largest community for entrepreneurs. Details here
Latest Notifications
You have no recent recommendations.
Name
Title
 
MiniBio
FOLLOW
Title
 Followers
FOLLOW TOPIC

Question goes here

1,300 Followers

  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur
  • Name
    Entrepreneur

How to solve the gap between UI design and Coding?

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?

10 Replies

Michael Mancuso
3
0
Michael Mancuso Entrepreneur
Product Design Lead
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.

Vishwesh (VJ) Jirgale
1
0
Vishwesh (VJ) Jirgale Entrepreneur
Heading Microsoft Pune R&D Center
Have you tried zeplin?
Irina Balko
0
0
Irina Balko Entrepreneur
Founder of www.skyette.com
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.
Stephen Salaka
2
0
Stephen Salaka Entrepreneur • Advisor
Product Development Manager at Tsunami Tsolutions LLC.
Usually I have the designers include the dimensions on the designs they produce so that they can easily be translated into code.
Scott Saunders
2
0
Scott Saunders Entrepreneur • Advisor
Game Director at Storm8
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!
Rajesh Kumar
3
0
Rajesh Kumar Entrepreneur • Advisor
Founder & CEO INKONIQ - India's leading User Experience Design Company
Best way to achieve this is having tightly integrated design and engineering teams. Sometimes this might not be the case.

We usespecctr&inkfor 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 thenZeplinis the best choice.
Gerard Consegal Torrent
0
0
Looking for || Management Consulting || Business Development positions || Social Impact projects
Thank you so much guys for your advices ! I really appreciate. Bythe 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?

Todd Kovalsky
1
0
Todd Kovalsky Entrepreneur
I help businesses get where they need to go
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
1
0
Mary Camacho Entrepreneur
Product & Develoment Management | UI/UX
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
1
0
Toby Trembath Advisor
Digital Designer
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 touse his eyes and open the visuals in whatever authoring tool they were designed intoaccess positioning data directly.
Join FounderDating to participate in the discussion
Nothing gets posted to LinkedIn and your information will not be shared.

Just a few more details please.

DO: Start a discussion, share a resource, or ask a question related to entrepreneurship.
DON'T: Post about prohibited topics such as recruiting, cofounder wanted, check out my product
or feedback on the FD site (you can send this to us directly info@founderdating.com).
See the Community Code of Conduct for more details.

Title

Give your question or discussion topic a great title, make it catchy and succinct.

Details

Make sure what you're about to say is specific and relevant - you'll get better responses.

Topics

Tag your discussion so you get more relevant responses.

Question goes here

1,300 Followers

  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
  • Name
    Details
Know someone who should answer this question? Enter their email below
Stay current and follow these discussion topics?