Search Results Page Design Development
Search page indicates user didn't find needed via navigation. Not failure, normal: people search even on well-structured sites. Design task is making results readable and helping refine query.
Two Page States
Search page exists in several states, each requires separate mockup:
State 1: empty search — user opened /search without query. Show search bar prominently, optional popular queries or categories for quick start.
State 2: results found — main view. Query bar at top, result count, filters/facets, results list, pagination.
State 3: no results — separate design (see empty states). Suggest similar queries, typo check, popular sections.
Results Layout
For most sites two-column layout works:
- Left column (~280px): filters and facets
- Right column: results list
On mobile filters moved to drawer or accordion above results.
Each result card with predictable structure:
- Content type (badge): article, service, product, page
- Title (link, with match highlighting)
- URL or breadcrumb — where page lives
- Snippet — 2–3 lines text with keyword highlighting
- Meta (optional): date, author, category
Match highlighting — <mark> tag with background color from palette (usually yellow or primary-light). Critical for relevance perception.
Filters and Sorting
Filter set depends on site content type:
- By page type (article, case, service)
- By date (last month, year, range)
- By category/tag
- By language — for multilingual sites
Sorting: "By relevance" (default), "By date", "By popularity". Show active filters as chips/tags above results — with remove button per filter and "Clear all".
Search Bar
Bar on results page differs from header one. It's larger, contains current query, clear button and sometimes autocomplete. Template solution: Input with search icon left, × button right, submit on Enter and button click.
If site has Algolia, Elasticsearch or TypeSense — search bar supports instant search: results update as user types with ~300ms debounce.
Pagination and Infinite Scroll
For search pagination (numbered pages) better than infinite scroll: user sees total results and can jump to specific page. Infinite scroll harder for returning to result.
Minimal pagination design: "Previous", page numbers (3–5 around current), "Next", info "Showing 1–20 of 348".
Timeline
Search page design with all states and responsive — 3–5 days: design all states and components, final mockups desktop + mobile, prep for handoff to developers.