large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/tools-to-use-in-your-next-ui-ux-job-part-2-ff41ee71765c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Eleftheria Batsou <img alt="" src="https://cdn-images-1.medium.com/max/851/1*0ioTU00Qtep0YT-IbR-VwQ.jpeg">Learn more <a href="https://youtu.be/vFjg3zfsRro">free tools</a></p>
<p><a href="https://blog.prototypr.io/tools-to-use-in-your-next-ui-ux-job-4ce7ba29fbf9">Part 1</a> was about <a href="https://youtu.be/vFjg3zfsRro">typography</a>, <a href="https://youtu.be/nz1PHD4TxXA">icons</a>, <a href="https://youtu.be/0uc3gTQ_0as">images</a> and <a href="https://youtu.be/yj2Akhmx2oU">colors</a>.</p>
<p>Part 2 is about <a href="https://youtu.be/565-G9w-II4">free videos</a>, <a href="https://youtu.be/569Q2r0Z-5w">color inspiration based on images</a>, <a href="https://youtu.be/nVLjAonBTFQ">color schemes</a>, <a href="https://youtu.be/yMeuQmCczaA">online image editing tools</a>, and <a href="https://youtu.be/WpgomTUyTTk">useful blogs</a></p>
<p>I also created a video for each section in case you ‘re not feeling like reading 😜.</p>
<h3>Find free videos</h3>
<blockquote><p>“Online video is the Swiss army knife of internet marketing. It really can be used all over the customer lifecycle, whether it’s customer service, marketing, or even recruitment” -Mark Roberts</p></blockquote>
<ul>
<li><a href="https://www.videvo.net/">Videvo</a>: Offers free stock videos and motion graphics for use in any project. You may use the video clips free of charge, in both personal and commercial productions.</li>
<li><a href="https://www.videezy.com/">Videezy</a>: Is the place to find free HD stock videos, b-roll, backgrounds, and other cool free video footage. Videezy makes it easy to explore thousands of clips created by people from all over the globe. All the videos are free to download and, depending on the license, free to use in your projects.</li>
<li><a href="https://vimeo.com/groups/freehd/">Vimeo</a>: Provides free HD stock footage that can be used in any production</li>
<li><a href="http://www.coverr.co/">Coverr</a>: Has beautiful videos, suitable for any homepage, free to use for commercial or noncommercial purposes.</li>
<li><a href="https://videos.pexels.com/">Pexels</a>: Started as a platform to find free photos but now has free videos too. They are hand-picked and have enough pixels to use them as a background on your website. Most of the footage is in Full-HD or at least HD quality.</li>
<li><a href="https://pixabay.com/en/videos/">Pixabay</a>: Is a vibrant community of creatives, sharing copyright free images and videos. All contents are free for any purpose.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F565-G9w-II4%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D565-G9w-II4&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F565-G9w-II4%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/8ee79e8075c589e5762dc061bbcf252d/href">https://medium.com/media/8ee79e8075c589e5762dc061bbcf252d/href</a></iframe></p>
<h3>Color inspiration based on Images</h3>
<blockquote><p>“There are only 3 colors, 10 digits, and 7 notes; its what we do with them that’s important.” -Jim Rohn</p></blockquote>
<ul>
<li><a href="http://labs.tineye.com/multicolr/#colors=fcd4d7,fcf1a6,55b4c7;weights=33,34,33;">Dribbble Colors</a>: Is one of the best place for user interface inspiration. When you want to do visual research on how a particular color was used by other designers you can search for it.</li>
<li><a href="https://labs.tineye.com/multicolr/">Tineye Multicolr</a>: Is a multicolor engine that extracts colors from 20 million Creative Commons images on Flickr to make the images searchable by color. It’s quite addictive and very likely the best color search engine in the world.</li>
<li><a href="https://www.shutterstock.com/labs/spectrum/?q=forest&amp;hue=21&amp;sort_method=balanced">Shutterstock Spectrum</a>: Has a particularly nice interface with large preview images. You don’t need subscription because preview image with watermark will be enough to generate palette.</li>
<li><a href="http://www.colorzilla.com/firefox/">ColorZilla</a>: Is an add-on that assists web developers and graphic designers with color related tasks — both basic and advanced. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can analyze the page and inspect a palette of its colors. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F569Q2r0Z-5w%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D569Q2r0Z-5w&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F569Q2r0Z-5w%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/d2bbcb4646b2785bc3252ac000f8724a/href">https://medium.com/media/d2bbcb4646b2785bc3252ac000f8724a/href</a></iframe></p>
<h3>Creating your own color scheme</h3>
<blockquote><p>“It’s ok to show all your colors.” -Luis Guzman</p></blockquote>
<ul>
<li><a href="https://coolors.co/e63946-f9edee-dba6ab-9e454c-561c21">Coolors.co</a>: Is a powerful tool to create multicolored schemes. You can simply lock a selected color and press spacebar to generate a new palette. You can modify or save yourcolor sheme. The site has a beautiful UI.</li>
<li><a href="https://color.adobe.com/create/color-wheel/">Adobe Color CC</a>: Has been with us for a long time. You can create color schemes from color wheel, use your own or existing images, or browse thousands of color combinations in ‘Explore’ section.</li>
<li><a href="http://paletton.com/#uid=50e0u0koOwikRLvkmGwt8qtqLmZ">Paletton</a>: provides an easy and fun way to create your own color palettes using as many colors as you like.</li>
<li><a href="https://material.io/color/#!/?view.left=0&amp;view.right=0">Material Design</a>: is a great tool to create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.</li>
<li><a href="http://stylifyme.com/">Stylify Me</a>: Was created in order to help designers quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. 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.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FnVLjAonBTFQ%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DnVLjAonBTFQ&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FnVLjAonBTFQ%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/7ba3b6b9cba3b1ae0185382b041abb14/href">https://medium.com/media/7ba3b6b9cba3b1ae0185382b041abb14/href</a></iframe></p>
<h3>Online image editing</h3>
<blockquote><p>“Art is nothing more than creating an emotion in your own form.” — Shannon L. Alder</p></blockquote>
<ul>
<li><a href="https://snappa.com/app">Snappa</a>: Select a preset size or enter a custom graphic dimension to get started. You can upload images, use existing ones, edit them and download or share them. With a free account you can get: 5 downloads per month, limited templates, 2 social accounts.</li>
<li><a href="https://pixlr.com/">Pixlr</a>: Make every moment beautiful with pixlr editor or express web app. You can work in layers, replace color, transform objects, and more.</li>
<li><a href="https://crello.com/home/">Crello</a>: Create unique free graphics and get inspered by choosing categories. You can save, share and download your image in different formats.</li>
<li><a href="https://www.fotor.com/">Fotor</a>: Use cloud for easy access, it supports HD file downloading (JPG, PNG, PDF). You can upload your photos to Fotor Cloud, make your designs public for all to see and instantly share your work on social media.</li>
<li><a href="https://www.canva.com/">Canva</a>: You can make a team, create your brand, find templates, edit graphics and download them.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FyMeuQmCczaA%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DyMeuQmCczaA&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FyMeuQmCczaA%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/dfe64102aed6af1a92226c65be5445c4/href">https://medium.com/media/dfe64102aed6af1a92226c65be5445c4/href</a></iframe></p>
<h3>Blogs</h3>
<blockquote><p>“No one ever succeeds without the help of others” — Jay Abraham</p></blockquote>
<ul>
<li><a href="https://www.invisionapp.com/blog">Invision</a>: A great place to design and prototype, but also an amazing blog to read and learn the latest trends.</li>
<li><a href="https://envato.com/blog/">Envato</a>: An organization focused on community, entrepreneurship, diversity, and integrity. It includes the categories Envato Elements, Studio, Tuts+, Websites and Blog.</li>
<li><a href="https://beautifulpixels.com/">Beautiful Pixels</a>: A place where you can collectively admire the works of some of the greatest user interface designs of our time.</li>
<li><a href="https://designshack.net/">Design Shack</a>: Showcases inspiring examples of design, alongside resources and articles that teach you how to succeed in the same way. Regular articles will teach you new techniques for creating your own designs, and daily community news ensures that you’re up to date with the latest developments elsewhere.</li>
<li><a href="https://www.smashingmagazine.com/category/ui">Smashing Magazine</a>: Delivers reliable, useful, but most importantly practical articles to web designers and developers. The creators don’t care about trends; but care about things that work or fail in actual projects.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FWpgomTUyTTk%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWpgomTUyTTk&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FWpgomTUyTTk%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/0c9ced86c4c230f7637b6ced1dc8f5e7/href">https://medium.com/media/0c9ced86c4c230f7637b6ced1dc8f5e7/href</a></iframe></p>
<p>Do you have a favorite site making your life easier? Feel free to share it. It’s always a pleasure to learn a new tool.</p>
<p><strong>Would you like to get me a coffee, please?!</strong>☕️</p>
<p><strong>You can do that here → paypal.me/eleftheriabatsou</strong></p>
<p><strong>But If you can’t, that’s ok too </strong>😍</p>
<p><strong>It would be nice to subscribe to my youtube </strong><a href="https://www.youtube.com/c/EleftheriaBatsou"><strong>channel</strong></a><strong>. It helps creating more content.</strong></p>
<p><em>Thanks for reading, have an awesome day!</em></p>
<p><a href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> | <a href="https://codepen.io/EleftheriaBatsou">Codepen</a> | <a href="https://github.com/EleftheriaBatsou">GitHub</a> | <a href="https://twitter.com/BatsouElef">Twitter</a> | <a href="http://eleftheriabatsou.com/">Site</a></p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ff41ee71765c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/tools-to-use-in-your-next-ui-ux-job-part-2-ff41ee71765c">Tools to use in your next UI, UX job — part 2</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Tools to use in your next UI, UX job — part 2

Tools to use in your next UI, UX job — part 2

Top Stories