Flow diagram: illustrates the path/s the user can take through an application or site.
Flow diagrams account for user actions (clicking on navigation elements) as well as application behaviors, such as the messaging that is presented when a user tries to access a protected page without being signed in.
Flow diagrams are helpful for illustrating the number of steps required for the user to complete an action. Creating a flow diagram of an existing site can be a useful exercise for illustrating inefficient flows or accidental loops in the user experience.
“Wireflow”: a hybrid of a wireframe and a flow diagram.
Shows mini-wireframes of some page elements — like buttons or forms — within the context of a flow diagram.
Wireframe: a grayscale skeleton of the proposed page design.
A wireframe can be a basic sketch of a design solution, or a fully annotated and highly detailed specification. Wireframes sometimes indicate preferred interaction design (i.e. “open a popup layer”), but they do not dictate visual design.
Wireframes are a very efficient way to collect and synthesize design requirements, and obtain high-level approval, before investing time in visual design and programming.
Interactive prototype: A clickable version of the application (as HTML/Javascript site, or single compiled Help file).
If a picture is worth a thousand words, a prototype of a highly interactive application can be worth at least several pages of wireframes. The prototype allows people to see how animations, sliders, carousels and other interactive behaviors work, making the design and development process more efficient.
The prototype emphasizes the flow through the application, not just individual pages, so it can also help expose points of confusion, etc. that might not surface if the team relies only on wireframes.
