Wireframes in web design can increase the designer’s productivity and reduce the back and forth between the designer and the client during the development process. It allows for proof of concept visualization and sign-off, and reduces the need for alterations after the fact. It is nearly essential for larger websites with a lot of content, but can be just as useful for the smaller websites as well.
Wireframing is the initial phase in the web design process, and this added phase improves communication between the designer and client in order to create a better website that suits what the client really needs and what they’re looking for.
OneXtraPixel has a fairly complete wireframing list of both off and online tools along with a good discussion on them and why a web designer might use wireframing for their initial design phase.
I have started using MockFlow and want to share my experiences with it. MockFlow is both a design and collaboration mockup tool with a wide range of capability. Their website lists an extensive array of wireframing features for it’s various components: Editor, Library, Publishing, Collaboration, Business Features and a few others. Here are a few for it’s Editor:
- Easy-to-use and sophisticated interface
- Provides all the editing functions you need
- Presentation mode to test wireframe interactions
- Zoom mockups with auto-size function
- SiteMap creator with pages and folders
- Interactive visualization of SiteMap
- Graph, 960 grids and Rulers are provided for layout
- Pages can be applied with multiple masters (recursive), to avoid rework
- Support for manual and auto revisions of mockup
They have a free version for both online and desktop use and I have spent a few hours working with it. I find it quite intuitive and was able to slap something together fairly quickly. I have not had a chance to work with all of it’s features, but was impressed enough to see the potential and am looking forward to incorporating it into my workflow. Click the image on the left for the full view of my first wireframe mockup with MockFlow.