In the web design process it is common that there are several products or developments that must be delivered and allow us to communicate ideas and correct functions or features according to the client’s review.
One of these products are the mockups and there are different ways to create them. There is no one method or technique that is better than another, but there are different options that can be adapted to the specific project you are working on.
In this article we review what are these options and common methods to create mockups when you are in charge of a web design project.
1-Using specialized programs for mockup design
Tools such as UXPin, Figma, Moqups, Balsamiq, among others are specialized platforms that have all the functions and special features to facilitate the process of developing mockups.
These platforms have tools and options for you to create visual elements easily. In addition, they have a simple interface so that users can concentrate on making design decisions and creating mockups quickly.
Both beginners and experienced designers can feel comfortable using these tools because they focus on making the process easy.
Beginners can create mockups easily and experts appreciate that it has a number of tools that suit their needs.
You should be sure to check the limitations of any program or tool you are considering using as although they all serve their purpose, some like Balsamiq or Moqups are more suitable for low fidelity designs.
So keep in mind the requirements of the project when choosing the most appropriate platform for the design of your mockups. The great advantage of any of these tools is that since they are easy to use, once you find the right one you can start designing immediately.
2-Use a popular design program
Although designers with varying levels of experience may opt for specialized platforms for mockups, you may not even consider looking for any of these tools because you are already familiar with Photoshop, Sketch or Illustrator and really appreciate the interface and functions of that program.
If it is a tool that you use in most of your projects, you have years of experience and practice with the program, so it is normal that you have become accustomed to using it.
The great advantage of using design software is the level of familiarity you have with it. It gives you the control you are looking for, from setting guides to the color palette that is used consistently throughout the design.
Because of the versatility of these programs, you can perform a number of important actions that allow you to maintain rigid rules in the case of a project with very detailed specifications.
Although it gives you more control over the final result compared to specialized tools for mockups, translating the design to code can be complicated because necessarily what works well at the design level in Photoshop or Illustrator is not viable in HTML5, so you must find other solutions.
Nevertheless, these design programs already have a prestige within the community and are complete tools that allow you to control even the smallest detail. So if you feel really comfortable working with any of them, there is no doubt that you should use them.
3-Start HTML and CSS development of mockups
If you have only basic knowledge about coding, then it’s pretty obvious that this last way we are going to describe is not really an option.
Luckily, you have others at your disposal and, depending on the project and the time you have, you can use whichever is convenient.
However, if you have knowledge about code, you have the possibility to start the mockup with code.
This is an uncommon option and is closer to prototype territory. But bringing the code forward to this phase can optimize the development process, particularly if you are a designer and developer, as you understand the procedure at a higher level because you have this knowledge.
One of the main benefits of this method is that the process of translating the design to code becomes simpler because in other programs elements such as gradients or fonts are easy to create, while in code it can be a bit more complicated.
Starting to code the mockups directly allows you to know immediately what you can and cannot do. Making decisions is easier as you know the limitations, and since HTML and CSS will be used in the final version, implementing it at this stage could be helpful.
Although this is a totally valid option, it is not so popular, in particular because in order to be able to do it you must understand HTML and CSS in depth.
EN 
ES