This is an answer I wrote to What deliverables do I ask for from a UI/UX designer when starting a webapp project? by loki777coyg (Reddit).
Ideally, you’d have a VSG (Visual Style Guide) and an Interaction Design.
The VSG includes design details like colors, gradients, fonts and standard dimensions as well as details about components/controls, like for icons, properties like,
or for similar properties for controls, like, for example,
or even complex controls, like grids, with properties like
Depending on what you’re building, a VSG will include instructions for how components are displayed in different media, like small-screen, responsive, etc.
Basically, the VSG is a dictionary with the answer to every question you have about how to style a component in the target platform/technology/media, generally defined in a platform/technology-agnostic way.
The Interaction Design includes instructions on how to create UIs using the components defined in the VSG. These are the higher-level rules for how to combine components/controls to build screens.
It answers questions about
Again, this design may also include details on how to adjust compositions/interactions based on the media/context, like small-screen, responsive, etc.
Basically, the Interaction Design is a dictionary with the answer to every question you have about how to compose components to represent the screens in workflows and use cases, also defined in a platform/technology-agnostic way.
I deliberately wrote “ideally” above because, often, the specifications you get/have will fall short of this. However, remember that whatever isn’t in your specification will have to be decided on-the-fly and ad-hoc and most likely differently in different situations, most likely by the wrong person (the developer).
A tooltip is going to have some sort of style even if you don’t actually specify it. Unless you’re really disciplined—even if you’re a one-man team—you’re going to end up with noticeable inconsistencies. You’ll either have to live with them or invest a lot of time to eradicate them.
The nice thing about working from documents like this rather than wireframes for very specific situations is that it’s much easier to build new, unforeseen screens without further help from the designer. That is, instead of having to wait for the designer to make the screen or, instead of just winging it and building the screen based on what you see in other, similar screens, you have a very specific instruction manual on how to style and compose your building blocks to create new screens.
Another advantage is that there is a canonical, agreed-upon specification for how things are done to resolve disputes and clarify questions.