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
free wireframe templates, or by designing
a custome webpage.
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 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.
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.
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.