The creative work of a web designer involves many different stages and nuances. It's not just about laying out grids, positioning elements, drawing buttons and lines, placing headers and images. It's also about seeking inspiration, finding not just gradients but interesting color combinations; it's long hours spent reviewing icon and font sets, and so on. And honestly, the latter can often be the hardest part.
Let’s admit it — we usually quickly decide what goes where on a page, but figuring out how to "draw" it all, how to "color it" — that’s when it gets tricky. And we don’t always remember the idea that “what’s new is well-forgotten old,” and even if we do, we often don’t know how to make it look modern.
In this piece, we’ll explore some tools and resources that are not only used by web designers to varying degrees but also help find inspiration and interesting design ideas — maybe even try something new. These include typography tools, icon selection, background utilities, and more. The workflow isn’t just about Photoshop and its analogs or design showcases like Awwwards, Behance, cssdesignawards. Tools for more specific tasks can be just as useful.
Font Playground
A curious font tool that allows designers to “play” with various font parameters and even export the CSS code. All font changes behave as if you were working with separate files for each property, though in reality, everything is saved in one shared file for that particular font.
It’s interesting at the very least to experiment in this tool. You can quickly explore different font styles, variations, and view real-time results to apply directly to your project. It also generates CSS style data for developers. You can even input your own language text to preview how the font performs in your actual content.
Pair & Compare
Modifying a font is one thing — tweaking its settings, creating interesting styles. But it’s another thing entirely to see how the font will look in design — how readable and visually pleasing it is.
Pair & Compare helps you select the right font. You can choose from fonts installed on your computer and Google Fonts. There are also settings for size, italic, weight, line height, and color.
There are also global settings for color, paragraph style, and text block size. You can select the type of content: headline, body text, etc. The final result can be copied as CSS.
The best part — you can enter your own text (in Russian or other languages) and select a fitting Cyrillic font. Just highlight the existing text, delete it, and type your own. The tool will then let you fine-tune the font separately for each section.
It’s an unusual tool, but most importantly — it’s visual. Yes, it takes time to test combinations, but the ability to preview live text quality is worth it.
Color Wheel
We’ve already talked a lot about color and palette selection, but here’s another color tool. Some might even find it more convenient than others.
So…
You get a wheel made up of various color circles. In the center, you can set the number of colors you want — for example, 1, 3, or even 256. We chose 23 for this example.
On the left, sliders adjust the overall Brightness, Saturation, and Hue. Say you want to pick a specific blue. Click on a circle, and additional controls appear on the right — letting you fine-tune that specific color. With a few tweaks, you get a rich blue.
All selected colors are listed in a column with their hex values. So if you have 256 colors, you’ll get 256 hex codes in the sidebar — a very long list!
Bottom line: unusual and convenient. You can do all this in Photoshop too, but some may find this tool more intuitive.
Scale
A curious name for this tool. But Scale gives web designers the ability to see a gradient of color shades — from dark to light — within a selected hue.
For example, we chose a lavender color (#9A64E4) and see how, with 14 variations, the shades are laid out. You can tweak how dark the ends go, how far the hue shifts, how bright the right-side tones are, and how many there are. It creates a nice, clear color scale.
All parameters are set with sliders or by entering numbers in fields. You can then hover over any shade to see its hex code.
CoolHue
A versatile gradient selection tool. On one hand, it’s a coolhue.json library that’s useful for developers. On the other, all of these ready-made gradient sets can be imported into Photoshop. On the project page, there's a link to a *.grd file.
After that, just select the Gradient Tool in Photoshop, go to the control panel, click the gear icon, and add the downloaded file. New gradients will appear automatically and are ready to use.
As they say: you can never have too many gradients. In web design, the more options — the better. Each gradient can be tweaked individually, lightened or adjusted in hue. But the default sets are already visually appealing and well-balanced.
Gradient Joy
Another tool for working with gradients. The highlight here isn’t just the wide selection of gradients — it’s the ability to set their size.
For example, let’s say a 350x600px section of your design needs a gradient background. You could create a rectangle and fill it manually. But here, you can browse the library, pick a gradient, then enter the exact size — done.
The gradient’s URL is then added to your code, and during site operation the background is loaded automatically from the web. Examples below.
UnDraw
If we had to describe this tool in two words: a huge collection of SVG illustrations. The special thing? All the graphics are free and attribution-free. You can customize the color scheme of all illustrations — just click the color box at the top of the page to set your palette.
Click on any image to download a PNG version for use in blogs or creative projects. Or right-click the green download button and choose “Open in new tab” — this opens the original SVG in browser with full color.
Free Illustrations
Another large collection of free vector illustrations for various themes and use cases. All graphics are categorized, downloadable in bundles, and updated weekly. Everything here is drawn by one artist — Lukasz Adam.
Inside the archive you’ll find high-resolution PNG images — large, crisp, and easy to scale, edit, recolor, or crop.
The collection includes icons (PNG and SVG), logos, patterns, themed compositions, illustrations, and more. The style blends clean graphics, linearity, bold color, and a touch of artistic flair — all of which are trending and won’t go out of style anytime soon.
Free Icons
Elmira Gokoryan shared a set of line icons on Behance covering a range of topics. They’re free to download and use however you like. Some icons are animated, some static. Each icon comes in AI, EPS, and PNG formats and three styles (monochrome, colored, and outline). The full set includes 150 icons for websites, apps, and projects.
Henrik Østergaard created a set of 200 vector icons for Adobe Illustrator.
If you need themed icons — there’s a medical icon pack as well. It includes 60 icons, each in three different styles, labeled with their meaning, and provided in PNG and SVG formats. Full details are on the creator’s site.
Pixelify
A constantly updated resource with design freebies — fonts, photos, illustrations, patterns, PSD mockups, and more. There are many such databases, but this one is relatively new and often features exclusive work.
You can upload your own work or use others’. Both free and premium assets are available. Everything is visually appealing.
Conclusion
Web design involves a wide array of tools and resources. Designers use nearly everything you can imagine — even tools for analyzing UI efficiency and color psychology.
We’ve only covered the most essential things that can help with nearly any website or app. But even if you're just creating graphics or background images, these tools will serve you well. Fonts, colors, gradients, icons, and image databases — they’re the elements that often overwhelm designers. Sites may look similar structurally, but differ in small things like icon styles, vector illustrations, or themes. Even icons for menus and navigation — while often similar — vary in line thickness, color, or presence of elements, changing the design’s feel entirely.
Designing a website, like sketching on paper, is a creative process that’s hard to do from a template. But one thing to always remember: you can’t cram everything into one project at once.