The Ethical Agency – Wireframes v2 – template
Greyscale, mobile-first wireframes covering the full range of pages and content types a web project needs. Structure and draft copy only – brand, colour and type are a separate sprint. Draft/existing copy is included where it exists so the experience feels real for the client; it's illustrative and meant to be replaced. Every page pairs a detailed mobile frame with a desktop layout map.
Legend
Interaction labels
Conventions applied throughout
Marketing & content
Optional announcement bar, a utility strip, and the primary nav (5–7 items) + a highlighted CTA on every page. On mobile it collapses to a hamburger; search and contact become quick-tap icons in the sticky header.
Mobile – menu overlay
Desktop – announcement + header + dropdowns
Marketing & content
The front door. Value proposition + primary CTA, then routes visitors into the key sections. Exercises most of the library: hero, logo strip, stats, feature rows, icon grid, cards, testimonials, video, newsletter, CTA, FAQ.
standalone page · /Mobile – primary (with draft copy)
One place to plan, track and report – so your team spends less time in spreadsheets and more time doing the work.
Stop stitching five tools together. Plan, assign and report from a single source of truth.
“We cut our monthly reporting from two days to two hours.” – Ops lead, Acme
Desktop – layout map
Marketing & content
Credibility page. Overview, founder video, a company timeline, awards / accreditations, and a pull quote. Links out to a dedicated Team page (people don't live on About). Parent of the About dropdown, so it opens with its own Overview.
standalone page · /aboutMobile
We started in 2018 after years of watching good teams held back by clunky software. Today we help 2,400 teams run better.
“We build for the person doing the work, not the person buying the tool.”
2018 · Founded
2021 · 1,000 teams
2024 · B-Corp certified
Meet the team → · Careers → · News → · Accreditations →
Desktop – layout map
Marketing & content
A dedicated people page (sub-page of About). Person cards in a grid, each with a photo, name, role and a LinkedIn icon top-right. Optional filter by department, and a "join us" CTA into Careers.
standalone page · /about/teamMobile – person cards (LinkedIn top-right)
About / Team
TeamA small, senior team who care about the details.
Co-founder & CEO
Head of Product
We're always looking for good people.
Desktop – layout map
Marketing & content
The core offering page. Overview + grouped services (tabs), a process, proof, a pricing teaser, and a two-column FAQ.
standalone page · /servicesMobile
Modular services that fit how your team already works.
Build the plan once; keep everyone aligned.
See where the work actually goes.
1 Discover · 2 Set up · 3 Onboard · 4 Scale
“Rolled out to 60 people in a week.” · client logos
Desktop – layout map
Marketing & content
A high-value proof asset. A filterable index of case studies (by sector / service / outcome), each a card that links to a full case-study detail page. Search + filter sit as a row above the grid.
standalone page · /workMobile – index
–80% reporting · +2 days/mo saved
3× throughput · one source of truth
Desktop – layout map
Marketing & content
The full story: client, challenge, approach, results (with hero stats), a pull quote, a gallery, and related case studies. A strong paid-landing and proof asset, ending in a CTA + FAQ.
standalone page · /work/acmeMobile
Work / Acme
Case study · RetailClient · sector · services used
–80% reporting · +2 days/mo · 3× faster
Monthly reporting took two days and lived in five spreadsheets.
We consolidated data into one dashboard and automated the exports.
“It just works now – the report writes itself.”
Desktop – layout map
Marketing & content
Plan tiers with a highlighted recommendation, a full comparison table, and pricing FAQs. Flat top-level nav item (no dropdown).
standalone page · /pricingMobile
Monthly. Cancel anytime.
✓ Core app · ✓ Dashboards · – Priority support
✓ Everything in Starter · ✓ Automations · ✓ Priority support
| Feature | Start | Grow |
|---|---|---|
| Core app | ✓ | ✓ |
| Automations | ✕ | ✓ |
| Priority support | ✕ | ✓ |
Desktop – layout map
| Feature | Starter | Growth | Scale |
|---|---|---|---|
| Core app | ✓ | ✓ | ✓ |
| Automations | ✕ | ✓ | ✓ |
| SSO / SAML | ✕ | ✕ | ✓ |
| Priority support | ✕ | ✓ | ✓ |
| Seats | 1 | 5 | ∞ |
Marketing & content
An index with search and filters (as a row above) over a card grid, plus pagination. Used for resources, blog or products.
standalone page · /resourcesMobile
Desktop – layout map
Marketing & content
A single content page: hero, byline and body, related cards, and a two-column FAQ. Carries E-E-A-T signals (author, reviewed-by, date) for SEO/AI search.
standalone page · /resources/articleMobile
Resources / Article
GuideBy Priya Naidoo · reviewed by · 12 May 2026 · 6 min
If reporting eats your month-end, these five changes claw back most of that time…
Priya Naidoo · Head of Product · last reviewed 12 May 2026
Desktop – layout map
Marketing & content
An on-site enquiry form (routed by department), with locations and a map, and a short FAQ. No clickable email addresses – capture and route via the form.
standalone page · /contactMobile
Tell us what you need and we'll route it to the right team.
Desktop – layout map
System & functional
A query bar with the current term, filters as a row above (category · type · date · sort), a results list with highlighted matches, and an empty state. See the live search template.
standalone page · /search?q=Mobile – results + empty state
24 results for "reporting"
…the matched term shown in context…
No results. Try a different term.
Desktop – layout map (filters row above)
System & functional
Centred card auth flows: log in, create account, forgot-password. SSO options, validation and error states. (Wireframe only – never build real credential fields in a public demo.)
standalone pages · /login · /signup · /resetMobile – login
Sign in to continue.
Forgot password?
No account? Create one
Desktop – layout map (3 states)
System & functional
Logged-in area: a side nav, summary widgets/metrics, a data table (orders, activity), and settings. The app-style counterpart to the marketing site.
standalone pages · /account · /account/settingsMobile
Active projects
This month
Desktop – layout map (side nav + content)
System & functional
The success page after a form, booking or purchase: confirmation, a summary, next steps, and what happens by email. Closes the loop.
standalone page · /thank-youMobile
Thanks – we've received your enquiry.
Ref #A-1042 · what you submitted
A confirmation email is on its way.
Desktop – layout map
System & functional
The pages people forget: 404 (not found), 500 (server error), and generic empty states. Each keeps the header/footer and offers a way back.
standalone pages · /404 · /500Mobile – 404
This page can't be found.
Nothing here yet.
Desktop – 404 / 500
Utility
The searchable FAQ library, legal pages (Privacy, Terms, POPIA/GDPR) with a plain-English summary, and the first-visit cookie/consent overlay.
standalone pages · /faq · /legal · consent overlayMobile – FAQ + consent
Essential · Analytics · Marketing · Reject all / Save
Desktop – layout map
Reusable template covering marketing, content, system and utility page types. To wireframe a real site: set the doc header, keep the legend, interaction labels and conventions, then duplicate the page blocks you need and swap the draft copy for the client's real copy. Pull individual blocks from the section library and follow the navigation & sitemap rules.