FREE UX design resources 2018: templates, tools and inspiration

As UX professionals, it’s important that we stay on top of our game when crafting web and mobile experiences for people to enjoy. That means we have to keep our eyes peeled at every opportunity.

But user experience design is more than just knowing the latest trends; having a virtual toolbelt of reliable and useful templates, tools and inspiration can help any UX designer work better and become more efficient.

Let’s take a look a handful of the best resources available for free so that your life is easier and your work gets noticed for all the right reasons.


Undoubtedly, you’ll need to use icons when you’re making websites and mobile apps. They make up a big part of the user experience; communicating in a way that words can’t. Icons should be clear and not too metaphorical — this can sometimes hurt the UX design if the icon is too esoteric for users to understand.

Ionicons has thousands of free icons to choose from for personal and commercial usage.

Font Awesome will be popular with the coders among us. These icons are spread across several different categories. Scalable and customizable with CSS.

Flaticon is one of the largest searchable icon databases with icons available in SVG, PNG, EPS and even PSD!

Fontastic — If their selection of 9,000 icons aren’t enough, simply create and customize your own icon fonts with Fontastic.

UX design inspiration

Designer’s block is real; there’s nothing worse than firing up Justinmind or Sketch only to stare blankly at your empty canvas, awaiting that divine spark of creativity. That’s where UX design inspiration comes in! Sometimes having a peek at other designers work can really fire up and get those neurons dancing.

Daily UI makes a bold claim. Become a better designer in 100 days! Tough but possible. With Daily UI, designers receive a daily user interface design prompt straight to their inbox for 100 days straight. Great for flexing those design muscles.

Dribbble let’s you post your work, hunt for inspiration and be a part of the wider design community. It’s show and tell for designers.

Site Inspire is a wonderful resource which exhibits some of the best and boldest in web and interaction design on the internet. One of the great things about being a UX designer is picking and choosing bits and pieces from all over the internet to create your own unique work.

Land-Book is a product landing page gallery. Very useful for when it comes to getting a landing page just right.

Call to Idea has a variety of different categories to help inspire you from profile pages, case studies to contact forms and alerts. Go wild!

Media Queri With a name like media queri, you can bet this page is all about responsive design inspiration. The page is beautifully crafted and shows websites at different sizes on different mediums.

Angular Demo has a number of UI interactions and tools whose code can be easily copy and pasted to your platform


Reading fellow designers’ musings on the world of UX design is a great way to keep your brain engaged and your finger on the pulse of what’s going on in the UX community. Also, you might learn something you didn’t know and that’s always a good thing. Keep on learnin’.

Hey Designer is a popular site among designers and front-end developers. It offers curated articles and covers a range of diverse topics from prototyping to typography all the way to atomic design.

Smashing Magazine should be in any reputable UX designer’s bookmarks. Highly interesting content for developers and designers alike, Smashing Magazine has a wide readership and covers coding and design.

Designer News is where the design community meets, apparently. On the platform, you can share and discover interesting content as well as start discussions and upvote good content.


Working with images can get out of control if we don’t compress. Likewise, sometimes you want to see how your UX design looks across a range of devices — all of these require optimizing your work and workflow and here are a few tools to put you on your way.

Optimizilla let’s you upload and compress up to 20 images. Adjust the levels of compression and click download! So simple but essential when your image file size gets out of control.

Test My Site allows you to make sure your website has a mobile-friendly design, according to Google’s standards.When you have a slow website, you feel it. Users don’t have the patience to wait more than 5 seconds — the internet is a very busy place!

Usability Checklist is a reference sheet. It’s vital never to forget your users when designing. Often, we can fall victim to making things pretty at the cost of usability. This reference sheet is an essential usability checklist, great for making sure you haven’t forgotten any important items in your design.

Sizzy is a great tool where you can preview multiple screens at once while you work. So if you want to know how your website looks on an iPad or an iPhone, with Snizzy all you need to do it put in your URL and voila: you’ve got it all at a glance.

Justinmind Widget Libraries There’s nothing more tiresome than creating and re-creating UI components. It’s a real time suck and totally unnecessary. With Justinmind’s widget kits, designers can kick back and relax with all that extra time gained because with over 20 different ready-to-use kits for wireframing, making all new components is a thing of the past.


Good quality images are hard to come by. Humans are naturally visual creatures so picking out images that are both eye pleasing and good for UX design should be up there on your list of priorities when wireframing and prototyping.

Place It will put your images into context. People needs to see things in context to ‘get’ it and with Place It you can get mockups of anything.

Unsplash has a wide range of beautiful, free to use images and they upload 10 new photos every 10 days.

The Stocks is a royalty free image aggregator only it’s more than that because it also offers video, audio, icons, fonts and colors. UX designers are spoilt for choice!

Pixabay has over half a million images and they’re all free — perfect if you need to get your hands on a stock photo, illustration or vector. Not bad at all.


Colors are notoriously difficult to get right. Some colors repel users while others are more welcoming. This selection of free color resources will have you mastering the art of color in no time.

Flat UI Colors has your back if you want to create something with simple and minimal color design.

LOLColors has curated color palette inspiration at your fingertips. You can also see how popular certain color palettes are too. And they get bonus points for their name. LOL.

UI Gradients is your one stop shop for all things gradient. They’re are going through something of a revival on the internet and we’re not complaining.


The importance of typography in UX design cannot be understated. Bad typography is a crime in our eyes so make sure you bookmark these gems if you ever need some font inspiration.

Google Fonts has a wide selection of well made fonts. They’re free to use have cross platform display and no license required.

Typography Pocket Guide will help you brush up your typography knowledge and help you become an expert in all things type. If you’ve ever struggled with which fonts to combine then this little website will set you right.

Font Squirrel is another free font website with a huge selection of diverse and interesting typefaces. The fonts are high quality and ready for commercial use. Go bananas!


A bad workman always blames his tools, as the old adage goes. But with our list of best free app design resources, you’ll never have a reason to — they’re tried and tested and will improve your workflow tenfold. Enjoy!

[Source: UX Planet]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: