Bookmark these websites for your next UI project right now! 🎨
Tags: ux, frontend, web, mobile
Published: 2020-03-16 11:01:58

Over the past 2-3 years, I've been bookmarking some of those websites which I think can definitely help a beginner or a professional in his/her day-to-day life. These range from websites that guide you on colours to those which provide high-quality illustrations. Any why only I should enjoy these bookmarks, the DEV Community members can too! 😉

_Note: if you're reading this in future, find any link broken, then let me know in the comments. I want to keep this updated._

![Let's go! GIF](https://media.giphy.com/media/S5yqNNTQlEZfqQ7InC/giphy.gif)

---

## 1. [uizard](https://uizard.io/) - Speed up your workflow

{% youtube 05uu4fppjmU %}

> Transform your hand-drawn wireframes into digital design files and front-end code – automatically!

## 2. [Line Awesome](https://icons8.com/line-awesome)  - Icons

{% youtube yLEug5bPdWc %}

> Swap Font Awesome for modern line icons in one line of code.

## 3. [Glaze](https://www.glazestock.com/) - Illustrations

![Glaze illustration example](https://storage.googleapis.com/glaze-ecom.appspot.com/images/BIpm4EEpB/thumbs/232.png)

> Free illustrations, for everything

## 4. [FreeIllustrations](https://freellustrations.com/) - Illustrations

![FreeIllustrations demo](https://freellustrations-free-downloads.s3-us-west-1.amazonaws.com/free-images/thumbimg_25361957thumbejpg.jpg)

> Download free illustrations background images for your awesome landing pages.

## 5. [UpLabs](https://www.uplabs.com/) - Design 

![Demo image from UpLabs](https://assets.materialup.com/uploads/89924e5d-4bf4-47e4-b2f6-bd193a669f44/preview.jpg)

> UpLabs is the place to find high-quality design resources for designers, creative agencies and developers 

## 6. [Coolors](https://coolors.co/) - Colors

![Coolors website](https://dev-to-uploads.s3.amazonaws.com/i/3ra853wfd0ogtd6p11fl.jpg)

> Create, save and share perfect palettes in seconds!

## 7. [Figma YouTube](https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA/videos) - Videos and Tutorials

{% youtube Cx2dkpBxst8 %}

Figma's official channel on YouTube where they share best practices and hands-on tutorials.

## 8. [AppLaunchpad](https://theapplaunchpad.com/mockup-generator/) - Mockup Generator

![Mockup Generator](https://s3-us-west-2.amazonaws.com/applaunchpads3v2/mockup-generator/website/landing_page_image1.png)

> Create quality product mockups with just a few clicks, for free.

## 9. [Material Design Pallete](https://www.materialpalette.com/) - Color Pallete Generator

![Material Design Pallete](https://dev-to-uploads.s3.amazonaws.com/i/hgytd0jbq6sb8b25kfzq.jpg)

Create palletes, get live mobile preview along with Material icons and colors.

## 10. [Artboard Studio](https://artboard.studio/) - Mockups Generator Tool

<video width="780" height="500" controls src="https://cdn.artboard.co/home/main-banner-video.mp4"></video>

> Design, animate, collaborate and present your projects with an extensive library of assets and templates right in the browser.

## 11. [Daily UI](https://www.dailyui.co/) - Design Challenge

![Daily UI](https://www.dailyui.co/assets/images/image05.jpg)

> Daily UI is a series of daily design challenges, design inspiration and neat surprise rewards.

## 12. [FontPair](https://fontpair.co/) -  Fonts Resource
 
![FontPair](https://dev-to-uploads.s3.amazonaws.com/i/dy8sd5j18096le2yaunc.jpg)

FontPair helps you pair your [Google Fonts](https://fonts.google.com/) together.

## 13. [Undesign](https://undesign.learn.uno/) - Design Collection

![Undesign](https://dev-to-uploads.s3.amazonaws.com/i/tw6mayggyklgeo5gbjwl.jpg)

> Collection of free design tools and resources for makers, developers and designers.

## 14. [SaaS landing page examples](https://saaslandingpage.com/) - Design Inspiration

![SaaS landing page examples](https://dev-to-uploads.s3.amazonaws.com/i/xrwcfh4v4ngozk9kaxv4.jpg)

> Discover the best landing page examples created by top-class SaaS companies, and get ideas and inspiration for your next design project.

## 15. [DesignValley](https://www.designvalley.club/) - Design Tool Collection

![DesignValley](https://dev-to-uploads.s3.amazonaws.com/i/1m0cklnqx6a7sqfh65su.jpg)

> DesignValley is the ultimate design tool depository. Find, vote, save and share your favorite design tools now!

## 16. [Colors & Fonts.](https://www.colorsandfonts.com/) - Fonts and Colors Resource

![Colors & Fonts](https://dev-to-uploads.s3.amazonaws.com/i/64czmrb218lbf8p3imhq.jpg)

> A curated library of colors, fonts and resources for web developers & digital designers.

## 17. [Stylify Me](http://stylifyme.com/) - Style Guide Generator

![Stylify Me](https://dev-to-uploads.s3.amazonaws.com/i/270qbagactaqov06i9sl.jpg)

> This tool allows the designer to research sites efficiently without the need to inspect each element, in order to be aware of current design trends and inform their own design decisions.

## 18. [FontSpark](https://fontspark.app/) - Discover Fonts

![FontSpark](https://dev-to-uploads.s3.amazonaws.com/i/8k80ynhhh4htmokxzpi1.gif)

> FontSpark is a simple tool to help designers quickly find the best fonts for their projects. By randomly generating fonts from a curated list of popular web fonts, designers are sure to break out of the habit of using the same 3 or 4 fonts in nearly every project and discover the perfect fit for their next website or design.

_[ColorSpark](https://colorspark.app/) comes from the same creators but this one is for colors and gradients._

## 19. [Designs Systems Repo](https://designsystemsrepo.com/) - Design Systems Resources

![Designs Systems Repo](https://dev-to-uploads.s3.amazonaws.com/i/7jm6ue3bdq8bycvhry9f.jpg)

> A frequently updated collection of Design System examples, articles, tools and talks.

## 20. [CalColor](https://calcolor.co/) - Color Calculator

![CalColor](https://dev-to-uploads.s3.amazonaws.com/i/t6mxckkhneroa753f71r.jpg)

> A new way to manage digital colors. Leave abstract color models behind and focus on the important things.

## 21. [Free Design Resources](https://freedesignresources.net/) - Free Design Resources

![Free Design Resources](https://dev-to-uploads.s3.amazonaws.com/i/h0ov9mx1k1ok4t88xrmu.jpg)

> High quality design resources for free. Crafted with love from amazing artists and professional designers around the world, ranging from fonts, mockups, graphics, templates & more.

## 22. [Endless Icons](http://endlessicons.com/) - Free Icon Library

![Endless Icons](https://dev-to-uploads.s3.amazonaws.com/i/w87bbv2x73r46m6yq26t.jpg)

> EndlessIcons was created to share icons and creative stuff with the design community.

## 23. [Sideway](https://looksideway.com/) - Design Inspiration

![Sideway](https://dev-to-uploads.s3.amazonaws.com/i/t8q71q9ltxgfph1xay75.jpg)

> A community of designers showcasing published digital design work.

## 24. [Gradientify](https://www.iconshock.com/svg-icons/) - SVG Icons

![Gradientify](https://dev-to-uploads.s3.amazonaws.com/i/zthkvttjg3rh5kv6h94i.jpg)

> An interactive free SVG icons pack specially made for gradient lovers!

## 25. [Orion](https://orioniconlibrary.com/app) - Icon Library

![Orion](https://dev-to-uploads.s3.amazonaws.com/i/rt09dk11sh2lqzhqw5lb.jpg)

A unique icon library with lots of customisations.

## 26. [Interfacer](https://interfacer.xyz/) - Free Design Resources

![Interfacer](https://dev-to-uploads.s3.amazonaws.com/i/b75y6im4ua4ubud9uknj.jpg)

> Interfacer is a collection of high quality free Design Resources created by the most talented and awesome people on the Internet. You can use all of them in commercial projects.

## 27. [Collect UI](http://collectui.com/) - Design Inspiration

![Collect UI](https://dev-to-uploads.s3.amazonaws.com/i/4d4t5iuthznts1ydgyuy.jpg)

> Daily inspiration collected from daily ui archive and beyond. Hand picked, updating daily.

## 28. [Design System Playground](https://design-system-playground.netlify.com/) - Theme Generator

![Design System Playground](https://dev-to-uploads.s3.amazonaws.com/i/s5vwnhlf6dsv7lu0sxzf.jpg)

> Play with typography and colors to generate a design system theme you can use in your projects. 

## 29. [Wireframer](https://www.wireframer.art/) - Wireframing 

![Wireframer](https://dev-to-uploads.s3.amazonaws.com/i/3g8wfl3zzx5d9fdhe4np.jpg)

Wireframer allows you to customise the text wireframe for your project to generate the SVG code or download it as SVG file. It also has a [Figma plugin](https://www.figma.com/c/plugin/787660853629435276/Wireframer).

## 30. [UI8](https://ui8.net/) - Design Resources

![UI8](https://dev-to-uploads.s3.amazonaws.com/i/foz13kxis2jy9ro7jbyt.jpg)

> 3,914 curated design resources to energize your creative workflow

---

### Looks like we've had enough...but here's more (without images):

1. [Freebies.ByPeople](https://freebies.bypeople.com/) - Free Design Resources
2. [Humans](https://humans.fyi/) - Personal Webpage Inspiration
3. [Invision DSM](https://www.invisionapp.com/design-system-manager) - Design System Manager
4. [UI Goodies](http://www.uigoodies.com/) - Design Resources
5. [Get Waves](https://getwaves.io/) - SVG Wave Generator
6. [Rive](https://rive.app/) - Animation and Design Tool
7. [UI Store Design](https://www.uistore.design/) - UI Kits
8. [Khroma](http://khroma.co/) - AI Color Tool
9. [Eva Design System](https://colors.eva.design/) - Deep Learning Color Generator
10. [Maze](https://maze.design/) - User Testing Platform

---

_Thanks to @venkateshaj14, we got one more tool called **[Colors UI](https://colorsui.com/)** - a collection of 1000+ color palettes._

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, [here](https://medium.com/@vaibhavkhulbe)'s my Medium profile.