This is an issue that a lot of our students have. Even seasoned designers might spot a great looking design but aren't sure how to accomplished such a polished look. Maybe you've spent too many hours drooling at the posts on Dribbble but can't seem to mimic them. This article breaks down some complicated design terminology and principles into easy practical steps you can take to make your designs look amazing!
1. Typography and Visual Hierarchy
Text weight - Making a single font seem like 2 different fonts
You don't have to go crazy with font pairing. Pick one great font family that a few different weights and styles and apply the principles of visual weight (or hierarchy) and color to differentiate them:
- Increase the weight of your important text (like headers)
- Decrease the weight of your less important text (like subheaders and body text)
- Stick to 2 font weights
- A normal font weight (400 or 500 depending on the font) for most body and paragraph text
- A heavier font weight (600 or 700) for text you want to emphasize like header and subheader text
- Increase the size of important text, only slightly
- Decrease the size of your less important text proportionally in relation the the important text
Text color (on white backgrounds)
- Choose very dark gray color over black for Header text. It's good to always keep in mind accessibility standards and never go to light with your grays, but just the ever-so -slightly reduced black can really increase your aesthetic without compromising anyone's ability to see it.
- Tint that dark gray (ever so slightly) with your brand color
Text color (on colored backgrounds)
- Do use white to emphasize important text
- Don't use gray text on colored backgrounds. Instead, choose a color that is really close to your background color but lighter.
- Don't just lower the opacity. Use an exact hex color to approximate the color you are trying to achieve
*The key here is to increase the contrast of the text on the colored background.
Pair fonts well
Font pairing is a choice between contrast and similarity of style. The tone of your brand should give you a good jumping off point
- Don't combine more than 3 fonts, 2 is usually enough
- For a more modern look combine 2 Sans serif typefaces
- For a classic look, combine Serif header typeface with a Sans Serif body typeface
Pro Tip: Sizing and font math
Use the Golden Ratio to determine your font sizing = 1.618
Let's say you use 50pt for your body text (I chose 50pt because it's the smallest text that I think is most legible on most devices . Now, let's use size that to determine our next largest text size by multiplying it by the golden ratio. 50x1.618 = ~81pt Subheader text. Now let's get the size of the Header text by using this new number. 81x1.618=~131 x1.618=~212pt ( I like to multiply my header by the golden ratio one more time to get a really prominent size for my header).
So now you have the following:
Try testing your font sizing using a modular scale2. Boxes and borders
Boxes helps us create organization, separation and relationship, here's how to elevate their style:
- Don't use an outline, use a box shadow instead.
- Do increase the blur and lighten the color so it's soft
- Try off setting your box shadow so it mimics natural light rather than increasing the blur all the way around.
- Use two different shades: One for your background and one for your box. If your box is light, make the background a wee bit darker, if your box is dark than make the page lighter or white.
- Add interest with a pop of color, such as a divider on boxes or a background color as callouts or separation between elements
3. Dividers and Grouping
- Just as with boxes there a few ways to separate elements and sections that are on your page as well as items that are within your boxes.
- Use shading and color rather than borders and lines to separate page sections.
- Use a watermark shape as a section separator.
- Use low opacity gray lines to separate page sections or module.
- Use shorter, thicker colored lines above or below header text to denote relationship to grouped content.
- Use space as a imaginary divider for separation rather than any kind of actual divider at all.
4. White space and spacing
- Put space around stuff. Adding a healthy amount of padding around your page, around buttons and around text gives everything breathing room and just looks more polished.
- Use spacing between elements to denote relationship.
- Create a color palette using good design principles
- Contrast is good but not too harsh
- Make your colors just a little less vivid by changing the hue
- Tint your grays with your primary brand color
- When creating your color palette move the color slider handle but don't move the color wheel focal point
Icons are meant to be small visual representations of your content. Here's how to keep them looking great
- Keep them small. Unless they are elaborate illustrations they should stay at the standard 16px or 24px.
- When going larger than this give them more detail
- If you are using dark icons, be weary of using pure black. If you can, use a very dark gray tinted with your brand color as it will make the icons look more refined
- Make sure the all of the icons have the same line thickness
- Make sure all the corners have the same or similar roundness
- Try enclosing your icons in a shaded shape
- Use little pops of color in the icons design itself to create interest
All buttons are not created equal, but they can all look equally as good:
- Pad, pad and pad some more. Create room by making the button itself significantly larger than the size of the text within the button. A good rule of thumb is
- Try inferred existence by placing plain text next to a button and giving it a hover action
- Try outlining a button rather than use a solid background color. Also make the text within an outlined button the same as the color of the outline
- Be decisive with your radius roundness. If you're going to go square, go square either no rounded corners or 3-4px of roundness. If you want to go oval go all the way to 100px of roundness.
- Overlay your images with a box that is tinted with your brand color and lower the opacity when it's behind text. The text on top with pop and will appear much more crisp and legible.
- Make sure the color in your stock photos and images compliment your brand colors
Hopefully you guys have found these shortcuts useful. Let us know in the comments what your tips and tricks are for making great designs and feel free to post any questions that you might have about user interface design. If you're interested in really leveling up your skills check out our courses on Designerup.co