Written by Tim Boros
Having a polished design helps businesses build credibility and trust with their users. Here are 3 basic UI design tips that will help elevate your or your client’s brand.
Why is UI design important?
Having a polished design that works well can help make your client’s business stand out from the crowd and give legitimacy to their brand. Let’s be honest, we’ve all used a terrible looking website or app and wondered if that business is sketchy or not. We want to remove that doubt and give a pleasant experience to the user.
1. I just need some space
If you ever find yourself wondering, “boy this feels tight” or “is this button related to this or that section?”, chances are things are either too far or too close.
Whitespace is your friend
Don’t be afraid to space things out appropriately to let your design breathe a little, which will make digesting content much easier for your users.
Group related elements
If elements are supposed to relate to one another, then make sure they are closer together to visually indicate that. This will make the content feel organized and can help avoid confusion.
Quick tips
- Use Auto Layout in Figma to keep your spacing consistent
- Use an 8px spacing convention (devs will love you for that)
- Implement a 12 column grid for websites
2. Honey I shrunk the text
Sizing text and other elements on a screen is incredibly important because this can cause major frustration with users if done poorly, both from a design and dev perspective. Do it right and users and clients will love you (like a lot)!
Keep things simple
Users tend to scan text quickly, so you want to make it easy to find the information they’re looking for without too many distractions. Make headers shorter to be easy to find main topics of interest, then let the user read more if they’re interested.
Quick tips
- Never use right aligned text for longer headers and paragraphs
- Add some tracking to all caps text to make it look extra gooder
- Never use tracking on lowercase text
- Stick to 1-2 font families for a website/app
- You don’t need 17 font weights, 3-4 should be sufficient
- Avoid overusing text, try to spread things out or tweak copy accordingly to be easier to scan
Free font recommendations
3. A little color goes a long way
Color can have a significant impact on your user experience. It can (and should) be used to evoke a certain emotion and draw your attention to important information or interactive elements on the screen. That’s why it’s important to use color intentionally instead of haphazardly.
Avoid overusing color
If there are too many colors, or just an overwhelming amount of color used for text and other elements, then your user won’t know where to look. Keep in mind the end goal or action you want your user to take and try to use color to draw their attention accordingly.
Quick tips
- Avoid using color on text. Use neutral colors to make text easier to read.
- Use accessibility plugins to test your design to make sure it is compliant.
- Avoid using opacity for shades of color, use solid colors instead.
- Stick to 1-2 main accent colors with more subtle secondary colors
- Add a little blue to your grays to have more visually pleasing elements.
- Use a darker gray for headers and a lighter gray for paragraphs.
Conclusion
These are just a few tips for getting better at design. Try practicing these principles in your designs and we’re sure you will get better results. Stay tuned for more tips like these in the future.