Components and Conventions of a Wireframe

A wireframe is a low-detail plan of a page or screen. It shows where each component sits and how screens connect, but not the finished appearance. Keeping it simple lets you sketch several layouts quickly and agree the structure before artwork begins.

Placeholders instead of real content

Text, images and video often change dynamically: a news page swaps its stories daily, and a canteen page swaps its menu weekly. A wireframe cannot predict that content, so it uses placeholders that stand in for whatever ends up there.

• Images are shown as a crossed box: a rectangle with an X drawn corner to corner inside it.
• Text is shown as straight or wavy lines, or as dummy text such as a repeated filler sentence.
• Buttons and text boxes are shown as squares or boxes, so the space they take up is clear.

Line thickness carries meaning too. In a weather app wireframe, a thick line for the city name and thin lines for the forecast suggest the city name will be set much larger, so the screen's hierarchy is obvious at a glance.

Layout, links and GUI objects

Every component needs a clear position: which corner holds the logo, whether a search bar runs across the top, and how much space the main content takes. If it is not drawn in place, whoever builds the screen has to guess.

Graphical user interface (GUI) objects must be made obvious rather than implied, because they are what the user clicks or taps. A menu bar, a set of buttons and breadcrumbs (the trail such as Home > Clubs > Chess Club) should each be drawn and labelled.

Links and actions between screens should be shown and labelled, for example an arrow from a login screen labelled "opens the dashboard when the details are correct". Without these labels the wireframe shows one screen but not how the user travels through the product.

In a museum visitor app wireframe, each exhibit photograph is a crossed box, with a box labelled "search exhibits" and a labelled arrow to that exhibit's audio guide screen. Colour and photography are undecided, yet the designer could build from it.