Skip to content
Emisshield

Wireframes · Resource library page

Resource library page: five approaches

Case studies, papers, glossary, news: findable, filterable, citable.

  1. Option 1

    Featured

    Sparse: the fewest words, the most air. One idea per band.

    1. 1Header: photo backdrop, left stack
    2. 2Featured item plus list
    3. 3Category tiles with counts
    4. 4Pull quote with attribution
    5. 5Newsletter band

    Open

  2. Option 2

    Cards

    Light: reads top to bottom like a magazine feature.

    1. 1Header: search field and chips
    2. 2Post card grid
    3. 3Centered dark statement
    4. 4Image card row
    5. 5Pagination bar

    Open

  3. Option 3

    Rail

    Medium: imagery and numbers carry the page; copy stays short.

    1. 1Header: compact, light
    2. 2Filter rail with list
    3. 3Numbered stat rows
    4. 4Related pages
    5. 5FAQ, question and answer rows

    Open

  4. Option 4

    Table

    Medium to dense: more per screen, still one topic per band.

    1. 1Header: two columns with stat strip
    2. 2Chip strip
    3. 3Resource table
    4. 4Case study cards, four up
    5. 5Pagination bar

    Open

  5. Option 5

    Everything

    Dense: the most information per screen, built for scanning.

    1. 1Header: centered stack, two buttons
    2. 2Category tiles with counts
    3. 3Filter rail with list
    4. 4Dated post list
    5. 5Archive by year

    Open