4 UI Design Tools I Can't Live Without

design is one of the most important and underlooked things when it comes to building successful web applications not only of course should the functionality be good of whatever your web application does but it's so important to design it clearly so users understand what it does and how to easily use whatever you build it's so important so in this video I want to share with you four design resources I've collected along the years that really help me design beautiful applications and I really hope they will for you too first thing I want to talk about is made by it's a single dude and he's creating a service called FF fuel whatever you pronounce it right doesn't matter basically it's a completely free assortment of a lot of tools regarding svgs where you can have a Color Picker you can create SVG blobs things like SVG Spinners abstract SVG backgrounds you can click on each of these and each one has different options where you can create patterns for your website this looks very all right whatever this looks kind of trippy now the one tool I use the most here is the LL line that lets you draw certain shapes and then it creates you an SVG from that shape for example we can create a circle adjust things like the thickness the roundness and some other stuff and if you know how to do this properly and play around with this a bit this can look so nice on your website for example check this out one website that does this extremely well is Josh K's course where some svgs are embedded here on the website in the background like this Ling around the hard and you can see that also further down on the website like underlining important things in the text this is exactly what you can do with the L line let's clear this you can draw the lines then easily connect it and just like that export the SVG embedded on your website just the gradient if you want I think this is super cool and all of these are completely free next up is UI labs and this was just recently launched by a product designer at versel and while this is unfortunately not a component Library I think the design choices here are super cool these are certain widgets like the calendar widget and multiple below that where you can click on them and then you have Micro interactions and this is really useful to understand how clean animations are done the flexible tags container dynamically expanding and shrinking the container as you manipulate tags I wouldn't ship this in production because of the sudden change of position of the elements inside the component but it was a fun exercise and that's true it is probably a bit distracting but you can really get a feel of how good animations how good interactions on your website like on your portfolio for example should feel these could be like images on a website when you hover over them then they kind of Pop we have some sliders and a dynamic header drop down next up is this one uh it's super basic right it does one thing it gives you color palettes and if you're searching for specific colors then most of these actually look great out of the box I use them on my websites I use them to make my thumbnails I think this is a super cool resource for you to get access to really nice colors honestly there's not much to say here I use it a lot though it can be really really helpful and then the last resource is also made by an ex versel design engineer while I'm making this video he already switched away from versel but he used to work at versel and he does a lot of Animation stuff on the web and he is also the author of some of the really cool stuff in the react ecosystem like the drawer for example or a popular toast notification Library you can see that here in the bottom kind of hard to see on the white background but there are toast notifications here to me it seems like this guy really knows what he's talking about as we kind of switch around on the dynamic Island that he made that feels like an apple thing right but kind of remade in what I assume is frame or motion and react or nextjs and of course also fully interactive if you're building a music player this could be super cool if you're building a kind of Pomodoro Timer this could be super cool how do you make your animations feel I think this guy does a fantastic job at that same thing with something called origin aware animations this is the unaware right take a look at this unaware it pops out in the center right here if we compare this to the aware it comes out of where the button actually is and this is hard noticeable but users do notice and this tiny detail of aware versus unaware animations can make your app feel so much smoother listen man all of these components feel super natural to interact with you can slide them down everything behaves as you expect it to be and I take a lot of Inspirations from that for my own projects and there are in-depth explanations on his website about the thought process behind all these animations or what the challenges are in building really natural interactions that your users will appreciate hey I really hope you enjoyed this video and that these resources will help you in building beautiful web apps as much as they help me and as I said it's not only web apps design is so important for everything when I do my thumbnails and so on of course design matters a lot but at the same time design should always follow functionality and it's never the primary reason that anything is used but it's also the foundation for anything being used if the design is clear if users understand what your product does that is one of the most important things so anyways I could ramble on about how important this I really hope you enjoyed this video four tools I showed you and I'm going to see you in the next video Until then have a good one and bye-bye

Channel: Josh tried coding

Views: 67,254

Keywords: design, react, typescript, ui design, ui library, josh tried coding, joshtriedcoding

Id: PQfQZ9iH8bg

Length: 5min 7sec (307 seconds)

Published: Fri Mar 22 2024