Ever struggled to use an app or website? It's usually because of poor design. Big tech companies spend millions to make their apps easier to use.
But we can use some basic principles to improve usability without spending a fortune.
Basic Design Rules
Hierarchy
Hierarchy shows you what matters most. First, you spot the headline, then the sub-headline, next the button, and finally the tag line. Try squinting your eyes. What do you still see? That's what catches your eye first.
You can make hierarchy with pictures, shadows, different font sizes, spacing between elements, shapes, colors, and lots more. You might not always know how to make it, but you'll notice when it's not there.
Layout
A good layout makes things easy to understand. If section 3 is very different from section 4, it might seem like they're from two different templates. The space between lines and pictures should make everything feel connected. The layout shouldn't take away from what you're trying to say. Instead, it should help lead you through it.
Visuals
Imagery, photos, drawings, icons, and videos all have one goal: to show what your words are saying. They stir emotions and help people connect with what you offer.
Remember, pick each piece of content with care. It should boost your message, not take away from it. Also, large files can make your website slow, so watch the size and quality of what you upload.
More on content in this blog article:
Contrast
Ever seen pink text on a yellow background? It's hard to read. That's because the colors are close and don't pop against each other. There are rules to check if text is easy to see. This matters for making things easy for everyone to use. Think about people who are color blind. Can they read the text on your website, or does it just mix into the background?
Fonts
When it comes to websites 80% of sites use one or both of the following font styles:
- Serif
- Sans Serif
Use serif for things that are premium or have an old-fashioned feel.
Sans serif came into use with paper writing and digital screens. Since "serifs" weren't needed anymore, this style looks more modern and is the typical go to for paragraph text.
But what really matters is readability. Some artistic fonts look great but can be hard to read.
Font size matters too. Small text might look high-end, but it can be tough to read. A good standard size for paragraph text is 16px.
Colours
Red, Yellow, Blue are the three primary colours and then there are countless shades in between. Here are some tips for picking colours:
Choose a primary brand colour that reflects the mood you want to set. Add a secondary colour for contrast and an accent colour for that final touch. This makes up a simple colour palette.
Use the 60/30/10 rule. In a given section use 60% of one colour, 40% of another, and 10% of the last one. This colour ratio helps create layouts that are easy to understand and digest.
Not sure which colour fits your brand? Most colours have an implied feel or mood.
Here are the most common ones:
- Blue: Trustworthiness, Professionalism, Calmness
- Green: Growth, Nature, Health
- Red: Excitement, Urgency, Boldness
- Black: Sophistication, Elegance, Power
- White: Purity, Simplicity, Cleanliness
- Brown: Earthiness, Stability, Reliability
- Yellow: Optimism, Energy, Cheerfulness
- Purple: Luxury, Creativity, Mystery
Note: Not every colour evokes the same feeling across the globe. Consider culturual background and customs before choosing your colours.
Colour theory simplified More on
Spacing
Padding, margin, text line height, and gaps are key to creating breathing room on your page. They visually signal which elements belong together and which stand apart. Adding more whitespace can give your page a premium feel, but be aware that it will require users to scroll more to see all the content.
Consistency
Every design element works together to create a unique, consistent look. It's a skill that takes time to master. While it's tough to make, you can easily spot when it's missing. We enjoy things more when the design is unified. Good design is simply kind to our eyes and brains.
Do some edges look sharp while others are round? Are there shadows on some but not on others? Check for consistency. If it's lacking, it probably means there's no design system in place. This could make future changes confusing or take up more time.
A solid brand guide can clear this up, but if you don't have one, don't worry. Just choose a main color that matches your brand's personality and tone, and stick to at most two fonts that go well together and are easy to read.
Conclusion
When making a design, remember that most people visiting your website aren't there to judge your art skills.
Keep it simple and consistent. This helps your message stand out more than a fancy design would. Be clear with your words and your design.
%20(1).webp)
