Featured

Flow

A typeface built for wireframing

Would you recommend Flow to a friend?
Hunter
Makers
DiscussionYou need to become a Contributor to join the discussion - Find out how.
Dan Ross
Maker
@hypd · Product designer @ Shopify
Hey everyone, I'm Dan. I'm a designer from Australia, now living in Canada. Design tools are my passion, and I wanted to share my latest project with you. Flow is a typeface built for wireframing. The font comes in three weights – circular, rounded, and block. It’s a little project I’ve been working on, and I'd love for you to take a look. 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. Some features • 3 weights/styles • Variable width characters • Improved space width • Improved line-height (to match SF) • Extended Latin character support (Update on 24th July) • Cyrillic character support (Update on 24th July)
@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.
Dan Ross
Maker
@hypd · Product designer @ Shopify
@pbramtech Absolutely, feel free. If you could put a link to http://danross.co/flow/ somewhere, that would be great.
Jesse Korzan@jessekorzan · Product Design
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).
Dan Ross
Maker
@hypd · Product designer @ Shopify
Hey @jessekorzan, thanks so much for your support! I really really appreciate it!
Dun@huangdun · Product Designer | UWaterloo Graduate
Interesting, but took me a while to figure what it really is.
dos4gw ♫@dos4gw · UX, 25th.co
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.
Dan Ross
Maker
@hypd · Product designer @ Shopify
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
Tregg@treggify · Designer
I downloaded it and I'm definitely gonna use it to test it out. But I'm curious what the real benefits are in your opinion. I'd say making the text box "responsive" is probably a big one?
Dan Ross
Maker
@hypd · Product designer @ Shopify
Hey @treggify. It's really all about low fidelity design exploration. @jessekorzan wrote some great examples above that might answer your question 😀