Creating website mockups with placeholder text
Creating design mockups is easy with this web font for placeholder text.
If you need to create mockups and design prototypes, you probably already know about Lorem Ipsum, the classic "placeholder" text. But sometimes, you might have a project stakeholder that doesn't really understand that Lorem Ipsum is supposed to represent where content might appear in the final design. Instead of focusing on the mockup, they get distracted by the fake text.
This is where it's helpful to add another tool to the designer "tool kit." You can find fonts that aren't really fonts, they are just lines. The "blocks and lines" approach can usually be understood by project owners who get confused by Lorem Ipsum. It's just meant to represent text, they get it, and they can focus on the design and layout of the prototype.
The Google Fonts website provides several such "non-text" fonts. Down the left side of the page, click "Not text" and you'll see over 1,600 fonts. If you sort the list by "Most popular," you'll quickly find "Flow Circular."
The "Flow" set of fonts by Dan Ross are meant to be used in mockups like I've described. Instead of any recognizable text, the Flow fonts just show a series of lines. Flow comes in three variants: Flow Block with plain rectangles for text, Flow Rounded with slightly rounded edges on the rectangles, and Flow Circular with completely round ends.
Let's build a website mockup to demonstrate how to use the Flow Circular font in a sample design. First, we will load the Flow Circular font while establishing the basic web page framework. I've used placeholder text instead of "Lorem Ipsum" so it's easier for us to see what the text is meant to represent:
<!DOCTYPE html>
<html>
<head>
<title>Sample Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" rel="stylesheet">
<style>
/* add stylesheet here */
</style>
</head>
<body>
<header>
<div>Website title</div>
<nav>Add links here</nav>
</header>
<main>
<h1>Website title</h1>
<section>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
</section>
</main>
<footer>
<div>The opinions expressed are those of the individual authors</div>
<nav>Add links here</nav>
</footer>
</body>
</html>This is a website mockup similar in design to the Technically We Write website. It has a simple two-part heading with the website's title and navigation links. In the main body area, it has a series of articles, each with an image, title, brief summary, and publication date. The footer includes a standard disclaimer and additional links, such as social media links.
The website mockup becomes more real by adding a stylesheet. For a website mockup, I usually embed the stylesheet directly into the web page using <style> which I'll just show by itself:
body {
margin: 0;
}
header {
background-color: steelblue;
color: white;
padding: 2em 5%;
text-align: center;
display: grid;
grid-template-columns: repeat(2,1fr);
}
h1 {
text-align: center;
}
section {
display: grid;
grid-template-columns: repeat(4,1fr);
column-gap: 1em;
row-gap: 1em;
}
article {
border: 1px solid lightgray;
border-radius: .5em;
padding: 1em;
}
h2 {
margin-top: 0;
}
h2 img {
aspect-ratio: 2/1;
width: 100%;
height: auto;
display: block;
margin: 0 0 1em 0;
background-color: lightgray;
border: 1px solid gray;
}
div.date {
color: gray;
text-align: right;
}
main {
background-color: white;
color: black;
padding: 4em 10%;
}
footer {
background-color: dimgray;
color: lightgray;
padding: 3em 5%;
text-align: center;
display: grid;
grid-template-columns: 2fr 1fr;
}
Defining the body font as "Flow Circular" in the body section of the stylesheet then renders the entire website mockup using simple lines instead of placeholder text. I'll show the full HTML mockup file, so you can copy it:
<!DOCTYPE html>
<html>
<head>
<title>Sample Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Flow Circular';
font-weight: 400;
font-style: normal;
}
header {
background-color: steelblue;
color: white;
padding: 2em 5%;
text-align: center;
display: grid;
grid-template-columns: repeat(2,1fr);
}
h1 {
text-align: center;
}
section {
display: grid;
grid-template-columns: repeat(4,1fr);
column-gap: 1em;
row-gap: 1em;
}
article {
border: 1px solid lightgray;
border-radius: .5em;
padding: 1em;
}
h2 {
margin-top: 0;
}
h2 img {
aspect-ratio: 2/1;
width: 100%;
height: auto;
display: block;
margin: 0 0 1em 0;
background-color: lightgray;
border: 1px solid gray;
}
div.date {
color: gray;
text-align: right;
}
main {
background-color: white;
color: black;
padding: 4em 10%;
}
footer {
background-color: dimgray;
color: lightgray;
padding: 3em 5%;
text-align: center;
display: grid;
grid-template-columns: 2fr 1fr;
}
</style>
</head>
<body>
<header>
<div>Website title</div>
<nav>Add links here</nav>
</header>
<main>
<h1>Website title</h1>
<section>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Article title</h2>
<p>Brief one or two lines to describe the article.</p>
<div class="date">mmm dd, yyyy</div>
</article>
<article>
<h2><img src="#" alt="">Another article title</h2>
<p>Write a brief description of what the article is about..</p>
<div class="date">mmm dd, yyyy</div>
</article>
</section>
</main>
<footer>
<div>The opinions expressed are those of the individual authors</div>
<nav>Add links here</nav>
</footer>
</body>
</html>
Creating design mockups is easy with this web font for placeholder text. If you need to present a design prototype of any kind, and your stakeholder doesn't want to see Lorem Ipsum text, try loading the Flow Circular font instead, and convert all text to just a series of lines.
Robin Bland is a technical writer in the Minneapolis/St Paul area.