I’m not a designer.
I have a degree in Computer Science and have worked as an iOS developer and a frontend developer. These days, my role as CEO of Krit consists of a combination of sales, marketing, and product management.
My formal training in UI design is limited to a grand total of two graphic design classes. Recreating famous photos using only letters from a single typeface and drawing a poster with honey were both fun assignments… but they were hardly a masterclass in creating beautiful, easy-to-use applications.
Yet, when needed, I have been able to do just that.
I’m not a designer — but my design skills have been strong enough to earn me interviews, build relationships with investors, launch fun side projects and fill in at Krit when my partner, our designer, was overworked.
Why founders should learn basic design
I’ve experienced the power of great design firsthand. In my first startup, I created a product that was horribly flawed. I was fresh out of school, and there was no reason for anyone to give me the time of day. But we got some early traction because our product was beautifully designed and we paid attention to the little details. People took us more seriously once they saw our product.
It’s worth taking the time to improve your design skills even if you have in-house designers. Improving your own design capabilities will help you communicate what needs to be improved when you see something you don’t love and push the design work of your whole team forward.
In the early days of starting our agency, once again we had little experience to go off of. We hadn’t built anything complicated that had rocket ship growth. But we got clients because of the design work in our portfolio. Today apps we’ve designed have been used by companies like Amazon, Dropbox, Lyft, NBC, Yale, and Dartmouth.
It doesn’t take years of design school to be able to create well-designed software, either. With the handful of simple tips in this article, you can make your product look better than 90% of what’s out there.
Design Tip #1: If it doesn’t look good in grayscale it’s not going to look good in color.
Designing in shades of gray before adding color is something all designers learn to do early on. But if you’re learning to design by looking at designs around you and working backward, it would be easy to miss this step.
Managing colors in a design is hard. It’s so easy to overdo it with color and create something that looks like crap. Designing without color first forces you to focus on fundamentals and creates one less thing you have to pay attention to.
- Does the layout make sense?
- Are the elements on the page balanced?
- Is this button big enough?
- Is this text the right weight, or is it getting lost?
These are all questions you can answer before adding color. Then, once you have a design that makes sense in grayscale, you can start to add color in gradually.
Design Tip #2: When it comes to fonts… just use one.
There are tons of “Intro to Design” blog posts out there that will tell you to choose 1 to 2 fonts for your design. Using tons of different fonts can, again, distract you from the fundamentals and make your design look cluttered and busy.
I’m telling you to start even simpler. Find one versatile font that has a lot of different weights (light, regular, semi-bold, bold, etc.) and stick with it. Use size and weight to create emphasis and visual interest instead of different fonts.
Still want to use multiple fonts? Look through your favorite web applications. 90% of them are only using a single font.
If Trello can build a product worth hundreds of millions of dollars using one font, why can’t you?
Design Tip #3: Don’t reinvent the wheel.
The single biggest mistake new UI designers make is they try to reinvent the wheel. Rather than using icons, patterns and components that users recognize and are familiar with, they try to create their own custom versions.
These custom versions haven’t been through years of refinement the way that default components have, so they almost always end up looking worse. And if they’re significantly different in functionality, they’re likely to confuse your users.
Consider the menu in the mockup below:
This menu ignores standard conventions, presumably in an attempt to look different. You won’t find a menu like this anywhere in Apple’s guidelines — and for good reason.
When you click on a menu item, it will take you to a new page. To get anywhere else in the app, you’ll presumably have to come back to the menu, an unnecessary interaction. You’re also wasting a ton of real estate on menu items, in a format that should greatly value screen real estate.
Instead, Apple encourages designers to use a tab bar menu:
With a tab bar, users can quickly move around within the app and immediately see the information they care about. The tab bar takes up a small amount of real estate at the bottom of the screen. And because Apple has spent years refining the component, it looks great right out of the box.
You can still customize it with your (one) application font, your brand colors, and custom icons. This gives it a customized feel while retaining familiarity for your users.
Design Tip #4: Use more whitespace.
This is a simple one. All too often people try to cram tons of elements onto a screen, causing users to feel overwhelmed and anxious. No one likes to look at a pile of clutter. Adding generous whitespace to your app can help it look more sophisticated and calming.
Consider the difference between Google Analytics and Medium’s Stats. Which one is more pleasing to look at? Which one makes you feel calm and in control?
Design Tip #5: Use whitespace with a purpose.
Now that you’re using more whitespace, you’re probably going to want to scale it back a bit. Whitespace just for the sake of whitespace is only so helpful.
You should use whitespace to separate elements into groups. Group them by a similar purpose, or group them by when a user might need them (i.e. saving a newsletter and sending a newsletter).
Doing so will provide more structure to your application, help your users find the elements they need, and stay focused on the task at hand. According to the Gestalt Principles, the human brain naturally handles visual cues in a few different ways.
In this case the principle of proximity says that users will consider items that are close together as a single group. It sounds obvious, but it’s still important to keep in mind. Consider how stressful the first example of the word Proximity is in the graphic below.
It’s stressful because your eyes want to read it as one word, but your brain wants to treat each letter as an individual component since they are spaced farther apart. In the second example the word becomes much easier to read.
Notice the way that Slack uses whitespace (or in this case, dark-gray space 😉) in their navigation to group channels, direct messages and other elements. This makes it easy to find channels and skim through them.
Design Tip #6: Create order with consistency.
Whatever you do, do it consistently. If you use one style for a button in one place, use it throughout the rest of your app. If you use light gray borders for forms, use light gray borders for your other elements as well.
Inconsistent styles make your design look cluttered and overwhelming! But consistency is calming. It also gives your users a visual language to look for. They know if they see red, something’s gone wrong — and they know when to look for a button to complete an action.
It’s easy to be inconsistent, but you’ll notice a huge difference when you build the discipline to be consistent throughout your app.
These screenshots from a code coverage application our team (reluctantly) uses are a good example.
The designers weren’t consistent with the width of their containers, in the first screen the main content stays within a container that is offset to the right. In the second screen, there is an identical container but the graph extends beyond it.
Both screens are essentially showing tables of options, but the styles of the rows are radically different. The result is two screens that feel like they belong in two entirely separate apps. This feels jarring and forces you to exert more energy to understand where you are and how to use the application.
In today’s world where there are so many services competing for your customers’ attention, even a tiny bit of extra work forced on the user could be enough to lose a customer.
Design Tip #7: Pay twice as much attention to microcopy.
The best thing you can do for your designs, better than any of the other tips here, is to write compelling microcopy.
Microcopy refers to the small pieces of writing that are sprinkled throughout your application. It can refer to button text, labels, or descriptive text you place to guide your users.
It’s easy when you’re not confident in your design abilities to get too caught up in the visuals of the application and skip over the microcopy. I would take an ugly application with excellent microcopy over a beautiful application with confusing explainer text every day of the week.
When trying to improve the text in your application, keeps three things in mind:
1. Be more descriptive than you think is necessary.
Remember, your users don’t know as much as you. Not because they’re dumb, but because they haven’t spent a significant portion of their life obsessing over your application the way that you have.
Your app is one of many your users are interacting with every single day. Do them a favor and don’t force them to work extra hard to get what they want out of your product.
A perfect example of this is password text. All too often companies hide the details of their password requirements behind an error message. Even Facebook makes this mistake!
Instead, put it front and center. Every website has different requirements. Don’t make your user work to find yours.
2. Keep your user’s goals in mind
Don’t just write your copy based on what you want your users to do. Think about the benefits your application will provide and then describe those to your users every chance you get. Give them a reason to want to take the next step.
This is how applications begin to sell themselves. Consider the classic signup button. As a user, I don’t particularly care about signing up for new services. But I do care about connecting with my friends, creating a new project, sending my first invoice…
3. Have fun with it!
Microcopy is the first place to inject your personality and show off creativity. Have some fun with it! Find ways to tell silly jokes, or use creative language. Doing so will instantly set you apart from 90% of the other software your customers are using day to day.
Mailchimp is one of the best at this. They find tons of subtle ways to have fun with copy throughout their application, and their customers love them for it.
You can quickly elevate your designs by following a few basic rules. Taking this extra step will help you build trust, make your customers happier and cut through the noise in our crowded world.
It won’t take years of study in a design program either (I have a Computer Science degree). With a few simple tips, you can create software that’s better than 90% of what’s out there:
- Start with grayscale, add color slowly.
- When it comes to fonts… just use one.
- Don’t reinvent the wheel.
- Use more whitespace.
- Use whitespace with a purpose.
- Be consistent!
- Pay twice as much attention to microcopy.
How can you apply these to your product today?