Wireframe Template

Wireframe Template

The first step in designing a website or web application should be to mock up the design with a wireframe tool. This allows the structure of the web site (and resulting user experience) to be optimized without getting bogged down in implementation details.

Templates provide a starting point for a design, which can be filled in with specific of the particular application. Stencils are common template components like selection buttons, navigation links such as 'breadcrumbs', page tabs, tables, and tree-based display of text.

Wireframe templates can be converted into your custom web page by modifying free wireframe templates, or by designing a custome webpage.

Wireframe Software

Three of the most popular mockup tools are Balsamic, Mockflow, and (only for Mac) Omnigraffle. Wireframe templates are available for each of these software tools.

Balsamiq map template


Balsamiq Mockups To Go offers Balsamiq templates for web applications, such as


Mockflow wireframe templates include a blog post example (see under preview Templates/Blog Post Example) and a portfolio example (under preview Templates/Portfolio).

There is also a video showing how to create your own template in Mockflow.

Mockflow Android controls

Android Applications

Balsamic: The Balsamiq Android library has many Android stencils including a set of Balsamiq Android controls

Mockflow: The Mockstore has many Mockflow stencils for building Android wireframes, including a mobile login screen, mobile form, and an app store button (see previews in the Mobile category).

Omnigraffle: Graffletopia has a wide range of Android stencils.

Omnigraffle touchscreen transitions

iPad Applications

Balsamiq: The Balsamiq iPad library has templates including the iPhone home screen and the iPhone app store.

Mockflow: Has iPhone app template stencils (see preview under Mobile/iPhone App Template).

Omnigraffle: Has iPhone and iPad stencils, including iOS gestures and touchscreen transitions.

© Copyright 2014