Flow Patterns: Make Site Flows in Fine Visual Detail

by on 07/02/15 at 7:51 am

Every UX designer knows that site flows are a key part of the design process. They set the long-term vision for the site before graphics or code takes place.


Traditional site flows of boxes and arrows aren’t detailed enough to paint a clear vision to others. You need visual site flows that show the basics of how a page will look. This gives your team a better idea of what you’ll design so that you can better meet their expectations.

Introducing Flow Patterns


The best way to create visual site flows is to use Flow Patterns. This pro toolkit is loaded with 72 pages and 78 microinteractions for planning a variety of sites. It also includes 5 types of markers and callouts to help you create the perfect flow.


You get a complete set of pages for mapping ecommerce sites, corporate sites, product sites, multimedia sites and web apps. You also get microinteractions, which are special features users interact with on a page that you can call out.

Flow Patterns is designed with pixel-perfect precision. Each page has 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 also user flows. Its versatile elements allow you to incorporate both types of documents in your workflow.

Site Flows

Here’s an example of a site flow made with Flow Patterns. Site flows show how pages interact with each other to form the structural hierarchy of the site.


User Flows

Here’s an example of a user flow made with Flow Patterns. User flows show how the user interacts with a specific set of pages to complete a task or meet a goal.


With Flow Patterns in your toolbox, you’ll create beautiful site and user flows that inspire your team to fulfill the long-term vision you set.

Flow Patterns Features

  • 72 Pages
  • 78 Microinteractions
  • 5 Types of Markers & Callouts
  • For Making Site & User Flows
  • Pixel-Perfect Detail
  • Monochrome Style

What’s in the File?

  • Illustrator Symbols
  • Omnigraffle Stencils
  • Flow Patterns Cheatsheet
  • Flow Patterns Checklist
  • Site Flow Example
  • User Flow Example

Choose Your License

This product is for Illustrator and Omnigraffle only. You’ll receive an email to download the file after your purchase. Check your spam folder if you don’t see it in your inbox. Email us if there are any issues.

If you’re the only user of Flow Patterns, the single license is for you. If you’re sharing Flow Patterns, the team license is for you and your co-workers.

Single License $47


Team License $94



Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

8 Responses to “Flow Patterns: Make Site Flows in Fine Visual Detail”

  1. Cedric

    Jul 3rd, 2015

    Nice one ! What about Sketch file ? Do you think it can be done ?

    • anthony

      Jul 9th, 2015

      No, because Sketch’s line segment and arrow head functionality are too subpar. Illustrator and Omnigraffle are the best tools for making flows.

      • Chris

        Apr 13th, 2016

        Arrow and line details aren’t showstoppers. Sketch users are going to want to work in Sketch.

  2. Nick

    Jul 7th, 2015

    Can we get a Pixelmator version?

  3. Joanne Littell

    Aug 26th, 2015

    This is great!

    I’m learning Axure, can these be put into an Axure pattern library?


  4. Userflow

    Oct 7th, 2015

    Thanks for the user flow diagram. I will use this as an example for my client to make there own user flow diagram. Like my companyname :)

  5. Daniel

    Feb 24th, 2016

    What version of Adobe Illustrator are the files compatible with? I have Adobe Creative Suite 6.

Leave a Reply to Joanne Littell