It’s easy to come up with an idea to design your website but do you really know how to put things together so that your design is optimized? This article from Designveloper will detailedly show you some of the first 3 most important practices when drafting the look for your website:
- How to design a good CTA?
- What tone of theme should we apply to the design?
- How can the illustration fit in your design?
1. Design your CTAs wisely
Call-to-Action (CTA) is a really important element to pay attention when you are designing a website. CTA is the one thing that could make or break your customer decision, and as a result, this graphic element will surely affect your sales.
While the copy of a CTA gives the customer a clue to figure out “why should I click this button?”, the appearance of it solves the myth of “where should I click?”. A good designed CTA should help users navigate and understand their future actions. That’s why designing a CTA is a really crucial activity.
Though drafting a CTA button is not a difficult task, optimizing to make a sale through it is not an easy one either. Below are 3 UI tips from Designveloper that could help you make the best out of CTAs.
Use contrasting colors
There are many aspects that your button’s color choice should think of such as the color of the whole composition, psychological peculiarities of the target audience. One of the most important factors you must implement to your color choice is contrasting. As the background and button color are contrasting so that the CTA could be an unusual element on screens and stand out from the others.
One more thing you should be aware of is the more important a button is, the more contrasting it must be. Let’s look at an example:
Contrasting Button. Image: Malachi.
Choose a bigger size
On the one hand, Every designer knows that the bigger an element is, the more eye-catching it is. On the other hand, CTA is made with the purpose to optimize the conversion rate. That’s why a big enough button would draw attention from the customer more effectively, and there is a higher hope that they will respond to it compared with small and unnoticeable buttons. However, don’t widen the button too much as it will affect other elements and the whole design of your website. There a tip from Apple suggesting that your button should be at least 44 points x 44 points.
Your button should be at least 44 points x 44 points. Image: Apple.
Watch out for the fold line
Above and below the fold line is a concept regarding to printing press. Newspapers are double-folded to put on the stall because the sheets are too large. And this makes the passerby only see the above the fold half. That’s why newspapers have to attract customers by putting engaging headlines or pictures on the top half to boost sales. When it comes to web design, the fold is related to our scrollbar.
As Tyson Quick stated in his article in Instapage, A CTA placed above the fold can immediately draw visitors’ attention. However, several analyses show that it’s best to put your CTA on the above half only when the majority of your customers have already known about the service/product and want to make a deal faster without any further research.
Best practices for above the fold CTA. Image: The Landing Page Course.
And opposed to this placement is below the fold. It is said that if your customers have no idea what is your service/product then the CTA should be at the bottom of the page so that customers could see some value of the offer. Brad Geddes ran a test in his own real estate website where the call-to-action media were moved below the fold, and the conversion rates went up. After that, he and his team tried putting the CTA back to the top of the page, surprisingly, the conversion index went down.
Best practices for CTA below the fold. Image: The Landing Page Course.
The example has shown that CTA placed above the fold is not always the best practice. So the two crucial questions towards this are:
– Are your customers familiar with the product/service?
– Are your offerings easy to understand to the majority of your customers?
If you say yes to both questions, let’s lay a CTA on the top of the page. In the case that the offering is hard to follow then you’d better place the CTA below the fold.
2. Sometimes dark background is the best choice
It comes as no surprise that more and more UI designers are likely to choose dark theme over light one so that the interface they designed would have a stylish and trendy look. In fact, the reasons behind this are various.
The first reason is that dark background will not strain users’ eyes. Of course, it is easier to read the news, blog posts in a light theme in a short while. However, when we have to work in a long duration (coding, reading a long essay, etc.), a dark theme with light text is a better choice. It enhances readability and legibility.
Secondly, if the environment encourages using a dark theme, do it. Are you familiar with Netflix or Spotify? Both of them apply dark themes to their interface. This is because people tend to watch movies and listen to music to relax. According to a report by IFPI, consumers are more likely to listen to music when they are relaxing at home (63%). Regarding Netflix, it is found that its users would stream movies, series late at night, or in the room with dimmed light.
It is found that its users would stream movies, series late at night, or in the room with dimmed light. Image: Netflix.
People tend to watch movies and listen to music to relax. Image: Spotify.
Another example for this is all of Adobe’s products including Photoshop, Illustrator, InDesign, etc. adopt dark interfaces (like black, grey) so that designers could focus on their tasks and their eyes could be comfortable when working a few hours in a row.
Since bright background can cause strain in such an environment and also distract users’ attention, a dark background is always the better option here.
There are several tips when applying a dark background to your website, including:
– Since dark background absorbs light from other elements, you should make use of negative space so that your users won’t be distracted by relevant information.
– If there are texts in your design, you’d better use sans-serif fonts so that users can easily skim the information on the page.
A San Serif font used in a dark background website. Image: Two Chimps Coffee.
If you are still wondering about deciding whether light or dark is the best, here is a checklist for you:
– Step 1: Define the purpose of the interface. Is it a text-driven website (blog, news, e-reader)? If so, the light theme is a suitable one. In the case that your website is visually-driven, the choice should be a dark background.
– Step 2: Define your target audience. The two questions you should keep in mind are:
+ Who are they?
+ What they want?
Based on the answer, you will figure out what the best choice is. In other words, if you want to make a website for middle-aged people, light background is the best practice as this tone is more intuitive and navigable. When it comes to young audiences, dark themes are more original and stylish. However, teenagers and kids prefer bright and engaging themes.
– Step 3: Test and test and test. You can never trust any recommendation without testing it first. An A/B testing will give you a better view of your audience’s behavior and then you are able to optimize your website as much as possible.
But there are two more choices for you when deciding what tone the background should be. First, your interface could be dark but there has to be a white tap for the copy. The other recommendation is to empower your users. Design more than one interface themes and let them choose whatever background tone is suitable for their needs. Here is an example from Slack:
Slack’s changeable theme feature 2. Image: Slack.
3. Using custom illustrations
This is 2019 and who doesn’t use illustration in their website? Well, if you are one of the people who are still new to this, below are some reasons explaining why illustration is a must these days.
Generally, illustration is more effective when it comes to grabbing users attention compared to texts. Plus, if your work of illustrating is beautiful enough, then it will probably satisfy the need of aesthetic of human. Therefore, this type of element could encourage a user to keep rolling the scrollbar.
Illustration is more effective when it comes to grabbing users attention compared to texts. Image: Octave & Octave.
Furthermore, illustrations help the audience process data quicker than texts, they will see what you mean in just a second, without having to know the context. Thanks to the recognizable characteristic of illustrations, texts (copies) are well supported and it also helps the information stay in users’ minds longer than usual.
Illustrations help the audience process data quicker than texts. Image: Kick My Habits.
One more reason is that custom illustration enhances brand awareness and recognizability. Illustrations are the one unique factor and experience that brands could give their audience.
What’s more? It’s your work then you can custom and sync it however you want. The artwork could be engaging, fun, appealing, etc. The choice is yours but it should go with the flow of the whole design.
Illustration enhances brand awareness and could be customized and synced easily. Image: Fixate.
But how can the illustration fit in?
The first thing to analyze is always your target audience. After that, it’s wise to figure out what the environment of your website is, in other words, if you want to show your sense of humor then a fun pack of illustrations will work. Next, let’s consider if your illustration is understandable or too complicated for users, don’t make them think, you know! And the final tip is that the work should not be a distracting factor to your website, the main idea of all of these are selling service/product, right?
Those are three practices that we at Designveloper think you should consider for the next project. If you have no expert around to develop your own product, let Designveloper help you. Reach us at our estimation page so that we will have a better view of your idea.
Before you go, don’t forget to visit us weekly for more informative content about software development, product designing, etc. And also, the 2nd part of this topic will be published soon, so stay tuned! 🙂