Laurent Baumann: Design tips for non-designers
Starting out in the world of design? Turn your beginner drafts into polished masterpieces with these best practices
While part of good design is creating visuals that are easy to understand, figuring out how to strike a balance between simple and polished is quite a challenge — especially for non-designers. Over the years, I came to realize that sharing simple graphic design rules with non-designers could help them feel more comfortable when creating presentations, simple mockups, or even the occasional card.
Seeing how empowering these tips could be, I decided to compile these rules in a Twitter thread. Now, I’m borrowing the Sketch stage to turn this thread into a fleshed-out guide that is hopefully easier to navigate and gives you more context than what I could fit into 280 characters.
Let’s dive in.
Quick tweaks to elevate any design
Have you ever looked at a design and wondered why something so basic looked so good? You’ve probably even tried to replicate it yourself, only to find that there’s something missing in your approach. The missing key is likely one of these:
- Nested border radius. Borders can be tricky because it’s not only about following symmetry rules. Imagine you have a square with rounded borders within a larger rounder square. (We’d call this first square a “nested square” because it’s within another shape). So, when we think about the border of the nested square, the instinct might be to make the border radius equal to that of the bigger square. But this actually won’t create a unified border. The trick is to make the inside radius smaller than the outside radius.
- Matching thickness. Working with text and glyphs (a small monochrome image) can be deceiving to the eye, even for a designer. When pairing text with a glyph, always make sure the thickness of the text matches the thickness of the image. That way, both elements will look like they belong together.
- Stacked Shadows. As designers, we often use shadows to make our designs more dynamic. Shadows help give a 3D effect to any element by creating a sense of depth. To make this realistic, we have to follow the rules of physics. The farther an element is, the smaller its drop shadow. Of course, this gets more challenging the more elements you have — but dedicating time to getting your shadows just right will truly make a difference in your overall design.
Looking to work with shadows in Sketch? You can find all the tools you need under the Style section of the inspector.
How to master spacing
We all need space sometimes, and so do your designs. While proper spacing is definitely a matter of aesthetics, it’s — in equal measure — a matter of semantics. The distance between elements communicates a whole lot more than what you might think, as we’ll see below.
- Nested spacing. It’s important to remember that design is ultimately a reflection of real life, in one way or another. When it comes to spacing, we often associate things that are close together as a group or cluster. The same thing will happen depending on where you place elements in a design. Creating “visual blocks” by putting elements close to each other is a great tool, as long as you’re using it intentionally.
- Spacing around text. This is one of those small-but-mighty fixes that can quickly elevate your design. When laying out text in a shape, like a button, make sure the spacing around the text forms a uniform band around the lowercase letters. If you think about it, using uppercase letters or apostrophes as alignment references is a surefire way to get the majority of your text misaligned.
- Letter spacing. For the uninitiated, it’s common to think you can only edit font, size, and weight when it comes to text. But there’s actually a whole realm of spacing options you can play with to help make your text more readable. A good rule of thumb to follow is that the smaller the text, the more letter spacing it will need.
Become an alignment pro
We already covered some key alignment principles when we talked about spacing, so it’s time to turn it up a notch.
- Aligning text and image. When vertically centering a text and a picture, use the height of the lowercase letters to do the centering, not the height of the capital letters. If you’ve been paying attention, you know this is the same principle we used for spacing around text. So there you have it, your first golden rule of design!
- Centering a polygon. With design, you’ll often find that proper alignment has more to do with how our eye perceives an image rather than how mathematically centered it actually is. In the case of a polygon, the logical approach is to center its bounding box (the borders of the shape’s container). However, for it to look properly aligned, you have to imagine a circle passing through each point in the polygon. Then, use that circle to align your polygon.
Sketch comes with a lot of handy alignment tools that can help you get your components right where you need them.
Working with contrast
Last but not least, let’s talk about contrast. The key to contrast is using it effectively to create differentiation. That could be differentiation between colors or between text. Here’s how to work with both:
- Color contrast ratio. We often choose colors because of semantics (like how we understand the colors in a traffic light) or because we’re following brand guidelines. While these are both good ways of determining which colors to use, it’s important that you double-check if the choice is affecting readability. In order for a text to be easy to read, there needs to be enough contrast between the background and the text. When using text on a colored background, make sure the contrast ratio is greater than 4.5:1.
- Text weight contrast. Another instance where contrast is important is when trying to establish differences between text. For example, you might be using one or two typefaces but find that you need ways to differentiate different headings or “visual blocks”. To do so, try playing with the weight (bold, thin, light, etc). If your typeface comes with many weights, skip at least one between them to create enough contrast. Example: go from thin to medium instead of thin to light.
Once you settle on the font weight, you can create a Text Style to easily reuse it in Sketch.
And there you have it! Hope these tips help you feel more at ease when designing. You can always reach me via Twitter if there’s anything else you’d like me to cover in the tips thread.
Laurent Baumann is the founder and CEO of PopStage, an online platform for hosting interactive workshops, bootcamps, webinars, and training sessions. In the past, he has worked with companies such as Sketch, Upthere, Apple, Sandisk, Western Digital, and more to build products used by millions.
