Author: BK Vijay
Wireframes and Mock-ups are typical techniques used before any website development process. In order to save time and effort, generally many programmers who work on small websites directly create mock-ups using Photoshop before the design process, skipping the wireframe concept. However as per design standards, mock-ups should be created based on the structure, or framework of the confirmed wireframe deliverables. Once wireframe layout is approved, companies move forward with creating mock-up screens which has very close visual appearance to final website layout. Before we understand the implications of each process on the website design let us get a brief idea on each concept.
Wireframes
Basically, wireframes had great importance in the olden times when there were no computing tools to produce real time drawings about the website architecture. They are skeletal structures that demonstrate how well we can fit all the page elements into a layout without giving the actual colors or graphics. These layouts are user interface visual models or more like blue prints that describe the informational hierarchy, placement of elements and website navigation. The framework mainly includes shapes and lines that designate the position or size but do not focus on the aesthetics of the elements like color or style. Wireframes are very flexible to iterative design process, easy to rework on the enhancements & alterations which will later translate into mock-ups once they are confirmed.
Mock-ups
Mock-ups are high fidelity realistic designs that are built on top of wireframes having very close appearance to the end result. Unfortunately, there are many tools available in the graphic designing that allows the website designers to create mock-ups directly without going through the Wireframe process. A typical mock-up design focuses on overall appearance including color, style, logos, choices and other aesthetic aspects. It is almost like realistic demo giving the actual final website look alike which later can be programmed by using HTML or CSS code, style guides, or graphical assets.
Implication on website design
Despite their similarities, both wireframes and mock-up concepts have their own importance in website development. It basically depends on the requirement whether to make mere sketches capturing the usability and functionality or develop the models that give actual look and feel of the website. When compared to mock-ups, Wireframes are transparent, easy to iterate in multiple versions with just simple alterations. Mock-ups are typically used in a custom design situation where the companies that do the website designing for the client show it as a replica of the final product. However, the process gets more complicated and expensive for the web designing companies if customers are not happy with the mock-ups and need repetitive changes in the format.