A List of Useful Assets & Tools to Spice Up Your Next App

Luis Reyes Bartolome
4 min readDec 14, 2020

Tell me if this sounds familiar. You are a Software Engineer making some kind of project, ready to practice your awesome coding skillz. You’ve spent time learning how to render your front-end app, you have a lot of cool interactivity, things are loading pretty quickly, and you can any element to wherever you want on the page. On a technical level, your site is looking pretty good. But it can quickly become boring if you don’t have the right assets added to it. Your code may be a work of art, but sometimes you need some actual artwork & icons added to your app to give it that extra edge. If you are anything like me, actually drawing is a major weak point. So that’s where this comes into play. I’ve gathered a list of useful resources to add to your app to spice it up, and they have the added bonus of not costing anything. So, let’s begin with …

Illustrations — ManyPixels

Screenshot of the ManyPixel free gallery of illustrations
A great and pretty customizable source of illustrations. Comes in SVGs and PNGs

ManyPixels is a great source for illustrations. The site has a pricing model where they can make custom work for you, logos, and other branded assets if you are interested in spending money. But they also have a pretty large bank of illustrations with a unified style that they offer royalty-free. There are about 5 unique styles, and they cover a lot of different categories for whichever app you are trying to make. Though it isn’t too tough to dig deep into the SVG file to change the colors, it has a useful color picker on the page so you can change the main color of the illustrations and export them as such. I find it pretty useful to preview what the illustrations would look like under a bunch of colors, and pretty easy to use. I’m personally a fan of the isometric SVGs they have.

Images — RawPixel

Screenshot of the RawPixel free gallery of images
A great source of images for hi-res images . They also have a wide range of “transparent” images too.

While making an app, you’ll find you’ll need a nice hi-res image for a multitude of things. You might need a nice image for a landing page, or for the site’s marquee. This is where RawPixel comes in. I find using this site to be more useful than just searching google images. They have a good mix of free, public-domain (you have to include a small license), and premium images. All of the images have a good resolution, and the site has so many transparent background images which do great to add as a mask to something. They have a bunch of different types of accounts. With the free account, you can download about 10 images per month from the free section, unlimited from the public domain. They have a wide variety, and you don’t have to worry about getting copyright complaints from anywhere else.

Icons - The Noun Project

A screenshot of the noun project showing some of the pretty SVG icons they have.

The Noun Project a great collection of icons that cover EVERY single category you can think of. It is absolutely crazy how expansive it is. I normally use these icons as SVGs and they are very lightweight and easy to import. The icons here are great for using as random icons sprinkled into your app or even amazing artwork to add into your logo. Unless I’m looking for a specific logo for a copyrighted thing (ie. Youtube, or Github), I go here.

Color Palettes — Happy Hues

A screenshot of Happy Hues previewing color palettes
Great app for palette ideas

Any Front-end Developer has the site in mind, but not every Front-end Developer has a eye for colors. Here comes Happy Hues to the rescue. The site has a large number of premade palettes you can click through. My favorite part of the site is that the site is the actual demo. The entire page changes to show you what every element would look like under that color palette. The content of the site explains the science behind the power of colors, while also giving you the HTML code for the colors to every section. It’s great for inspiration, and it’s great to understand how to balance everything visually. Someone inexperienced might just make everything uniform & flat with the palette, failing to alternate the colors through each section. This site shows you a great way how to do so, adding a great pop to your app.

Conclusion

There are a lot of open-source assets you can find online, but these are a great place to start without having to venture too far. Just adding these will be enough to spice up your app and make it a lot more visually pleasing. Now you’re free focus on the cool features of your app, fully knowing that the visuals are better now.

--

--