UI design hacks you can apply today — lessons from my visual designer friend at Google
Are you a developer or UX designer who needs some quick and dirty hacks to polish up a project? If so, these are some of the lessons I’ve picked up from being around my visual designer friend for five years.
It’s unlikely that I’ll ever reach her level of dedication in visual design. Still, these fundamentals has transformed me from a 90s Comic Sans loving kind of guy — to a more respectable, modern UI/UX developer.
Layouts
“OMG, they’re suffocating! Give your elements room to breathe!”
Leverage white space. I can hear her reminding me every time I’m designing. “OMG, they’re suffocating! Give your elements room to breathe!”.
So unless you want to choke out the elements and piss off your audience, don’t forget to save room for white space between them. It’ll help you with building visual hierarchy (where you want your audience’s eyes to focus on first). It’ll also make the page much easier to read.
Play with alignment. Center align may not always be the best fit, it depends on each situation. To keep it simple, start with left align as default. In America, we read from left to right — this could vary based on countries.
Study print for inspiration. My friend has a trained eye for layouts. She learned it all from her print background. If you’re stuck, try flipping through print magazines or newspapers for inspiration. She’s a big fan of The New York Times.
Typography
If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them. — Steve Jobs (Stanford commencement)
Typography is so critical to UI design. It changes the entire look and feel of your content. Even though Steve Jobs dropped out of college, he went back specifically to take a class in calligraphy. He felt that it was mission critical to the design of the macOS.
Limit your fonts. Use no more than two different fonts. If you don’t know much about typography, stick with a single font. I’m a font noob, so I stick with only Roboto (the default Android font). If I’m feeling adventurous, I try to mix in some Roboto Mono for the titles.
Emphasize key elements. Leverage bold, italic, or underlines to highlight different parts of your content. But use them sparingly. As a beginner, you should never use any of the three together like THIS.
Focus on readability. For long paragraphs, consider the contrast of your font color and background choice. This will help make text more readable. While thin fonts look great on your high-res retina MacBook, it’s virtually unreadable for users with a low-res device. Always focus on readability first before optimizing for look.
Colors
Always build from white. You can always add more colors later.
Limit your colors. Try not to use all colors of the rainbow, unless you’re skittles! Use gradient and shades to give it more depth instead. Or keep things monochromatic.
Understand the use of colors. Use slightly desaturated colors to make it easier on your reader’s eyes. Using Google Material Design colors is a good start. Reserve the use of green for go, ready, or success. Red for stop, errors, warnings, or alerts.
Leverage the color wheel. To find color combos that work well together, use a color wheel. The color theory can get very deep. For a quick start, go with monochromatic (single color) or complementary (opposites on the color wheel) colors.
Logos
Stick with only text. Designing logos is one of the things that I used to waste a lot of time on. If you don’t have the budget to hire a professional logo designer, keep it simple and use only text. Seriously! Large or bold text is enough. Nothing else. Remember that at the end of the day, the value of your brand to your audience is 99% your content, and only 1% your logo. Please pause and take a moment to think about this.
Add simple shapes. If you still feel that having a text based logo is too plain, you can experiment with adding simple shapes. Squarespace has an awesome free logo maker you can play with.
No right or wrong
These were some of the useful hacks I’ve picked up from being around a very passionate visual designer for 5 years. There’s no right or wrong in design. You have to keep experimenting. Be relentless in testing different combos with your target audience until you find the right fit.
I hope these basic UI design hacks will give you a jump-start in achieving a clean, minimal, and user-centric design for your next digital project. Good luck!
Did I forget anything? Let me know your thoughts! I’d love to hear your feedback in the comments below. If these tips helped you with your project, I’d be stoked to see a before and after!
…and now for some cringe factor — here’s a little bonus from yours truly :)
