Skip to pattern library
▦
Layout AtlasTHE WEBSITE PATTERN LIBRARY
THE VISUAL WEBSITE DESIGN REFERENCE

Good websites are
built in sections.

Explore the building blocks of effective websites: hero layouts, text tiles, image cards, bento grids, navigation, forms, dashboards and more. Compare real examples, then assemble your own page.

—Patterns
8Page blueprints

Start with a complete page setup

Select a blueprint to populate your page builder ↗

Explore the section library

All sections

Principles behind effective layouts

Use as design guidance, not universal rankings
◎

One clear primary action

Make the next step obvious, especially in heroes and conversion sections. Avoid competing button styles.

☷

Design for scanning

Use meaningful headings, short chunks and descriptive labels so people can locate information fast.

▤

Choose the right container

Cards for related choices; lists for comparisons; tables for exact data; plain text for sustained reading.

↔

Responsive by default

Use flexible grids, reflowed columns and legible text. Keep navigation and keyboard focus usable.

My page builder

Add, reorder, preview and export selected sections.

Exports one complete HTML page, including all section styles. No library dependencies.

Layout Atlas

Browse responsive website layout patterns, compare UX guidance, assemble page sections, and export standalone HTML from your browser.

What this tool does

Layout Atlas is a visual reference library for common website patterns, including navigation, hero sections, cards, content, conversion, commerce, dashboards, and footers. Browse example layouts, read notes about their intended use, preview selected patterns on desktop or mobile, and assemble a simple page from sections.

Who it is for

Website owners, designers, developers, and small teams planning page structure or comparing common user-experience patterns before building a site.

How to use it

  1. Browse the pattern library, filter by category, search by name or use case, or sort the results.
  2. Open a pattern to read its intended use and UX rationale, then compare its desktop and mobile previews.
  3. Add useful patterns to your page, or choose a page blueprint. A blueprint replaces the current selection after confirmation.
  4. Open the page builder to preview the sections, reorder them, or remove sections.
  5. Copy the assembled HTML or export a standalone HTML file. You can also copy a single section from its detail view.

Inputs

Search terms, a category filter, a sort option, pattern and blueprint selections, and the order of sections in your page.

Outputs

Copied or downloaded standalone HTML containing the selected sections and their CSS. The builder also offers desktop and mobile previews of the assembled page.

Example use cases

Data and limitations

The selected section list is saved in this browser’s local storage; it is not synced to an account or cloud service. The library is a visual reference, not a complete website platform or a conversion ranking. Pattern content is illustrative, so replace sample copy and links and test the finished page with your audience. Exported files are static HTML and CSS; this tool does not host or publish them.

Frequently asked questions

Does the builder save my page online?

No. It saves the selected sections locally in this browser. Use Copy or Export HTML to keep a separate copy.

Are the patterns ranked by conversion performance?

No. Recommendations are reference guidance, not measured results or a promise of conversion performance.

Does Layout Atlas publish the website I build?

No. It creates a standalone HTML file for you to edit and host separately.

Related tools

Need a custom website or app?

SolvProb builds custom websites and browser tools around your business workflow.

Contact SolvProb about a custom project.