Improving your designs with tactics instead of talent. Here are seven simple ideas you can use to improve your designs today to level up your work that don’t require a background in graphic design and don’t even require a graphic design background to do so, just tactics and tactics.
Use color and weight to create hierarchy instead of size
Try and stick to two or three colors: a dark (but not black) color for primary content, a grey for secondary content, and a lighter grey for ancillary content
- Two font weights is usually enough for UI work: a normal font weight (400 or 500 depending on the font) for most text, a heavier font weight (>600 or 700 for text you want to emphasize)
- Stay away from font weights under 400, especially if using a lighter color or smaller font size
Not every button needs a background color
When there are multiple actions a user can take on a page, it’s easy to fall into the trap of designing those actions based purely on semantics.
- Primary actions should be obvious
- Secondary actions not be too prominent
- Tertiary actions are discoverable but unobtrusive
Don’t use grey text on colored backgrounds
Making text a lighter grey is a great way to de-emphasize it on white backgrounds, but not colored ones
- The effect of gray on white is reduced contrast
- Make the text closer to the background color to create hierarchy
Don’t blow up icons that are meant to be small
Icons that were drawn at 16-24px are never going to look very professional when you blow them up to 3x or 4x their intended size.
- If small icons are all you’ve got, enclosing them inside another shape and giving the shape a background color lets you keep the actual icon closer to its intended size while still filling the larger space.
Pick a color that’s based on the background color
This works better than reducing the opacity when your background is an image or pattern, or when reducing the text feel too dull or washed out.
- Customize the color to look like the background, adjusting saturation and lightness until it looks right to you.
Use accent borders to add color to a bland design
Customize your borders to accentuate parts of your interface that would otherwise feel bland
- It doesn’t take any graphic design talent to add a colored rectangle to your UI, and it can go a long way towards making your site feel more “designed.”
Book
Refactoring UI combines everything you need to know about design and bundles it into one comprehensive package
Offset your shadows
Instead of using large blur and spread values to make box shadows more noticeable, add a vertical offset.
Use fewer borders
While borders are a great way to distinguish two elements from one another, they aren’t the only way.
