Healthy filler text for design


Download the latest version (v0.3)


UI and UX designs that look great in comps don’t always work in after launch.

Sometimes site owners want more text than a component was designed to contain. Images’ compositions don’t always look great in the original specs. Allowing for three bullet points of two words each may not be enough to get the idea across.

Recipe is a framework that helps us plan websites in a more realistic way. It provides a more logical approach to placeholder text and common components found in web design — all ready to copy/paste into your work. The framework is plain text and platform-agnostic, so Recipe will adapt even if you suddenly adopt Bootstrap, design mobile-first, or radically change color, layout, and typography.

Measurements

Even your design uses a hero component, each page will use it for different messages. “Browse Our Product Catalog” is much longer than “About Us”. Recipe helps you plan for varying lengths called Measurements. Unlike filler-text gibberish, Measurements are usable tools.

Comparison of meaningless text and word counts

For example, how long is “lorem ipsum dolor sit amet consecutor si upsom”? Eight words — but counting that takes effort. How long is “one two three for five six seven eight”? Eight. Simple.

  • Given real content, designers will know how much space to allow
  • Given a design mock-up, writers will know how much space to write for
  • With variations, everyone will know how adaptable the design is to real-world conditions
Examples of how to count words in a design

Just like responsive web design lets you plan for varying browser widths, Recipe’s Measurements gives you minimum/maximum counts to plan for varying amounts of text per component.

Counting characters in navigation breadcrumbs

Measurements at scale

There are two type of Measurements: characters and words. Characters give you a precise count for small bits of text, like navigation links, dates, labels, buttons, short list items, and short headings.

Sample character counts

Word-based Measurements are useful for paragraphs, long headings, instructions, error/success messages, and long list items.

Demonstrating easy-to-copy word counts

Each Measurement is organized by line for easy copy/paste into your work. For example:

  • Twenty ranges words from 1–20
  • Increments by 10, from 50–100
  • Increments of 100, from 100–900
  • 480 and 640 characters
  • 1600 and 3200 words

Let’s communicate

Designer: “We can fit 20–60 characters in this H1.”

Examples of character counts in the Recipe framework

Writer: “Great! I know I can come up with —”

Examples of content based on character counts in the Recipe framework

Writer: “Here are the types of testimonials we have or can expect.”

Content examples for a designer

Designer: “The longest quote is 16 words. The shortest is five. And the longest name is 30 characters, and the shortest is 12. I’ll round up on the longest ones, and down on the shortest, to see how my design responds to both.”

Testing a design with the Recipe framework

Ingredients

Recipe also provides building blocks you can snap together when designing websites. Traditionally called components, modules, or blocks, we call them Ingredients.

Modular components with semantic names. Add them to your designs.

Ingredients contain specifications and helpful descriptions

Ingredients in v0.2 are:

  • Article section
  • Breadcrumb
  • Card
  • Dialog box
  • Form
  • List
  • Navigation link
  • Photo and caption

Get started


Download the latest version (v0.3)


Questions? Ask me. My name is Ben. I do content design.