{"id":17061,"date":"2025-01-28T09:38:02","date_gmt":"2025-01-28T09:38:02","guid":{"rendered":"https:\/\/www.andacademy.com\/resources\/?post_type=glossary&p=17061"},"modified":"2026-02-27T10:26:25","modified_gmt":"2026-02-27T10:26:25","slug":"wireframe","status":"publish","type":"glossary","link":"https:\/\/www.andacademy.com\/resources\/glossary\/ui-ux-design\/wireframe\/","title":{"rendered":"Wireframe"},"content":{"rendered":"

A wireframe is the visual representation of the interface of a product, website, app, etc. In simpler words, it is a skeletal structure that represents the framework of a website or app. A website wireframe is also called a page schematic or screen blueprint.<\/p>\n

A wireframe in UI UX design<\/a> is a two-dimensional, basic structure that conveys how different elements are placed in relation to one another. An essential tool for UX designers<\/a>, it helps plan the layout of the interface before finalizing more minute details. <\/p>\n

\n

Not to be confused with<\/h3>\n<\/div>\n
\n
\n
\n

Prototype<\/strong><\/p>\n

\nIt is a rendering of the final product and demonstrates how a user interacts with it.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n

\n
\n

Mockup<\/strong><\/p>\n

\nIt is a static and realistic rendering of what a product looks like.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n

Types of Wireframe Design<\/h2>\n

Check out the three types of wireframe design below:<\/p>\n