Mock up web pages quickly and easily with Gliffy’s wireframes

A wireframe is a skeletal outline of the components of your web site so that you can better see the relationships between them. A web site wireframe is a great way to clarify your vision for an entire web development team.

Plan your site

A wireframe is a great way to ensure clarity and consistency during web site development: it’s like creating an outline before detailing the specifics. A wireframe uses basic boxes and lines to define the spaces on the page, to clarify branding and navigation, and to indicate where text will reside — before the actual images and content have been created.

Everyone on your development team can benefit from the wireframe:

• During development, the team uses the website wireframe to sketch ideas, verify plausibility, and estimate time and costs for development.
• Coders view website mockups to ensure they are developing a framework that will accommodate the vision. They also use website wireframes to verify they are including the right branding and navigation on each page.
• Writers use the website wireframe to judge space available and to determine what content is needed for each page.
• Graphic designers create consistent branding to work across the pages defined in the web wireframe.
• Testers use the website wireframe to verify content, branding, and navigation are accurate to plan.

Build it, change it, share it

Creating a website wireframe is easy with Gliffy's free wireframe tool. Just drag and drop boxes, buttons, and lines from the web wireframe tool shape library anywhere onto the page. Then add text to your website wireframe to create a clear web site mockup.

Unlike Visio and other expensive, installed software, Gliffy lets you share and collaborate with anyone, on any platform, in any location. And unlike other software that’s designed exclusively for wireframes, Gliffy lets you improve the resolution of your wireframe over time, by adding colorful shapes and uploading final images.

Try It Now!