3 web architecture tools that will keep your project from derailing

28 February 2019
featured image

If you’re a project manager, a designer or UX researcher or even an entrepreneur, you probably know building a site or app is not as easy as it might look.

While adopting an agile project management method might reduce the amount of chaos you will face when you start structuring your app’s content, it’s still important to anticipate by seeing the bigger picture.

Sitemaps and userflow charts are essential visual tools to align your team around your content. But for years these artifacts have been hard to produce. Often the result of poorly designed available webapps, we all had to rely on creating those sitemaps ourselves, with paper or design softwares.

I was looking for a tool that allowed to lay out the overall site or application architecture, without distracting clients or testers with its design. But most of the tools available didn’t provide that. They either provided a way to create pages, but no description of content, or they focused more on the visual design and interactions.

Luckily, I stumbled upon different tools that did exactly what I needed. Here is a list of three user-flow tools that will, I hope, help you keep your project on track.

1. Flowmapp

The first is Flowmapp, a nifty sitemap creator with wireframe templates that allow you to build your site’s architecture for under one hour. I want to thank Camille Bossel of Food Hack, for this finding which made me tear up a little. What I like about this tool is its ease of use, clean design, affordable pricing and the fact is has a userflow tool, although it is not directly linked to the sitemap, yet.

Flowmapp

A webapp that let's you create both sitemaps, content and flowcharts in a very intuitive way

Price: Free for 1 project, then from 8$ a month for pro features
    Pros
  • Super intuitive
  • Cheap
  • Render's beautifully
    Cons
  • Flowcharts are not linked to sitemaps
  • Can't prototype
http://www.flowmapp.com

2. Mockflow

I was sent a link to Mockflow, which also looks promising but is more geared towards wireframing and usability planning. It does have a sitemap feature and boasts collaborative tools and integrations but I haven’t explored it enough to say it is as good for content planning.

Mockflow

A webapp that let's you create user interfaces and content architecture with simple wireframe elements

Price: Free for 1 project with some limitations, then from 14$ a month for premium features
    Pros
  • Simple
  • Quick
    Cons
  • Too interface-oriented for architecture planning
  • Not as clean as the others
https://mockflow.com/

 3. Overflow

Doing some research I found overflow, a well designed mockup-to-prototype webapp. It looks gorgeous and it’s important noting that it allows for more complex page-linking. But this one is definitely more suitable for high-fidelity prototypes. In my quest for a design-agnostic content planner, Overflow isn’t the one. But it might do the job for others, who want to display fully detailed pages and interactions.

Overflow

A webapp that let's you create high-fidelity user interfaces and prototypes

Price: Open source beta
    Pros
  • Beautiful
  • Advanced interactions
  • Open Source Beta
    Cons
  • Too interface-oriented for architecture planning
  • More complex to use
https://overflow.io

    Comments

Leave a Reply

Your browser is out-of-date!

Update your browser to view this website correctly.Update my browser now

×