OCCC Website Layout Guide
Wireframe Reference · 6 Layout TemplatesHero + Body + Contact
Your simplest and most consistent layout. A welcoming headline, brief explanation, a contact block, and one or more action buttons. No tabs, no columns — just clean linear flow.
Key Design Notes
- Keep hero headlines to one strong line
- Contact block should always include a named person — not just a phone number
- CTA button should be the only call to action on the page if possible
- Hours of Operation is the exception — no contact block needed, just a clean location/hours table
Content Variations
- Give Now: Adds embedded donation form below CTA
- Employee Giving: Adds list of fund designation options
- Senior Waiver: Body becomes a numbered step list
- Hours of Operation: Body is a location grid — no CTA needed
Intro + Tabbed or Accordion Detail
Pages with multiple distinct topics that share a common intro. Tabs or accordions organize the deeper content. Location-grouped info (Newport / Lincoln City / Waldport / Toledo) is a recurring sub-pattern within this template.
Tabs vs. Accordions
Tabs work well when content sections are roughly equal in length and users are likely to browse between them. Accordions work better when sections vary widely in length or users will mostly read one and move on. Scholarships is likely tabs. Room Use and Facilities could go either way.
Location Block — Standardize This!
Newport / Lincoln City / Waldport / Toledo appear together on at least 3 pages. Create this as a reusable Elementor widget or block so updating one contact number propagates everywhere — not a nightmare of hunting through pages.
Repeating Content Card Catalog
Built for the Community Education page hosting up to 60 class listings per term. Each class is a self-contained card with a consistent structure. The design goal is: plug one in, it looks right.
Big Question to Resolve
With up to 60 listings, does the page just scroll forever, or will you offer filtering by topic, location, or date? Even a basic filter by "Newport / Lincoln City / Waldport / Online" could dramatically improve usability. Worth considering before you build the card structure.
Multi-Session Classes
Some classes are offered at multiple times/locations (e.g., Clutter Clearing had two session options). Your card structure should have a consistent way to display multiple session options within a single card — otherwise every card gets treated differently.
Foundation Hub — Mission + Goals + Donate
The OCCC Foundation page is the hub that several other pages feed into. It combines a mission statement, bulleted goals, image blocks, and multiple donation pathways. Think of it as the home base for all giving-related content.
Mission statement as subtitle
Hub vs. Spoke Relationship
The Foundation page should link out to Give Now, Employee Giving, Scholarships, and Pearls of Wisdom — and those pages should have a clear "back to Foundation" breadcrumb or link. Right now there's no explicit navigation connecting them.
Image Size Note
Your own document flagged this — images need to be standardized and exported as WebP. This template uses the most images of any layout, so resolving image sizing here first will set the standard for the whole site.
Event Page — Tickets + Sponsorships
Currently unique to Pearls of Wisdom, but worth treating as a reusable template if OCCC runs more fundraising events. It has a distinct structure: event hero, optional premium experience, tiered tickets, sponsor levels, and multiple CTAs.
Reuse This Template
If OCCC does additional annual events, this layout is ready to be cloned. The variable parts are: event name, date/time/location, premium experience details, ticket pricing, and sponsor names. Everything else is structural.
Sponsor Logos
The current content lists sponsor tier names but no logos or specific business names yet. Plan for a logo grid section at the bottom — this is standard for event pages and sponsors often expect to see it once they commit.
Two-Column: Updates Log + Main Content
Built for the OCATT Building page. A transparency-focused layout where the left column holds a running log of dated project updates, and the right column holds the main narrative content about the project.
Updates Column Will Keep Growing
As the project progresses, the updates log will get long. Consider showing only the most recent 3–4 by default with a "View All Updates" toggle or accordion — otherwise the left column will eventually be 3x taller than the right.
PDF Links Strategy
Almost every update links to a PDF from Integrity Management Solutions. Make sure these PDFs are hosted on OCCC's own server or a reliable permanent location — not a third-party URL that could disappear. Old updates should stay accessible indefinitely for transparency purposes.