Wireframe Examples

The following wireframes are of the sample web page that I created using Florida Hospital as an example. There are two styles of wireframes shown below and both are useful.

The “Symbols” style wireframes make use of symbols and have a clean look. Text and titles are represented by lines or bars. Pictures are shown with a box icon for “images”.

In the “Balsamiq” style, the wireframes of the web pages have the look of “hand drawn” even though all of the wireframes comes from drag and drop elements in the Balsamiq program. In the “Balsamiq” style the wireframes have lines for text and boxes for images.

Also shown at the bottom of this webpage are several Smartphone wireframes. The mobile wireframes for smartphones and tablets can be designed at the same time as the desktop web browser wireframes. This enables the design team and stakeholders to include the mobile design when working on the site design.

All of the wireframes shown can be made fully interactive so all stakeholders and team members can view these and add comments and annotations.