Page Patterns
A pattern is a fixed arrangement of shared components for a particular kind of page. Sites of the Velocity Interoperability Network compose their pages from these patterns rather than from first principles, so that a person who has used the newsroom of one department knows how to use the newsroom of every other, and a register on one site reads like a register on the next.
Ten patterns are in use. Each is described below; where this site has an example of the pattern, the title links to it. The table that follows records which components make up each pattern and where photographs may appear.
- Department home page
- Opens with the newest press release as a featured story, followed by a grid of the department's sections, a photograph band about the department and a band of milestones. Used by every ministry and department of the Network.
- Service home page
- Opens with a title block naming the service and stating what it does, with a call to action and a photograph. A grid of links follows, then a photograph band, a row of key figures and a closing band. Used by the network services, including this site.
- Standard page
- A serif title above a single column of prose. Most pages of a site are standard pages; they may carry one or two list components between paragraphs where the content calls for them.
- Reference page
- A standard page whose principal content is a table: a register, a schedule, a fee list or, on this site, the colour tokens. The table is introduced by prose and followed by notes.
- Procedure page
- A standard page built around numbered steps: how to apply, how to attend, how to adopt the system. Each step has a title and one or two sentences.
- Questions page
- A standard page whose content is an expandable list of questions and answers, opened one at a time. Introduced by a sentence stating whose questions they are.
- History page
- A standard page carrying a timeline of dated events with a sentence or two on each. Every department carries one.
- Newsroom
- An index of press releases, newest first, each with its date, title, summary and issuing office; and an article page for each release with an optional photograph. The same two components render every newsroom of the Network.
- Register
- The newsroom index reused for dated notices rather than press releases, with the label above each item changed accordingly. Used for public registers and formal notices.
- Form page
- A standard page carrying the shared application form: name, contact address, a chooser and the questions belonging to the chosen option. Forms on Network sites send nothing and show a notice on submission.
Composition. The components of each pattern are listed in the order they appear on the page. A description of each component is given on the Components page.
| Pattern | Components, in order | Photographs |
|---|---|---|
| Department home page | FeaturedStory, ImageGrid, ImageBand, IntroBand with Timeline | Grid cards and the band |
| Service home page | PageHero, LinkGrid, ImageBand, Section with Figures, IntroBand | Hero and the band |
| Standard page | StandardPage; optionally ItemList or Steps | None |
| Reference page | StandardPage, DataTable | None |
| Procedure page | StandardPage, Steps; optionally ItemList | None |
| Questions page | StandardPage, Accordion | None |
| History page | StandardPage, Timeline | None |
| Newsroom | PressReleaseList; PressReleaseArticle | Article only |
| Register | PressReleaseList with a category label | None |
| Form page | StandardPage, ApplicationForm | None |
Composing a new page. The steps below apply to every page added to a site after it has been set up. They are the same on every site, and they are checked before a page is published.
Step 1: Choose the pattern
Decide what kind of page is needed before anything is written. A page that explains is a standard page; a page that lists records is a reference page; a page that instructs is a procedure page.
Step 2: Write the prose first
Draft the paragraphs in plain, formal language. The components carry structured content; they do not replace the explanation that surrounds them.
Step 3: Select the components the pattern allows
Take the components from the table above. A page uses at most two list components, each for a different purpose. Do not introduce a component the pattern does not provide for.
Step 4: Add photographs where the pattern provides for them
Home page heroes, bands and grid cards may carry a photograph; standard pages do not. Every photograph is a local file with a caption of the form Photo: First Last, and the photographer is listed on the copyright page.
Step 5: Wire the page into the site
Add the page to a navigation submenu and to the footer list in the site configuration so that it can be reached, and link to it from related pages.
Step 6: Export the page metadata
Every page exports a title and, where the page is likely to be found from outside the site, a one-sentence description.
Step 7: Check the page
Follow every link on the page, view it at the three breakpoints, and run the type check and lint for the site before it is published.
Common questions. The questions below are those most often raised by teams composing their first pages.
For the conditions every page must meet before publication, see Standards for Sites; for the setting up of a new site, see Adopting the System. Questions about patterns may be sent to contact@design.gov.vin.