UI Design Tools

I've found quite the happy home in user interface and user experience design (UI/UX), and I wanted to write a post that detailed out some tools that I use in my process. 


Inspiration

Inspiration is key to get the 'ol brain engine firing on all cylinders. That's why I've put it as tool #1 in UI Design Tools. There are infinite sources of inspiration out there, but I do have my go-to:

Dribbble

www.dribbble.com

If you're in UI design (or any kind of design for that matter) and you haven't jumped aboard the Dribbble train, it's time. A tab for dribbble.com stays open in my browser pretty much constantly. It's a great source of inspiration for all things design.

Here's a few other sources to consider that you may find helpful in your UI exploration from time to time...

Oh, and it can also help to step back from the computer. Get out of the office. Go walking in woods or down the street. Play a game. Give your brain a break. Do something goofy...


Design Software

Well, you have your pick of the litter when it comes to software for sure. But again, I have my favorite...

Sketch

www.sketchapp.com

This little gem has made serious waves in the design world. Even Adobe, who built the industry standard design software, is taking notes from the success of Sketch. It's lightweight (see screenshot below) and just what you need for UI design.

Sketch has also provided a nice library of plug-ins to assist you in your design process and workflow. The content generator plug-in is specifically useful when needing to fill in names, photos, etc. in an interface; and if you've experienced frustration in the design-to-development phase, check out Marketch.

Sketch application weighing in at 51.9MB

Oh, and it's a one-time cost of $99 - quite competitive when Creative Cloud forces you into a subscription. Don't get me wrong, I still use Photoshop, Illustrator and several other Adobe apps on a regular basis, but when it comes to UI, Sketch is changing the game.

 

Adobe Creative Cloud

www.adobe.com/creativecloud.html

Adobe is still the industry standard when it comes to design software overall. For all those tasks I find that I can't do in Sketch, I make use of Photoshop and Illustrator.

If you are a Mac user and need a cost-effective solution for design outside of Adobe's Creative Cloud monthly subscription, check out Affinity's Photo and Designer solutions.


Design Elements

As you get into your design, you'll find you need some design elements here and there. For example, the Safari header bar, specific icons, or a beautiful placeholder image. You can create these yourself, as many of us have done and sometimes still need to do, but there are many resources available, and a lot of them are free

Unsplash

www.unsplash.com

Many other sites have followed their lead, and no doubt you've seen photos from Unsplash all over the web. Well, there's a reason. Their photos are phenom, and free. Check 'em out. There's even an Unsplash plug-in for Sketch ;)

SketchAppSources.com

www.sketchappsources.com

For those stock iOS elements, material design pieces, or credit card icons for your checkout screen, SketchAppSources.com is a winner.

If you're in need of wireframes for some Apple products, I've got some free ones available

I would also recommend digging in at sketchrepo.com

Symbolset

symbolset.com

Although not free, since downloading a few icon fonts from Symbolset, I've used them consistently. I've found the glyphish set to be most useful for me.


Choosing Colors

Choosing the right colors for your UI can be tough, but have no fear! Here's a great question you can ask yourself to get started: 

What/How do you want people to feel as they navigate through your UI? 

Image from CoSchedule.com

Different colors evoke different emotions, they have psychological impact.

Are you seeking to communicate dependability and strength? Maybe explore a blue & tan color scheme.

Looking for something more energetic? Check out some shades of red.

If need be, consider some inspiration via some of the sources listed above.

So let's say you have a general idea of the color scheme you want. Now you need to land on some appropriate hues, tones, etc., but how do you know if the contrast is sufficient? After all, people need to be able to see your text, buttons and other UI elements clearly. Let me introduce you to Colorable... 

Colorable

jxnblk.com/colorable/demos/text

Matt D. Smith introduced me to this amazing tool for choosing the right colors when it comes to finding the perfect contrast. It will give you a "AAA" for maximum contrast, and a "Fail" if...well, the selected colors are no good together.


Prototyping

Let's face it, being able to present a UI to clients with some movement and interaction is way better than showing them still screen shots. As they interact with your UI, you are able to help them catch your vision. It is becoming more and more important for designers to prototype their concepts, but don't worry, no-coding-necessary prototyping is here!

Marvel

www.marvelapp.com

Image from MarvelApp.com

Image from MarvelApp.com

I just love their branding and the feel of their interface. I've used InVision, which is also a great product, but I've settled on using Marvel. Maybe it's because they give you unlimited projects for free...

And yes, there is a Marvel Plug-In for Sketch that enables you to export your art boards directly into Marvel. There is also Dropbox integration. #Boom.


Alrighty, now that you've got some tools, it's time to get designing! If you're not sure where to start, I would recommend DailyUI's 100 days of UI practice. Have fun!


aiux

Looking to dive into user experience (UX) design as well? I recommend you check out AIUX, a great great course from Matt D. Smith for both new and seasoned designers.