Graphic Design Tools For Hackers

Tools that will run you under $0 but still pack some serious design punch.

If you are someone like me, who loves creating digital products like web and mobile apps but designing is not your cup of tea, then this article is for you my friend.

I am a developer at heart and a solopreneur. I write apps and launch them directly to my audience, so I am the in-charge of both the coding and designing camps, at my little workshop.

Digital products like apps are more about beautiful designs and marvelous UI/UX than a modular and maintainable code base.

Every new app project has some basic graphics requirements like:

1. Color Palette
2. Logo
3. Featured Images for social media
4. Icons

What tools can you use to design all of the necessary graphic assets which are required for making your app a reality? Let me share with you, some of the design tools I use to create most of the graphics in my apps.

Canva.com

This is the one stop shop for most of your graphics needs. It offers many ready-made and ready-to-consume template for Icons, Logos, Facebook Cover Images, YouTube thumbnail etc., which you can also customize according to your needs.

On top of that, it also offers elements like basic shapes, color palettes, Google fonts, text blocks etc., which you can mix-n-match in your projects, to create entirely original pieces of art.

It offers downloading functionality so you can download your designs in .png and .jpg formats and use it elsewhere, for free, if you’ve only used free-to-use elements in your designs. If there are some paid elements in your design, you need to pay up, accordingly, in-order to download your designs.

I use Canva for creating images for my apps, social media images, cover photos and app store listings.

Figma.com

I learnt about Figma recently and this tool literally blew my mind. It enables you to draw custom shapes and designs using the pen tool. You can also design your app screens using basic cut-copy-paste-resize functionalities.

You might be thinking something like, I am not a designer, bro! Why would you think that I am proficient enough to use a pen tool? I get it! but working with Figma’s pen tool is an entirely different story.

Their pen tool has this awesome “vector network” functionality, which enables you to draw and resize your drawings, at the same time. Any one can draw basic shapes using bézier curves and lines. It will take a few minutes to get acquainted with the pen tool and it will be a fun ride afterwards. I promise! Past this, your creativity is the limit.

You can design custom shapes using pen tool and mix them up with basic shapes like squares and ovals (there are other tools to draw those), to create original designs and app mock-up screens. You can also group shapes for easier editing.

I use Figma for creating custom logos and app screen mockups and SVG resources.

So, if you need an entirely original icon, follow this flow: Design the original shape or mascot in Figma > import that in a Canva template > Adjust the colors etc. > Download your original design > Use it!

Inkscape

This is a desktop based software, which can be installed on Windows, Linux and Mac. It’s actually an open source alternative to Adobe Illustrator.

You can basically draw shapes, icons, logos in Inkscape. The only limitation is your creativity. But let face the reality! We are not designers, nor are we trying to become one. So what good does this tool bring to us?

Lately Android has started supporting VectorDrawables, which is a fancy term for SVGs in a specific format and the web is also moving away from PNGs and JPGs, towards SVGs. So you can use Inkscape to create and resize your SVGs files, which you can use in your website and apps.

I use Inkscape to create basic shapes or logos in SVG format and compress the size of SVGs I obtained from elsewhere, like from Figma.com.

GIMP

This is a free image editing software which runs on Windows, Linux and Mac and can be used for editing images. This tool deals with bitmap graphics while Inkscape deals with vector graphics.

https://www.thoughtco.com/vector-and-bitmap-images-1701238

GIMP is an open source alternative to Adobe Photoshop, so you can use it in similar fashion, if you’ve some experience with Adobe Photoshop. It has basic editing functionalities like cut, crop, scale, bucket fill etc. It also has “layers” feature using which you can use to write or draw something on top of an existing image(s).

Learning basic image editing in GIMP is fairly easy. Within an hour you’ll become proficient enough in performing basic actions like cutting, cropping, layering and exporting your designs.

I use GIMP to cut, crop, resize my image assets. I also use it to design or write something on top of an existing image. Sometimes I also use it to create mock-ups and app screens.

If you can practice with these tools, for a few hours, for a few weeks. You will find yourself capable enough to design and export basic graphic assets for your applications and ask for particular changes from your designer friend, instead of asking him to “Make it pretty” :P .

Bonus

InvisionApp

It’s better to first create the mock-ups and a storyboard for your app, prior to diving into the coding part. This will unearth many of fundamental problems with UI/UX and hard-to-understand parts of your application.

It’s much harder to rectify design and UI/UX issues, once you’ve readied the code of your app.

InvisionApp helps you in creating such a storyboard for you app. Here is crash course of how what works:

1. You create the mock-ups of your app screens. I use Figma for this.
2. You import all of those in InvisionApp
3. You create hot-spots in your screens, which upon clicking, navigate to other screens.
4. You weave an entire storyboard using hot-spots and screen transitions.
5. You can now share the storyboard with the stake holders
6. Stake holders can now play the storyboard, just like a real app and provide you feedback regarding the UI/UX and designs.

That’s pretty much it. Now you know what design tools I use to create graphic assets for my digital products. I hope some of you will profit from the above mentioned tools.

Do share your project with the community, if you choose to use these tools for your next project.

If you liked this post, kindly recommend it to your network and follow me for more posts like this. You should also subscribe to my YouTube channel, if you like developing digital things.

Twitter|YouTube|Rayn Studios

Till next time…