Designing an Empty State Before Generating the Illu

An empty dashboard is a surprisingly awkward thing to design. Leave it blank, and the page looks unfinished. Add a large illustration, and suddenly a project management app looks like a greeting card. Then there’s the familiar message underneath: <blockquote> Nothing here yet! </blockquote> Friendly enough. But what should the user do next? Before choosing an illustration, it helps to work out what the empty page needs to explain. Let’s use a bookmarks app as an example. <h2>

Start with the reason the page is empty

</h2> A bookmarks page can be empty because someone has just created an account. It can also be empty because their search returned no matches. Those situations need different responses. For a new account: <blockquote> Save your first bookmark Add a link you want to come back to. Add bookmark </blockquote> For an unsuccessful search: <blockquote> No bookmarks match “CSS grid” Try another search or remove a filter. Clear search </blockquote> A welcome illustration might fit the first state. Reusing it for the second could make the app appear to have lost the user’s saved links. The illustration belongs to a particular state, just like the heading and button. <h2>

Give the illustration one job

</h2> For the first-use state, the visual could show a bookmark going into a small tray. That is enough. It does not need a person, a desk, a laptop, floating browser windows, three plants, and a rocket. At the size used in an interface, extra objects compete with the thing the illustration is supposed to communicate. A useful brief might be: <blockquote> A small tray with one bookmark card hovering above it. Simple shapes, limited colors, no lettering. Intended for the empty bookmarks page of a web app. </blockquote> This is specific about the subject and where it will appear. It leaves room to explore the visual style. <h2>

Generate a draft against that brief

</h2> You can use <a href="https://www.piclumen.com/" rel="noopener noreferrer">PicLumen</a> to explore an illustration from the brief, then judge the result against the actual component. For example: <blockquote> Minimal flat illustration for a bookmarks app empty state. One rounded bookmark card hovering above a shallow tray. Muted blue and warm gray palette, simple geometric shapes, front three-quarter view, isolated on a plain white background. No text, no logos, no surrounding interface. </blockquote> Keep the heading and button out of the generated image. They should remain HTML text so they can be edited, translated, and resized with the rest of the interface. The generated draft also needs inspection. Look for odd overlaps, unnecessary details, and shadows that make the composition harder to read. A result can look appealing on its own and still be a poor fit for the page. <h2>

Review it at the size you will ship

</h2> Open the illustration inside the empty-state component. If the planned display width is 160 pixels, review it at 160 pixels. A full-screen preview will hide some practical problems. Check whether: <ul> <li>The bookmark still reads as a bookmark.</li> <li>Thin lines disappear.</li> <li>The shadow looks too heavy.</li> <li>Empty margins make the drawing appear smaller than expected.</li> <li>The image attracts more attention than the action button.</li> </ul> If the concept only works when enlarged, simplify it before spending time polishing the details. <h2>

Let the markup carry the meaning

</h2> For this example, the illustration repeats information already conveyed by the heading and description. It can have an empty alt attribute: <div class="highlight js-code-highlight"> <pre class="highlight html"><code><section class="empty-state" aria-labelledby="empty-bookmarks-title" > <img src="/images/empty-bookmarks.webp" alt="" width="160" height="120" />

<h2 id="empty-bookmarks-title"> Save your first bookmark </h2>

Add a link you want to come back to.

<button type="button"> Add bookmark </button> </section> </code></pre>

</div> The button still needs to be connected to the app’s add-bookmark flow. If an illustration communicates information that is missing from the text, reconsider that decision. Instructions someone needs to use the page should be available without interpreting the picture. <h2>

Check the component without the image

</h2> Temporarily hide the illustration. Can someone still understand what this page is for and what to do next? In the bookmarks example, they should be able to. The heading explains the starting point, the description gives a small amount of context, and the button names the action. Then bring the illustration back. Its contribution should be visible: it makes the page feel considered, introduces the visual style, or helps someone recognize the situation. If it pushes the button down the screen without adding much, making it smaller—or leaving it out—is a reasonable design decision. The empty state is finished when the next step is clear. The illustration gets its place by helping that page work.