Whats the Difference between Wire-Flows and Wire-framing?

Wireframes are a great way of showing layout, but they don't describe interaction well, and they are especially poor at documenting the layout of digital products that have a lot of dynamic content, such as mobile apps or Web-apps. Wireframes are most useful when documenting websites (or other digital products) with many discrete, relatively static pages or screens, where clicking a link or button will typically navigate to a completely different page.

Wire-flows documents the process of a user ****working through a common task on the product (e.g. “send a direct message to someone in your network” on a social media app). At each step in the workflow a simple wireframe or high fidelity screen mock-up shows the screen available to users.

example for Wire-flows:

Source: NNGroup

Source: NNGroup

Why do we use Wire-Frames and Wire-Flows ?

Wireframes are the “blueprint for design.”

They’re supposed to connect the underlying conceptual structure (or information architecture) to the surface (or visual design) of a website or mobile app.

More specifically