Defining Wireframe
We can define wireframe like a skeleton, a prototype or a pretty version primitive of the visual of a project. It consists of the representation of diagramming and of site macro structures that is, we present geometric shapes and lines how we think about dividing the interface into sections.
O wireframe does not contain colors, visual identity or content and can be done with a pencil, pen, ruler and eraser, or it can also be done with software such as Adobe Photoshop, which produces a static (and more elaborate) image of a wireframeor if you are working on a slightly more complex project, such as software, it is interesting to use a tool like Adobe XD, which is free, and which can deliver prototypes closer to reality, with interactions and animations, but still maintaining the characteristic of not having colors, visual identity or content.
In this way, the two main objectives of the wireframe are the assistance to the designer when designing the content and application of visual identityand also be the main tool in relation to an initial alignment of the client’s expectation regarding the look of the contracted project.
Tip: Why use Mobile First in Web Design?
Possible variables in a design process and the use of wireframes
There are three variables regarding the function of the wireframes inside design development process and, in this way, we need to have the sensitivity to understand the context where they can or cannot be inserted and the variables that permeate this use.
The three main variables:
- the individual characteristics of the responsible designer;
- definitions within the company we work for; and
- finally, the customer’s level of knowledge in relation to the construction of interfaces.
Below we will clarify a little more about this:
Customer: the external variable
The key point of using wireframe as an approximation prior to presenting the design to the client is precisely the knowledge and ability to critical/constructive analysis his. The ideal time to collect and measure this capacity is in the briefing is at previous conversations to development. Talk to your client and create a greater proximity so that this acquired “professional intimacy” can be enough for you to be able to draw a conclusion regarding his knowledge.
If your customer can understand the primitive function of a wireframeand in it you can already make constructive comments, this ends up reducing the time spent on changes that you would make in the future and also makes the entire approval process smoother, since the client ends up participating more actively in the design process.
On the other hand, if your customer is not aware of the usefulness of a wireframe, you will end up wasting time and create a somewhat strange relationship with your client, as he will end up wondering why he is wasting his time with this. Be sensitive to discern what kind of customer you are serving.
Tip: Using content in favor of Design
Work processes and project complexity
Regardless of whether you are a freelancer or work in a company, you are subject to work and development processes. The project that you or your company is executing can have different degrees of complexity and it is interesting to have several work processes that cover this diversity.
Ensure that for more complex projects you or your company have a step focused on prototyping and wireframe regardless of whether it is presented to the client or not, as this stage has strong influence on the final quality of a larger project because in it we can predict the screens accurately in addition to creating a more cohesive, organized and solid UX and finally the prototype still ends up reducing the time and difficulty of executing the task, as it had already been well planned before.
