I've designed UI Flow Cards because I couldn't find one like it | Hacker News Reader

I've designed UI Flow Cards because I couldn't find one like it

flowcards.io

201 pointsfatihguner54 comments

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.

Great ideas. Thank you very much. I'll think on these ideas. My best!

flowmapp does something like you describe but you get to name the page and choose from a bunch of also named templates.

pretty solid app for pre-wireframe stage sitemap design

We've started using flowmapp on all our client projects and it works very well in communicating both user flows and sitemaps

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?

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.

Haha fuck those guys, they don't have real expertise

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.

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.

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.

This is a great explanation. Thanks!

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.

your site could use some flow cards help....

It's very... orange. I feel like changing the color scheme would be an easy way to greatly improve visibility

Point taken, thanks. Would be experimenting with better color schemes soon.

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. ;)

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. :-)

1. https://oinam.fyi

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.

[1]https://needgap.com

[2]https://hitstartup.com

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!

I'm glad that you found it useful, thanks.

Thank you for adding Flow Cards to Startup Tool Chain. I appreciate it.

Nice site — added to my huge list of pinboard bookmarks! Would be great to have a title and, if possible, a favicon.

Oops! Added the title and a quick favicon.

Thanks for bookmarking, I will be improving the content, readability without compromising the minimalism soon.

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.

1. https://uxkits.com

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.

Thank you for the motivation!

I don't like these kinds of products sold with a monthly fee, as a designer. That's because I don't think a monthly fee.

What I'm thinking is to create another set, with mobile flows in mind, as an upsell to this product.

Maybe after that, a wireframe kit, as well. Let's see :)

Well you have a vote right here for mobile flows, I think that would be awesome!

May I ask... do you ever construct information architectures (aka sitemaps) for your clients? If so, what tools would you use for this?

These are all desktop designs whereas in consumer facing sites the majority of visitors are on mobile (at least 60% for most of my clients)

So afraid they're not much use to me

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 :)

How does this work? Do you compose the cards together to create a wireframe page layout?

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.

Nice work. It would be nice to have them side by side with Summon The JSON decks https://summonthejson.com/

Summon the JSON decks seem awesome! Great work!

Thanks!

Good choice in colours. Is it inspired by the color of the year?

Pretty sure it's supposed to remind you of an "under construction" sign: https://www.shutterstock.com/search/under+construction+sign

(No idea what you mean by "color of the year")

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. :)

I always wanted something like this, thank you! BTW, I also didn't find a tool that is easy and produces results I like, so I welcome this.

Icons like these could also be used in a website builder to drag n drop custom elements or for example Gutenberg blocks.

Bought them because I thought I'd get physical cards. Oops.

Very useful. Bookmarked and almost certainly will purchase soon.

How do you use it?

Thank you very much!

Screenshot Form-8.png the balance is a little shifted left. Unusable!

JK! Is is actually amazing. Cha-ching.

Reply on news.ycombinator.com