Summary
Opries design should feel structured, calm, practical, and easy to scan. The visual system combines Swiss/International design principles with Universal Design: clear grids, disciplined typography, generous but purposeful spacing, visible hierarchy, accessible contrast, and information arranged around real user tasks.
The result should not feel decorative, corporate, or generic. It should feel like dependable infrastructure for people doing real environmental management and governance work.
Design Basis
| Principle | What it means for Opries |
|---|---|
| Swiss/International structure | Use grids, alignment, consistent spacing, clear hierarchy, and restrained visual expression. |
| Universal Design | Make layouts usable across different abilities, devices, confidence levels, reading conditions, and time pressures. |
| Universal Design for Learning | Present information through summaries, structure, examples, tables, checklists, and next steps. |
| Practical trust | Let evidence, clarity, and usefulness create confidence. Avoid visual noise or inflated claims. |
| Australian landcare context | Use colours, imagery, language, and examples that feel grounded in Australian landscapes and on-ground work. |
Layout Patterns
Use a clear grid before adding expression. Align headings, captions, tables, callouts, and image edges so the page can be understood at a glance.
| Pattern | Use | Avoid |
|---|---|---|
| Single-column reading flow | Guidance, reports, policy-style pages, educational material | Splitting complex explanations across competing columns |
| Two-column comparison | Before/after copy, light/dark logo examples, role comparisons | Symmetrical columns when one side clearly matters more |
| Table-led reference | Tokens, colour values, status states, component rules | Long prose for information people need to compare |
| Short checklist | Review steps, publishing checks, compliance checks | Hiding required actions inside paragraphs |
| Quiet callout | Risk, assumptions, asset status, permissions, important context | Decorative panels that do not change understanding |
Grid System Patterns
Opries grid guidance draws from Josef Muller-Brockmann's Grid Systems in Graphic Design and the broader Swiss/International design tradition. The grid is a disciplined organising system for proportion, alignment, rhythm, and clarity, not just a way to split a page into columns.
Use the grid to create order before adding colour or visual emphasis. A good grid should make the layout feel calm and inevitable: headings, text blocks, images, captions, tables, and metadata should appear deliberately related.
The grid should support the reading task. Do not split text into columns just to make a page look designed. Decide whether the grid is underlying or visible:
- An underlying grid controls alignment, margins, image widths, table widths, and page rhythm.
- A visible column layout changes how the reader moves through the text.
Use visible columns only when they reduce effort. In print, a full A4 page width can make long sentences tiring because the eye must travel too far before returning to the next line. In those cases, a two-column text area can reduce line length and cognitive load. On the web, line length can usually be managed with a constrained content width, so multi-column prose is less often needed.
| Grid | Best for | Notes |
|---|---|---|
| 1 column | Web guidance, letters, short reports, narrow handouts, policy-style content | Best when line length is already comfortable |
| 2 columns | Long printed body text, comparisons, business card backs, simple posters, image plus caption/detail | Use when columns reduce line length or clarify related content |
| 3 columns | Short reference blocks, contact groups, feature summaries, poster details | Use only for short text and clear grouping |
| 4+ columns | Underlying layout grid for websites, reports, and posters | Use for alignment, not necessarily visible columns |
| Modular grid | Posters, dashboards, report covers, multi-part references | Useful when content blocks need consistent sizes |
Asymmetric Columns
Two-column layouts do not need to be equal. Opries should often prefer asymmetric columns: one dominant column for the main reading path and a smaller column for metadata, contact details, captions, source notes, identifiers, or short supporting information.
| Column relationship | Use |
|---|---|
| 2/3 + 1/3 | Main content plus supporting note, source, image, or contact block |
| 3/4 + 1/4 | Strong main text with a narrow metadata or navigation column |
| 1/2 + 1/2 | Direct comparison where both sides have equal importance |
| Small mark + content stack | Business card backs, cover pages, contact blocks |
Use symmetric columns only when the content is genuinely equal. If one side carries the main action, make that side visibly dominant.
For single recto pages, use 2/3 + 1/3 when the main reading path should begin on the left and the support column should sit to the right. This suits one-page documents, posters, notices, and many web-to-print exports.
For verso pages in a recto-verso spread, mirror the structure as 1/3 + 2/3. The support column sits on the outside edge of the spread, while the main content remains closer to the centre reading area. This keeps facing pages balanced without making the two pages identical.
| Page situation | Preferred structure | Use |
|---|---|---|
| Recto only | 2/3 main + 1/3 support | One-page document, poster, front-facing report page |
| Verso in a spread | 1/3 support + 2/3 main | Left-hand page in a facing-page document |
| Recto in a spread | 2/3 main + 1/3 support | Right-hand page in a facing-page document |
| Business card back | Small identifier + larger contact stack | Asymmetric identity/contact layout |
| Direct comparison | 1/2 + 1/2 | Use only when both sides are equally weighted |
Screen Grids
Use responsive grids that collapse cleanly on small screens. A desktop layout can use multiple columns, but mobile should return to a clear single-column reading flow unless the content is a compact control or table.
| Screen context | Guidance |
|---|---|
| Public web page | Use a constrained content column for reading, with optional secondary columns for navigation, metadata, or examples |
| Documentation page | Keep main prose in one column; use tables and examples for comparison |
| Landing or campaign section | Use a strong grid, but keep hierarchy obvious and avoid decorative split layouts |
| Product-adjacent public content | Prioritise scan paths, labels, and task clarity over expressive composition |
For screen CSS, prefer max-width and readable containers before multi-column text. Avoid CSS multi-column body copy for core guidance unless it is carefully tested for reading order, keyboard flow, zoom, and responsive behaviour.
Print Grids
Print grids should respect page size, margins, binding, folding, and annotation. A4 documents often need either a constrained single column or a two-column body area so line lengths do not run across the full page width.
| Print context | Guidance |
|---|---|
| Letterhead | Single-column body with header and footer zones |
| Business card | Asymmetric two-zone structure: small identifier area plus larger contact stack |
| Report or board paper | Constrained single column for shorter documents; two-column body for long dense guidance where line length becomes tiring |
| Poster | Modular grid with a large title zone, short details, and a clear action area |
| Handout | One main column for short handouts; two columns for dense text where shorter measure improves reading |
For print CSS, test whether body text spans too wide on A4. If it does, use one of these approaches:
- constrain the text block width and keep generous margins
- use an asymmetric layout with a main column and support column
- use two balanced text columns only for continuous long-form body copy
- keep headings, tables, figures, captions, and source notes aligned to the same underlying grid
Keep columns visibly related through alignment. If two elements do not align to the grid, there should be a clear reason.
Table Patterns
Tables should reduce effort, not add visual noise. For text-heavy comparison tables, use open sides and horizontal row rules so the eye can move left to right without being interrupted by vertical borders.
| Table type | Preferred treatment | Why |
|---|---|---|
| Text comparison | Horizontal row rules only, open left and right edges | Supports left-to-right reading and reduces visual interruption |
| Use / Avoid guidance | Character cues such as ✓ Use and ✕ Avoid, with open columns | Helps scanning without relying on colour or images |
| Reference values | Light row rules, clear headings, enough spacing | Supports lookup without over-boxing the content |
| Dense operational data | More structure is acceptable when accuracy depends on row and column tracking | Helps users compare records, dates, status, and evidence |
| Financial or compliance data | Use the minimum grid needed for precision | Supports careful reading without making the table feel heavy |
Use vertical dividers only when they genuinely help compare precise data. Avoid full boxed cells for prose tables, because boxed grids can pull the eye downward and increase the work required to read across each row.
Hierarchy Patterns
Every page or communication should show its structure before asking the reader to commit attention.
- Start with a clear title and a short subtitle.
- Use visible front matter or metadata where status, purpose, and use matter.
- Follow with a short summary before detailed guidance.
- Make headings descriptive enough to scan.
- Keep paragraphs short and focused on one idea.
- Use tables for comparison and lists for steps or checks.
- Keep visual emphasis limited so important information remains important.
Visual Tone
Opries should feel ordered and human, not sterile. Swiss/International influence should show through structure and restraint, while the Australian landcare context should come through colour, imagery, examples, and plain language.
| Do | Do not |
|---|---|
| Use strong alignment and consistent spacing | Float elements casually or rely on decorative positioning |
| Let typography and hierarchy carry the page | Add ornaments, gradients, or visual effects to create interest |
| Use restrained colour for meaning, identity, and emphasis | Use colour as decoration or as the only signal |
| Use character cues, subtle mono motifs, and real imagery only where they support meaning | Use generic environmental symbols as the main visual idea |
| Give readers summaries, examples, and checks | Present long unbroken text blocks |
Motif and Background Rhythm
Larger materials such as websites, business cases, proposal covers, and long documents may need more visual rhythm than text, tables, and rules can provide. Use subtle mono motifs before reaching for stock imagery or a full illustration style.
Good motifs should feel structural but human: contour lines, coordinating points, dot grids, register rows, field lines, map-like paths, and simplified paperbark linework. They should sit behind or beside the content, not become the message.
Contour lines are the preferred warmth motif. They add land, mapping, and field context while bringing a little organic irregularity into the grid.
| Motif use | Guidance |
|---|---|
| Website hero or section background | Use very subtle contour linework, one-colour linework, or dot structure, with text kept on a clean readable area |
| Business case cover | Use a restrained contour field, coordinating-point cluster, abstract register rhythm, or field-line motif |
| Proposal divider | Use a cropped contour detail, small motif, rule, or grid marker to create rhythm between major sections |
| Long document margin | Use section markers sparingly, aligned to the grid |
| Product-adjacent public page | Use motifs to imply records, coordination, evidence, and workflow rather than generic nature |
Accessibility and Learning Patterns
Design for scanning first, then reading. Many Opries users may be volunteers, coordinators, committee members, or staff working under pressure. They may be checking a detail, learning a workflow, reviewing a report, or trying to understand what action is required.
Support this by providing:
- a quick summary for orientation
- clear headings for scanning
- examples that show the rule in use
- tables for comparisons
- checklists for review and action
- labels that do not rely on colour alone
- enough spacing to separate ideas without making pages feel sparse
Opries-specific Patterns
| Pattern | Description | Example use |
|---|---|---|
| Coordinating point | A small hollow marker that represents many works being coordinated in one place. | Logotype, identifier, app icon exploration, section markers |
| Evidence-first table | A table that makes owner, date, status, evidence, and next action visible. | Reports, registers, product screenshots |
| Quiet status system | Text-labelled status supported by colour, not colour alone. | Grant updates, document registers, compliance messages |
| Practical explainer | A short summary plus steps, examples, and a check. | Educational handouts, onboarding, help content |
| Place-grounded image | A real image of landcare activity, landscape context, tools, people, or records. | Website, newsletters, reports |
Checks
- Can someone understand the page structure in a few seconds?
- Does the design support the user’s task before it expresses the brand?
- Does the grid system support the reading task rather than splitting content decoratively?
- Are hierarchy, spacing, and alignment doing most of the visual work?
- Is colour used for identity, meaning, or emphasis rather than decoration?
- Are summaries, examples, tables, or checks provided where the topic is complex?
- Does the design feel grounded in Australian landcare and NRM work?