As a designer, having the right tools and resources at your disposal can help you increase the quality of your work and generally make the design process more efficient and enjoyable. There are many resources available, and it seems like a new one comes along every day.
If you’re new to design or learning, there are specific resources that will benefit you the most. At the beginning of your journey, there is so much to learn, and before you can master everything, it’s key to develop an understanding and a certain level of mastery around the fundamentals such as color, typography, grids, and design components. Many of the resources in this list will help you with that.
As a designer, having the right tools and resources at your disposal can help you increase the quality of your work and generally make the design process more efficient and enjoyable. UI Goodies provides a comprehensive directory of over 300 high-quality resources for designers. I’ve gone through each category and hand-picked the best resources for you, new designers!
I’ve emphasized free resources. Understandably, you may not be ready to invest in premium resources at this stage of your career. So instead of spending $200 on a premium icon set, in this post, you’ll find links to free, high-quality icon sets and other resources.
As a new designer, you might be compelled to make all of your own choices and design decisions, but you may not be ready to. It’s not that you shouldn’t try, but there’s no shame in using pre-baked suggestions when it comes to colors and fonts, to see and learn more about what works.
For this reason, I’ve focused on resources that can help you with the fundamentals, to the extent that the resources can act as a placeholder to current gaps in your knowledge. So, if you do not yet know how to design a color palette, there is a resource you can use. If like many new designers, you haven’t mastered pairing fonts together, there are resources to help you with that as well.
Accessibility is an integral part of a design that is often overlooked, even by seasoned designers. Designing with accessibility in mind makes web content more accessible to people with disabilities. It allows people with disabilities or impairments to read and understand the information presented on the screen. Accessibility can be a broad and overwhelming topic to get your head around. However, if there is one thing to bring into your practice as a new designer, it’s designing with enough color contrast. The principle simple. Text color must have enough contrast when it is on top of background color, and that contrast ratio is 4.5:1.
Colorable is a simple, web-based tool which allows you to enter a text color and a background color to get an accessibility score. Not only that, but you can adjust the hue, saturation, and lightness on the screen to get the right result. As a quick aside, color contrast alone is not enough. This excellent article describes in more detail.
“Checking the contrast of a text versus its background isn’t enough. A lot of web designers and developers just use a tool to check if the contrast of the two is high enough but it’s not that simple. We also need to make sure that the colour of our type is dark enough. This means that the font shouldn’t be too thin and that we should limit the font smoothing only to certain cases. Let’s take a look at both.”A colorblind simulator for iOS and MAC, see your UI through the eyes of a colorblind person.
Sim Daltonism is a free, easy-to-use colorblind simulator for iOS and MAC. From the perspective of a color blind person, some colors are impossible to distinguish. Sim Daltonism lets you visualize colors as people with various types of color blindness perceive them. Place Sim over your UI design to simulate different types of color blindness. It's too easy.
Color is a topic that can seem very complicated. You don't need to study color theory to understand how to design with color, but with little experience in design, it can be hard to know where to start. The following resources help with color palettes and pairings, and act as reasonable, jumping off points for designing with color.
Open color is an open-source color scheme. The phrases "color scheme" and "color palette" get used, but the main difference is that a color scheme is a color system, it offers a systematic way of organizing and using colors. The Open color system provides general color for UI design, ensures that all colors are beautiful in itself and harmonious and have the same brightness level so that the perceived brightness is consistent.Generate a variety of color palettes with just one color
Colorspace helps you create color palettes by entering just one color. It returns a variety of results and does feel a little magical. If you choose not to use a pre-designed color system like Open color (mentioned above), Colorspace is a simple resource for creating palettes, but I recommend it more for new designers because it's a fun way to explore seeing what colors work together. I've used it many times when looking for just the right color to go with on already in my design.
As a designer, you have a responsibility to consider the impact of your work and how it represents a broader audience. It's typical to see a lack of gender and cultural diversity in stock photos used in Web design and blog posts. Separate from that, finding the right high-quality stock photo can enhance your design, engage viewers, and help with storytelling aspects.
Burst by Shopify as a whole is a fantastic resource for stock photography that doesn't look like stock photography. Specifically, Burst has a category for diversity that spans across many subcategories. Photos in other categories besides diversity are also pretty diverse, so please give it a try!An extensive library of freely useable images and photography.
It’s hard to talk about photography without mentioning Unsplash! Unsplash offers thousands of free, high-resolution photos from photographers all over the world. You can also browse by Collections: https://unsplash.com/collections and easily explore different categories: https://unsplash.com/explore.
The following resources are free! There are excellent premium icon sets available such as Streamline, but there are also high-quality, free sets that are more than good enough for your design work.
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. The set includes the same icons in outline and fill formats.A set of 1000+ pixel-perfect vector icons and Iconfont.
Unicons offers over 1,000 pixel-perfect vector icons. This set comes as an outline only. This vast icon set covers 26 categories and is an excellent addition to any designers toolbox.
Finding or learning the right information at the right time is essential to growth. There is heaps of good information on the Internet and plenty of books as well. In fact, the Books category on UI Goodies (https://www.uigoodies.com/?category=Books) has links to curated libraries of books just for designers like the Monster List of UX Books. However, there are a few excellent and free eBook libraries at your disposal.
Please note that each site uses eBooks as a lead generation tool so you will be asked to submit personal information to get access to the books.
This library includes seven eBooks spanning from Animation to Design Systems. Most books have multiple authors, and the eBooks are available as an EPUB or PDF.Free ebooks to help you develop creative and design skills.
Lapa Books take a different approach; the eBooks here are not proprietary. Instead, they are a collection of free eBooks from various sources. This library contains links to over 70 free eBooks across user experience, visual design, usability, typography, front-end development, startup, and career.Thoughtful content on mobile and web prototyping, wireframing, mockups, usability testing, project management, design process and more.
UXPin is a digital design tool with a focus on prototyping and realistic interactions. They host nearly 120 free eBooks and whitepapers about mobile and web prototyping, wireframing, mockups, usability testing, project management, design process, and more.
The following resources focus on the best places to source free fonts as well as learn about font pairings. When you are starting in design with little experience in typography, font pairing can be one of the most fun and frustrating, exciting, and time-consuming activities you do! There are so many fonts to choose from, and endless pairings to match.
Google Fonts hosts an extensive gallery of free fonts that you can download or embed. They are all wrapped up in a simple and easy-to-navigate interface with filters that let you control how you browse. The site also includes a "featured" section, which is fun to peruse.An independent and expansive typography resource.
Typewolf is a premier Website for typography knowledge made by Jeremiah Shoaf. Jeremiah includes a section for Font Recommendations and Lists which includes a sub-section for Free Fonts and outlines the Top 40 Google Fonts, Top 10 Free “Hipster” Fonts, Top 10 Serif + Sans-Serif Font Combos on Google Fonts and Top 10 Free Fonts That Aren’t on Google Fonts. Jeremiah has also written a guide, “The Definitive Guide to Free Fonts” that you can purchase for $39.A typography site dedicated to helping creators use beautiful typography for their creative projects.
Fontpair is a typography-focused Website that inspires the creative community. It has a helpful section of the site dedicated to "feature pairings" with links to real Websites so you can see the pairings IRL.A curated typography website with a focus on contemporary typography and high quality free fonts.
FontsArena is a beautifully designed site with a long list of attractive, modern, and free fonts. The list is easy to browse with images of the fonts illustrated in their respective style. Each font includes a link to download the free version of the font as well as the full version. You can also quickly test drive the font with your own text and font size. Check out their quick guide to using Webfonts.