Okuzeka
UX/UI Design vocabulary · Wireframes and Prototypes

Wireframe

Meaning in UX/UI design, with examples

/ˈwaɪərfreɪm/nounCore term

In UX/UI design, wireframe means: A simple, usually black-and-white drawing of a screen that shows where content, buttons and navigation will go, without final colours, images or styling.

In Turkish: wireframe, tel kafes taslak, iskelet taslak

How it is used

Made early in a project, on paper or in tools like Figma, to agree on structure before visual design starts. Also used as a verb: 'Let's wireframe the checkout first.' Grey boxes with an X often stand in for images.

Example sentences

  1. I sketched three wireframes for the home page so we can compare layouts.

  2. Don't worry about colours yet; this is just a wireframe.

Common collocations

  • sketch a wireframe
  • low-fidelity wireframe
  • wireframe the flow
  • share the wireframes
  • mockupA static, realistic image of a screen or product that shows the final colours, fonts, images and spacing but cannot be clicked.
  • prototypeAn early, interactive version of a product or screen that people can click or tap through, used to test ideas before anything is built.
  • low-fidelityDescribes an early design, wireframe or prototype that is rough and simple, without real colours, images or detailed content, so it is quick to make and change.
  • layoutThe arrangement of text, images, buttons and other elements on a page or screen, including their size, position and the space between them.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Wireframes and Prototypes

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: