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!
Well, maybe you can't change the color of my webpage, but you can always change the color of what I am selling in that web page. I present Figma versions of Flow Cards, with the capability of changing the colors with one click. ;)
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.
I am so happy you made this. I was just contemplating trying to explain this to someone and having them make them for me...and here they are. You are amazing. Now, please make the middle and back-end cards and I will be delirious with joy. When you don't know how to code and cannot visualize the steps that a potential customer might take these will be so freaking useful as I try to create my first SaaS. I guess I could have went to a site and stopped every few seconds to write out my whole journey....but what a waste of a day. The only thing missing is some kind of overview about which types of sites benefit from specific workflow examples with APIs that are currently available. I am probably not explaining it very well. But Clement Vouillon of Point ( Capital wrote this incredible post called "How APIs are eating the Product Stack" and the one thing missing was the hierarchy. In other words, a visual representation of when things went where.... Now, with these flow cards, I can map out the stack and see how it is supposed to work. For those of us on the "No-Code/Minimal Code" side of things, this seems like a huge game changer.
Thank You.
Postscript: I joined HN just to leave this comment. I've been lurking for years.
The collection is quite impressive, and $19 is a no brainer to buy because of the lifetime upgrade.
I have already bought the Tailwind UI with lifetime upgrade and use it for every design I need to make. Hopefully this collection will be a cherry on the top!
Please don’t roll out a monthly fee for it and stop supporting lifetime customers like some companies do.
As I stated in my other replies, I'll create another set for mobile flows, as well. Wait for 1 month, I'm sure I'll be ready. Thanks for the comment :)
On a wall, trying to create a flow. Preferably with the client, giving them the chance to contribute to the design and planning process. After this, comes the wireframing process.
Yes! You can change the primary color of the product in Figma with one click. And I created the landing page in 2 hours, so, I decided to go with the basics. :)
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.