Training Your Eye: Visual UX Design Tools for Non-Designers
Kerning and contrast and hex, oh my
Before pivoting into UX, the last time I sketched was as an undergrad in a set or costume design class. It was clear from the beginning of my UX exploration that I was going to have to get out my beret and brush off my colored pencils and fine-tip markers.
I found the free 100 days of sketching challenge by Krisztina Szerovay here on Medium, and it changed everything. In just a few weeks, I went from being anxious about drawing squares to fancying myself a budding graphic recorder/sketch noter/Ink Factory intern.
I have a lot more to learn about visual design for UX, and am wearing out my headphones with Lynda.com and CreativeLive videos. Sometimes, though, I need something a little more…interactive. Here are a few of my favorite bookmarks and apps:
How big is a pixel? Are you sure? Tune up your guesstimating with Pixactly, an online tool that gives you dimensions for a simple box to draw. The farther off you are, the more points you get. Easy, right? NO. NO, IT IS NOT. But it is free.
Kern Type: a learning game is an interactive game designed to help you visualize (and create) good typography. Just drag the letters either closer together or farther apart using the arrow keys on your desktop or laptop. Open the site on your iPad for a multitouch version. Free.
I Shot the Serif is a multi-level time-based game that tests your eye for those little font feet as well as your reflexes. Choose your designer level — junior, middle-weight, or senior — to start. Then shoot the serif (but not the sans serif) to advance, and compare your high scores with other sharpshooters. Got an iPhone? Nice — there’s an app for that. Free.
If you can’t tell Playfair from Avenir, help is on the way! What the Font is a magical font identifier that uses deep learning to search their collection of over 133,000 font styles and find the best match for the fonts in your photo. Just upload an image, click the font you want to identify, then check out the results. To identify fonts on the go, download the app from the App Store or Google Play. Free.
Bonus font identification resource: learn all the jargon you want and more with a great site from Fonts.com. Fontology starts with the anatomy of individual characters and provides a terrific set of links to introduce you to topics from designing numbers and symbols to understanding influential design figures.
Get to happily-ever-after in your next design by combining letterforms that are guaranteed to have an unspoken electricity. Type Connection, a typographic dating game, helps you find suitable couples for your work, whether you think opposites attract or prefer fonts that have something more in common. And it’s not just for fun: along the way, you explore typographic terminology, learn type history, and deepen your own connection with type. Now that’s love. Web only. Free.
The old standby isn’t always great for representing modern text, but not everyone can get away with using the (delightful) Jeff Goldblum text generator. Happily, UK content marketing company Boom has built an alternative text generator for all your fake content needs! Just enter your topic, and specify the amount and type of copy you need. The tool will mine Wikipedia for sentences that bear a striking resemblance to your future content and will not alarm clients. Free.
Learning hex is like learning a new language. Every color starts with a hashtag, for one thing. Then you have six digits, with the first pair corresponding to red, the second pair to green, and the third to blue. Digits can range from 0–9, with 0 being the very very least of a color and 9 being more of that color, OR from A-F, which are even more of that color to the very very most of that color (that’s why #000000, or no color, is black, and #FFFFFF, or all the colors, is white). Luckily, you can earn points with that arcane design knowledge! Test your eyeballs with Hex Invaders (don’t worry, there’s a quick tutorial). Free.
Sure, any old eyedropper tool can help you identify a color. But what colors go with it? Paletton’s web-based Color Scheme Designer has you covered. Pick your color, find its complementary color, and see examples of what they’d look like together in a web design. Free.
Contrast is one of the key elements of readability for web properties. If you’re not sure whether your content is accessible to everyone, one handy tool is Contrast Ratio. Enter your background color and text color, and the tool gives you a readability score.
There’s more to accessibility than contrast, of course — you want it to be beautiful, too! To make sure your site is welcoming to everyone, take it for a spin through Color Safe.
What tools were helpful to you as you started out in UX? If you’re a new UXer, what help do you need? Let me know in the comments!
I’m Houli, a UX researcher and designer based in Austin, Texas. Follow my adventures here or on Twitter at @thejhoulihan. Special thanks to Andrea St. Clair for introducing me to many of these resources!
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
Training Your Eye: Visual UX Design Tools for Non-Designers
Research & References of Training Your Eye: Visual UX Design Tools for Non-Designers|A&C Accounting And Tax Services
Source
0 Comments