Recently, I started on the Daily UI 100 days of design challenge and the biggest challenge I've faced so far, obviously not counting consistency and procrastination issues, is finding inspiration and design resources.
This post is mainly for me to bookmark different design resources so that I'll be able to come back to them every time I need to create a new design. Most resources fall in various categories such as illustrations, icons, images, videos, inspiration, fonts, colors or animations.
I should probably mention that I am not being paid to advertise these resources, so this is an unbiased opinion(it is biased but let's pretend it is not for now). The listing is also random and is not a ranking of any kind.
Without further ado, let's get started on the different resources.
Typography Resources
A good font pairing, especially for a website can be what determines whether your design looks professional, creative or just plain when designing. They include:
1. Google fonts
Google Fonts (formerly known as Google Web Fonts) is a font embedding service library. This includes free and open source font families, an interactive web directory for browsing the library, and APIs for using the fonts via CSS and Android.
Quoted from Wikipedia
As the description says, Google fonts' catalog places typography front and center. All fonts on the site are free and open-source, making their fonts available to everyone.
Link: Google Fonts
2. Font Joy
Getting font pairs is a very difficult task, but with font joy, you can easily pair different fonts and see how they would look in real-time.
Link: Font joy
3. Font squirrel
If all the fonts on google fonts are not tickling your fancy, this is what we might call, the boss level of font resources. All fonts hosted are free for commercial use.
Link: Font squirrel
4. Font pair
Don't have the time and energy to generate different font pairings and only need to get a simple pair, or maybe you need inspiration on which font pairs you can use. This is the site that helps you do all that. Find font pairings as well as how they've been used together.
Link: Font pair
5. Typio
Another font inspiration site where you can find out how to use different font pairs. You can also easily find font pairs for different categories of work such as travel, hotels etc.
Link: Typ
Color resources
Is it color or colour, that all depends on whether you use American or British English, either way, color(using this spelling because of auto correct nothing serious) has a huge impact on design. Decades of work has gone into researching how different people passive color and the impact it has on businesses in general.
1. Coolors
A color palette generator that helps you visually see how different colors will look when used together.
Link: Coolors
2. Happy hues
A simple color palette inspiration site that shows you a real world example of how to combine different colors in your design project. The colors used here, however, might backfire as I've painfully come to see, so use with caution.
Link: Happy Hues
3. Color Wise
Another color palette generator where one can get different colors that can easily be used together.
Link: ColorWise
4. Palettable
This is basically just tinder but for colors. Like if you want to continue with the color and dislike otherwise, it then automatically suggests the next color that can be used with the current color liked.
Link: Palettable
5. Picular
If palettable is a tindr for colors, then picular is a google for colors. Just search for any word and it will automatically provide you with different colors associated with the word you've searched.
Link: Picular
6. 99 Designs
I'll add blog resources on how to choose colors and a short blog on the psychology of color which is very important when deciding which palette one should use.
Link for psychology of colors: Psychology of colors
Link for color generator: 99Designs color Generator
Icon Resources
1. Feather icons
One of my favorite go to places for getting icon resources. Free SVG icons that can easily be copied and pasted in your website code or UI designs without much stress.
Link: Feather Icons
2. Font Awesome
If, you're a web developer you've definitely come across this resource, if you haven't then it's definitely worth your time
Link: Font Awesome
3. Flaticon
If you ever see an icon and have no idea where to find it? This is probably the place to look for it.
Link: Flaticon
4. Icons8
Another one . This site also includes images, illustrations and even music.
Link: Icons8
5. Streamline
Just like Icons8, they also do almost everything from illustrations, icons and emojis
Link: Streamline
6. Ionicons
Font awesome alternative that contains only free and open source icons
Link: Ionic
Illustrations
Need drawings and animated characters, look no further.
1. Undraw
Get free illustrations for anything you want. Change the colors and click to download whichever illustration fits you best. With a search powered by algolia you can be assured you'll find things easily.
Link: Undraw
2. Open doodles
A free set of illustrations. The illustration's design is quite unique and interesting. You can either download the image or use a link to the resource.
Link: Open Doodles
3. Icons8
Seems like the only thing they don't offer is financial aid
Link: Icons8
4. Illustrations co
Download either SVG or PNG illustrations for free, all with unique designs.
Link: Illustrations co
5. IRA design
Create and customize your illustrations with this free site. Change the background, the characters, colors etc and create your own custom illustration
Link: IRA Design
6. Blush
Small PNGs are the only illustrations you can download but that is more than plenty.
Link: Blush Design
7. Streamline
Not quite sure, how this might help when you can't customize the colors without an upgrade but at least it's a resource that one can download either SVG, PDF or PNG formats
Link: Streamline
Let's take a break
The list is not exhausted but I believe in short blog posts and not 30 minute reads so I'll break this into two parts. Part two coming soon, so stay tuned.
Top comments (0)