DIY Tips for User Interface Design
Color, typography and layout pointers for indie makers, solo founders and bootstrapping startups
--
A well designed user interface makes a difference. Not only does it make your product look good, it helps people actually use it too.
That being said, you don’t always have the luxury to collaborate with a professional designer on your app or website. Finding the right person for the job can take weeks or months even, if you are lucky. And that’s assuming you have the budget to begin with.
But you don’t necessarily need to lean on a designer in the first place. If you are building a prototype or even a scrappy MVP, with some guidance you can do the job on your own, even if you’ve never designed anything else before.
How do you get started then? Here are a few simple rules you can follow, concepts you can get familiar with and free tools you can use to help you turn your raw ideas into attractive and useable designs today.
Layout
The first (and most consequential) thing you’ll need to understand is the layout grid. It’s a method of dividing the screen you are designing for into a series of columns and rows and positioning everything you want to show to the user (like buttons and inputs) within this structure.
While the dimensions of your grid are more or less arbitrary, the most convenient size to use is an increment of number 8. The resolution of most screens (with the exception of iPhones) can be divided by 8, allowing your content to easily scale across a variety of devices and windows.
Although the “8pt-grid” takes away some flexibility, it also brings discipline and order to your interface and ensures everything stays proportional and consistent. It also helps you maintain and evolve your product’s design language over time.
You want to use the increments of number 8 not just for the size of your grid, though. You want it to be the base for every single component in your interface. This includes any white space / negative space such as margins, padding and any spacing between those components.
Speaking of white space: deciding which parts of the screen should stay blank is just as important as deciding what to fill with content. It will help you focus the attention of your users and help them find what they are looking for. The empty space in your design is hardly invisible.
You should also keep in mind the so-called “F-shaped reading pattern” as well as the Gestalt laws of grouping, which explain how people naturally scan content and interpret relationships between objects they see. Use these principles to organize your user interface into a frictionless, easy to navigate system.
You don’t always have to follow the established conventions and methodologies. Sometimes it makes more sense to get creative and slip outside of the bounds imposed by the framework you had put in place. But when you are just starting out, you will save yourself time by sticking to the rules as much as possible. Your users will appreciate it too.
Typography
The odds are you will be using written word in your product, one way or another. You don’t have to be a master typographer in order to make text look good on the screen, though.
Before you do anything else, spend an hour reading Butterick’s Practical Typography. It covers everything you will ever need to know, including best practices for setting your font-size, line-height, and how many characters to display on each line of text (spoiler alert: 45–90 characters). And if reading the whole thing is too much, start with this handy summary.
Deciding which typeface (a.k.a. font family) to pick is largely a matter of personal taste. In general, though, serifs seem to have an edge in blocks of text, whereas sans-serifs do better with components of the user interface, such as buttons, pickers or menus.
Word of caution, though: combining typefaces is hard and takes years of practice. While it’s very tempting to play with serif and sans-serif combinations, for now better limit yourself to a single font family like the classics Futura, Helvetica, and Mrs Eaves or digital natives like Lato, Sofia or Roboto.
In any case, picking the font-size for all type styles in your interface should follow a uniform, modular scale. A go-to scale factor for most designers is the golden ratio of 1.618. It will help you create the appearance of proportion and harmony across all headline and body text elements you use.
Last but not least, do make sure your punctuation is on point. Commas, periods and dashes are easy to overlook, but if used incorrectly can give even the best designs an aura of sloppiness. Refer back to Butterick for details, but let me just say there is a difference between hyphens (-) and em dashes (—) or hatch marks (″) and curly quotes (”).
Colors
One of the most tricky parts in design is deciding which colors to use. Not only are there millions of colors to choose from, but you can be sure people will have strong opinions about every single one of them.
The thing is though, colors are not all personal taste. There is an element of science, and hence rules, that plays a role in making your choices here. In other words, it’s not the best idea to just pick a bunch of random colors you “like” and call it a day.
A good starting point is color psychology. The idea is that different colors can mean different things. For example, greens feel safe and trustworthy, whereas reds scream “danger” and “do something.” Depending on what your product is for and what you are trying to convey with your brand, different colors can suit your objectives better.
You’ll also need to makes sure the colors you use go well together. The main tool to help you in this process is color theory. It describes the relationships and interactions between different colors and how to combine them into effective color schemes.
While you can spend months combing through the vast body of research covering color theory (including works by Goethe and Newton) and obsess with creating the perfect color scheme, that’s not the point. For now open a tool like Coolors or Adobe Color and they will do the heavy lifting for you.
Finally, you can optimize your color palette for accessibility. The main idea is to create sufficient contrast between foreground and background colors, such that your content will be visible under different lighting conditions, on different devices, and to people with vision deficiency like color blindness.
You can find out in a breeze whether your colors pass the contrast test with this somewhat antiquated but fully functional Color Contrast Checker. I also recommend you read this guide to accessibility standards, so you can follow various technical terms and abbreviations.
Fake it ‘till you make it
Playing a seasoned designer pro is not a walk in the park. But you can get plenty of milage from free resources and tools available online. In a relatively short period of time you can learn how to leverage the layout grid, make solid typographic choices and create effective color schemes. That alone can help you build a more convincing and compelling product, no matter how confident you feel about your own design skills today. And who knows, it might even help you make that first design hire when the time comes, too.
