A medium-fidelity wireframe is a digitally created interface plan with more accurate spacing, layout, sizing, and component representation than a low-fidelity wireframe, without pixel-level specificity. section 5.3.1
Use it to communicate structure and hierarchy before committing to final visual design:
- Create it in Figma, Balsamiq, or Axure RP for more precise layout and component decisions. section 5.3.1
- Apply typographic weights and grayscale contrast to show content hierarchy and emphasize important components. section 5.3.1
- Use placeholder image shapes, optional line drawings, icons, real navigation and headings, and filler paragraph text. section 5.3.1
Figure 5.8 An example of the top part of a wireframe that defines a site’s structure. This wireframe focuses on the hero section of a home page and the content immediately below it.
Inspect a wireframe example focused on a home page’s hero section and the content immediately below it. section 5.3.1
