If designing a compelling user interface isn’t in your wheelhouse but actually building that UI is, this article is for you! I’ve listed some resources here that would be useful to graphic designers and web designers too.
What image editor should I use?
You’re not a designer so you don’t need Photoshop, Illustrator, or Sketch. These are all fine applications but are a bit overkill if all you need is to crop, resize, and occasionally fix a few things in a photo.
Do you like free?
It’s amazing times we live in where we can get free image editors!
Pixlr.com and Canva.com are both online image editors. Pixlr.com offers a full suite of image manipulation tools. You can upload and edit images, or create your own from scratch. You can even open images from another website or URL. Canva has many of the same features but is more goal oriented, giving you templates to start with and even allowing you to search and purchase stock photography directly through the site. I’m a Photoshop guru but when I’m at a different computer, I use either of these depending on what I need.
I also need to mention GIMP here. You have to download and install GIMP (Oh, what a drag, I know!) but you can install on Windows, Linux, or Mac. It’s got a different workflow than Photoshop but it has a lot of the same features. Oh, and it’s free. GIMP, I have a lot of love for you.
Lastly, take a look at Affinity Photo. For a one-time $49, it’s a great price for a full-featured photo-editing software and it works on iPad too.
Screen Capturing
While we’re on the topic of images, what’s the best screen capturing tool? I’ve used CaptureWizard and Snagit in the past, but I’m now using Lightshot. First off, it’s free. When you hit the PrtScrn button, you can quickly select the area of your screen (*ahem* or screens) and then draw on it, share, copy to clipboard, or print. It’s one of the best I’ve seen and it’s free.
I’m on a PC most of the time but the Mac has a great screen capturing tool as well. Windows has one too but it doesn’t really do the job. So if you’re on a Windows machine, go download Lightshot.
Image Optimization
Are we still talking about images? Yup, lots to talk about!
For compressing your images, check out Squoosh.app. Created by Google, you can easily upload an image, set the compression, and they even have a fun slider to view the ‘before compression’ and ‘after compression’. Oh, it’s free.
If you need to clean up and optimize SVGs, you can use SVGito on the Sketch Master site.
There’s also plenty of WordPress plugins for compressing and optimizing images but that’s if you’re using WordPress.
Icon Fonts
Rather than using small icon graphics (sprites), you should use an icon font. There’s a lot of advantages for doing this. First, it’s easier to use since you get a whole bunch of icons within one font, and you can simply change the size or color – since it’s a font. Second, they’re vector-based so when you resize them, they’ll scale without loss of quality. And third, they’re less file size. There’s a lot of great icon fonts out there and you’ll usually find me using either Font Awesome or Material Design icons.
There’s also some great icon font builders. These are different because they allow you to make your own icon font that includes just the icons that you need in your project. This allows for a smaller file size and is easier to manage. Both Fontastic and Orion are compelling websites that allow you to choose from thousands of icons already available on their sites and upload your own.
Fonts
Google Fonts. Ok, done with this section…
Maybe I should write a bit more. Yes, there’s a plethora of great fonts out there and lots of amazing sites for fonts BUT Google Fonts has so many advantages that I seldom need to look elsewhere. To start off with, Google Fonts has a huge library of free fonts. It’s extremely easy (and fun) to try out different fonts and see what they’d look like with your copy. It’s also easy to download fonts or grab the code for your website. It also shows you the size of the download and allows you to only grab the font weights and styles you need.
There’s another advantage to using Google Fonts for your website. When you use their embed code, if your site visitor has been on any other website that uses the same font, their browser won’t have to load the font to render that site. So you can get faster load times too.
Ok, I do have to mention Adobe Typekit here. If you are already subscribed to the Adobe Creative Cloud, this is included so this can be a great option. It’s also easy to use and includes so many more fonts but I’d argue that this is more for designers.
Free stock images, textures and patterns
If you need a head-start for a user interface design, stock images, or additional design resources, I’ve visited a few websites that fit the bill. Check out Freebies Bug, Graphic Burger, The Starter Kit, and PSD Repo for overall web design resources. Be prepared though, there’s a lot to look at. If you’re into design at all, it’s like a kid walking into a candy shop.
If you’re looking for just textures, go to Textures.com. For user interfaces, go to UI Cloud. For patterns, go to Subtle Patterns.
Onward!
Hopefully, these resources will help you continue on with your project and you’ll get some benefit from them. If you are looking for more recommendations, check out my resources page. If you want to give me thanks, throw a link back to my site or visit my store page.
