Flow and Redacted: Check out these new options for wireframes and other early-stage designs



Give your simulated text a realistic look while making it easy to add copy later on with Dan Ross’s Flow Fonts and Christian Naths’s Redacted.



Showing text in an early-stage wireframe can be distracting, even if it’s just Lorem ipsum placeholder copy. After all, a successful wireframe is clean and simple, with just enough information to communicate an idea. But how do you convey “this is text” without showing text? 


One popular technique is to draw shapes that resemble a block of redacted text. (Redacted text is usually used as a security or privacy measure in a document to make certain words unreadable.)


Another technique is to use handwritten scribbles. This creates a sketch-like look that’s especially suited to quick concepting.



Images of handwritten scribbles and a block of redacted text.


Examples of text substitution styles used in wireframing. Left: Redacted Script, a handwritten scribble style. Right: Redacted text style. 



But instead of simulating redacted text with scribbles or shapes, now you can use a typeface to achieve the same effect. 

Image of an app UI with Flow Rounded


Flow Rounded in use


Flow Circular, Flow Block, and Flow Rounded from Dan Ross and Redacted from Christian Naths are four redacted text options. For a handwritten scribble style, try Nath’s Redacted Script, which is available in Light, Regular, and Bold.


Flow and Redacted not only make it easier to give your wireframes the look you want, they also make it easier to drop in copy later on (since you won’t have to replace shapes with text or switch out components). Plus, since fonts don’t destroy the underlying text data, all it takes is a single click to go from text to redacted text—and back again. 


All five fonts are available now on fonts.google.com.


Posted by Sarah Daily, Brand and Content Consultant