Skip to main content
Before you commit to a full design, ask WPOS for a wireframe: a grey-block version of the page with every section in place. Use it to agree the structure with your client while changes are still cheap. Once the layout is right, WPOS builds the finished page on the same structure.

​
Ask for a wireframe

In the Command Center chat, ask for a wireframe. Asking for a prototype, a lo-fi mockup, a rough layout, or a quick mock works the same way. WPOS then builds a wireframe instead of a finished design.
WPOS places the wireframe on a real page of the site, so you review it in the live preview like any other page, then walks you through what it built.

​
What a wireframe looks like

  • Greyscale only. Structure and hierarchy are shown in shades of grey, with no colour or brand styling, so nobody mistakes a wireframe for the final design.
  • Real labels, placeholder copy. Headings, navigation, labels, and buttons use real text. Body copy appears as grey placeholder lines, and images as crossed-out placeholder boxes.
  • Real page sections. Navigation, hero, cards, forms, tables, tabs, accordions, and footers are laid out as real sections, not a flat picture.
  • Responsive. On screens 768px wide or narrower, multi-column rows stack into a single column, so you can check the mobile layout too.
  • Works in Gutenberg and Elementor. A wireframe looks the same in the preview, on the front end, and inside the Gutenberg and Elementor editors.
The whole wireframe is built as a single WPOS widget, which is what makes it fast to build and easy to replace once the real design is ready.

​
From wireframe to finished page

1

Review the structure

Open the wireframe in the preview and change the layout in plain language, for example “move pricing above testimonials” or “add an FAQ section”. Settle the structure here, before any styling.
2

Apply the design

When the layout is approved, ask WPOS to design it, for example “apply the brand to this page”. WPOS builds the finished page on the same structure. See Styling and brand for pinning the brand.
3

Compare, then publish

Ask WPOS to keep the wireframe on its own page and build the designed version separately, so you can compare the two side by side.
Wireframes use placeholder content. Replace placeholder text, sample forms, and example testimonials with the client’s real content before you publish.

Build a page

The page-by-page workflow for shipping a site.

Styling and brand

Pin the brand so every page comes out on-brand.