Module 06 · 20 min
Wireframe fidelity levels
A wireframe is a layout of screens before final visual design. Fidelity means how much detail you add. Start low so you can change structure cheaply.
Low-fidelity wireframes
Very rough layouts. Little detail about specific content. You may divide the screen into zones or blocks. There is no strong sense of scale, grid, or pixel accuracy.
Medium-fidelity wireframes
A more accurate layout. Specific components get size. Buttons look different from text links. Text weight can separate headings from body copy. Still black and white, or shades of grey to show prominence — avoid final images, colours, and font styles.
High-fidelity wireframes
Pixel-specific layouts, often on a grid. Real images, typography styles, and colour when appropriate. Little or no placeholder text. Responsive behaviour and fluid widths if you are prototyping.