A mockup is a version of how the site will generally look. There are two kinds of mockups: a completely image-based mockup, and an implemented HTML-based mockup. An image-based mockup is a picture created to represent what the website will look. It has no functionality, but it is a good way to discuss possible visual designs of the site. The second kind of mockup is an image-based mockup that has been converted to HTML. It may not be very functional, but it does show how the site will look as HTML, not just as an image.
A wireframe is the entire site without any of content. Usually this comes after the decided-upon mockup has been created and turned into HTML. This could be thought of as an outline of a book. It will include all the titles, links, etc. that will be in the final production, but will lack any of the actual content. Unlike mockups, a wireframe is completely functional, and gives a great way to test the navigation scheme on the site.
We often need a tool to quickly mockup user interfaces to help Stakeholders/Client envision the screen interactions, data structures, and/or overall look-and-feel of a proposed system that we are helping define requirements for.
Popular GUI Mockup & Wireframe Tools:
Justinmind - http://www.justinmind.com/
Balsamiq - http://www.balsamiq.com/
DesignerVista - http://www.designervista.com/
Firefox Pencil Addon - https://addons.mozilla.org/en-US/firefox/addon/8487
Mockup Screens - http://mockupscreens.com/index.php?page=Free-Download
A wireframe is the entire site without any of content. Usually this comes after the decided-upon mockup has been created and turned into HTML. This could be thought of as an outline of a book. It will include all the titles, links, etc. that will be in the final production, but will lack any of the actual content. Unlike mockups, a wireframe is completely functional, and gives a great way to test the navigation scheme on the site.
We often need a tool to quickly mockup user interfaces to help Stakeholders/Client envision the screen interactions, data structures, and/or overall look-and-feel of a proposed system that we are helping define requirements for.
Popular GUI Mockup & Wireframe Tools:
Justinmind - http://www.justinmind.com/
Balsamiq - http://www.balsamiq.com/
DesignerVista - http://www.designervista.com/
Firefox Pencil Addon - https://addons.mozilla.org/en-US/firefox/addon/8487
Mockup Screens - http://mockupscreens.com/index.php?page=Free-Download
