How effective are the site flows you make? If your site flows aren’t visual, they aren’t that effective. Clients need to be able to see the breadth and depth of their entire site at a glance. Traditional site flows force clients to read a static site structure instead of visualizing it. Those lackluster boxes and arrows aren’t detailed enough to paint a clear vision for them.
You need to excite and inspire your clients with the site you’re designing for them. Visual site flows that illustrate the overall look and feel of each page are the way to do this.
They’ll give your clients a better idea of how each page will function before the site is built. You and your team will also be able to plan and strategize changes to the site better.
The best way to create visual site flows is to use a professional toolkit like Flow Patterns. This toolkit includes 72 pages and 78 microinteractions for mapping various user interfaces. It also includes markers and callouts to help you link them up.
You get a set of pages for 5 different user interface categories:
- Ecommerce sites
- Corporate sites
- Product sites
- Multimedia sites
- Web apps
You also get a set of microinteractions for indicating rich and dynamic features users may interact with on a page. These microinteractions come in 8 different categories:
- Form Fields
Flow Patterns Preview
Flow Patterns is designed with pixel-perfect precision. Each page is made with such distinct detail it’s easy to tell them apart at a glance. Its monochrome style gives it clarity and makes it easy on the eyes.
Not only can you make site flows with it, but user flows as well. Its versatile elements allow you to create both types of deliverables whenever you need to.
Site Flow Example
The site flows you can make with Flow Patterns are visually detailed and compelling. Below is an example of a site flow made with Flow Patterns.
This site flow shows the structure and hierarchy of a product company website. Notice that you not only see how each page flows together, but you can also see the unique microinteractions on certain pages.
User Flow Example
You can also use Flow Patterns to make user flows. Here’s an example of a user flow that shows how the user could interact with a login page if they forget their password. It displays the user’s point of failure and path to success.
Choose Your License
This product is only for Omnigraffle, Sketch, and Illustrator. You’ll receive an email to download the file after your purchase. Email us if there are any issues.
- 72 Pages (5 categories)
- 78 Microinteractions (8 categories)
- Markers & Callouts
- For Site & User Flows
- Pixel-Perfect Detail
- Monochrome Style
What’s in the File?
- Omnigraffle Stencils
- Sketch Symbols
- Illustrator Symbols
- Site Flow Example
- User Flow Example
- Flow Patterns Cheatsheet
If you’re the only user of Flow Patterns, choose the single license. If you’re sharing Flow Patterns with your team, choose the team license.