The way I - a non-designer - understand this, these flow cards are not wireframes as such, where the intention would be to structure the information/content presented to the user on a page.
Instead, I view these as basically standardized "icons" - a visual language - with each depicting a function/meaning of one page (or step) in a flow. For example, you could have a "landing page" flow card, "account login" flow card, "home dashboard" home card, depicting the user flow when accessing their account.
It doesn't matter what the actual wireframe layout is at that point, as this is for a step before that, where you want to see what are the steps the user follows to do a specific thing.
I might be completely off the mark here, but if that's the intention: preparing a smaller, well defined and named set of cards, basically designing a language for this, would be clearer. As a non-designer, mixing the semantic value of the cards (if understood as icons) and the actual layout on each of the card (a step toward wireframing) makes it more confusing. Limiting the number of choices would force the designer(s)/stakeholders to focus on the meaning, not the mechanics.
Since I’m not a UI designer, I’m a bit lost. I’d appreciate it if someone could explain more since the website doesn’t. Why would one use this at all? And how would one create web pages conforming to the cards?
When I worked in a web agency, we made a similar set of these to use in early client meetings to get stakeholders thinking about content hierarchy and how their site would be made out of modular components.
It saved so much time as we could co-design large parts of the site with them before going anywhere near a computer.
I may be wrong, as I have never used them, but I think wireframes are used to Graphically design a site layout. Once a design is approved, it is then up to a UI "engineer" to translate that design into actual HTML/CSS.
No, you're right. This set, and flowcharts in general, is used before the wireframing process. We use these in client meetings, giving them the opportunity to contribute the inner flow of web pages and sitemaps. It is different than the wireframing process, right.
Thanks. GP here. I'm past the edit window of my original comment. I do know what wireframes are, and have created them myself to provide to developers. I just didn't get what static cards like these were useful for. There seem to be comments here addressing that.
There are plenty of free UI kits that you can download and print off for paper prototyping purposes which is essentially what this is. These are nice from an aesthetic point of view but I’m irrationally irked by these being called “flow cards”. In UX we typically think of user flows as journeys across pages and channels. What these cards are useful for is a collaborative exercise called paper prototyping to define page structure and content hierarchy.
Upfront: I'm pretty much a total noob regarding UX.
However, I got a similar reaction to this being called "flow cards". This to me looks just like yet another "standardized" set of (typical) web interface/page designs. Sounds like a big misnomer.
Regardless of that, I guess there will be plenty of (UX) front end engineers, who will see value in designing things in a uniform way and from what is essentially a limited set of "this is how it's done".
That said, with between 2 and 3 decades of at least observing (web) design, I am still convinced that any good design begins with an empty piece of paper and a pencil, and a good understanding of everything relevant to the design (e.g. problem domain, technical platform, target audience, etc, etc).
Whenever I see (yet) another company promoting their tools for "streamlining" web/interface design, the first thing that always strikes me is how much their tools appear to just push their particular ideas about what "good" (uniform) design is.
With the huge number of (varied) factor that may (or should) go into good interface design, I sincerely doubt that any of these tools can ever really help all that much in making better designs. They can help with collaboration and all being "on the same page", no doubt. But it still feels to me that they just train people in making designs in a particular (and often not the best) way, with maybe more negative side effects than the positive ones they provide. That is not to even mention how contemporary fashion also always is a factor, in any design.
Anyways, just my two cents. I'm open to criticism and disagreement on this.
For folks wondering "when would I use this?" I have used tools like these early in the design process for broad, net-new features or redesigns in apps where driving alignment early on is crucial to success. In a more buttoned-up Agency process you might see something like:
General Idea > White Board Session > High Level Screen Flows (this) > Individual Wireframes > High-Fidelity UI > Coding.
These are useful tools to step back from individual screens and think of the broader ecosystem of the feature the team is trying to build. If actions on one page affect another page further down a flow, it's easy to reference that in a meeting by having it all laid out in a lower-fidelity, non-distracting way. For example: "if I add a user to this group, where will that user and her derivative information pop up across the experience?" becomes an easier discussion with an artifact like this.
I find when working early on with multi-stakeholder or multi-department initiatives, some high-level UX documentation can be helpful in ensuring when everyone goes back to their desks, each group has the same, general picture in their head.
Nice explanation, thank you for sharing.
Do you have any experience working with mobile apps? I'm wondering if any aspects of the design process you outlined differ when working with mobile apps?
Nice, Please do mail your customers later on with an offer to feature their best work using your flow cards on your website, it could improve the conversions for both!
P.S. I've added FLOWCARDS to the curated list of startup tools I've been trying to build - https://startuptoolchain.com/#design, Hope that's fine.
I like your site. I might steal the design idea for our family's digital garden[1]. I'd love it if you can tone down the orange a tad and add a bit more contrast. :-)
Thanks, I like yours as it's neat and calm. Interesting that you say it's a family website.
I like to color code my projects to get into focus when switching context, so orange color was based on traffic lights for different stages of startup as I already had Red[1], Green[2].
But, of course the site visitors doesn't care about those and I have might have executed the color scheme poorly. I would do the necessary changes to improve visibility.
One of my friends, who is a creator, told me that I'm an overthinker when it comes to my products and rushed me to launch it, super fast :) And I did it. Now, I'm adding all the little stuff, and of course growth ideas. Your idea is super useful in my opinion, I will use it. Thanks!
There is something similar, which I bought a few copies of the digital toolsets from UXKits[1] and my team loved them. I even bought the physical card, and it was a hot item.
I know this kit. And there is another one, which gave me the inspiration to create Flow Cards: https://www.uxflowcharts.com/
If I was living in US, I would definitely roll out a set of physical cards. Because in my research, I couldn't find a comprehensive set. That's because I created this one. Flow Cards consist of 147 different cards, with 16 card-back designs to organize those.
I like the design, but I have trouble seeing how this could work in practice, and I have lots of experience with wireframes otherwise. Does anyone here actually use a predefined set of wireframes? How does that work? Do you search through the stack to find the most fitting card?
Otherwise love the design and how it puts the emphasis on content.
Thanks for the question. This is different than the wireframing process. We use these cards in our client meetings; presenting the client with the inner-page flow of specific web pages. We pin the cards to the wall or a board. Additionally, I'm using these in my office, trying to dream what I want to see in my product or in my work.
I am interested and lost at the same time, how do you use it, and why would one buy it?
Is it just a deck of cards (carbord) with different web forms?
So, during design session you quickly assemble application?
Like Balsamiq but quick and non-electronic ?
Actually it says a bit in Printable and Digital section ...
Initially, these cards were designed to be used in client meetings, pinned to the wall and showing the client the inner-page flows. But since Figma has become the gold standard of web, I decided to add Figma format, as well.
Readit News
Instead, I view these as basically standardized "icons" - a visual language - with each depicting a function/meaning of one page (or step) in a flow. For example, you could have a "landing page" flow card, "account login" flow card, "home dashboard" home card, depicting the user flow when accessing their account.
It doesn't matter what the actual wireframe layout is at that point, as this is for a step before that, where you want to see what are the steps the user follows to do a specific thing.
I might be completely off the mark here, but if that's the intention: preparing a smaller, well defined and named set of cards, basically designing a language for this, would be clearer. As a non-designer, mixing the semantic value of the cards (if understood as icons) and the actual layout on each of the card (a step toward wireframing) makes it more confusing. Limiting the number of choices would force the designer(s)/stakeholders to focus on the meaning, not the mechanics.
pretty solid app for pre-wireframe stage sitemap design
It saved so much time as we could co-design large parts of the site with them before going anywhere near a computer.
However, I got a similar reaction to this being called "flow cards". This to me looks just like yet another "standardized" set of (typical) web interface/page designs. Sounds like a big misnomer.
Regardless of that, I guess there will be plenty of (UX) front end engineers, who will see value in designing things in a uniform way and from what is essentially a limited set of "this is how it's done".
That said, with between 2 and 3 decades of at least observing (web) design, I am still convinced that any good design begins with an empty piece of paper and a pencil, and a good understanding of everything relevant to the design (e.g. problem domain, technical platform, target audience, etc, etc).
Whenever I see (yet) another company promoting their tools for "streamlining" web/interface design, the first thing that always strikes me is how much their tools appear to just push their particular ideas about what "good" (uniform) design is.
With the huge number of (varied) factor that may (or should) go into good interface design, I sincerely doubt that any of these tools can ever really help all that much in making better designs. They can help with collaboration and all being "on the same page", no doubt. But it still feels to me that they just train people in making designs in a particular (and often not the best) way, with maybe more negative side effects than the positive ones they provide. That is not to even mention how contemporary fashion also always is a factor, in any design.
Anyways, just my two cents. I'm open to criticism and disagreement on this.
General Idea > White Board Session > High Level Screen Flows (this) > Individual Wireframes > High-Fidelity UI > Coding.
These are useful tools to step back from individual screens and think of the broader ecosystem of the feature the team is trying to build. If actions on one page affect another page further down a flow, it's easy to reference that in a meeting by having it all laid out in a lower-fidelity, non-distracting way. For example: "if I add a user to this group, where will that user and her derivative information pop up across the experience?" becomes an easier discussion with an artifact like this.
I find when working early on with multi-stakeholder or multi-department initiatives, some high-level UX documentation can be helpful in ensuring when everyone goes back to their desks, each group has the same, general picture in their head.
P.S. I've added FLOWCARDS to the curated list of startup tools I've been trying to build - https://startuptoolchain.com/#design, Hope that's fine.
1. https://oinam.fyi
I like to color code my projects to get into focus when switching context, so orange color was based on traffic lights for different stages of startup as I already had Red[1], Green[2].
But, of course the site visitors doesn't care about those and I have might have executed the color scheme poorly. I would do the necessary changes to improve visibility.
[1]https://needgap.com
[2]https://hitstartup.com
Thanks for bookmarking, I will be improving the content, readability without compromising the minimalism soon.
1. https://uxkits.com
If I was living in US, I would definitely roll out a set of physical cards. Because in my research, I couldn't find a comprehensive set. That's because I created this one. Flow Cards consist of 147 different cards, with 16 card-back designs to organize those.
Otherwise love the design and how it puts the emphasis on content.
Is it just a deck of cards (carbord) with different web forms? So, during design session you quickly assemble application? Like Balsamiq but quick and non-electronic ?
Actually it says a bit in Printable and Digital section ...