Ever wonder what your favorite website font style is and color scheme? Rather than having to use multiple plugins like Font Ninja and ColorZilla to figure these out or screenshotting and putting the image into a font/color finder, you can use CSSPeeper.

CSSPeeper

CSSPeeper

This plugin for Chrome is amazing. It tells you the font styles used for the website including the different variations in the headings and body as well as all the colors used on that page. If you click on specific objects on the screen, it will even give you even more details like the proportions of each container…


For those of us who enjoy adding illustrations to your designs but suck at drawing them, here are some more free-to-use illustration design websites!

Openpeeps

Openpeeps’ homepage
Openpeeps

You can download this library of illustrations for free and include it in your design tools such as Figma, Sketch, Adobe Xd, etc. They come in multi-color or monochromatic and there is a variety of parts you can mix and match between each illustration, such as facial expressions, hairdos, clothing, etc. …


Here are two sites to create easy waves or blobs for either a background, an animated loading page, or animated interaction.

GetWaves

GetWaves

You can create waves of varying sizes, peaks, and choose between three different types of waves to be generated. You can also change the color of these waves to any color you want and the opacity. After that, you can either download the SVG file and import it to your design tool or download the GetWaves plugin on Figma for easier access.

When you create your wave, there are many means to animate it. The one I’ll show below…


Are you looking for new and upcoming UX products or design tools? If so, give ProductHunt a try!

ProductHunt

ProductHunt

Here you can discover new products for a wide variety of uses. You can limit your search to just UX tools by searching UX in the search bar at the top navigation. Once there, you can find a bunch of cool and new design tools that you can use in your own design projects. They range from illustrations for your design library (e.g. Humaaans, Open Peeps) to User Flow Diagramming Tools (e.g. Overflow) and more! …


Have you had the need to remove the background of an image for your designs? These two tools are a quick and easy way to do so but which is better? Let’s compare!

Remove.bg

Remove.bg

First up, we have remove.bg which is a tool you can download or use directly from the web. It is also available as a plugin for Photoshop, Sketch, Figma, and more. It is a great tool to easily remove a background from an image. However, using it as a plugin does not allow you to alter the image, and you are left with however the AI decides…


Looking for another website aside from Behance and Dribbble for your latest mobile UI Design trends? Look no further than Mobbin!

Mobbin

Mobbin

Mobbin hand-picks the latest mobile design patterns from popular apps like Medium, Masterclass, Google Pay, etc. to give users inspirational design patterns to look at. With over 10,000 patterns available on the platform, users can check out what top companies are doing in their designs and incorporate them into their own.

If you are ever stuck on trying to figure out how to create a landing page, a checkout process, or not sure how to show a filter option…


Do you need to showcase your product on a device like a phone, laptop, tablet, etc. for a project, a presentation, or your portfolio? You should check out this website for a quick and easy way to do so!

Mockuuups Studio

Mockuuups Studio

This app is available to download for Windows, iOS, and Linux or you can install a plugin to Figma and Sketch for easier access. It’s up to you if you want to generate the mockups on the app itself or use it through the Figma/Sketch plugin. If you choose the prior, all you need to do is export your Figma/Sketch design…


Am I the only one that feels that logos are one of the hardest things to design for yourself or for your client? There is a lot that goes into designing one because it is the first thing that most people see when entering your site. Here are a few inspirational websites for your own logo designs:

Logomaster.ai

Logomaster

Logomaster is a great tool to powered by AI technology to help you create a beautiful logo. All you need to do is put in the name of your company and select 1 of 4 categories:

  1. Personal Branding

2. Product Branding & Startups


Do you ever get stuck on deciding what kind of typography to use for your designs? Or just looking to get more inspiration on different typefaces and how they look? If so, you should try out Typewolf.

Typewolf

https://www.typewolf.com/

Typewolf is a great tool to find different types of fonts and was created by a designer with 19 years of experience in the field. Font families ranging from Sans Serif to Future Alternatives can be found here and you can easily find the Top 10 for each font family based on the font’s popularity data from over 2,000 sites featured from Typewolf…


If you create websites on Webflow, have you ever thought to yourself — How I wish there was an easier way to get animated icons to make my Webflow websites more interactive and interesting? Well, look no further! Introducing…

Lottieflow

https://www.lottieflow.com/

The interaction icons on here are lightweight (small file sizes) and made to work with Webflow and best of all… it’s free! There are a variety of icons here ranging from arrows to checkboxes, dropdowns to menu navigations, and much more!

You can check out their video tutorials here to better understand how they integrate onto Webflow and give that ‘oomph’ to your web designs.

Hope you enjoyed this find and keep on creating!

Alvin Mac

UX Designer | Photographer. Bringing designs to life with empathetic and creative designs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store