UI in Flames? 24 Easy Design Tips for Software Engineers.

You’re a top notch back-end engineer. You can develop almost any server-side and client-side application. But, when it comes to design, you’re completely lost. Maybe you’re working on an app or website right now that’s going up in smoke. Or, perhaps you’re looking to collect some simple tips to keep in your back pocket the next time you’ve got a UI to tend to, and no designer to back you up. No matter the reason, here’s your go-to game plan.

As a full-time freelance product designer having designed countless UX and UI experiences, these are areas software engineers overlook the most, but are so easy to fix, and have the greatest impact on design. The best part? You’ll never have to open a complicated design program to make use of them. Alright, let’s get into it!

If the layout is disorderly, try these.

Comprehension of an interface or experience is predicated on guiding the viewer to particular areas of a screen, in the order you want things to be seen. If the layout is confusing, here are the easiest ways to fix it.

Establish a perimeter

Borders help define content and groups, and add structure to a screen. Moreover, a border can be much more than a pixel line around an element. A border can be thin, thick, an entire filled-in shape, or even a background image. Add a border to help separate different areas of a design and signal to the viewer that anything outside of it isn’t immediately relevant.

Create some distance

When every inch of space is occupied by content, things start to heat up in a bad way. To fix this, try adding a bit more space between elements—in the design world we call this white space, or negative space. Increase the space between sections of content, and add more margin or padding. A little distance between elements will be a breath of fresh air.

Prioritize what’s emphasized

When there are too many messages for a viewer to look at, nothing stands out. Do some damage control:

• Make sure there aren’t multiple sizes and/or colors of text in the same paragraph.
• Limit excessive use of arrows—they can direct a viewer’s attention to a CTA or some other area within a design, but if the visual comprehension of your layout requires it, that’s usually a sign of larger disorganization.
• Decreasing the size of the logo can improve the look of a design by shifting focus from the logo itself, to the content. Try reducing the size of the logo by approximately 25%.

Is the text easy to read, or should you burn after reading?

If the text isn’t easy to read at a glance you’re toast. After all, the words an experience encompasses are half of what the viewer is looking at. You’ve got to make it easy on them. Try these tips.

A case for capitals

Text written in all caps is more difficult to read than text that isn’t. When we read, we look at the highs and lows of each letter to help us determine the actual letter we’re reading, and combine each letter to understand the word we’re reading. So, when you have long passages of text, use title case, which is when the first letter of each word is capitalized, or sentence case, where only the first letter of each word and proper nouns are capitalized, to avoid this dilemma.

Don’t use fonts this way

If you designed the thing you’re working on, you likely picked a unique font that has loads of personality. Nice! But, if you picked the wrong one, that can be what’s putting your experience in distress. Certain fonts that are more decorative and ornate are classified as display fonts, and can make a design illegible when used for small text.

Some popular display fonts are Lobster, Bebas (only because it doesn’t have any lowercase characters,) Cinzel, and Kelly Slab to name a few. Recognize any of these? Such fonts should be reserved for headlines and text larger than approximately 30 pixels. But, that’s a guideline. It all depends on your situation, and the font you’re using.

The right number (and combination) of fonts

As a software engineer picking fonts is probably a chore. And, the more fonts a design uses the more difficult it is to get things to come together. That said, easily shore up a shaky layout by limiting the fonts to just one. Pick a font that has a specimen with many different weights (thin, light, medium, bold, etc.) Or, use a variable font. The amount of variety you can achieve with capitalization, color, and letter spacing will easily make up for the difference in limiting the quantity. If you really do need more than one, don’t break a sweat finding the perfect combination, rely on a font pairing tool to do the leg work.

Wrap at the right time

This next one applies to interfaces where the screen is large enough for this to be an issue. In web design, when the width of your content is too wide it can quickly grow unwieldy look at and read. Text shouldn’t span the entire width of the screen on desktop; give it a maximum width. Or, break the content up into columns that sit next to each other.

Justification devastation

There’s nothing right about this one, and I see it time and again, messing up what would otherwise be structurally sound design. The idea of justified text is logical: flush edges to achieve a crisp, organized look. In practice though, it creates a bigger visual problem than it solves. Justified text leaves a design with unequal gaps between words, which looks terrible. Yes, the lines are straight on the left and right edges, but everything else about a passage of justified text suffers, including readability. The solution of course is to left justify things.

There are instances where that might not be an option though. For example, if there’s a centered heading or sub heading above it. When that’s the case, try centering the text. But steer clear of centering text that is more than a few lines long. That will only add fuel to the flames.

Declaration don’ts

It might be quick, or even your only option depending on the font you’re using, however, italicized text looks far better when you use a font’s dedicated italic version, not HTML. When you use the italic declaration, you distort the normal weight of a font to achieve the look of italics. The difference between using a font’s dedicated italic version vs forced italics is subtle at small sizes, but when viewed in large headings the differences become more obvious. Small details like these have a big impact on the perception of an experience, and whether or not it looks professionally designed.

Grab attention like a pro.

The call-to-action is arguably the most important interaction of an experience, so making it easy to spot is crucial. If your CTA needs rescuing, take my hand, I’ll show you the way:

• Increase the size. Larger buttons are usually more important. When you increase the CTAs size it sends the message it’s the most important interaction to perform.
• Fix the position. Anything that remains in the viewport the entire time, like navigation, is important. Treat the CTA the same way. Use position sticky, or position fixed to keep the call-to-action squarely in sight.
• Change the color. Sometimes adding a distinct color is a simple fix to separate a CTA from other less important buttons and visuals.
• Label with clarity. A good call-to-action almost never reads “click here”—that’s uninformative. Instead, provide clues about what to expect when someone clicks or taps through. “Access account”, “download report”, and “reset password” are all examples of great labels.

Let’s assess your assets.

We’re a few steps closer to putting out this fire. This next set of tips has everything to do with graphics.

The cause of incendiary images

The goal when incorporating photos is to make them look as natural and cohesive with the design as possible. Or, better yet, like someone photographed or created them specifically for the thing you’re working on. Outside of that, images start to fall apart. But, in order to spot bad images, you need to know what to look for. These are warning signs that designers agree, make a design go up in flames:

• Too cheesy. People looking at the camera (unless you’re working on a team member page, etc.) a thumbs-up gesture, and contrived poses all come across as torch-worthy. Avoid these when possible.
• Free. Photos from free stock photo sites are good in a pinch but may not be strong or unique enough to carry the weight of a design. They might be free, but they’ll cost you in one way or another.
• Low resolution. As a software engineer your first priority when evaluating images is likely load speed. But, if you’ve compressed an image so greatly that the quality loss becomes noticeable, that’s as good as a lit fuse.

Spark some consistency

Illustrations, 3D art, and photos all communicate different things to a viewer; combine them in the wrong way and your experience will look like a disaster zone. If you’re guilty of this and things aren’t looking so great, limit the variety of graphics you use. Here are a few ways to keep everything cool, calm, and collected:

• Use a photo series. Some sites offer collections of photos of a particular theme taken all in the same session. One of the ways to find a series is to simply click through to the photo you’ve found then look lower down the page. Often it’s easier to find these at sites like Stocksy (see previous link), and istockphoto.
• Use an icon series. Pulling an icon from here, and another one from there will surely look mismatched. To find a comprehensive series, check sites like shutterstock and again istockphoto. When you find one icon set you like, click on the artist’s name and do a portfolio search to see what other icons are in that series — often many more are available that aren’t displayed. If that doesn’t get the job done, there’s always Material Design; icons there are free to use and there are plenty to choose from. You can even use them if you’re not working on an Android project.
• Use an illustration series. Are you seeing a pattern here? These days it’s easier than ever to find a suite of illustrations that look consistent. Find them at any of the resources above. You can also find comprehensive illustrations in a hurry at niche sites like Storytale, Craftwork, and Growwwkit.

Overtime: A bad photo can make a design look particularly unskilled. If you’ve checked the paid photo sites (and even some of the free ones) and still can’t find what you’re looking for, activate plan B. Instead, use an abstract image or textured image. That perfect photo of someone buying something, doing something, or in a particular location may not even exist!

Splash out with the right color.

Check these last few tips out to make sure your experience is as easy on the eyes as possible.

Color, out of thin air

Save the blue-sky thinking for important engineering tasks you’ve been pulled away from. There’s an easy way to get an entire color scheme that looks great; color generators. They can throw out a bunch of combinations for you to sift through, and eventually you’ll find one that just works. Try Coolors, Pigment, and Khroma.

Rein it in

Are you using 50 shades of gray or some other color? As a product designer I can definitely say I’ve been guilty of this one, and it erodes the quality of a design. Always be consistent to keep a viewer captivated. Make sure you’re using the same hex color, and not fumbling around using slight variations of it throughout your project.

Safe and sound

Color has an immediate impact on how a viewer interprets what they’re seeing. And, most colors provoke an association when people look at them, which can change based on past experiences, culture, and much more. That said, you’ll want to avoid hot-button hues. So, which one should you use? The safest best, no matter the industry or project, is to use a shade of blue. There’s a reason so many large companies go this route.

Like a phoenix from the ashes.

We fixed the text, layout, graphics, and color—key areas that can crash and burn the visual design of a layout. That wasn’t so hard, right?

That said, if you find yourself needing more of a deep dive to get your project looking right, my inbox is always open. You can find me on Twitter @jon_patterson, or reach me via my website at www.jonathanpatterson.com with any product design questions, or anything else. Until then, stay cool.