This is that first part of a two part post about some great web design tools that I think are really useful to improve your designs, especially if you are looking for inspiration, or some ways to avoid using plugins in WordPress and much more.
1 DuoTone by ShapeFactory
The next is a website called Duo Tone (Link under this paragraph). This is pretty cool. Duo Tones are definitely something that are becoming more fashionable in 2021 and 2022. This is a quick way of being able to create dualtone images especially using Unsplash for free images. It allows you to choose two different colours to create a dualtone effect. Then it shows you the effect based upon some predefined images taken straight from Unsplash or you can go ahead and search Unsplash for something yourself.
For example, search for web design and press enter in the search box. You can see a range of images from Unsplash for web design, and they’re already in dualtone. You can simply go and hover over the circles on the right side, type in or choose your specific hex colour values you want to work with. You can instantly see what colour combinations feel like and how they will work. Then when you’re ready, you can simply click to open up the image you want and the click the download link at the bottom of it. It’s a really really quick way of creating dualtone images direct from Unsplash in seconds.
2 Logo Crunch
One of the things you’re probably going to do when you’re designing a website is dealing with favicons, reducing logo sizes and other image sizes, and you want to know what they look like when you do this.
Go over and take a look at logo crunch (link under this text). Logo crunch is a way of simply uploading your graphics and then checking out what they look like on various different sizes, but also adjusting various different parameters. The crop sizes, things like the line strength, those kinds of things to make sure that everything looks great. So, go ahead and upload a logo. Or just use a random one so you can see how it looks. Then you can view it on various different sizes. The tool gives us a representation of the pixilation on the left hand side and what it would actually look like in a browser on the right hand side. This is perfect when you want to make sure that things look good, such as favicons and so on.
All you need to do is use the options and on the right hand side to adjust various different parameters.
You can simplify things if you’ve a complex or comprehensive design. You can simplify those by using the simplify options. Obviously, it’s going to work better on more complex designs. You can use those options to simplify things to remove any kind of fine lines and things like that, that kind of just get lost in the design anyway. If the image has spaces and gaps, remove them using the the fill holes section.
You can thicken things as well to make sure that everything looks good. Thickening a logo ensures that when we drop down to smaller icon sizes, you don’t lose a lot of the detail. Then you can go ahead you can download your favicon an Android or an iOS app icon.
3 Fluid-responsive font-size calculator
now one of the areas that is really important when working with multiple different devices is making sure you’ve got responsive designs responsive fonts typography those kinds of things now this is something that is quite comprehensive and complex and some people just generally struggle with the whole concept of working with pixels and em’s and rem’s and all those kinds of things. The fluid responsive font size calculator is a very very useful little tool.
With it you you have some instructions on the right hand side how to use it and then on the left hand side there is a calculator so you can work in units of pixels, rem’s or em’s. You can choose the selector that you want to work with and there’s a full list of valid selector types. You can take a look at the font size selector and you can see we can go ahead and make sure that you’ve got the right ones created inside there then all you need to do is go ahead and choose the property that you want to use. Say the range is from 24 to 32, you can see we can choose the viewport size we want to work with and then we can choose the end
query, no end query whether we’re going to use clamp minimum maximum, if you want to
include comments, the Safari fix to make sure it works fine on Safari and then you can go ahead and we can copy that CSS to test it out. You can use the CSS inside our web designs so it’s a very quick way of calculating various different units to make sure your CSS is optimal for working with font sizing across various different resolutions and sizes.
4 Font Pairing Inspiration
Sticking with fonts some people, myself included can struggle with getting great combinations of fonts especially when you kind of become very used to working with very similar fonts like Montserrat open sans. Sometimes you just want a dose of inspiration. I recommend looking at https://www.mixfont.com.
It mixes two fonts together that it thinks will work and you can use those as a starting point. It has over a thousand unique fonts and six hundred thousand pairings in various languages. All you need to do is simply click “start the generator” button and boom there you go. You now have a combination that it thinks will work well together.
In our screenshot example we have Spicey-Rice mixed with Anaheim. The neat thing about this if you scroll down, you will find different layouts to give you an of idea to see what this pairing would look like on a webpage or inside an app. At the top is a hero section if you scroll down, you can see various sections like calendars. You can make sure that the font pairing is what you want.
If you don’t like it then simple click the red refresh icon on the bottom right corner to create new combinations. If you want to lock the font you can, simply click on it to lock it and then just keep clicking the refresh button to cycle through the various iterations until you find something you like. To use the pairings on your site, simple click the embed link at the top to get the Google fonts list and CSS for referencing them. Or just use this as a starting point for font inspiration.
5 Google Web Designer – https://webdesigner.withgoogle.com
Google web designer is a free tool. However, it’s not something you can create entire websites with. It’s not aimed at replacing something like WordPress. It lets you create animated icons and adverts and integrate those into Google Ads and similar. It is worth checking out because it gives you timeline that allows you to design and animate to create cool effects. If you want something quick and easy with no price tag attached to it, so it is worth taking a look at.
I hope you enjoyed the 5 tools mentioned above. Look out for the next post where I’ll discuss 5 more useful web design tools.