Development
·
2025
Pocket Index
A compact reference-library interface that explores search, useful empty states, and a reading order that stays understandable when the list becomes longer.
Prototype study
Role
Front-end structure and interaction planning
Format
Interface prototype
Deliverables
Search-state study, responsive list, component inventory
Credits
Fictional prototype narrative by Mira Veylen. Interface artwork created for this demo.
A reference-library interface study, shown as static artwork.
The brief
This concept asks how a small personal reference collection could remain easy to scan as new entries are added. Each entry needs a recognizable title, a useful summary, and a clear route to the original material.
The portfolio shows the intended interface and state design. It does not ship a search application, hosted library, or external data service.
The approach
I kept the content model small and made the list the main view. Search belongs above the results, and the current query remains visible while the person reviews what it has returned.
I treated the no-results view as part of the interface, not as an error to hide. It explains that the current words produced no match and provides a direct way to clear the query. A small screen uses the same reading order as a large one.
The empty state explains the next available action.
A closer look
The artwork uses the search label “Search the index,” entry titles “Reading rhythm,” “Useful empty states,” and “Small-screen notes,” and the empty-state copy “No matches for this search.” The action below it reads “Clear search.”
Links are distinct from row metadata, and keyboard focus is not represented by a color change alone. The component inventory separates the search field, result row, and empty state so future implementation can review each state independently.
What I would explore next
Before building a live version, I would decide where the content is stored and test matching behavior with real queries. No speed, search-quality, or user-adoption claim can be inferred from these static portfolio images.
Next project
Quiet Geometry
Let’s talk about your project.
If this approach feels right for what you’re making, I’d like to hear more.