Why is it worth to include wireframing in web project

For this purpose you should use wireframes, which are perfectly suited for relatively rapid transformation of an idea into a visual representation of user interface. Depending on the required level of detail, the available budget and devoted time, there are three basic types of fireframes:

• low-fidelity: freehand sketches drawn on paper, typically used at the beginning of working on wireframes. Its main advantage is short preparation time and ease of making changes. Low-fidelity wireframes help in running multiple interactions and in quick visualization of potential solutions that you could use to achieve intended purpose. They determine the direction in which your project should go;

Preliminary design sketch of Back To the Frontend project

• medium-fidelity: usually takes the form of static images prepared via dedicated software (eg. Axure, Balsamiq, Invision). Creation of medium-fidelity wireframes should proceed only when you have more definite vision of the project. In this case great importance is attached to the size of elements, their distribution and the relation between them (e.g. through the use of appropriate grid). The structure is already more thought through and, as far as possible, is using the actual content. On this basis you can now proceed to graphic design;

Example of corporate website wireframe in Axure RP for Plania (Norwegian consulting firm)

• high-fidelity: clickable prototypes. To create them you can use Axure or frontend frameworks (eg. Bootstrap). They provide the accurate representation of website, not only through the actual content, but also through the interactive elements. You can present interactions, use case flows and pages behavior in lower resolutions. Thanks to the large amount of details included in prototypes you can run tests on users and therefore proof your concept at a relatively early stage of the project lifecycle. Development of the prototype is the most time-consuming, so be sure to do it only when you thoroughly clarified the shape of the project.

Wireframe type Speed of preparation Level of detail Interactivity Low-fidelity

✶✶✶

✶ - Medium-fidelity ✶✶ ✶✶ ✶ High-fidelity ✶ ✶✶✶ ✶✶✶

 Tab. Summary of three types of wireframes

In our agency we use Axure RP to prepare a static wireframes and prototypes. We have been using it for more than five years, therefore we can in all honesty recommend this tool.

Regardless of the degree of detail in wireframes, you should be aware of what you gain when using this solution:

1. Presenting potential solutions and website structure
   Presentation of website concept is much easier when you have wireframes at your disposal (even in the form of simple sketch on paper) rather than by using a multi-page description. Moreover, due to the relatively short preparation time (especially with wireframes of lower or medium fidelity) you can present several alternative solutions and base on them your decision regarding the direction in which your project should go.
2. Facilitating the communication
   Similar to the previous argument, imagination works much better when you use visual stimuli (even in the form of general blocks) rather than textual descriptions. Because of that wireframes are ideal for presenting solutions and discussing your ideas. Importantly, because of its simple form, it is easy to add other participants of the discussion to the process of creating sketches – you’ll just need paper and pencil.
3. Encouraging creativity
   The further you are in the process of a working on a project, the more difficult it is to allow yourself for some freedom and creativity. Each change is much more time-consuming and can cause many consequences. Besides, when designer spends a certain amount of time over some parts of the project by fine-tuning it with consideration of every pixel, he might get attached to it and might be reluctant toward making changes. On the other hand, when designer has at his disposal a tool that quickly allows him to roughly visualize ideas, he can let his imagination run wild, easily look over many proposals and introduce adjustments on the spot. As a result this stage of the project generates a lot of ideas that are building the added value of the final product.
4. Testing and improvement
   One of the primary factor that is affecting the success of the project is its continuous improvement. This is achieved by testing and making changes after each test session. Obviously, the sooner you will identify areas for improvement, the easier it will be to make proper modifications. There is no doubt that it is much less labor-intensive to make changes on wireframes. The most valuable in terms of user tests are clickable prototypes - they allow a thorough revision of the assumptions and, if necessary, making relatively quick changes.
5. Saving money, time and effort
   It seems that the most tangible of all the benefits are savings brought by wireframing. At an early stage, before incurring significant expenditures, you get the opportunity to exclude inefficient solutions and choose the most optimal ones. In extreme situation it may even be decided to abandon the project. Given the fact that the cost of developing wireframes takes only a small fraction of the total project cost, it is better that such decision is made at the beginning of the project rather than after its completion.

It is said that a picture is worth a thousand words - this statement perfectly suits the process of designing interfaces. Usually it is not worth to start the phase of the product design process (and the next stages of the project implementation) when there is no certainty of the final form of the interface, or even more generally –of the legitimacy of planned deployment. s Communicating ideas, testing solutions and making quick changeis much more beneficial and efficient when we rely on wireframes.