Clearly, when we design, whether a web or a graphic project, our knowledge and everything that we have seen, heard or read is very much involved. We design with objectivity, based on our experience.
However, in the same way that we need a little inspiration, there are also tools that can make the design process easier. The last decision will be taken by us, but it can help us to make decisions or to choose a certain way.
In the blog we have seen different types of tools: to decide font combinations, stock images, patterns, fonts…. So today we will bring you a compendium that covers different elements and that can help us to the complete design process. In the end, as we usually say, everything goes to a box to wait for the moment to be used!
Let’s start!
1. Creating your gradient
Although it seems that the use of gradients is no longer as trend as before, it is still quite present in the design. We have talked about their combinations and uses, so it is no longer a tool to help us in its creation.
In this case we propose webgradients with a selection of gradients that we can easily copy with the HEX codes of the colour or CSS. The library has 180 so you will surely find yours!
2. Choosing a colour combination
Surely you know so much about combinations of colours that you do not need any tools to help you, but just in case … We remind you the infographic about colour, which is sure to help. But if you dare with your own combination, with this tool, you can reach the one that best suits your needs.
Although there are not a large number of them, they are combinations of many types that surely you can use as final or as a first step to get yours. You can easily copy the HEX codes.
3. Checking if your website is responsive
I believe that there is nobody in the world who doubts that our website has to be responsive, so a tool of this type is fundamental when designing a web.
In it we can check the visualization of our web in different devices and also in horizontal or vertical. Obviously, there are not all devices inside, but there are so many that they can give us a great idea of how they will be displayed.
4. Analysing your stylesheets
It is the perfect tool for CSS lovers. With it you can see all the styles that are included in a certain web, which makes it very useful if we need to look for a colour or a font.
Just enter the URL and if you want it to be displayed in a specific browser.
5. Using your pattern
If you need a pattern for your website this is your tool. With it, from a library you can choose the pattern that best suits your needs and modify the colours to fit your design.
Once chosen you can easily copy the CSS code and use it on your website.
6. Creating your Mock-up online
We have shared several resources to create mockup, but they are typically to download. In this case we bring you this web where you can work online with any of these over 2500 examples.
The way of working is very simple. Choose the mockup you like and just upload the image and then download your mockup. In addition, you can find the mockup by categories in case you are looking for some specific design.
This is the first part of the post, which we wanted to divide in two. In the next delivery we will share other tools that together with these will make the design process easier. We hope you liked it and above all that you find it useful.
