Most visual wireframes begin showing what a page might become before the team has resolved what should determine the experience. What does the business need to say? What do customers need to understand? How does the content relate? What should come first?
The problem is sequence, not the wireframing tool.
Paper, Balsamiq, Miro, Whimsical, Sketch, UXPin, and Figma can all help a team explore an interface. Each becomes less useful when visual decisions begin before business, brand, marketing, product, content, and information architecture have established what the experience needs to accomplish.
My process begins with BDD IA Docs, structured Word and Google Docs for content and information architecture. They give business leaders, marketers, product teams, and subject-matter experts a familiar place to resolve what belongs, what relates, what comes first, and what the experience must help people understand before visual design becomes the dominant conversation.
A BDD IA Doc is not a low-fidelity picture of the page. It is a score for the information architecture. It establishes the relationships and movement without prescribing the final performance.
Low-fidelity wireframes give a page its basic visual skeleton. BDD IA Docs establish the purpose, content, hierarchy, and relationships that guide how that skeleton takes shape.
Key Takeaways for the Information Architecture Phase
- Business, brand, marketing, product, content, and information architecture should be resolved before visual representation begins to dominate the conversation.
- BDD IA Docs give the people who know the subject a familiar place to shape hierarchy, terminology, sequence, relationships, and needs.
- Tables can act as borderless structural guides. They do not prescribe boxes or limit visual design.
- The Nashville Number System offers a useful analogy for preserving relationships before expressing them in the right key.
- BDD can often move from approved information architecture into a working, responsive, editable, scalable website without perfecting an intermediate static artifact.
- AI accelerates translation. It does not replace context, specification, judgment, or review.
What Should Be Settled Before Visual Wireframing?
Before visual wireframing begins, the structure should answer questions that remain true after the visual style changes.
- What does this page need to accomplish?
- Which audience is it for, and what do they need first?
- What belongs together?
- What must be compared, explained, demonstrated, or acted upon?
- Which terms will the audience understand?
- What should the next step be?
Those are information architecture questions. They come from understanding and decisions, not design tools.
A polished frame can make an unsettled idea feel decided. Once the team sees columns, cards, typography, and imagery, feedback drifts toward visible choices. The harder questions about meaning, hierarchy, sequence, and responsibility become more difficult to recover.
The structured phase keeps those questions visible long enough to solve them.
Why Does Visual Wireframing Come After Brand Context?
Structure is not a substitute for strategy. BDD begins with Discovery + Strategy, which encompasses business, brand, marketing, and product strategy. It identifies the audiences involved, the promises the business can support, and the change the experience needs to create.
Brand context gives the information a point of view. Product strategy establishes what the offering needs to make possible. Content gives the experience substance. Information architecture turns that understanding into hierarchy, paths, terminology, content types, and relationships.
Only after those decisions are strong does visual wireframing become productive. Design can express an architecture that already knows what matters instead of trying to invent the strategy while arranging the interface.
Why Use Word or Google Docs?
Because collaboration quality depends on fluency.
Executives, product leaders, marketers, researchers, and subject-matter experts already know how to comment, revise, and compare language in Word or Google Docs. They can work directly on the content, hierarchy, terminology, sequencing, and relationships they understand best.
Moving too early into a specialist design environment can unintentionally narrow that participation. Figma is excellent at what it does, and designers should keep using it. The question is which environment best supports the decision being made.
BDD IA Docs are simple by design, but the methodology is deliberate and proprietary. By separating content and information-architecture decisions from visual design decisions, client review stays focused on the subject matter clients know best. Nobody is asked to play an instrument they do not know.
The Nashville Number System for Pages
The Nashville Number System describes chord relationships with numbers instead of fixed chord names. Because those relationships remain intact, musicians can play the same song in another key without rewriting the chart.
I use that as an analogy for pages.
A BDD IA Doc describes what each section is doing. It may introduce the idea, compare options, present evidence, show a process, or create a next step. BDD can then select an appropriate expression from its component system without forcing every brand into the same visual template.
Same number, different voicing.
The BDD IA Doc is the score. Brand context establishes the key and tonality. The component system provides the available voicings and instruments. The working website is the performance.
Tables Are Structural Guides, Not Boxes
A table is useful because it makes relationships visible. A row can show a sequence. Columns can reveal a comparison or a set. Cells can expose differences in emphasis, length, and completeness before styling distracts from them.
The borders can disappear. The table does not dictate the final layout.
The visual design can layer elements, use overlap and depth, introduce motion and animation, transform responsively, or break into an unconventional composition. The document establishes which ideas belong together and how they relate. It does not decide that the page must look like a grid of boxes.
This creates a kind of invisible precision. If one item in a set carries twice the weight of the others, the imbalance appears while the content is still easy to change. The architecture helps the team discover consistency instead of enforcing it after the fact.
How Does the Score Become a Working Website?
BDD’s proprietary production workflow moves approved information architecture into appropriate components from BDD’s internal reusable library. It is used to deliver website experiences, including those built as part of the BDD Business OS.
The workflow reads the relationships in the BDD IA Doc, considers the content and brand context, and moves the result into a working, responsive, editable, scalable website. Reusable components accelerate implementation without forcing templated design. Dynamic content and data relationships can be connected where the experience requires them.
The acceleration is real, but the important distinction is where the time has gone. The work has not disappeared. It has moved upstream into discovery, strategy, brand context, product thinking, content, information architecture, and specification, where judgment creates the most value.
AI Makes Context and Specification More Valuable
Today’s tools can move quickly from a conversation, sketch, design file, or repository to a responsive prototype and increasingly into production-code workflows. Google Stitch, Claude Design, currently in research preview, and Figma Make can turn varied forms of direction and design context into interactive interfaces. OpenAI-assisted workflows and other coding agents can work inside repositories, inspect an existing system, and carry changes through implementation.
That speed increases the cost of weak context. AI can jump from a conversation to an interface before the team has solved the business problem, brand context, content relationships, information architecture, or acceptance criteria.
A durable specification-driven workflow gives the people and tools involved a shared source of truth. It captures intent, constraints, content relationships, design direction, business rules, and the definition of done. When those specifications live with the project or code, they remain available to the next designer, developer, or agent instead of disappearing inside one conversation.
Speed shortens the translation. It does not decide what the page must accomplish.
Why BDD Can Often Skip Conventional Wireframes
Conventional wireframes can be useful, but they are still abstractions. They can suggest layout and flow. They often do not demonstrate real interactions, responsive behavior, workflows, customer journeys, dynamic content, or system behavior as clearly as a functioning website can.
BDD spends more time resolving Discovery + Strategy, brand context, product thinking, content, and information architecture first. BDD IA Docs make that thinking collaborative, visible, and durable.
Once those decisions are approved, BDD’s reusable component system helps the team move rapidly into a working website. Because the website is responsive and fast to revise, the team can validate the actual hierarchy, content, interactions, and behavior instead of spending disproportionate time perfecting an intermediate static artifact.
This is not skipping thinking to code faster. It is moving more thinking upstream so less disposable representation is required downstream.
Design review still matters. It becomes more useful when everyone can respond to the real experience in context.
The Method Travels. The Implementation Changes.
The methodology is portable. Discovery, brand context, information architecture, BDD IA Docs, structured collaboration, component thinking, specification, and review can work across WordPress, Bricks, Etch, Elementor, Webflow, Wix, Duda, Astro, Sanity, static sites, and headless systems.
A particular implementation remains platform-specific. A component library, automation, or publishing system built for one platform does not automatically become native to another. BDD chooses or builds the implementation that fits the business while preserving the method underneath it.
When the Score Outlives the Project
ROI Solutions
The ROI Solutions engagement began with business, brand, audience, product, mission, and website architecture. A large library of structured Word documents then carried that understanding through the site’s pages, product relationships, customer stories, mission paths, and publishing system.
The value did not end at launch. The same discovery and information architecture continued to guide marketing, content, product identities, and an intelligence layer built years later. The score remained useful because it held the relationships beneath the visible work.
NetFoundry
NetFoundry had one platform, three audiences, three deployment models, and a vocabulary that had blurred together. Discovery established the map. A set of structured Word documents carried that map through solutions, products, roles, industries, forms, resources, and the homepage.
The architecture then shaped the website, publishing system, infographics, and presentation used with prospects and investors. Different expressions kept the same relationships intact. That is the durability a score is meant to create.
Try It on One Page
Open Word or Google Docs. Choose one important page. Write its purpose, audiences, hierarchy, content, relationships, and next step in a simple structured form.
Use tables if they clarify the information architecture. Let them remain borderless guides. Do not use them to prescribe the final composition.
If the information architecture does not work in a simple structured form, a design tool is not going to solve the underlying problem.
The goal is not to avoid design. It is to give design something true to express.
If your next website needs a clearer structure before it needs another frame, begin with Discovery + Strategy.