Skip to main content

​
Our wireframing philosophy

Dedicated wireframe phase separate from visual design - Oratory treats wireframing as a distinct structural planning stage that occurs before applying visual concepts, ensuring content and layout decisions are finalized before design execution begins.
Wireframes are the structural foundation of your website. We complete and approve all wireframes before any visual design work begins, ensuring content and layout decisions are solid before we apply visual styling.

​
Process structure and timing

​
Wireframe phase placement

Wireframes are a critical pre-design requirement:
  • Pre-design requirement: Wireframes must be approved before design application begins
  • Critical path blocker: Secondary page wireframes become project bottlenecks if delayed
  • Parallel with concepts: Week 1 includes both visual concepts workshop and homepage wireframe collaboration
  • Separate from visual direction: Wireframe responsibility distinct from designer doing visual directions
Wireframe approval is a project blocker. Delays in wireframe approval directly impact the design timeline. We set clear deadlines to keep projects on track.

​
Workshop-based approach

Our wireframing process uses collaborative workshops:
  • 15-minute wireframe workshop calls: Proven effective format for client collaboration
  • Real-time collaboration: Build wireframes during live client calls for immediate feedback
  • Structured discovery: Use workshop format to extract content requirements and page structure
The 15-minute workshop format keeps collaboration focused and efficient. We build wireframes live during calls, allowing immediate feedback and iteration.

​
Our wireframing approach

​
Team-led wireframing (standard)

Our team handles wireframing directly for all projects:
  • Direct client collaboration: Our team conducts wireframe workshops
  • Content extraction: Our team writes copy and extracts messaging during wireframe process
  • Immediate iteration: Live changes during 15-minute workshop calls
  • Real-time collaboration: Build wireframes together with immediate feedback
  • Proven format: 15-minute workshops are highly effective for focused collaboration
The 15-minute workshop format keeps collaboration focused and efficient. We build wireframes live during calls, allowing immediate feedback and iteration.

​
Fletch partnership (optional enhancement)

For companies that want comprehensive positioning work, we can partner with Fletch PMM:
  • Bonus positioning work: Fletch provides professional wireframes as part of positioning package
  • Timeline coordination: If working with Fletch, we wait for their wireframe completion before design phase
  • Typical delivery: Mid-January for comprehensive wireframe packages
  • Proven partnership: We’ve done many projects together, and our processes align well
Fletch PMM is an optional add-on for companies wanting dedicated positioning work. Team-led wireframing is included in all standard packages and works excellently for most projects. If you’re interested, we can make an introduction or you can visit their site directly.

​
Wireframe types and complexity

Different page types require different wireframe approaches:

​
Homepage Wireframes

Comprehensive structure
  • Large hero sections, simplified intro content
  • Portfolio and content organization
  • Content prioritization: Remove verbose sections
  • Visual hierarchy planning: Navigation, featured content, CTAs
  • Focused messaging over comprehensive coverage

​
Template Page Wireframes

CMS considerations
  • Structure for easy content management post-launch
  • Conditional layouts: Design for content variations
  • Standardized sections: Reusable components
  • No imagery required: Flexible content systems
  • Client self-management ready

​
Complex Service Wireframes

Iterative development
  • Back-and-forth requirement for complex offerings
  • Framework visualization: Structure for invisible processes
  • Multi-audience consideration: Different content depth
  • Consulting process visualization
  • Multiple stakeholder review cycles

​
Content integration process

​
Copy development during wireframing

Content decisions happen during the wireframe phase:
  • Real-time content creation: Copy decisions made during wireframe workshops
  • Client copy integration: Update wireframes to match client revisions in shared documents
  • Content validation: Ensure messaging aligns with wireframe structure before design

​
Asset planning

Wireframes identify what assets are needed:
  • Imagery requirements: Identify custom illustration needs during wireframe phase
  • Video integration: Plan for modal popups and embedded content
  • CMS field mapping: Structure wireframes for easy client content updates
Wireframes serve as the blueprint for all content and assets. We identify imagery needs, video placements, and CMS requirements during this phase.

​
Review and approval workflow

​
Stakeholder review process

Managing feedback from multiple stakeholders:
  • Multiple reviewer coordination: Manage feedback from various team members
  • Timeline pressure management: Set clear deadlines for wireframe approval to avoid design delays
  • Review assignment: Specific pages assigned to specific reviewers for efficiency

​
Approval requirements

Wireframe approval is mandatory before design:
  • Complete approval before design: No design work begins until wireframes finalized
  • Product template priority: Most complex wireframes reviewed last due to variation complexity
  • Content finalization: All copy and structural decisions locked before visual design
Design work cannot begin until wireframes are fully approved. Delays in wireframe approval directly impact project timelines. We use phased approval (homepage first, then templates) to keep momentum.

​
Tools and documentation

​
Wireframe creation tools

  • Reloom library integration: Use established wireframe components for consistency
  • Figma-based process: Wireframes created and shared through design platform
  • Live workshop tools: Screen sharing during 15-minute client calls

​
Handoff documentation

Wireframes serve multiple purposes:
  • Developer reference: Wireframes serve as structural guide during development
  • Content specifications: Clear indication of final copy and messaging
  • Interaction planning: Note requirements for forms, CTAs, and user flows
Wireframes are living documents that evolve during the workshop process. Final approved wireframes become the blueprint for both design and development.

​
Quality control and iteration

​
Content accuracy

  • Client revision integration: Process for updating wireframes when copy changes
  • Messaging consistency: Ensure wireframe content aligns with positioning strategy
  • Technical feasibility: Validate wireframe functionality with development team

​
Structural validation

  • User flow logic: Confirm page progression and navigation makes sense
  • Content hierarchy: Ensure information architecture supports conversion goals
  • Mobile consideration: Plan responsive behavior during wireframe phase
We validate wireframes for both user experience and technical feasibility. Content hierarchy, navigation flow, and responsive behavior are all considered during the wireframe phase.

​
Common challenges and solutions

​
Timeline management

  • Client delay mitigation: Set clear deadlines with consequences for design timeline
  • Content preparation: Require client content before wireframe workshops
  • Approval bottlenecks: Use phased approval (homepage first, then templates)

​
Scope management

  • Feature creep prevention: Lock wireframe scope before design phase
  • Content volume control: Balance comprehensiveness with usability
  • Technical constraint integration: Consider development limitations during wireframe phase
We use phased approval to keep projects moving. Homepage wireframes are approved first, allowing design work to begin while template wireframes are finalized.

​
How this fits into our process

Wireframing happens during Week 1 of our process:
  • Week 1 (Design Direction):
    • Visual concepts workshop (3 concept boards)
    • Homepage wireframe collaboration (15-minute workshops)
    • Template page wireframes (if Growth-Ready Website Package)
    • Wireframe approval required before Week 2 begins
  • Week 2 (Homepage Design):
    • Visual design applied to approved wireframes
    • Content from wireframes integrated into designs
    • No wireframe changes after this point
Wireframes are completed and approved during Week 1. Once approved, they become the structural foundation for all design work in Week 2 and beyond.
For more details on our complete process, see our process page.

​
Optional: Working with Fletch PMM

For companies wanting comprehensive positioning work, Fletch PMM is available as an optional add-on:
  • Wireframes included: Fletch provides professional wireframes as part of positioning package
  • Timeline coordination: If working with Fletch, we wait for their wireframe completion before design phase
  • Typical delivery: Mid-January for comprehensive wireframe packages
  • Integration: Fletch wireframes align with positioning strategy
  • Proven partnership: We’ve done many projects together, and our processes align well
Fletch PMM is optional. Team-led wireframing is included in all standard packages and works excellently for most projects. Fletch adds comprehensive positioning strategy for companies that want dedicated messaging work. If you’re interested, we can make an introduction or you can visit their site directly.

Learn more about Fletch PMM

Visit Fletch PMM’s site to learn more about their positioning and wireframe approach.

​
Ready to discuss your wireframing needs?

Book a call to discuss how we’ll approach wireframing and content structure for your project.

Book a free intro call

Schedule your call to discuss wireframing and your project needs.