Yes, this article is about the little squares and arrows that we do or should do in our UX process.
Many people, from many different departments from product teams or agencies, neglect and don’t take seriously the importance of structuring ideas, structuring interaction, and structuring experiences.
When we intend to build a house, we look for an expert in the field that can help us design the structure of what may become our home. As a home we want it to be previously and meticulously well studied so it has a sturdy and stable foundation before it is time to move in. The walls have to be resistant and strong, the divisions of the house well structured to face the needs of our family, the roof strong and consistent, and the hallways easy to roam so that reaching the desired division of the house doesn’t trigger a migraine.
Then, during the process of designing a digital experience, should one not structure the “home” in the same way? The latter will be visited and used by thousands of users whose needs differ and look for different solutions.
Wireframe is nothing more and nothing less than the structure of that “home” — where we put the divisions we want and where we want them, and, of course, where we define the hallways that will allow us to access easily where we want to reach.
This should be the primary process in the development of any project, and it should be collaborative. It’s important to involve the entire team in this process without neglecting, equally, the involvement of the client — this step is specially crucial for success. All team members have different ways of navigating and may play the role of different profiles, reflecting as consequence, the behaviour of those whom will become the end users — this is a simple and objective way of performing an User Testing exercise. In this exercise it will be possible to outwit primary navigation problems that would harm the usability by the users in the future. It is immensely important that all these problems are detected and tackled at this stage, so that when the project is designed, the latter has a sturdy foundation at its base and it is properly structured. This will bring much less complications in the devlopment and programming phase — the architectural blueprint is essential for the sucess of engineers likewise.
It is of considerable importance to highlight that even after the project is structured, it should be once again analysed, questioned, doubted, and analysed once again, and many other hesitations expressed. Ultimately, disccussed! Consequently, a good structure will be obtained for the next stage.
There are some tools that simplify, by far, the process of wireframing. These products are designed to facilitate the process and the majority can be used online. These are composed of inumerous graphic elements such as Boxes, Headlines, Arrows, amongst others, that through a simplistic system of Drag&Drop contribute to the construction of our wireframe.
I am going to introduce you three examples, one of which I currently use. For the others I leave you with a brief description of the product.
It is the product I use nowadays — I draw in Photoshop or Sketch, export the Boards and do a small prototyping.
In-Vision is one of the most complete tools out there, created by designers for designers. It allows us to develop prototypes, either in the wireframe phase or either in the design phase. It also allows us to design workflows and to receive feedback of people we share it with in real time, be it members of the team or the client itself.
Axure RP gives you the wireframing, prototyping and documentation tools needed to make informed design choices, persuade any skeptics, and document your design.
This program has a user-friendly interface that lets you drag and drop elements to create a mock web page or App; enabling rapid prototyping and getting your ideas across fast and without fuss.
If you enjoyed reading this article, I would appreciate
it if you hit the “Recommend” button.
Filipe Moreira, Digital Art Director at J. Walter Thompson Lisbon | Portugal