Modules
The Page Method: Level 3 — Modules
A Module is a self-contained slice of a page. It packages one or more Features and Elements into a unit that has a single responsibility. The test: can you move it, delete it, or swap it for an equivalent module without touching anything else? If yes, it is a well-formed Module.
Single-feature
One large interactive unit. Example: a Hero Carousel.
Multi-feature
A package of features. Example: a Navigation Header.
Page Structure
These modules form the fixed skeleton of every page. They exist as HTML landmark elements — meaning assistive technology users can jump between them with a single keystroke. They are never optional.
- Header
<header>Multi-featureLogo elementNavigation link featureSearch input featureTheme toggle buttonThe page header is the most loaded module: it must orient (logo), navigate (nav links), and sometimes let users act (search, auth). Wrapped in <header role="banner"> it becomes a navigation landmark. Everything inside it is secondary to the page's main content — don't let it grow so tall it pushes content below the fold.
frelund.dev - Footer
<footer>Multi-featureLogo elementNavigation link groupsContact form featureCopyright textThe footer closes the page. It typically holds secondary navigation, legal text, and contact or social links. Marked with <footer role="contentinfo"> it becomes a named landmark. Keep content spare — users who scroll to the bottom are looking for specific information, not more reading.
- Navigation Drawer
<nav>Multi-featureLogo elementNavigation link featureClose buttonBackdrop overlayA side drawer is a <nav> region that slides into view from off-screen, typically triggered by a hamburger or logo button. It replaces the inline header nav on narrow viewports. The backdrop behind it is not decorative — it is a click target that closes the drawer, and a visual indication that the drawer is a modal-like layer.
Hero Modules
Hero modules occupy the first visible area of a page. They carry the heaviest semantic and visual weight — they are the loudest, most deliberate statement a page makes. They always use <section> (or <header> when they are the page header) and must contain exactly one <h1>.
- Hero
<section>Single-feature<h1>description textCTA button featureoptional subheadingThe simplest hero: a headline, a short supporting sentence, and one call to action. The <h1> is mandatory — there must be exactly one per page, and the hero is the right place for it. The CTA button should be a <a> or <button> depending on whether it navigates or triggers.
UX Engineer
Jon Frelund
I design and build interfaces where structure, semantics, and motion work together.
- Split Hero
<section>Multi-feature<h1>description textCTA button featuremedia / image featurestat listDivides the hero horizontally — text on one side, a visual asset on the other. The two halves must be related; the image should reinforce, not distract from, the headline. On mobile, the image typically moves below the text or is hidden.
Case study
Redesigning the checkout flow
How a 4-step process became 2 — and conversion rose 34%.
Read case studyImage - Hero Carousel
<section>Single-feature<h1>slide content (repeated)Previous/Next button featurespagination indicatorsA carousel is a single feature that cycles through a sequence of content items. It is the canonical single-feature Module — large, interactive, self-contained. The outer <section> is the module boundary. Previous and Next controls must be keyboard-accessible; auto-advancing carousels must provide a pause control (WCAG 2.2 SC 2.2.2).
Read →Interaction Design · 4 min
The invisible interface: why the best interactions go unnoticed
Content Modules
Content modules are the body of the page. They contain the primary information the user came for. Each is a <section>, a <article>, or an <aside> depending on its relationship to the rest of the page.
- Article
<article>Multi-feature<h1> / <h2>byline featurebody prosecode block featuresattributed quote featuresAn <article> is a self-contained composition that could be distributed independently — a blog post, a news item, a case study. It must have its own heading. It can appear standalone on a dedicated page or as a card within a list of articles.
Interaction Design · 4 min read
The invisible interface: why the best interactions go unnoticed
Jon FrelundThe most successful interactions are the ones users never notice. Not because they are hidden, but because they are so precisely calibrated to expectation that they require no conscious attention to parse…
Read full article
- Article List
<section>Multi-featuresection headingarticle card feature (× N)optional pagination / load-more featureA section that presents a collection of articles. Each item in the list is itself an article card — a distilled preview of a full article. The list is wrapped in a <section> with a heading; the items are wrapped in a <ul> of article cards. The heading names the list; the <ul> communicates 'these items are siblings'.
Recent writing
Interaction Design
The invisible interfacePerformance
Latency is a UX problemEngineering
Semantic HTML is not optional
Form Modules
Form modules are the most consequential modules — they are how users give data to systems. Every form module is a <form> landmark. It must have a purpose (heading or aria-label), a submission mechanism, and feedback for both success and error states.
- Contact Form
<form>Multi-feature<h2>input field features (×3)textarea field featuresubmit buttonA multi-field form that captures enough information to start a conversation. Every label is bonded to its input. The submit button communicates the consequence clearly ('Send message', not 'Submit'). The form needs two additional states not shown in the preview: a loading state (button disabled + spinner) and a success state (confirmation message).
- Sign In Form
<form>Multi-feature<h1>email input field featurepassword input field featureremember me checkbox featuresubmit buttonforgot password linkAn authentication form. The password input must be type="password". Include a visible label — never rely on placeholder text as a label substitute, as it disappears when the user starts typing. A 'Show password' toggle (a button inside the field) significantly reduces auth errors.
Sidebar & Aside
These modules run alongside main content. <aside> marks content that is related but not essential to the main flow — the page makes complete sense without it. A sidebar navigation (<nav>) helps users move within a section.
- Table of Contents
<nav>Single-feature<nav aria-label>ordered list featureanchor linksA sticky in-page navigation that mirrors a page's heading hierarchy. Each item links to a section via its id. Use <nav aria-label="Table of contents"> to distinguish it from other navigation landmarks on the page. On long articles it is the single highest-impact accessibility addition you can make.
- Related Content
<aside>Multi-feature<aside>section headingarticle card features (× N)An <aside> holds content tangentially related to the main content — 'you might also like', related articles, or further reading. Screen readers expose asides as a 'complementary' landmark. The content must genuinely complement the page; if it would make as much sense on any page, it belongs in the footer or a sidebar, not an aside.