The use of handy tools in your design process generally saves you a lot of time and that works a lot more pleasantly. Which tool do we use to easily share our prototypes or which tool is the best to download fonts? We have asked our own designers which tools they prefer to use so that we can list these tips for you. Read on to learn more about the four design tools: Sketch, Anima, Google Fonts, and InVision.
1. Sketch
One chooses Adobe XD, the other goes for Figma. We within Social Brothers choose Sketch, because there are many plugins available for this that make the life of a designer a lot easier. The focus within the program is on designing the user interface. The arrival of workspace also allows working in one document at the same time.
As a designer you increasingly have to take into account all kinds of different design formats for, for example, mobile devices and retina displays. With Sketch, it's easy to adjust the dimensions and pixels of your design, avoiding unnecessary work. It is easy to see within the program the dimensions and proportions needed to work on a 'grid'. Sketch helps our designers to work neatly in the grid.
The tool gives the possibility to infinitely insert functions such as the use of shadows, and borders. In addition, Sketch has an Export All Feature. Because everything in the tool is vector-based, you can easily export your designs in JPG, PNG, PDF and optionally in two formats.
'Actually, Sketch is three tools in one: a tool for interface, wireframing and for illustration elements such as logos and vectors.'
2.GoogleFonts
Google Fonts is a handy free tool where you can easily download different fonts for your texts. In total, Google Fonts offers a total of 405 different fonts. Many WordPress themes already offer different Google Fonts so that you can use them in your texts.
Google Fonts is a budget-proof tool, it simply gives you the opportunity to use different fonts. You can find different fonts via the website and then download them to use in your expressions.
In fact, the platform is self-explanatory. A handy tip: when you click on the name of a font, you will be taken to the overview page. Here you can find all variants of your font such as italics, bold, etc. If you scroll down on this page, you will see the heading 'Popular Pairings'. This is an interactive overview that shows other fonts that match well with your chosen font.
'Google's font library is very extensive and can be easily called up by developers. However, where Adobe XD has almost the same, you have to create projects here before you can use a font.'
3. Animation
De plugin from Anima we use for automatic alignment of elements. This way you can place elements at a fixed distance with 1 push of a button and easily reposition them.
Developers can use and export the designs to React/HTML code. This saves a lot of work, they don't have to recode the user interface. Our designers personally use the tool Zeppelin for the transfer of designs (keep an eye on our page because we will tell you more about this tool soon).
The program offers a revolutionary feature, it keeps all designs in one place, allowing the parties to make changes using code or design tools. Useful for both parties!
“Our favorite Anima feature?Automatically aligning elements. This way you can place elements at a fixed distance with one push of a button and easily reposition them.'
4. InVision
InVision is a handy tool to present the designs of prototypes. InVision is an online environment in which designs can be viewed. For example, you can send a link to view the designs in the browser. When you view the designs through a browser, they are most similar to the version that eventually comes online. So they are visually more representative than a regular PDF. If you make adjustments to the design, these are immediately adjusted on InVision, so that your design is always up-to-date.
It is also possible to add interactive elements via InVision. This allows functionalities to be simulated so that the design gives a comparable experience as the final website.
Despite the fact that the InVision closely resembles the final website, there are still clear differences. InVision provides a static sketch, which means that not all interactive parts such as a button, menu or animations will work and have to be added later in the development phase. In addition, the final text and image are often still missing.
Tip from our designers: With the plugin Craft you can easily upload your design via Sketch.'
Now you know all about the four design tools our designers use in their projects. Curious about the other design programs that can be found on their desktop? Keep an eye on our website because there will be one soon part II: 4 Design Tools recommended by our own designers online with four more of our recommended design tools!
In the meantime, if you want to know more about our design services, check out our services page.
