It’s well known that developing a prototype of your product (no matter what kind it might be) is important before you go into mass production. The reason for this is quite simple- it’s risky to manufacture something in quantity without knowing its sales potential. Developers would be taking a huge risk if they invested lots of money in producing high volumes of their product before assessing whether it is viable. Many create a prototype beforehand, but does this same principle apply for websites? Actually yes, and one type of prototype of websites is called “wireframes”.
What is a wireframe and how can I design one?
A wireframe is a sketch of one page of your planned website. You could decide to make a wireframe of your homepage, for example. Several wireframes form a website prototype. There are two types of wireframes. One is called static wireframe and the other type is called dynamic wireframe. With static wireframes you visualize your ideas and therefore make communication easier within the team. This kind of wireframes could be designed with Microsoft PowerPoint for example, but it’s quite limited in its functionality. Dynamic wireframes are more elaborate. They are clickable and simulate the real website. With these clickable wireframe you can go through your planned website as if it were real. This is really useful for usability testing. As far as I know one web-based prototyping tool is on the market, which includes the feature of usability testing within the editor. So you create clickable wireframes and then you can test them right away. When the potential user is not satisfied with the created wireframes, he might not like it or he has difficulties to navigate through the content, it is easy to edit your wireframes until you have a well-performing prototype. Then you can start programming it without getting worried whether your ideas will work out as you planned them to.