UI Design Resources: 161 Tools User Interface Design Inspiration
Contents
- Inspiration
- Creative
- Tools
- Patterns
- Illustrations
- Icons
- Color
- Wireframe
- UI Gradients
- Font Tools
- Stock Photos
- UX Research
- Photoshop
- Sketch
- Figma
- XD
Why Give Away Free UI Design Resources?
All user interface designers have been craving and crazily searching for all free UI design resources across the net, and trust me it’s pain to find it all at one spot. I combined efforts from multiple sources and our own personal resources for inspiration from the best of the best user interface designers out there, and all of those free resources we used at some point for our internal understanding or other purposes.
INSPIRATION
UI/UX designers are always in search of super cool inspirations. These inspirations help them to learn and unlearn about certain products or services they are designing. Here is a list of websites that will help you gain that vision to design awesome solutions.
Get inspiration from over 170 iOS apps and 10,000 patterns (screenshots from iPhone X) available on the platform.
A design inspirational library featuring finest UI UX Patterns (iOS and Android) for designers, developers, and product makers to reference.
Pttrns is a collection of mobile design patterns, UI design resources, and inspiration for iPhones, iPads, Android devices, Apple Watches, and more. New York, New York, United States.
UI Movement started as a newsletter that featured the best UI designs every day. The real primary difference between UI Movement and other design inspiration sites is that they focus exclusively on UI designs.
A platform for your daily inspiration collected from regular UI & beyond. Based on Dribbble shots, handpicked.
UpLabs is a community-powered marketplace that lets designers and developers share ready-to-ship UI designing resource — like login boxes and payment forms — to build apps and sites.
UI learn is set up to make you learn design step by step with a practical curriculum that focuses 100% on learn-by-doing and a great example of free UI designing resources.
Use Behance to showcase and discover creative work. They’re on a mission to empower the creative world to make ideas happen.
Neede started as a personal project to organize the different design resources that quickly grew to a place to share online design resources with other designers.
Ecomm.design aims to showcase an eclectic mix of stores across many different verticals, with less of a focus on front-end experimentation and more on the metrics and UX practices that matter to ecommerce.
CREATIVE
User interface designs are about being highly creative. This list of websites will give you a constant dosage of creativity.
Behance is a platform that allows many people with web design careers to showcase their portfolios of visual work such as graphic design, fashion, illustration, photography, and more. One of the pros of Behance is that it is effortless to use.
Dribbble is the leading destination to find & showcase creative work and home to the world’s best design professionals.
A CSS gallery and showcase of the best web design inspiration, featuring over 2500 websites searchable by type, subject, and style.
CreativeBloQ is an online blog that provides its readers with daily creative tips and inspiration about web design, graphic design, 3D, and more.
The best landing page design inspiration from around the web. Lapa Ninja is created to help designers find inspiration, learn and improve design skills.
Beautiful Pixel is where you can collectively admire the works of some of the most significant user interface designs of our time, as no other art is as scientific, restrictively creative, and, most of all, practical.
They publish articles about Web and graphic design, trends, business, mobile, UX, typography, and how to work in the design industry. All alongside inspiration and resources to help you create beautiful design work!
The awards recognize the talent and effort of the best web designers, developers, and agencies in the world.
They’ve created this place for Designers, Developers, Product Owners, Marketing Managers, Startupers, Freelancers, and, really, for everyone who appreciates exceptional designs and well-crafted sites.
The creative review platform for design teams.
TOOLS
User experience designers need to share their wireframes, while it’s been designed and coded at the same time. Guess how such operations take place… Here are free UI design resources for some amazing tools to work with.
Lightweight online tool for creating and sharing mockups (wireframes). Easy, fast, and free in use.
A cloud-based platform that allows designers to create and share wireframes of websites & mobile applications, add annotations, perform editing operations and export projects to PDF/PNG files.
A new tool for designing modern interfaces, built and used by designers at Facebook.
Creately is a dynamic diagramming tool that can be deployed from the cloud or on the desktop and as a plugin for JIRA and Confluence. As Creately is a straightforward application, you do not need highfalutin technical skills to build your diagrams, including flowcharts, infographics, or others.
FreeMind is a premier free mind-mapping software written in Java. The recent development has hopefully turned it into a high productivity tool.
Showcase your digital designs. Beautifully and super easy with Hamok. Create high resolution mock ups, personalize, export and use everywhere.
InVision Studio is a prototyping and animation tool that lets you create advanced, vector-based screen designs fast thanks to flexible layers and infinite canvas. It’s considered one of the best high-fidelity prototyping tools out there.
Create stunning mockups using the latest device frames like iPhone X and custom backgrounds that make your mobile or website design stand out.
Brandfetch is the go-to-place to source digital assets. Quickly find famous logos, colors, fonts, images, and more.
Visual Collaboration Workspace with whiteboard functions enabling efficient teamwork, regardless of time and place.
PATTERNS
Patterns are an integral part of graphic designs. It’s heavily used in UI, brochure, presentations, social media posts, etc. Here are some handpicked awesome resources for some super cool patterns.
User interface design patterns are descriptions of best practices within the user interface design. They are general, reusable solutions to commonly occurring problems.
ZURB is a product design company. They help companies design incredible digital products (things like desktop software, mobile apps, etc), websites, and integrated services.
Collecting snippets of good design
Your one-stop-shop for specific mobile and web design inspiration. Curated by designers, for designers
Productdesign.tips delivers relevant design knowledge and inspiration.
Facebook Design is committed to designing and building Facebook apps and technologies—the Facebook app, Messenger, Instagram, WhatsApp, Oculus, Workplace, Portal and Novi—to serve a diverse global community.
Choose from over a million free vectors, clip art graphics, vector art images, design templates, and illustrations created by artists worldwide!
Design elements are the fundamentals to all designs: form, shape, line, texture, color, space, movement.
Design better apps. Real design inspiration & insights from the world’s best-designed products.
ILLUSTRATIONS
An illustration is a decoration, interpretation or visual explanation of a text, concept or process, designed for integration in published media, such as posters, flyers, magazines, books, teaching materials, animations, video games and films.
The updated design project continues with beautiful SVG images that you can use completely free and without attribution.
Beautiful, MIT-licensed illustrations for you to use on your next website, app, or project.
With this project, they try to introduce a new way and visual perception for websites, presentations, apps, articles… everything!
They operate with one goal in mind: becoming your go-to solution for ordering design services online.
Ouch helps creators who don’t draw overcome the lack of quality graphics. Download the free PNG and SVG illustrations from top Dribbble artists to class up your product
Humaaans is a free library to mix-&-match illustrations of people. You can customize their positions, clothing, colors, and hairstyle to create some cool scenes. You can add backgrounds and use the power of libraries to make it your own
Ira Design comes with a great variety of ready-to-use examples made with gradients.
Interfacer is a collection of 300+ free design resources found on the Web.
Free, high-quality design resources for Photoshop, Sketch, Illustrator, Adobe XD and Figma
Black illustrations is a series of FREE digital designs of black people for your next online project. Free for commercial and personal use.
ICONS
An icon is a small graphical representation of a program or file. When you double-click an icon, the associated file or program will be opened.
Streamline 3.0 is the world’s most massive icon pack and source for free ui resources. Weighing in at over 30000 icons, three different weights, 53 categories, and 720 subcategories.
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. To do so, you’ll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon.
Freepik helps you find free vectors, photos, illustrations, and PSD files that you can use in your Web, banners, presentations, magazines, ads, etc.
Free, monstrously big and continuously growing source of simple icons
Fontello is a web app that lists open source icon fonts, shows glyphs from them, allows you to select the icons you need from any font, and creates a new custom font from your selection. You can then use these custom font on your website.
Icons8 allows designers to express their ideas by giving the right design elements at the right time.
The biggest bounty of professional icons to be found anywhere. Over 2 million icons: 400+ icon sets in more than 30 styles part of Unusual Minds.
Millions of PNG transparent images and other Graphic resources.
Iconfinder is the leading search engine and marketplace for vector icons in SVG, PNG, CSH, and AI format.
They are a creative team passionate about bringing the best free and premium resources to the design community.
COLOR
UI/UX designers are always in search of super cool inspirations. These inspirations help them to learn and unlearn about certain products or services they are designing. Here is a list of websites that will help you gain that vision to design awesome solutions.
Generate and explore beautiful color palettes! The super fast color schemes generator + a collection of more than 1.5 M palettes!
Picular is a rocket fast primary color generator using Google’s image search.
Muzli by InVision is a Chrome extension that provides quick access to all that’s hot and simply awesome in the Inspiration, design & tech, web, ux, ui scene.
Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable.
A total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs.
The definite palette editing and remapping tool. This app works best with JavaScript enabled.
A small website to showcase beautiful color combinations in one place.
ColorSpace is a currently developed tool to generate color palettes, gradients and much more!
It’s intuitive, fast, and beautiful. Build palettes with a swipe of your finger or use your camera to capture colors from the world around you.
Color Leap is a collection of 180 color palettes that showcase colors used throughout 12 distinct eras in history.
WIREFRAME
A wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website or an app.
Speckyboy is an online magazine for web designers. They are all about sharing new resources and tools and highlighting new, innovative techniques.
Envato Elements opens up a world of creative possibilities for all your design projects. Powered by a community of talented designers, their subscription puts great design in reach for everyone.
A design platform for teams who build products together.
Download free psd files, vectors and graphics. Choose from thousands of free psd flyers, psd mockups, psd templates, vector and graphic files.
100% curated digital marketplace with a growing library of high quality UX/UI design resources and freebies for designers.
Find & Download Free Graphic Resources for App Mockup. 4000+ Vectors, Stock Photos & PSD files. Free for commercial use. High Quality Images.
Mockplus is a prototyping tool designed to make prototypes faster, smarter and easier for all platforms
Build responsive websites in your browser, then launch with our world-class hosting or export your code.
High quality trending articles on growth hacking, marketing channels, user acquisition, engagement, product launch and more.
XDGuru provides useful resources for UI/UX designers using Adobe XD: templates, UI kits, freebies, great tutorials & guides, and plenty of other stuff!
UI GRADIENTS
Gradients, also known as color transitions, are a gradual blending from one color to another (one or multiple) colors.
Beautiful and simple UI for generating web gradients.
A handpicked collection of beautiful color gradients for designers and developers.
Top-ranked erp, commerce, crm and mobile app development IT services company in India. We worked with fortune 100 in last 10 years.
Create fluid and interactive gradient animations with this small javascript library.
180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
GradientsGuru has 99 Cool Gradients, 99 Strong Gradients with their own rotation mode and 15 Blend Mode image effects.
Ready to use gradient background colors. Cool Gradients are prepared according to the latest design trends.
The Ultimate gradients guide for your next project sketch,Adobe xd and css Gradients.
Digital Synopsis showcases the best ideas in design, advertising and visual communication.
FONT TOOLS
Font tools help UI designers to customize their fonts, select and edit too. Quite an impressive collection of awesome websites.
FontArk is an innovative new browser based online font editor, font creator, featuring a unique real time Multiple-Character-Editing tool.
Transform your handwriting and calligraphy into fully functional vector fonts with our web application. Creating your own font has never been easier.
Birdfont is a free font editor which lets you create vector graphics and export TTF, OTF and SVG fonts.
FontForge is a free and open source font editor brought to you by a community of fellow type lovers.
FontStruct is a free font-building tool, funded by advertising and some generous sponsors.
Glyphr Studio is a free, web based font designer. Version 1 is here! Font design has a high barrier of entry.
BitFontCreator is a professional bitmap font creator tool for your embedded project, which helps you create monochrome (1-bpp) bitmap fonts and antialiased (2-bpp and 4-bpp) bitmap fonts for graphical LCD / LED.
TTFEdit is a GPL editor for TrueType fonts. TrueType is a standard used by modern operating systems like Mac OS X, Windows XP and Linux.
CR8 Software Solutions for easy-to-use font making and ID card printing software.
FontLab Studio is our classic font editor. Designers, typographers and graphic design studios, allowing them to design typefaces and create or modify fonts.
STOCK PHOTOS
Stock images are a great resource to get high quality and cheap photos that you can use in your designs for various purposes. They are perfect for marketing and advertising, for promotional work, for personal or commercial creative projects, for publishing, for websites and blogs, and more.
Find your perfect free image or video to download and use for anything. Free for commercial use. No attribution required. High quality images.
High quality and high resolution stock images free from all copyright restrictions – no attribution required.
Browse thousands of beautiful copyright-free images. All their pictures are free to download for personal and commercial use, no attribution required.
Free stock photos you can use everywhere. Free for commercial use. No attribution required.
Download 2000+ food pictures. The best free food photos for commercial use.
The best royalty free stock photos are delivered now along with videos, audios, icons, fonts and colors.
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
Free stock photos and images for your projects and websites.️ Beautiful 100% free high-resolution stock images with no watermark
Find tons of handpicked, non-stocky images. Yours to use as you wish. Free for commercial use. No attribution required.
UX RESEARCH
Typically done at the start of a project, it encompasses different types of research methodology to gather valuable data and feedback.
User experience agency specialising in research and user-centred design services. They create digital platforms that people enjoy using and increase sales.
UX Myths is aimed at both product designers and clients. They set themselves the task to end the battles of personal opinions and – often false – beliefs and move design conversations into the realm of facts and evidence.
The most innovative UX design publication challenging the status quo.
They are an independent web usability research institute.
User Experience Stack Exchange is a question and answer site for user experience researchers and experts.
UXmatters provides insights and inspiration to experienced professionals working in every aspect of User Experience, as well as those who are just beginning their journey in the field.
UIE is a leading research, training, and consulting firm specializing in UX, web site and product usability.
They are a UX research and consulting firm trusted by leading organizations world-wide to provide reliable guidance on user experience.
Usability Geek is a blog that provides practical and useful insights into topics like Usability, User Experience (UX).
PHOTOSHOP
Photoshop is a critical tool for designers, web developers, graphic artists, photographers, and creative professionals. Widely used for image editing, retouching, creating image compositions, website mockups, and adding effects.
SuperPNG is a free, open source Adobe Photoshop plug-in for using PNG files.
Free stock photos you can use everywhere. Free for commercial use. No attribution required.
Digital Anarchy creates intelligent plugins for video editors and photographers. Our plugins solve complex problems letting you finish projects faster.
Ink is a photoshop documentor plugin made by chrometaphore.com
PixelSquid makes 3D content easy for graphic designers to download at any angle as transparent PNG or PSD.
Adobe Camera Raw (ACR) is the raw imaging engine that powers the Camera Raw plugin inside Photoshop CC, Lightroom Classic CC, and Lightroom CC.
EasyMockups has one of the best and most advanced Photoshop panel designs & interactions on the market. Built for app and mobile designers.
Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop.
3D Shadow – This handy tool easily creates various types of 3D shadows from objects such as letters, numbers, shapes and so on.
Local contrast refers to contrast adjustments between smaller areas of the scene, and can be adjusted with the clarity slider.
SKETCH
Sketch is a design toolkit built to help you create your best work from your earliest ideas, through to final artwork.
Create High-Fidelity Prototypes in Sketch, XD or Figma, and Export HTML code.
Align to grid is a feature included in the most recent versions of Windows, which enables users to automatically arrange icons on the desktop based on an invisible grid.
The Bootstrap Grid System is used for layout, specifically Responsive Layouts.
Looper 2.0 sketch plugin. Duplicate, Rotate and Looper calculates the rotation angle to achieve a perfect 360 degree rotation for a given duplication count.
Sketch Artboard Manager. This plugin automatically arranges the position of all Artboards in your Sketch document, to snap them to rows & columns.
Plugins are features that can be installed to the Sketch app to enhance the program’s functionality. Sketch’s plugin manager makes it easy to manage, disable, and update plugins within the app.
Rename it as a Sketch, Adobe XD & Figma plugin that batch renames layers and a lot more.
Automated padding, spacing and alignment for your Sketch layers. Most other plugins require a keyboard shortcut for them to be applied, or re-applied. This is all done automatically as you manipulate your layers; simply deselect everything, and will be updated.
To resize a layer, select it, then click and drag on any of its selection handles. Handles on the sides of the layer will adjust the height or width, while handles on the corners
will adjust the height and width together. Holding ⇧ will resize the layer
proportionately, keeping its height and width at the same ratio.
Creates a beautiful artboard color palette with all your ‘Document Colors’ and their respective color label in a variety of formats
FIGMA
Figma helps teams create, test, and ship better designs from start to finish.
481 Free Handpicked UI Kits for your real life projects
A handpicked collection of beautiful color gradients for designers and developers.
Themer enables you to create and swap themes from your *published* styles in your team library. Use it for color, text and effect styles.
Auto Layout buttons can resize with their text. Lists can rearrange themselves when items are moved around.
Paddet is a small tool that will help you automatically apply padding to frames.
Resize icons into a standard size and bounding box on your design.
Design Lint finds missing styles within your designs on all your layers.
A plugin for easy measurement of sizes. A small user interface allows you to add arrows for heights and widths.
LottieFiles is a collection of animations designed for Lottie – gone are the days of bugging your developer.
Remove.bg removes backgrounds from photos. Automatically, in only 5 seconds and for free.
Figma Minimap plugin. Game-like miniature map that provides an overview of the Figma canvas.
XD
Adobe XD (which stands for Experience Design) has all of the instantaneous wireframing prowess of the impressive iPad app Adobe Comp, plus options to create interactive prototypes of websites and apps.
Effortlessly generate gorgeous confetti patterns with a few clicks.
The constantly updated design project with beautiful SVG images that you can use completely free and without attribution.
Online proofing software from GoProof is the future of creative collaboration and integrates with Adobe® Creative Cloud®
Avocode helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.
Artboard tools to speed up your Adobe XD workflow. Rearrange artboards into grids, sort them by name or create an artboard around selection.
The best resources for designers in one place.
Analyze user behavior, enhance UX, and optimize designs by utilizing AI generated Attention Heatmaps and Clarity score.
FindFont is a plugin for Adobe XD to find all instances of a font style and replace it with another.
A simple and effective tool that generates random colors and gradients.
Leo9 Studio was among the pioneer UI UX design companies in Mumbai, India, and we love to share our leanings to strengthen our design community. This free UI resources blog isn’t just one thing, as we are proud to guide and help several agencies grow from scratch.
Chameleon
Create power users on autopilot. High-growth SaaS companies drive product success with Chameleon by highlighting changes to users and getting feedback in real time.
We have some more awesome articles:
A Curated List Of The Best And Free UI Design Kits And Components
Check this list of the best and free UI Design kits And components for UI design. This list will help you focus on the clients needs by saving your time.
6 Reasons Why Most Mobile App Design Fails
Know your mobile app design and development issues to evaluate and exclude the most common mistakes designers and developers make.
If you find this article useful, do share it on social media!
Don’t forget to follow us.
Blog: UI UX Design and Development Agency
Instagram: @leo9studio
Facebook: @leo9studio
Twitter: @Leo9Studio
Exploring design insights and creative ideas on the Leo9 Studio blog can inspire your next project. After a deep dive into design trends, why not unwind with some excitement at Vavada Casino? It's the perfect way to relax and enjoy thrilling entertainment after a productive day.