Visual content: Sketches, wireframes, mockups and prototypes are an essential part of every design process, although, in some cases, certain steps are often skipped and even merged due to the amount of time available to finish the project.
However, there is no denying that all these phases are important to the design process, particularly if it is a digital project, although in print projects the exact same process is followed, each one is important and helps to keep us creative and spot mistakes.
In this article we give you some essential tips that you should put into practice in order to improve all phases of the design process.
Learn about the design process
The design process can be considered as a progressive process. It is common to start with pencil and paper sketches until you gradually polish the design and arrive at the final product. The key point is to know when it is time to move on to the next phase.
It is best to start with pencil and paper, this is the phase in which you will probably make many changes until you come up with the sketch you think is the winner.
At this point, you don’t even take into account the colors or typography, but you work on the layout of the elements. It is therefore advisable to work with simple pencil sketches.
Once you have the “winning” sketch, you can move on to the wireframe, that is, when your sketch goes digital. At this point it is important to work with grids and determine how many columns we are going to divide our workspace. In contrast to the sketches, we are already working with exact proportions.
Then, the design goes to the mockups, which are used to test how the design will look on the device. It is completely static and does not incorporate any interactivity. Finally, the prototyping phase is where interactivity is added to the application and the necessary adjustments are made.
It is important to emphasize that corrections are made at each stage, but they should be smaller and smaller as the process progresses.
Use the sketches to identify potential problems in visual content
Working on sketches is a great exercise in identifying problems and possible solutions. Every detail of the design answers a certain question, for example if a certain color is used because it makes a better contrast or the font type identifies better with the brand personality, etc.
Every detail concerning the design answers a certain question regarding the functionality and usability of the final product. And if you are not asking yourself this question when making your sketches, then you should start asking it. You can avoid major problems later in the process.
When you work in a team or in meetings with your client, it may be common for them to tell you if they want to change the color or typography. In these cases, it is important to ask why, it is the only way to understand what is the design problem that has been found in the sketches or wireframes.
Use images and appropriate text in your mockups.
It is obvious that at this stage of the design process, issues such as the images to be used and the advertising text are not even in your mind.
However, you know that, as a designer, images have a great communicative power and if you choose them incorrectly or randomly they could have a negative impact on your mockup. On the other hand, if you decide to leave this space blank, your clients may not get the message you are trying to convey.
So what to do?
Well it all depends on the amount of time you have available, it is obvious that at this stage the images you choose are not definitive but they could help to set the mood and if you are presenting the mockup with clients or teammates, it is important that they understand what has been your main goal in making certain design decisions.
Details like the ones mentioned above help differentiate your initial sketches with a high quality mockup, closer to the final product. Then, in certain phases, it is important to give due importance to the images, icons and text of your prototypes.
EN 
ES