Published on | Prototyping: From UX to Front End — Medium Eleftheria Batsou

Some of my favorite tools, in no particular order, about typography, icons, photos and colors
For every section I also created a video.

Typography

Typography in graphic design includes the choice of typeface, color, size, length, design, layout, etc. It’s not only about attractiveness but more importantly about readability. It is the art of displaying content so be wise about your choices.

* Google fonts makes products and web pages run faster by safely caching fonts without compromising users’ privacy or security.
* Font Squirrel is your best resource for free, hand-picked, high-quality, commercial-use fonts.
* Dafont and Efonts are quite similar, they both provide free downloadable fonts.
* Font combination lets you pick a font and then present you a secondary font.
* Do you want to find a typography from an image? Then use what the font, it doesn’t always work great. For better results follow the tips on their site.
* Last but not least, for font-inspiration check out font in use, which is an independent archive of typography and type wolf the absolute best resource available for everything related to typography on the web.

<a href="https://medium.com/media/8a4485b8e2aee95f69eb2c8b1b434434/href">https://medium.com/media/8a4485b8e2aee95f69eb2c8b1b434434/href</a>

Icons

While icons might be one of the least thought of elements in a design project, they can be one of the most interesting. They add visual interest and interactivity. You can add some animation, create reusable packs for different projects, combine them to create a new symbol.

* Flat icon is the largest database of free icons (and the one I use more on my projects). The icons are available in PNG, SVG, EPS, PSD, and Base64. In most cases, like in PNG, you can customize every property of the icon, for example, the color, the size. Usually, you have to credit the designer.
* Iconmonstr lets you discover 3989+ free simple icons in 272 collections. Once again you can customize and download everything.
* Next in line is webalys, the “World’s Biggest Material Design Icons Pack, The only icons pack that include all icons in solid + line style, for designing applications and websites”. After submitting your email, you can download a pack of icons in several formats. It’s free to use them for both personal or commercial projects.
* Similar to before, ego-icons, needs to be downloaded by inserting your email, only this time you have the first 100 icons for free. As the website says “Take Your Next UI Design From “Snore” To “WHOA!””. You can customize pretty much anything, and the icons can be used for personal or commercial projects.
* Iconstore is also one of my favorites, it provides “Free Icons by First-Class Designers”. You can download a pack, this time there is no need for email, and guarantee you’ll have an amazing collection of icons.
* If you need simply beautiful open source icons, then browse in feathericons, the collection isn’t very big, but the icons are always looking clean and elegant.
* Material design icons can be used through download, no need for email, or GitHub. The collection is bigger than the one in feathericons but not as big as in Flat icon. Once again the icons are beautiful and have a clear design, you can select your preferable format of the icon.

<a href="https://medium.com/media/bf3f198283e09798adb5b9f8809e3730/href">https://medium.com/media/bf3f198283e09798adb5b9f8809e3730/href</a>

Photos

Photos are a crucial aspect of your site as users tend to focus on imagery before wording. Everyone likes images, they are convenient, easy to engage with and easy to memorize. To choose an image be sure to consider your brand and your target audience.

* Pexels helps designers, bloggers and everyone who is looking for an image to find great photos that you can use everywhere for free. You can use them for any personal or commercial purpose. Pexels also has a page dedicated to free videos.
* Pixabay is a vibrant community of creatives, sharing copyright free images and videos. All contents are released under Creative Commons CC0, which makes them safe to use without asking for permission or giving credit to the artist — even for commercial purposes. One thing to notice here is that you can’t directly copy the image url to your site, instead, you have to upload it to your server. The site provides vector graphics, videos and more.
* Burst is a free stock photo site with 1000’s of high quality and royalty-free images available. The site is built to empower designers, developers, bloggers and entrepreneurs to create stunning websites and marketing campaigns. You can download an image or collection of them.
* StockSnap provides the highest quality images from a pool of submissions and features them on the site free for download.
* Unsplash provides beautiful, free photos, gifted by the world’s most generous community of photographers. All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes.
* Kaboompics is a popular source of free images for lifestyle, interior design and specialized bloggers. As you download the image you can choose a size and get the color scheme.
* Makerbook is hand-picked directory featuring the very best, free resources for creatives. Every single resource listed on Makerbook is completely free and of the highest quality.
* Foodiesfeed is a resource of awesome naturally looking food photos that are completely free to download. You can’t directly use the image on your site, instead, you have to downloaded locally and uploaded to your server.

<a href="https://medium.com/media/499ff5a44bc712d5e758851cf3441c96/href">https://medium.com/media/499ff5a44bc712d5e758851cf3441c96/href</a>

Colors

I could write at least a dozen of articles about colors and the importance of choosing the right ones. Instead, I am going to constrain myself and give you only a few rules and tools to keep in mind.

Make sure the choice of colors for a site fits the intended content and the users’ expectations. Never use more colors than the necessary ones. Do not use colors that do not support or add to the information being displayed. Remain consistent throughout the site with your color choices.

As for the tools, take a look at the list below:

* Adobe Colors CC: you can pick colors from the color-wheel, select a color-rule, adjust the shades. It is also very easy to upload an image and select your own colors.
* Palleton, is one of my favorites, you can customize even more properties than in Adobe Colors CC.
* You can find a great collection of colors in Material UI. Some of the collections are: Material Design Colors, Flat UI Colors, Fluent Design Colors, Social Colors and more. You can’t customize the colors by your own, but in most cases, you can find several shades of them.
* I have used web gradients in many of my projects. It is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 cross browser code and use it in a moment!. You can also view gradient-colors for Sketch and PSD too.
* Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art. Different datasets are loaded each day, check back tomorrow for even more color inspiration. You can upload an image, browse through templates and change the shades accordingly to your needs.
* Coolors is another great tool. It is fast and simple, you can adjust and refine the colors, export and share the palettes, create your own collection.

<a href="https://medium.com/media/b853f5b7ef8fae77b7c7a0edf91bbfc9/href">https://medium.com/media/b853f5b7ef8fae77b7c7a0edf91bbfc9/href</a>

Do you have a favorite site for typography, icons, photos or colors? Feel free to share. It’s always a pleasure to learn a new tool.

Before you go, please subscribe to my youtube channel. It helps creating more content.

Thanks for reading, have an awesome day!

Tools to use in your next UI, UX job was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Tools to use in your next UI, UX job

Cool stuff, every week

More Articles