Wireframe Element Count Calculator

Work out wireframe element count instantly with clear inputs, formula shown and shareable results.

About Wireframe Element Count Calculator

Total work is screens times elements per screen times the number of states each element needs, converted to hours at the per-state design rate. States are the hidden multiplier: default, hover, focus, disabled and error turn an 18 element screen into 90 pieces of work.

Formulas

Work items

states = screens x elements per screen x states per element

Hours

hours = states x minutes each / 60

Worked example

With the default values below, Wireframe Element Count Calculator returns Element states to design of 648. Change any input above and every figure here is recalculated in your browser.

Inputs used

Number of screensminimum 1: 12
Interactive elements per screenminimum 1: 18
States per elementminimum 1: 3
Minutes to design one element stateminimum 0.1 min: 4 min

Results

Element states to design: 648
Distinct elements: 216
Estimated design hours: 43.20 h
Hours per screen: 3.60 h

Step by step

1Values used
2Work items
3Hours
4Element states to design= 648
5Distinct elements= 216
6Estimated design hours= 43.20 h
7Hours per screen= 3.60 h

Assumptions and limits

The result is derived only from the 4 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to 2 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the Wireframe Element Count figure worked out?

states = screens x elements per screen x states per element. Total work is screens times elements per screen times the number of states each element needs, converted to hours at the per-state design rate.

Why does this matter?

States are the hidden multiplier: default, hover, focus, disabled and error turn an 18 element screen into 90 pieces of work.

What do I need to enter?

Enter number of screens, interactive elements per screen, states per element, minutes to design one element state. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.