Flow Patterns: Make Site Flows in Fine Visual Detail

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

How effective are your site flows? 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 site at a glance. Traditional site flows force clients to read their site structure instead of visualizing it. Lackluster boxes and arrows aren’t detailed enough to paint a clear vision for them.

traditional_site-flow

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.

flow-patterns_hero

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:

  1. Ecommerce sites
  2. Corporate sites
  3. Product sites
  4. Multimedia sites
  5. 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:

  1. Navigation
  2. Multimedia
  3. Info
  4. Form Fields
  5. Buttons
  6. Widgets
  7. Alerts
  8. Modals

Flow Patterns Preview

flow_patterns_cheatsheet

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.

site-flow-example

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.

user-flow-example

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.

industry-standard-tools

Key Features

  • 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.

Single License $50

flow_patterns_single

Team License $100

flow_patterns_team


Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

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.

10 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 arrow and line segment functions are too subpar. Illustrator and Omnigraffle are much better for making flows.

      Edit: I’ve now made Flow Patterns available for Sketch due to the demand.

      • 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?

    Thanks

  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.

  6. Ricardo Zea

    Feb 16th, 2018

    This is all great but a word of caution for junior designers:

    The first graphic being displayed in this ad (with an X on it :p) is NOT a site flow. It’s a sitemap.

    Sitemaps have a HUGE benefit because they allow everyone to have a bird’s eye view of the size of the website/webapp, at least, it provides a good ballpark size of the project.

    After the sitemap you move on to the site flow, and that’s where all the other information here is for.

    PS. Yes, this is an ad, in form of a narrative ☝.

    • anthony

      Feb 17th, 2018

      You’re arguing semantics. Site maps and site flows are synonymous. The reason I prefer calling them site flows is because I don’t want people to confuse a site map deliverable with an XML site map used for SEO. Site maps and site flows are the same thing.

Leave a Comment