As a web developer, I often have to think about web design as a part of the job. Sometimes, it can be really hard to get those creative juices out from your brain but I do believe that everyone is creative and artistic. Especially people in this industry!
But there's those days when my creative juices are not flowing (yea, it happens) so I would get inspirations from other websites and in this post, I'll share 5 design elements that I found help make a website looks tens of times better. I'll also use a website (gotten their permission) as an example. In no particular order, here it is!
1. Never use primary colours too much!
Take a look at this website's home page.
The first thing you noticed is probably the huge red margins on both sides. As a rule of thumb, don't ever use red, blue, yellow (aka primary colours) as the primary colour of your website. I know it sounds strange because they are primary colours. But no.
A website looks really tacky and unpleasant to the eyes with too much of these bright colours so it's better to tone it down. Use more neutral colours like white or gray as the primary colour of the site. Red, blue or yellow as the buttons, aka secondary colour, of the website. Your website will look a thousand times more professional and simple to read.
How I would change this site:
As seen from this re-design, I made the site full-width (another design tip) instead of having those red margins. Then I get rid of most of the red and use white as the primary colour of the page. The red now becomes the secondary colour. It is seen on the buttons, the logo and the nav bar to show the current page the user is on.
Conclusion: Don't use bright colours as the primary colour of the website. Use neutral colours, they are easier on the eyes to read and looks more professional.
If you noticed, the home page also looks more professional with the large picture at the top. This brings us to tip number 2.
2. Use professional photos
THIS IS SUPER IMPORTANT! Pictures convey many things about a website. One of them is quality. People are visual creatures. If a website has poor quality pictures then visitors will naturally assume that the company has not been keeping up-to-date with their website and therefore the business may lose a little credibility.
Using professional photography can make a website looks super welcoming and professional immediately.
Also, don't be afraid to make the pictures huge. Let it fill the space and make your website your world. Take a look at Apple's website.
They are really not afraid to show their newest product. And the sheer size of the picture captures your attention, making you feel almost enarmoured by the beautiful product.
Conclusion: Use professional pictures only! Make them big and attention-grabbing.
Oh and if you need free pictures, I recommend Unsplash for their extensive library of professional and classy looking photos. It's always my go-to for good photos.
3. S P A C E
To make a website feel more luxurious, all you need is space. Like seen in Apple's example, use as much space as you need. There's no limit so don't be afraid to use more space. Enlarge the text. Make the site full-width. Fill the website with pictures. TONS OF IT.
My motto is: there's no such thing as too many pictures for a website
Let's go back to our example website. This is its products (MDX Series) page.
As you can see, the website tries to squeeze every product on the page and not giving them the attention they each need. Space is tight and sparingly used. It looks more like a flyer than a website.
How I would change this site:
The big difference is that I used spacing to the fullest. I am not stingy with space. I use tons of pictures and large text on the site. And even though this is just a draft design, it already looks better than the original (I hope).
Conclusion: Don't be stingy with space. Use it as much as you need.
4. Call-To-Action buttons must be easy to spot
CTA or Call-To-Action buttons are buttons that you want your site visitors to click on. It could be a social media "Follow Us" button or a "Read More" button or a "Buy Now" button. In any case, it is important to make sure it is visible so now's the time to use striking colours. The font must be readable and easy to spot.
How about we go back to that example website? Let's see how their CTA buttons look like.
This is their blog page but it looks unattractive and the CTA buttons "Read More" may be visible but because the entire page is so red, it is not very striking. Also, they have social media CTA icons at the top right of the page but it is barely noticeable.
How I would change the page:
I came up with this in a short amount of time so it may still need improvement. But I use bright red colours for all the CTA buttons and social media icons. Any articles links are also red to indicate it is clickable. Again, I make use of good spacing and big pictures to tie it all together.
Conclusion: Make anything clickable look clickable and enticing to click.
5. Animations
Finally, the last design tip. Our last but certainly not least, is animations. In fact, I think animations make a website looks so sophisticated and well put-together. I'm not talking about distracting and overbearing animations.
A website with smooth transitions and simple animations gives the visitor such a pleasant feeling to explore the website. People will spend significantly more time in your website with great animations compared to a website without them.
Conclusion: Knowing some simple CSS animations will make your website stand out above the rest.
And that's all folks!
Thank you for reading this super long post. I hope these are some good tips for your front-end projects. If you find any websites that you think is cool or amazes you, please let me know in the comments below and share them with everyone! We all want to be inspired~ Also, don't forget to like and share this post to someone who needs it. Till next time, cheers!