Flow

A typeface built for wireframing

2 followers

A typeface built for wireframing

2 followers

Visit website

Wireframing

•

Interface design tools

•

Design resources

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.

Launch tags:Design Tools•Tech

Launch Team

CloudflareDeploy serverless functions globally in seconds

Promoted

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.

Report

9yr ago

Flow

Maker

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

Report

9yr ago

Divinate

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?

Report

9yr ago

Flow

Maker

Hey @treggify. It's really all about low fidelity design exploration. @jessekorzan wrote some great examples above that might answer your question 😀

Report

9yr ago

Duelin' Agents: AI Chat Face-Off

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

Report

9yr ago

Flow

Maker

Hey @jessekorzan, thanks so much for your support! I really really appreciate it!

Report

9yr ago

Flow

Maker

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 Now supports (Updated 24/07/2015): • Extended Latin character support • Cyrillic character support

Report

9yr ago

Flow

Maker

@pbramtech Absolutely, feel free. If you could put a link to http://danross.co/flow/ somewhere, that would be great.

Report

9yr ago

SpeakUp

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.

Report

9yr ago

Flow

Maker

@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!

Report

9yr ago

Interesting, but took me a while to figure what it really is.

Report

9yr ago

Reviews