To create a first impression, you only have one opportunity, and nowadays, it often happens online. Therefore, it makes sense for every company to invest a little in its online image. The competition is tough, and if your website doesn't inspire trust in the customer, they are just a click away from the next one.
Furthermore, good design helps keep people on the website for a longer time. The longer a person stays on your site, the more they read your content, and the greater the likelihood that they will eventually become a customer.
"But I don't have time to deal with the nitty-gritty, and designers also ask for a fortune."
In that case, my friend, I would say that getting a solid start doesn't actually take that much time at all. Keep reading, and I'll tell you about four fundamental truths that don't require much time to set up, are easy to implement, and immediately lead to better results.
Set the colors on your website
There are many colors in the world, and each of them has its own beauty. However, not all of them go well together, and some may seem odd in the context of your business.
What colors to choose then? First, select the primary tone. It's essential to consider the meaning of the color (yes, different colors are strongly associated with various emotions). For example, if blue is balanced and professional then red is energetic and passionate. These symbolic meanings may vary by region, and certainly, they can be nuanced later by using different shades. It's also crucial to be aware of the potential negative aspects of colors. For instance, while red may signify passion, it also symbolizes danger and stop.
Now, you should determine the exact shade of that color. This is something an average person can easily do using online generators. A good example is the Coolors color generator, which provides various color variations with just a click. Click until you find the primary tone that suits you. Certainly, it's advisable not to use just plain blue, red, or green as your main color, but rather explore lighter, darker, or intermediate shades. This immediately adds a lot of uniqueness to your website.
For your color to truly shine, it needs to find friends. This is generally the trickiest part because now color theory comes into play, and suddenly there are many variables to consider. If you don't feel like thinking too much about it, Coolors allows you to create combinations with the same ease of pressing a button. Just make sure to cover background color, text color, main color, and perhaps an alternative for the main color.
When combining colors, it's essential to consider contrast. If the colors don't distinguish themselves enough, reading becomes challenging, and the overall appearance of the page goes downhill.
Define the primary text styles and their sizes
To ensure uniformity on the website, it's crucial to carefully consider fonts or text styles. It's advisable to choose up to 3 fonts, though in most cases, I would recommend sticking to two. One of them should be more distinctive for headlines, while the other can be used for longer content, emphasizing simplicity and readability. This way, you achieve uniqueness on the page without sacrificing readability. In some situations, I have opted for a third font, serving a specific role like decorative elements, but this is a rarer occurrence, and one font can often suffice. Google Fonts is a good source for a variety of free fonts: [Google Fonts](https://fonts.google.com.
Once the fonts are chosen, it's essential to assign sizes to them. This is crucial for creating a strong hierarchy on the page and ensuring that text is easily readable. I generally define three headline sizes:
- A very large headline for banners and other crucial elements.
- A medium-sized headline to introduce most sections.
- A small headline for use on cards and for breaking up text paragraphs.
For content sizes, I typically set two:
- Regular content text, covering the majority of the content.
- Secondary text, often added below images or for less important information.
Of course, you can assign different weights to all your font sizes to emphasize certain elements within paragraphs or headlines.
If you have more time on some days, it's a good idea to go over all your content with your new hierarchical typography system, ensuring that no paragraph is too long and segmenting it with appropriate headlines. Your users will appreciate being able to quickly scan your page.
A final small tip regarding texts: ensure that the alignment is consistent within paragraphs. Left alignment is the most readable, center alignment works well for short and important content, and right alignment is less commonly used but can create visual balance. However, it's crucial not to change alignment within a section or block without a reason!
Let's design your white space
No, we're not adding patterns or lines but simply ensuring that there is enough white space.
The golden rule is that the more thematically related elements are, the closer they should be to each other. For instance, if you have three text paragraphs consisting of a headline and content text stacked one below the other, there should be visibly less space between the headline and the content text than between these paragraphs.
Following the same rule, if dealing with different sections, the space should be even greater. For the sake of unity and developer-friendliness, I personally like to use multiples of two (2, 4, 8, 16, 32, 64, etc.) when determining spaces.
If you have visual boxes or containers around certain content on the page, it's essential to ensure that there is sufficient space between the content and the edges of the container.
What kind of images are you using?
Images hold significant value in connecting with people. The type of images you choose greatly influences the perception of your brand. There's a difference whether your website is adorned with playful illustrations, professional photographs, or shots taken with a phone. If hiring a photographer or illustrator is beyond your budget, there's no need to despair. Modern artificial intelligence generated images may not be suitable for product photos (I believe that wouldn't be ethical), but they work well for illustrative images – they are versatile and remain budget-friendly.
Some examples in case you are not familiar with AI images:
To conclude everything
I believe that with goodwill, the aforementioned tips can be implemented in a few hours, and at worst, in a couple of days. However, their impact on your visual identity, traffic, and conversions is definitely worth it.
If anything remains unclear or if you have other questions/observations, feel free to give us a call or write to us. Reach out, and we'll be happy to help!