Already expensive web design but the performance is stuck?
It could be, the source of the problem is the web design is not right. It's important to remember, a good design or just being cool isn't necessarily the right design, you know.
Without the right design, the function of the website will not answer the needs of visitors. Especially if it makes them confused about exploring the site.
Indeed, what are the mistakes in web design that can destroy a website?
So before discussing there, you should first understand why web design is important and what are its benefits.
Why is Web Design Important?
Have you ever heard the term falling in love starts from the eyes down to the heart ?
Apparently, this also applies to websites, you know. In fact, 94% of a visitor's first impression is formed by the web design.
That means, web design determines whether visitors want to continue to access the site or just run away.
Why is that?
Here are some reasons why web design is important for visitors or site owners.
Presenting visuals that are okay and answer needs. Web design is attractive and functional, so that it answers the needs of visitors. For example, using the basket icon for shopping, social media icons for sharing links, etc.;
Pampering User Experience. Provide a lightweight, to the point, and easily accessible user journey. Simple menu navigation, for example;
Increase conversions. Web design simplifies the conversion flow and leads visitors to take the desired action. For example, purchases, newsletter subscriptions, etc.;
Skyrocket website speed. Design has quite an impact on page speed. Therefore, each decoration must be designed as precisely and efficiently as possible so that it does not hamper page speed.
After knowing why web design is important, now you need to understand the mistakes in website design that can destroy a site. Let's jump to the next section.
1. No Target Market and Niche
Like a house without a foundation, designing a web without knowing the target market and niche allows the entire design to fail from the start. Because, all components are made without a clear purpose and consideration.
The target market is a group of people who are the target sales of the product. While the niche is a more conical market segmentation.
Usually, a web without a target market and niche makes the design seem like it has no direction. The products being sold are also mixed impressions. Thus, it is increasingly difficult to invite potential customers.
For example, you build an interior design service website. Because you don't have a target market and niche, you decorate your site with a random theme or have nothing to do with business. As a result, website branding failed.
Therefore, in order not to mislead the target, you should do the following:
Know your website goals (conversions, engagement, signage, etc). Knowing your goals makes it easier for you to think about the elements your website needs;
Understand the criteria of your target market. The target market helps you find the right web character;
Set measurable goals (conversion rate, traffic, bounce rate, etc.). Measurable goals will facilitate the web evaluation process;
Take advantage of tools like Google Analytics , Traffic Checker , etc. These tools help pull web performance data;
Do A/B Testing to find out the most ideal web design for the needs of the target audience . A/B Testing is an experiment to see which variable gives the best results.
Knowing the purpose of the web from the start will help you understand the success of the site. It is also easier for you to design advanced strategies to boost web performance.
2. Wrong Typography Choose
Typography is the art of choosing and arranging fonts in a space so as to create a certain impression.
Still related to the previous point, the target market determines the typographic character.
Now, imagine you have a news site. Want to look beautiful, you also present articles with Latin or calligraphy fonts, such as Pacifico or Flower Child.
The next day, people access your news website. However, they actually find it difficult to read the article. Too bad isn't it?
Now to help you choose an effective typography, consider some of the keys to this typography success.
Target audience demographics . Get to know your target audience (age, interests, profession, etc.) making it easier for you to understand the character of the right font. Childish, modern, edgy, or other forms;
Readability . The text is easy to read, not just as aesthetic;
Text length and font size . Know what content appears on your website. Is it a news article, product information, or other text? Of course, each component needs the appropriate space and font size;
Typographic hierarchy . is a way of highlighting text in order of importance, like headings. So, the important points of the text are easier to catch the eye;
Alignment . Adjust the position and margins so that the text is on the right line;
whitespace . The blank space or distance around the text. Make the text look more spacious and make it easier for users to read by scanning;
Text color and contrast . Color and contrast are able to build a certain impression while highlighting important points in the text;
Font consistency . Use a uniform and consistent font on the web. If the font type is too diverse, users will be confused and see your website as a chaotic site.
By choosing the right typography, it is easier for visitors to capture the core info on the website. Your content can work optimally.
3. Origin Using Color
Choosing the wrong color is another consequence of not having a target market. You are polishing the website with meaningless colors.
For example, you create a travel agency website. Because you don't understand the needs of your target market, you polish the site with your favorite colors. Blue, purple, black… As a result, each color collides with each other.
4. Random Visual Media
Visual media (images, videos, photos, etc.) are mandatory on the website. Because, visual media is easy to attract the attention of site visitors.
In fact, the human brain processes visuals 60,000 times faster than text.
However, there are times when designing a website you may focus more on the beauty of the image and forget about the impact on website performance.
Yep, using the wrong visual media can be your weapon, you know. Too many pictures, file size is too big… Web speed is also a victim. Not to mention if the image even fails to load.
So that visual media does not interfere with website performance, do the following anticipation.
Use appropriate visual media formats. Like JPEG for various photographic images or even lighter with Google WebP ;
Make sure the image size is right. Know the length and width of the device that will display the web and content. In order, can determine the ratio of images that are suitable for various types of devices;
Compress. Shrink image files and remove unnecessary metadata with various compressor tools (TinyJPG, Image Optimizer, Imsanity plugin, etc.) so they don't take up too much storage space;
Embed. An embed is a code to pull a video from a specific site (like YouTube). Thus, videos can appear on the web without taking up storage space;
Image optimization. So that images can help the web to easily appear in search engines, apply SEO Image .
After doing the tips above, the visual media of the website also looks good without damaging the website's performance. Fun, isn't it?
5. Complicated Navigation
High bounce rate ? It could be, the problem is due to complicated navigation. In fact, 61.5% of visitors leave a web that has poor navigation, you know.
Website navigation is a function that allows users to explore the contents of the site. Whether to find information, make a purchase, or lead to another page.
Without good navigation, users will find it difficult to navigate the website. For example, too many menu options, unorganized, too long text, and more.
Therefore, the design is a simple and useful navigation. If confused, try to follow these tips.
Position the navigation in an easy-to-find place. Can be at the top (header), the foot of the website (footer), the side (sidebar), or a combination;
Make sure the navigation is responsive. Navigation works well when users access it via various devices (desktop, mobile, tablet);
Set sticky navigation that can auto-hide. Sticky navigation allows users to access menus without the hassle of scrolling. But it's a good idea to auto-hide navigation when not in use, so that the web view remains broad;
Put the priority menu. Make sure the menu only contains the important things that the user needs. Such as profiles, contacts, to services;
Serve menu items in moderation. Too many choices will only confuse the user;
Use descriptive text/icons. No need to use too poetic copywriting. Just use terms or icons that are easy for users to understand. Such as Sign Up, Cart, Search, etc.;
Emphasize text/navigation icons. Make a clear distinction between navigation text and website content. Thus, the user can easily identify the navigation.
By having good navigation, the user's adventure on the website will be easy and fun. In fact, you can control their journey to lead to the action you expect.
6. Call-to Action Button Not Attractive and Wrong Position
Call-to-Action or CTA has a different function than navigation buttons. While both clickable, CTA has a direct impact on conversions. While navigation is limited to helping users open web pages.
CTA Button is text (can be text with links or buttons on the website) that can be clicked to invite visitors to do something. For example: Buy Now, Download, Read More, etc.
Now, imagine that you stop by a website for buying and selling vehicles. When you want to buy, the CTA button is either located or it doesn't even look like a clickable button. As a result, you don't even go shopping, right?
That is, if the CTA is in a less strategic position or the design is not good, chances are your goals will not be achieved. Whether it's getting clients, generating revenue, and other actions.
Then, how do you make an effective CTA Button? Please learn the trick below.
Provide answer choices and highlight which is more important. In order to appear not forcing the user, provide answer options such as Yes and No. However, highlight the button option that you expect the user to select;
CTA design to look attractive. Starting from the button size, border, font type, to other details;
Give it a Hover States effect. Hover States is when the element appears to change when the cursor is touched. This will tell the user that the element is clickable.
Use imperative sentences. Create clear instructions so that the audience will follow your lead;
Play with creativity. Use concise but seductive copywriting. Like 'Your healthy life starts now!';
Highlight benefits. Focus on what the user will get after clicking the button;
Limit offers. Apply a FOMO (Fear of Missing Out) strategy to create the impression of an emergency so that the audience takes immediate action;
Position the CTA Button in a strategic location. The CTA button should be prominent, easy to find, and present on every important web page.
Installing the right CTA can certainly boost your website or business. In fact, CTA can skyrocket conversions up to 121% , you know. Interesting right?
7. Messy Website Layout
Did you know that it only takes 0.05 seconds for a visitor to decide whether to leave or stay on the website?
If you don't believe me, take a look at the following example. What comes to your mind when you visit a website like this?
Most likely, you will be dizzy. Every piece of content seems to stick, with writing that looks like it's just crammed into it. Not wanting to be complicated, you leave the website and look for another site.
Well, that's one example of a result of a messy website layout.
A website layout is a framework that governs the layout of navigation, CTA buttons, and other elements on a website.
Without a good layout, users will find it difficult to navigate the website. They are also difficult to capture the information you want to convey.
In order not to fall into this web design error, you can try the following.
Learn and create a visual hierarchy. Visual hierarchy is a concept to get the audience's attention. The goal is to point out the important things first;
Use the basic structure of the website. Create pages that usually exist on websites, such as Home, Contact, Services, etc. So, the user will feel familiar with the web functions;
Choose the appropriate type of website layout. Determine the purpose of your site. If it converts, put the landing page at the front. But it would be different if the purpose of the web as an information board, where the content line should appear on the main page;
Make navigation simple. Navigation should be simple and easy for the user to use;
Position each web part in an organized manner. Arrange the layout of navigation, content, buttons, etc. so that it looks neat and easy for users to follow;
Follow the development of web design trends. Website layouts often evolve, following changing user needs and behavior;
Learn various design theories. Design theories like Gestalt Law, Rule of Thirds, Hick's Law, etc. will help you understand human psychology when using websites.
By having a good website layout , the web display becomes more organized and easy for users to use.
The next advantage is that the User Experience will be positive and the website is able to achieve its goals. Whether it's conversions, increasing awareness, strengthening engagement, etc.
8. Lack of Understanding of HTML/CSS
When designing the web, there are times when you are not alone. Sometimes, it is necessary to collaborate with a web developer.
So, what's the difference between a web designer and a web developer?
You see, web designers are tasked with making the appearance of the website with a UX approach. Layout, visuals, graphics, and so on.
While the web developer is responsible for everything behind the scenes. This includes site performance, as well as the logic and how each web part works.
Unfortunately, in building the appearance of the website, sometimes the design is designed as you like without thinking about whether it is possible to execute it. As a result, the released web is far from the design.
Now to facilitate collaboration with web developers, web designers need to understand basic front-end coding. Like HTML/CSS . HTML and CSS are markup languages for creating views that can be accessed through a browser.
Then, how do you learn HTML and CSS? Here we provide tips.
Learn the core HTML framework. You can start learning by understanding the basic structure of web pages in HTML;
Know basic HTML and CSS coding. Knowing basic HTML and CSS coding will make it easier for you to understand more complex code;
Create or modify HTML/CSS templates as needed. Try practicing by creating or modifying HTML/CSS templates;
Develop skills with more concise coding. Keep up with web development so you can design the web with cleaner code, like HTML5 .
Having knowledge of HTML and CSS , you can design the web as well as collaborate with web developers. Another advantage, you are also able to develop web pages without relying on plugins or templates.
9. Unresponsive Web
Did you know 73.1% of visitors leave the web with a non-responsive design?
So before knowing the reason, you should first understand what a responsive website is.
A responsive website is a website that is able to adjust the layout when appearing on various types of devices (desktop, mobile, tablet) with different screen sizes.
Without a responsive design, the website will appear in a version that is not supposed to be.
For example, when a visitor accesses the site via a smartphone, the desktop version of the website appears instead. As a result, all components look small so that visitors find it difficult to use the feature and go looking for another website.
So before losing visitors, make sure to create a responsive web design. The method:
Use or create responsive templates. You can use ready-made responsive templates or create your own responsive theme with HTML and CSS;
Learn how users use your website on various devices. Know what functions users need most whether on desktop, mobile, or tablet;
Image optimization. Image size must be flexible according to device type;
Make sure the navigation looks okay on every type of device. The display on the mobile is certainly smaller than the desktop or tablet. So, adjust the navigation. Using hamburger navigation, for example;
Button design to be easy to click even on small screens. Buttons should be flashy and easy to click. Can be designed in the form of a box or oval;
Use responsive website check tools. Check whether the site is responsive with a variety of responsive website check tools.
Although there is quite a lot of effort that you need to do, a responsive website also brings quite a lot of advantages. Both in terms of User Experience to conversions. In fact, 80% of users are interested in making purchases from companies with responsive websites, you know. Haha..
10. Ignore Web SEO
SEO (Search Engine Optimization) is an optimization effort that allows websites to get top rankings in search results. One that can be optimized is the web design itself.
SEO website design is the creation of a website design that follows SEO rules so that it is easy to find in search engines.
Without implementing Web SEO, the site will be difficult to find. Moreover, only 0.78% of people want to see search results on the second page of Google and so on.
Then, how do you build an SEO website design? Try some of these tricks.
Do page slicing. Page slicing is dividing website components into small parts. Thus, the optimization process is maximized. For example, slicing a background that has the same motif and is used repeatedly. As a result, the page loads faster than using the full version of the image;
Set the website layout. All navigation to content must be organized so that it is easy for users to understand;
Create a website sitemap. A sitemap is a list of web pages that users can access and will display on search engines. This makes it easier for Google to index your site;
Only use one H1 on each web page. Heading 1 serves as the main title of the website page. So that Google doesn't get confused with the core of your website, just install one H1 on each web page;
Make sure the website theme is mobile-friendly. A mobile-friendly website is a website that is optimized for mobile devices. In fact, Google prefers to index sites that are mobile-friendly;
Website speed should be okay . In fact, Google gives its first page to websites whose page speed is close to 1.65 seconds.
Doing the SEO Web Design efforts above, your site is likely to be easier to rank first on search engines. And if you've done it, don't forget to keep doing maintenance so you don't overtake your competitors, OK!
Comments