5 Tricks To Help Developers with Design

Developers tend to struggle with design, but there are a few quick changes that can make your software shine.

Software has turned from a solution to business problems into a major part of every persons life. We now use software for communication, leisure, and work. With major software companies creating beautiful software consistently, it’s becoming hard to treat design as a second-class citizen. There’s significant value brought to any project by having a professional designer on your side, but for the independent developer or the garage startup, that’s not always a possibility.

I’ve been there. When I started my career, I was a full-stack developer trying my best to keep up as the web started to evolve dramatically. And even then, I remember looking at other websites for inspiration and could never seem to quite get mine to look as nice. Then web fonts gained in popularity, browsers got more advanced, and design on the web took off like a rocket leaving me in the dust. It was then that I learned there are some simple things that I could do to put out a more professional, polished-looking product without having to spend my own money on a graphic designer to tell me how things should look. It then spurred a true enjoyment of UI/UX design, where I find myself focusing a large portion of my time today.

Here are a few things that helped me get started down the road of UX. That’s not to say this post is only for people looking to transition towards a UX job, but anyone putting software out into the world without the money for professional design services.

1. Talk to Your Users

It’s amazing how much software gets designed and developed without any discussion involving the end-users of the application. The single most important thing you can do to improve on software design is to keep your client and end-users involved throughout the design process. Developers are great at gathering requirements from the solution perspective but are horrible at gathering information on how users will feel while using the piece of software.

Try to gather a small group of diverse users of your application. If it’s a brand new idea, assemble a group of trusted individuals in your target market to evaluate potential designs and provide feedback. Quality feedback will drastically increase the chances of getting things “right” from the start and will massively help adoption for your application.

More information on what to ask of your clients and users: Top Questions To Ask Before Designing Anything

2. Typography is Key

The only thing that you’re absolutely, 100%, without-a-doubt going to see on every single website you visit, and every single app you use, is text. It’s the most common thing in your website, application, or daily life. It’s everywhere. Being that it’s the most common, it’s also the most important from a design perspective. Picking fonts that are hard to read or don’t convey your message properly will massively hurt your adoption and growth rates.

It’s always been my goal to select two fonts that are complimentary. It’s a pretty tried-and-true method to pick one font for headings and other points of emphasis, and another font for your normal text.

Serif vs Sans-Serif

Serif fonts have the little “feet” on each character, where sans-serif doesn’t. Traditionally, these two font types were the perfect contrast and provided the most readability. Serif fonts got their start in the printing days, as they’re much easier to read on small sizes. Serif fonts tend to be classic and formal, whereas sans-serif fonts are generally more modern. There’s a general trend (including in our design and branding guidelines) where serif fonts are being replaced entirely, and people are starting to use two different sans-serif fonts. It all depends on the message you’re trying to convey.

Typography is key, but it’s also one of the most challenging aspects of UI/UX design. There’s no formula to pick the correct two fonts, and someone somewhere will disagree with any of your choices. Think deeply about the message you are trying to send with your software, and try some out. There are tons of free fonts, so keep in mind what your users are expecting with your application and use that to guide your decision-making process.

My favorite font resources: Adobe Fonts, Google Fonts

3. Use Existing Resources

As developers, we tend to like making things ourselves. There’s a lot to be said about wanting to take on the challenge and create a solution for everything when that’s your area of expertise. However, it’s best to trust the professionals when we are delving into important topics outside our comfort zone. There are a number of free design and UX assets that you can use at no cost. These professionally designed graphics and components are the perfect jump-start to any piece of software.

When creating a new piece of software, developers tend to forget the marketing side of things. When it comes to your public-facing website, the best thing to do is find a pre-built theme and leverage that for marketing. Though it does cost a little bit of money, it’s incredibly easy. For less than $100, you can get a beautiful website from a number of different theme providers around the internet. Some themes are built for content management systems like WordPress or Drupal, but there are also themes available for vanilla websites if you determine that’s the best route for you.

My favorite free resources: Undraw, Colorlib, Icons8

4. Use a Color Palette Generator

The color palette you choose is very important towards conveying your message. You’ll want to spend some time and determine what is appropriate for the audience you’re creating your software for. A common misconception is that the UX color scheme has to match the logo of the business or product. The truth is, the colors simply have to compliment the logo well and may or may not be a perfect match. It takes some time, but can be a fun process to figure out specifically what colors you want to work with.

A critical component to selecting a great color scheme relies on accessibility, which we’ll touch more on next. A quick rule of thumb is you want at least a few colors that have sufficient contrast for the Web Content Accessibility Guidelines 2.0. Having sufficient color contrast not only improves readability but goes a long way in page visual performance and SEO.

If you’re interested more in color psychology and what your color scheme may convey to your users, this article on Toptal does a tremendous job of how everything with color works together.

My favorite color palette generator: Coolors

5. Accessibility is a Requirement

Accessibility has become increasingly important as software becomes more and more prevalent in everyday life. If you develop software that is inaccessible, you may be losing a potentially large portion of potential users. The Click-Away Pound Survey from 2016 found that 71% of online shoppers with disabilities will click away from your website if it is too difficult to use. Of those 71%, 81% are willing and likely to pay more money for a competing product if it’s more accessible.

Accessibility audits get difficult, however there are some free tools that can help drastically. If you’re using Google Chrome, the built-in Developer Tools have an “Audit” section where it will run a Google Lighthouse report for the page you’re currently working on. If you’re not using Chrome, take a look through the W3 Web Accessibility Evaluation Tools list. It has hundreds of resources for checking web accessibility.

Mobile app accessibility testing has come a long way in recent years. Now there are a number of free tools to help diagnose accessibility problems in mobile apps. Along with existing testing tools, The Paciello Group released a free Mobile Testing Guide that goes in-depth with how to test for accessibility concerns on iOS and Android.

My favorite accessibility testing tools: Google Lighthouse (Web), Axe for Android, Xcode Accessibility Inspector