Wireframe

Wireframes are an important step in any screen design process. It allows you to define the hierarchy, the visual backbone of your design, making it easier for you to plan the layout according to how you want your user to process the information. A wireframe separates the graphic elements from the functional elements in such a way that teams can easily explain how users will interact with apps/site.

Stencils Included in Grafio

50 objects

History

The term wireframe actually predates its use in web design. Originally, wireframes were used to show 3D objects in Computer Aided Design (CAD). In web design, ‘wireframes’ are visual guides that represent the skeletal framework of a page or app screen. They commonly depict functional layout: including interface elements and navigational systems. The wireframe usually lacks typographic style, color, or graphics, since the main focus is on functionality, behavior, and priority of content. This is a direct consequence of their CAD history. In other words, it focuses on what a screen does, not what it looks like.