A wireframe is not a design. It is a drawing of a page's structure: which sections it has, in what order, and roughly how much room each one takes. Color, photography and typography come later, after the structure is right.
Each wireframe shows the sections of a page in the order they appear, top to bottom. Every section carries a number, a name, a drawing, and a note explaining what belongs in it. The drawing shows the shape; the note is the specification. Where the two disagree, the note wins.
The marks
A gray bar. Width suggests the length of the heading, not its wording.
Thin lines. Each line is a sentence or part of one.
A dark block. One per section at most.
An outlined block. The quieter of a pair.
A crossed box. The diagonal marks it as a photograph, not a panel.
A row of small blocks: licenses, insurance, rating, years.
Filled stars, followed by the review itself.
A question bar with a plus sign. Answers open in place.
A bordered panel for a map, a calendar, or third-party embed.
Reading a section
A section is drawn inside a sheet, with a ruler along the top edge so the width of the page is always visible. This is the hero from the home page, drawn exactly as it appears in that wireframe.
2 · Hero + quote form
Headline, supporting line, three trust points, and the form in the first viewport. Mobile stacks the form directly under the headline.
The background image flag marks a band that carries a photograph behind its content. Every hero and every closing call to action across the site carries one, with the quote form beside it.
What a wireframe does not show
Not shown
Color, typefaces, photography, button styling, spacing values and animation. Those are the design, and they come after the structure is agreed. Changing them later costs almost nothing.
Shown
The order of sections, what each one contains, where the calls to action sit, and how much of the page each element occupies. Changing these later is expensive, which is why they are worth reviewing carefully now.