Subscribe
Sign in
Flow — A typeface built for wireframing
Designing with real content is important, but sometimes we need something more abstract. Flow aims to provide an efficient and flexible way to create abstracted/placeholder content in your designs.
12
Replies
@hypd It looks great, Can we use it for our Wireframing tool at https://mockflow.com ? Let us know if we are allowed to do it.
@pbramtech Absolutely, feel free. If you could put a link to http://danross.co/flow/ somewhere, that would be great.
this is great. i wish the bars could be slightly taller to match the height of an actual typeface to help better represent accurate line-height. at the moment it looks like i have a huge line-height.
@keithbarney Hey Keith, I tried doing exactly this, but different typefaces have different line heights. It's not perfect but it's generally based on SF UI's line height. If I hear more like this, i'll definitely update it to have a smaller one 👍 Thanks for giving it a try!
I'm not sure what I think about this. As an interaction designer who works across web and mobile, I'm yet to encounter an interaction that I've prototyped that has benefited from not having accurate (or at least draft/v1) copy.
When I use lipsum or similar, it creates uncertainty, and the question 'who is going to write this copy?' comes up often. I suppose this is a good thing because it gets stakeholders thinking about the copy as a discrete task for a specialist to complete.
However, I strongly believe that copy and labels make up a huge part of designing interactions of any complexity level. Designers should have enough confidence in their communication skills that they can write the first version of the copy, and get at least 65%-70% of the way there.
If your placeholder copy is so bad that it's throwing stakeholders off, then I'd recommend spending some time brushing up on your writing. It's a very valuable skill that cross-populates into almost everything you do as a designer.
Hey @dos4gw. I agree, real content is important. Day to day I write copy when I'm designing. It's up to us as designers to write copy, and at work we're lucky enough to have a team of content strategists who continue to show us how important it is. Flow doesn't necessarily have to be another lorem ipsum.
Some examples I've heard of placeholder fonts coming in handy:
• Replacing text in supplementary content, like screenshots in presentations to not distract the audience
• Preliminary discussions when a mock is a visual cue rather than an explored design
• Conveying the visual hierarchy of a design
Hey @treggify. It's really all about low fidelity design exploration. @jessekorzan wrote some great examples above that might answer your question 😀
Nice work, Dan. I've tried others (Blokk) but just bought yours and it looks great. Web fonts included is appreciated, too.
For those asking "what's this for"... it's OK in wireframes, but I also find this useful in several ways. E.g. If you want to show an interaction and keep ppl from getting caught up on the actual content (it's more effective than dingbats or saying "ignore the copy", IMO).
Or when I am looking for very pedantic feedback -- ppl get that it's "words" but they don't have to pay attention them.
It can also be useful to swap out all/some live text on a site or app to get a kind of "squint test" (gut check visual hierarchy, evaluate just the UI labels, etc).
Polaris for Admin Figma UI kit