Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

flowcards.io

Post reply on HN
Print view View original

41–50 of 55 posts

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

#41

Post by danmostudco »

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.

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

#42

Post by AnonHP »

transfire wrote: post #19
AnonHP wrote: post #8

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.

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.

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

#43

Post by oneeyedpigeon »

Abishek_Muthian wrote: post #7

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.

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

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

#46

Post by agustif »

senko wrote: post #36

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 car…

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

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

#47

Post by Abishek_Muthian »

oneeyedpigeon wrote: post #43
Abishek_Muthian wrote: post #7

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.

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.

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

#48

Post by elmo2you »

seangp wrote: post #32

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 pa…

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.

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

#50

Post by gingericha »

agustif wrote: post #46
senko wrote: post #36

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 car…

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
Post reply on HN