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.
7 months ago
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.
@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).
@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.
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 :)
This is pretty similar to how we do it at Microsoft! :)
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.
You can use these tools to create assets and guides
I recently found this tool "Assistor PS". If you are using Photoshop, check this out. Stunning.
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?
Why do you design without an underlying grid system?
@Prathyush What do you mean by that? It souds interesting :)
@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.
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.
@Wilson Miner do you use the same principles for desktop? How do those grids differ?
6 months ago
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.
@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.
@Wilson Miner this is so awesome, great job!! I use specctr.com, the perfect spec tool for all the Fireworks users out there! :)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.