Designing a Good User Interface (UI)
Build a Creative Inventory
The first step to building a good UI is to get organized.
You’ll be making a lot of pages that look similar, so you want the same elements to be consistent across the board. This saves time, too — if your designer comes up with a certain look for a CTA or a button, you want to be able to reuse that over and over. Here’s the foundation of what you’ll need:
Typeface: Pick a few font families — probably no more than three — to use on your site. Too many cooks spoil the broth, and too many fonts turn your website into a chaotic mess. You probably need one font for large blocks of text and a second for headings and page titles. If you use a third for accent text, use it sparingly.
Headings: Decide how your various heading tags (H1, H2, H3, etc., in HTML code) will look. Remember, these will be universal — an H1 on one page will be the same as an H1 on any other — so make sure they work in any context. Think about size, letter spacing, color, whether they’re bold or italic, and so on.
Special text: You’ll probably want to spice up long blocks of content like blogs and pillar pages with special text, such as customer testimonials, callouts, quotes, or statistics. What do those look like? Are they larger? Are they centered on the page? Do they have a box around them or some other element to set them off from the rest of the text?
Lists: You’ll need to use bulleted or numbered lists at some point (like this one), so think about how they should look. Are they the same size and color as the body copy, or are they set apart? Do you want to design custom bullets or just use dots?
Logos and icons: Your site will have dozens, if not hundreds, of small graphical elements. In addition to using your company logo, there may be illustrations representing your services and portfolio, partners’ logos, social media icons, email addresses, phone number symbols, etc. Design (or buy) a set of visually consistent logos and icons that match your site, then make sure you use them everywhere they appear.
Image treatments: As you browse the web, you’ll notice photos rarely appear all by themselves on a site. They usually have some special or unique treatment — a shadow, a filter, a stroke around the border, a colored box across the page, a caption, etc. — that fits the page’s branding and sets the photo apart. Consider how you want your images to look and spell out those guidelines.
Text inputs: Search boxes, web forms, and other inputs are used to process or collect user information on the website. What does the box look like when people type in text on your site? How big is it? Is it a different color? When they type, what does the text inside the box look like?
Radio menus: This type of menu allows users to select or toggle one option at a time, usually with a small dot or checkmark to signify the option is selected. Think about what you want that dot or checkmark to look like. Decide whether the item changes color when you hover the mouse over it or click on it.
Select menus: A select menu is similar, except your users are looking through a list of options and picking one (the menu at the top right of this page is an example of a select menu). The same decisions about appearance will also apply to that menu.
CTA buttons: A call to action (CTA) can take many forms, and you’ll use more than one on your site. You can have large, almost full-screen CTAs on landing pages along with small ones within side columns next to the main body content. You could also have inline CTAs located somewhere in the middle, such as a wide banner with some text and a button. In every case, you’ll want to decide what those CTAs should look like.
Animations: Nowadays, most websites and apps contain UI design elements with added motion features to increase the level of interactivity on the page. Similar to other elements, animated ones help guide user actions and influence their decisions. Be sure to use restraint when incorporating animations. You want to provide subtle feedback, not wow them with cool, entertaining animations.
Advanced features: Good UI design is simple. Making a UI too complex leaves users perplexed and without good experiences. Progressive disclosure is a way to provide a secondary interface that users access if they desire more. For example, average users may only need to know a few general or introductory pieces of information, whereas power users may want to dig deeper. Consider whether certain parts of the design are absolutely necessary or too complicated.
Emerging technology: Artificial intelligence (AI), virtual reality (VR), augmented reality (AR), the Metaverse, and other innovative technologies have made their way into UI. Think of the AI-powered Google Assistant or the Pokémon Go AR game. Identify ways to enhance customer engagement through personalized interactions, some of which may blend reality and virtual environments.
Now that we’ve established the critical foundations of the UI, we turn our attention to a vital aspect of design – color selection. Just as a skilled painter selects their palette with precision, the choice of colors in digital design significantly impacts how users perceive and interact with your product or website. Let’s delve into the world of color and its profound influence on user experience.
Choosing Your Colors
Color is one of the most important elements of any user interface — it’s visceral, immediate, and can produce a strong emotional resonance. Besides, it’s the very first thing anyone will notice. Before they read a single word or click a single link, your users will register what color your page is. It’s their first impression, so it’s important to get it right.
Brand Colors
Virtually every major brand has its own corporate identity and brand colors. Coke has red; Southwest has red, yellow, and blue; Google has red, yellow, blue, and green. A few big brands (Apple and Nike) don’t have any actual signature colors, but most have at least one or two that make them instantly recognizable.
You should pick those out. If you don’t have signature colors from your logo, select a few bold shades to use throughout your website. Don’t overdo it — your primary colors are there to provide a pop, not to be overpowering. You’ll also want a few accent colors that you can use to offset the primary colors, but that’s it! Color is used to draw attention to specific site elements, so too much color will overwhelm and confuse your visitors.
White, Black, and Gray
You’ll also want to establish a definition for white, black, and gray. Bear with us; this isn’t as obvious as it sounds. True white and black are pretty rare colors to find in large quantities on websites because they simply look too high-contrast and harsh. For example, the background color for a Google Doc is #f8f9fa. It’s called “ghost white,” even though it’s actually a hair darker than pure white (#ffffff). Similarly, the background of Netflix (#141414) is close to black but not quite.
Consider using a low-contrast neutral color that aligns with your brand colors. It could be a shade of gray or a very pale version of a brand color — it should stand out a little for elements like text boxes, but not enough to distract. Remember that certain colors have certain connotations. Case in point, shades of red often mean an error has occurred or information is missing, so it’s probably best to avoid them (more on that in a minute).
Interactive and Denotive Colors
Your next choices will involve sets of colors that mean something, not those primarily acting as decoration. Colors go a long way toward telling people what to do and guiding them down the right path toward conversion or purchase.
The first set is interactive colors. What color is a link or a button that users can click? What color does it turn into when hovered over? What does it change to after it’s been clicked?
The second set is called denotative colors — as the name suggests, they denote things! Say someone types an invalid email address into a form. You’ll want that form to indicate that the email field needs to be fixed, and using color is a great way to do that. A successful form or download should have its own color as well. Finally, you’ll want a “disabled” color to indicate when a field can’t be typed in, or a button can’t be clicked. That’s usually as simple as graying it out, but it helps when you choose it ahead of time.
Name Your Colors
You’ll rarely have only one person in charge of the visual component of your brand, which means that the catalog of creative elements we talked about will have to be shared with someone else eventually. When you do, they should be able to jump right in and start working without asking you what all the pieces are.
To that end, use both functional and color words like “primaryBlue,” “errorRed,” and “hoverGreen” (or whatever naming convention seems most intuitive) so that you can get a new creative up and running as smoothly as possible.
Test Your Colors
Finally, create many different pages with your colors to see whether they work in every situation. Your preferred CTA color might look great on light backgrounds but blend into dark ones. Therefore, you should make sure to either have a color that works everywhere or a rule stating not to use those colors on certain backgrounds.
Talking About Typography
If color is your content’s most obvious first impression, typography is a close second.
Some brands have such iconic typography that you can tell where the content came from, even if you don’t see any other brand indicators, like a logo or trademark.
For the most part, typography is about the content, not the typeface itself. The bulk of the content on your site will be normal blocks and paragraphs of text, so you need a font that’s simple and clear to read. Save the exciting typography for your headers, your titles, and the graphics shared on social media that bring your whole brand together.
Choosing a Body Font
Your body font isn’t as important as you might think, so keep it simple. Pick a well-supported web font like something from the Google font catalog — they come with dozens of weights, and all the glyphs you might need, and you know they’ll render well on any screen. Hosting a custom font isn’t worth the effort in 99% of cases.
Next, remember to let your text breathe. The web isn’t a newspaper. You’re not going to run out of space. People can scroll for as long as they’re interested in the content, so readability is a good way to help people stay engaged. Space your lines by about 1.5 times the font height to leave some white space between lines, and space out the letters in headlines a little more, especially if they’re in all caps (see the words “pillar page” at the top of this page).
Column width is important, too. People don’t want to jump from line to line too quickly, or they’ll lose their spot. They also don’t want to read from edge to edge on their desktop screen. Shoot for roughly 60-80 characters per line on your desktop site and 30-40 on mobile.
Finally, don’t sweat the serifs. Serifs (the little extra projections off the ends of letters) are a subject of much debate in the writing world. You can find plenty of articles about how serifs are more professional, sans-serif fonts are easier to read and friendlier, and the like. The truth is, it doesn’t matter. Plenty of tests have been done, proving that serifs don’t affect reading speed and comprehension. Pick a font that “feels” right for your brand and run with it.
Make Your Headers Stand Out
Don’t be shy about your headers — they should stand out greatly from your body text. Size is the easiest way to do that. We generally advise that fonts should be twice as large as the body copy for headers, three times for titles, and four times for major elements like heroes at the top of pages. You can also make your font heavier, change the color, or switch to all caps to make it stand out more.
Learning About Layouts
Now that you know what the individual elements of your page should look like, let’s talk about how they’re arranged in front of your users. Some of that will come down to the data you get from your UX team — UI and UX will need to work closely together to create the most intuitive, helpful pages — but there are some best practices to start you out.
Keep it Simple
Just like there are no space limits to pages, there’s no page limit to a website. Don’t try to make one page do too much, or people will get confused, lost, and simply leave. You also run UX risks with busy pages. The more there is on the page, the longer it will take to load, and slow-loading pages are a death sentence for websites.
The same principle applies to menus, graphics, forms, and other elements of your pages. When you give people too much to look at, they can’t focus on any particular thing. That means they can’t tell what they’re supposed to do next, which makes it much harder for you to guide them down the funnel.
Don’t get too cute with your menu items, either. People click on the menu because they’re looking for something, not because they want to browse aimlessly. Give them a hand by naming your menu items something obvious, like “services,” “blog,” “contact,” and similar.
Steering Your Users
UI and UX are all about guiding people in the direction you want them to go. That’s a lot easier when you can naturally play into their natural tendencies and coax them in the right direction rather than forcing it.
People tend to read left to right and top to bottom, so their eyes will go to the top left corner of the page first, then to the right, then lower on the page, then to the right again, and elsewhere. UI designers talk about designing in an “F” shape to follow this path, arranging the most important and least important elements accordingly.
White space (or negative space) is an effective way to steer users too. People tend to shy away from blank sections of the page, so you can use areas with no content to steer people back in the right direction. Take a look at the Dropbox home page. (you can scroll down to learn more about what it is). On the top right side of the page are several CTAs, including a “sign in” link and a “get started” button. You’ll notice they’re surrounded by chunks of white space, so the eye immediately goes to the action text. Directly underneath, the rotating banner also has large areas of negative space. In particular, long brand-colored buttons that span the page’s width draw users’ eyes to additional CTAs.
Break up your copy into easy-to-digest blocks. We try to keep our paragraphs to no more than 4-5 lines, which helps split long articles and separate thoughts. It also helps readers keep track of where they are on the page rather than trying to pick out single sentences from hundreds of words of text.
Finally, stay responsive. We could write another 4,000 words on mobile UI strategies and best practices (and maybe we will!), but the important thing is small screens are not just scaled-down versions of large screens. With less room to work with, you must pare down what’s on the page even more. Keep your designs simple, pages uncluttered, and copy as readable as possible.
Creating Good CTAs
CTAs are one of the most important elements of your web presence.
Why? Because your website isn’t purely ornamental, it’s trying to persuade your visitors to do something.
Whether you want people to fill out a form, download a white paper, purchase a product, schedule a meeting, or whatever it may be, you’re trying to steer them in that direction — and the final stop along the way is often a call to action (CTA).
To make your CTAs effective, they must be persuasive, which means you have a license to be a little bit pushier than you would be on the rest of your site. Use action words — don’t say “find out more,” say “download now to find out more.” Tell the person viewing the CTA precisely what you want them to do and what will happen if they click.
Urgency and scarcity are also useful tools. If you tell people they can sign up for a webinar to learn about your product, they might think: “I’ll get around to it eventually.” If you tell them that spots are running out, that only 50 people will be allowed to sign up, and that they should get their spot while they can, they’re much more likely to take action.
When phrasing your CTAs, do your best to minimize the perceived risk and maximize the potential value. The risk should be essentially zero — perhaps the user has to provide their email address, but they’ll get this comprehensive e-book in return!
Part of removing risk is getting rid of “friction words” that imply the user will have to take some sort of action they might not want to take. Avoid words like “buy,” “order,” and “submit” until the very end of the funnel to ensure that people know they’re not overcommitting by clicking on a button.
Mastering the Essence of UI Design: Principles and Adaptability
We’ve explored the fundamentals of good UI design, covering typography, color choices, layouts, and persuasive CTAs. The careful interplay of fonts, colors, and layouts creates the canvas for a user’s digital experience. White space, interactive elements, and principles like the “F” shape guide users along this path.
CTAs are designed to persuade, use the right language, urgency, and value propositions to encourage user actions while minimizing perceived risks. Emerging technologies like AI, VR, and AR expand UI design possibilities. UI designers must remain adaptable, staying updated on user trends and tech advancements. Throughout, the core principles of UI design remain simplicity, clarity, and user-centricity.
In UI design, creativity and precision combine to create interfaces that function seamlessly and engage users. Colors, fonts, and layouts convey information, evoke emotions, and guide users effectively. So, as you embark on UI design, remember these principles to create user-centered digital experiences.
