Skip to main content

Master List Of UX/UI Resources

Photos/Videos

Coverr: Free stock video.

FilmSupply: Cinematic footage licensing.

Freepick: Free photos, vectors, and mockups.

Pexels: Free stock photos and videos.

Picjumbo: Get full images collections for more consistency in your stock images.

Pixabay: Free images, videos, and sound.

Rotato: Multi-device Mockups. Only works on Mac. Create 3D mockups.

Shotstash: Free HD stock pictures.

StockSnap.io: Free stock photos. New images added daily.

Stockvault: Free images, textures & illustrations.

Unsplash: Free stock photos.

Video Creation

MockRocket.io: Show off your app in 3D videos.

Icons/Background Patterns

Flaticon: Free vector icons. Animated icons as well.

Get Waves: Create your own fun shape dividers instead of just using Salients shape dividers.

Haikei: Create background visuals. You can customize them pretty well.

Lordicon: Library of animated icons.

PatternPad: Get patterns in PNG, SVG, or JPEG.

Phosphoricons.com: Flexible Icon Family. SVG’s Available.

Shape Dividers: Even more fun shape dividers to add to any website.

Super Designer: Create patterned backgrounds. Both png’s and custom CSS available.

Trianglify.io: Let’s you create a background, customized to the colors you want, that are a bunch shapes. Good for adding background textures.

useAnimations: Animated icons in lottie framework.

3D

Shapefest: free library of 3D objects.

Spline: Design your own 3D objects.

Illustrations

Blush: Customizable Illustrations.

DesignStripe: Illustration library, you can customize the illustrations to make them more or less complex and then adjust the colors.

Glazestock.com: Free illustrations, from images of people doing things on plain backgrounds to fully detailed background of environments.

Humaaans: Illustrations of people you can customize.

Ira Design: Customizable illustrations.

Scale by Flexple: Royalty free vector illustrations for commercial use.

skribbl: Hand-drawn illustrations.

Story Set: Fun illustrations of people, like the ones you see on tech sites.

themeisle.com: Free illustrations to use in your next project. Available in PNG and SVG.

unDraw: Open-source Illustrations.

Color Palettes

Color Hunt: Generate harmonious color combinations.

Colormind: Website specific color palettes with suggestions for font colors to make sure your text is readable.

ColorSpace: Generate several color palettes from one color.

Huemint: AI color palette generator.

khroma.co: AI color palette generator. Start by picking your favorite colors.

Tint and Shade Generator: Generate tints and shades from one color.

CSS/JavaScript Resources

Glassmorphism CSS Generator: Just copy/paste the code to get a glassmorphism look on your elements.

Fancy Border Radius: Lets you make your borders into funny shapes instead of just squares.

Magic Pattern: CSS Background patterns.

Neumorphism: Generate CSS for a neumorphic shape.

Animated CSS Backgrounds: This is what I used as a reference for the floating circles on my homepage background.

Transition CSS: Create CSS transitions.

Fun Button: Get the CSS for a cool, custom button.

SVG Backgrounds: Get CSS for backgrounds, you can also download the backgrounds as SVG or PNG.

CSS Box-shadows: A wide variety of shadows you can copy for your elements.

UIverse.io: Opensource CSS to style buttons, checkboxes, toggle switches, cards, loaders, and inputs.

UI Buttons: Over 100 buttons styles. Just copy the CSS.

Data Visualization

Flourish: Make 2d and 3d graphics to display data.

Untools: Make charts for decision making.

Text/Fonts

Type Scale: Find a good way to scale up the size of your font.

Good Line-Height: Find the right line height for your typescale.

Microcopy: Search for great slogans, headlines, notifications, CTA, error messages. Any short copy you need.

Fontsquirrel: Tons of fonts for you to use. Some free, some paid.

ADA Compliance

Color Contrast Checker: Check if your font color and background have enough contrast to be ADA compliant.

Material Design – Color Tool: Make sure your color palettes and UI are accessible. Gives recommendations for font color on your background colors.

Site Speed

TinyPNG: Compress images in PNG, JPG, or WebP format to reduce their file size.

Shrink.Media: Smartly compresses and reduces image dimentions.

Mockups

Angle.sh: Vector device mockups for Sketch, Figma, and XD. You can only get 50 downloads for free.

Devices by Meta: Free images of devices to use for your mockups.

Is.graphics: Free mockups.

Justinmind: Alternative to Figma. Free prototyping tool for UI and UX design.

Screely: Turn screenshots into browser mockups.

Userflows: Create user journeys for your mockups.

AI Tools

Copy.ai: AI-powered writing. You get 2,000 words per month for free. Upgrade for more.

Deep Image: Upscale images, remove artifacts and increase quality.

Designer: Create social media posts and stationary easily and quickly with just a few text prompts.

Frase.io: Generates highly optimized, quality SEO content.

Gamma: Give a prompt to the AI and it will make powerpoints for you.

Hotpot: AI graphics, AI writing, and AI game tools.

InkForAll.com: AI content generation. SEO optimized content.

Let’s Enhance.io: Increase image resolution without losing quality.

otter.ai: record meetings, takes notes in real time, generates an automated summary to share about the meeting.

RYTR: AI writer. 30+ languages. Blogs, emails, social media ads, landing page and website copy.

Tokee: AI that generates a YouTube thumbnail for you based on your script.

Upscale.media: Let’s you upscale your images by 2x without loosing quality. Free.

SEO/Content

AnswerThePublic: Enter in your keyword and see what questions people have about it.

Misc.

Befront: Learn design skills through practice. From beginner to advanced.

Calculate Stuff: Find any type of calculator for any need. Health, financial, etc.

SEOptimizer: Get a detailed SEO report.

UI Guideline: UI components handbook. Guide to the standardized design of certain design components, like contact forms.

Miro: Create flowcharts. Great for plotting user flows.

[caf_filter id=’1089′]

Know About A Tool You Think I Should Add?

Fill out the form below to submit it for review.