Baby Log Spec

19 Responses

  1. Wilson Miner Wilson Miner

    I'm always interested in the different ways people document and communicate specs for implementing designs. I got out of the habit of doing specs when I was building most of my own designs, but I often find the discipline of measuring and labeling the system behind the design helps me think through it in a way that makes it better.

    I'm enjoying the fact that Sketch's line tool has an option for flat "arrow" heads. Drawing 2px lines with centered strokes makes it easy to draw shapes with the exact measurements. In Photoshop I usually used some combination of inner shadow and drop shadow to draw the lines on shapes, and always ended up needing to measure everything off by one pixel.

    likes

    8 months ago

  2. Mariusz Ciesla Mariusz Ciesla

    I think I should get into the habit of doing those things for freelance, especially since often I can't come back to see at a final product before it's live or stay in touch with developers to do some basic quality assurance.

    8 months ago

  3. Ian Silber Ian Silber

    @Wilson Miner can you share the layer styles you mentioned for Photoshop? Not ready to switch to Sketch yet and your hack sounds better than what I do know (draw a custom shape).

    8 months ago

  4. Wilson Miner Wilson Miner

    @Ian Silber I usually would draw a rectangle shape and apply a inner shadow and a drop shadow, each with no blur and offset by 2px. Then I'd position the shape 1px off from the origin of what I'm measuring so there's 1 pixel inside and 1 pixel outside. That felt more clear than drawing 1px lines and choosing a direction to offset them.

    likes

    8 months ago

  5. Jordan Borth Jordan Borth

    Thanks for sharing. I'm always curious as to this aspect of the process as well. It's great getting a look into how others present their implementation docs :)

    8 months ago

  6. Andre Tacuyan Andre Tacuyan

    This is pretty similar to how we do it at Microsoft! :)

    8 months ago

  7. Tyler McGowan Tyler McGowan

    I've been using InDesign to mockup sites for the past while. Multiple master pages in one document for responsive projects, object based UI, paragraph/character styles... all very similar to HTML/CSS.

    I then have a layer called 'specs' with lines and measurements like yours above. ID has the same flat bar start/end to lines so you can draw the exact dimensions, and smart guides help everything snap in place. Export to PDF with specs on and off and provide to our developer. Sometimes export the whole mockup as a flat jpeg as well, and post online like Dan Mall's RIF process.

    likes

    8 months ago

  8. Kostya Kostya

    You can use these tools to create assets and guides
    http://www.pngexpress.com/
    http://www.cutandslice.me/

    likes

    8 months ago

  9. youhee cho youhee cho

    I recently found this tool "Assistor PS". If you are using Photoshop, check this out. Stunning.
    http://witstudio.net/assistor/

    likes

    8 months ago

  10. Jon Gold Jon Gold

    Interesting - I had one client a few years ago insist on ultra-detailed specs for every possible state of every component on every screen of an app and vowed never to not either build my work or work with a design-illiterate developer again — in the time I spent fighting with Photoshop's ruler tool I could have built the thing!

    Would be interesting to revisit fully speccing work today and see if my views have changed - I still build everything myself, but perhaps the rigour would be useful? In the print days I used to love constructing elaborate grid systems with rulers and calculators; maybe it was Photoshop's tooling (or that one awful client) that caused the friction?

    btw have you got any tricks for quickly speccing things in Sketch?

    likes

    8 months ago

  11. Prathyush Prathyush

    Why do you design without an underlying grid system?

    8 months ago

  12. Adam Bubeníček Adam Bubeníček

    @Prathyush What do you mean by that? It souds interesting :)

    8 months ago

  13. Wilson Miner Wilson Miner

    @Prathyush I do, it's just not visible here. Everything falls on a grid of 4pt units. All the sizes and constraints are multiples of 4 which makes them easy to scale. Because most screens are also multiples of 4 (and 8 and 16), it also means that elements can adapt and fit together in different contexts very easily. If I subtract multiples of 5, for instance, from a canvas which is a multiple of 4, I end up with odd dimensions for the remaining space. If I subtract multiples of 4 from multiples of 4, I get more multiples of 4.

    likes

    8 months ago

  14. Virginia Murdoch Virginia Murdoch

    A tangent, but I had a client who used to design stuff in Powerpoint, print it out, draw instructions and dimensions on it, scan it and email it to us. Facepalm.

    likes

    8 months ago

  15. Joseph Grillo Joseph Grillo

    @Wilson Miner do you use the same principles for desktop? How do those grids differ?

    8 months ago

  16. Timo Nagel Timo Nagel

    Interesting to see how others to that job. For a few weeks now I am using http://www.pngexpress.com/ too. It's a great tool, it may not be to most beautiful but it gets the job done.

    8 months ago

  17. Wilson Miner Wilson Miner

    @Joseph Grillo Same principles apply (they also help with choosing breakpoints and adapting elements for responsive layouts. I do use column grids for layout (based on the 4pt base units) more often for larger desktop layouts.

    8 months ago

  18. Jaime de Ascanio Jaime de Ascanio

    @Wilson Miner this is so awesome, great job!! I use specctr.com, the perfect spec tool for all the Fireworks users out there! :)

    7 months ago

  19. Helena Harvey Helena Harvey

    @Jaime de Ascanio OMG! thank you!!!!!! They have it for illustrator and photoshop too!

    likes

    about 1 month ago

keyboard shortcuts: previous shot next shot L or F like