8

Ask DN: Tool for detailing mocks for dev?

over 8 years ago from , Product Designer @ Match.com

A coworker approached our team and asked if there was something lighter than photoshop (and less expensive) that we knew of that he could use to annotate mocks and mark some grid lines etc. - it sounds like mainly to show the difference between mocks and what's been coded. I'm sure there's something that makes sense for this that I've seen before but nothing comes to mind.

20 comments

  • Christian Poschmann, over 8 years ago (edited over 8 years ago )

    Sketch with Sketch-measure plugin https://github.com/utom/sketch-measure.

    Also https://zeplin.io/ has been very handy.

    16 points
  • B TB T, over 8 years ago (edited over 8 years ago )

    Not sure if it answers your question, but https://zeplin.io is great for developers to use to see accurate positioning of elements, colors and fonts.

    Supports Android, iOS and web. Works great with Sketch. Developers love it.

    8 points
  • Brian A.Brian A., over 8 years ago (edited over 8 years ago )

    It's not the trendiest solution, but I've gotten some great results from a solid InDesign template and a set of good JPGs/PDFs.

    2 points
  • Kevin SuttleKevin Suttle, over 8 years ago

    The Web. https://www.quora.com/Everyone-at-37signals-knows-basic-HTML-CSS-What-are-the-benefits

    2 points
    • Sam Pierce LollaSam Pierce Lolla, over 8 years ago

      I totally support designers knowing how to code, but I don't think this answers the question. Even though I'm great at HTML/CSS, that doesn't mean it's the most efficient place for my organization to have me spend my time as a designer.

      Plus lots of us work with iOS and Android native apps more than websites these days.

      3 points
    • Sean LesterSean Lester, over 8 years ago

      This is actually a developer making the request. He already has provided mocks in hand, so this isn't going to help him.

      0 points
  • Timur Carpeev, over 8 years ago

    Avocode is exactly what you need

    1 point
  • Truong NguyenTruong Nguyen, over 8 years ago

    If you use Photoshop, there's also Specctr https://www.specctr.com/

    1 point
  • Jon DobrowolskiJon Dobrowolski, over 8 years ago

    SpecKing is great. Just used it takes a minute or two to spec an entire page / app screen

    0 points
  • Mariusz OstrowskiMariusz Ostrowski, over 8 years ago

    Markly for speccing in Photoshop - http://marklyapp.com

    0 points
  • Stefan Rauch, over 8 years ago

    InvisionApp with component breakdowns showing specs and how the component works at various viewport sizes.

    0 points
  • Eli SladeEli Slade, over 8 years ago (edited over 8 years ago )

    You could try Sketch for design. And just teach your dev simple Sketch stuff. And bam! just hand your .sketch doc to dev and they can export assets or get dimensions. For the description side of things use sketch in combination with Invision.

    0 points
  • Clinton HalpinClinton Halpin, over 8 years ago

    I'll often use Invision to layout specs for designs. In addition I also use it to give tiny feedback on screens or flows ( move this over a pixel or two etc... ). As far as I know I don't think there is a really great solution out there for this.

    0 points
  • Tre StewartTre Stewart, over 8 years ago (edited over 8 years ago )

    If you're already using photoshop for your designs, I would argue that specking (http://www.wuwacorp.com/specking/) is more toward what you are looking for. It allows you to select your assets and provides detailed specs like font specs, attributes for size, position and distance between to items. Even allows you to adjust based on the screen density.

    Also worth mentioning is PNG Express (http://www.pngexpress.com/) that does that plus some more. It's primary function is exporting assets for all types of use but it also has a specking feature for detailing the assets.

    We use both of these here depending on the artist's preference but they take the guesswork (and man hours) out of figuring this stuff out and organizing it to hand off.

    If you just want to annotate things, I would recommend Notable http://www.notableapp.com/. This isn't a photoshop plugin but allows you to annotate things and for them to provide feedback and questions as well.

    0 points
  • Richard SisonRichard Sison, over 8 years ago

    I use clarify (http://www.clarify-it.com/) for this type of thing. Whenever I need to annotate screens and explain behaviour, functionality or even typography specs, it's pretty awesome.

    You can import screens by dragging into the sidebar, or screenshot. Its screenshot capabilities are really helpful (especially the ability to reuse previous capture areas).

    Exporting is good too. You can either customise the styling of a PDF, or upload to clarify-it like this: http://richardsison.clarify-it.com/d/rrex69

    So yeah… obviously I'm a pretty big supporter of this software. I use it all the time.

    Give it a try as there are a heap of features hidden in there. But even if all you do is screenshot, markup and export, it's super helpful. Very low barrier to entry.

    0 points
  • Seah C-BSeah C-B, over 8 years ago

    Skitch is super useful for this.

    0 points