Never design webpages like this, never design webpages

Never design webpages like this, never design webpages

When we open a website each time, the intuitive feeling is the beauty of the website. But if a website is ugly, it is a spam website for us, believe me, you will be crazy when you see them. From the loss of links to poor availability of moming, I will share some design errors that will make me feel free to use. Note! Never let your users encounter the same problems as below.

1. Lack of contrast

Text and images on webpages must be highly readable. The simplest way is to make them have high contrast. However, many designers often ignore this rule.

The contrast between the image background and the text is too bad, so that the text is blurred and cannot be read. The user not only misses this section, but also misses the important content you want to convey.

You must ensure that each element is different from other elements around it. Remember these basic methods-color, space, and size. Use them properly to make every element clearly visible!

The two comparison problems -- the white text is too similar to the light color of the image and the small font size makes the text readability very poor.

2. Poor navigation and operation procedures

When I log on to the webpage, you need to understand what to do next. Click the button and the information must be placed in a conspicuous position-that is why the navigation and menu bar are usually at the top of the page.

The label content and running effect of the navigation must be clear and intuitive. When you try to use a horizontal scroll bar or some other unusual dynamic design, give users some hints to let them know how your webpage works! A complicated design will make users feel at a loss and give up on your website.

3. Poor Image Processing

Nothing is worse than a good image being masked by other designs. If you spent some time with a good image for your website, why should you make it covered by other design elements? Simply add a line of text! This is why transparent buttons have become a new trend. Transparent buttons: when you design buttons on a webpage, you do not need to design complex colors, styles, and textures. Instead, you only need to use a line box to outline the content. You only need to use the text to show the background, integration with the entire page/background

Designers often fall into this misunderstanding when pursuing the trend. The top bar is interesting and the scroll is great, but when you match them with the text, everything will become less harmonious. Each image on the page needs to be matched with the text so that each text can be read, and each design element on the image is clearly visible.

Do not overwrite any important part of the image with text or buttons. If you think this is the case for your page design, you 'd better replace a more concise background and put your picture elsewhere.

When you first see the figure above, you will be attracted because of its sketch style. But taking a closer look, the face of the character is covered by text, and the comments of the award make the whole look messy.

4. No grid is used.

In web design, some "clutter" can also be pleasing to the eye. asymmetry is one of them. No grid is used!

Whether or not to use a grid is one of the professional indicators to distinguish between good and bad designs. Grid makes everything clear and organized-keep your elements at proper spacing, and you know where and how to place your elements. Grid helps you determine the size of elements, the size and space of text, and display the focus of content in proportion.

5. No responsive design

Use a responsive design framework! Use a responsive design framework! Use a responsive design framework! The important thing is said three times! Your webpage may need to run on your mobile phone. It must run as smoothly as it does on your computer.

I can always meet some websites that load a whole page on my mobile phone. These websites are not responsive designs. At least there is no view of the mobile version, so that users cannot use it. (Although uncommon, websites that only provide mobile version views are quite helpless .)

Maybe many users, like me, will not open your website on my computer if I cannot use your website smoothly on my mobile phone.

6. Link Loss

The broken link is one of the most annoying tasks on the web page. Develop the habit of checking whether links on your web pages are smooth every year! You can manually check or use some tools, such as Website Link Checker.

If your logo cannot be linked to the homepage of your website, I will be surprised. The Logo must be linked to the homepage of the website. (Do not disable the return button when you are on the homepage .)

Consider the availability of the link. Make sure that your links, especially those in text, are clear enough and easy to click without misoperation. Do not add many text links to your text, especially on small mobile device screens. It is difficult for users to click the correct link.

7. automatically play music

Adding a sound to a webpage is very vivid. Do not play music without user prompts.

You should provide the user with a button to enable/disable music and disable it by default. Music may surprise users, but it is counterproductive if they are in a working environment or in a bad mood. The user needs to be able to fully control your webpage, but the automatically played music is contrary to it. I need webpage music, but I have to get my consent to play it. If I can't find the button to close the automatically played music, I can only turn off the webpage directly.

However, it is a good way to use it in advertising. If you have audio content that must be played, consider setting a large pop-up mute button. Users often receive ads for several seconds and read the content. Although this is not an ideal solution, it is a better solution.

Look at the above page, it will automatically play music, but should be mute. Let's see if we can find the switch button at a Glance-the button is too small, especially it is more difficult to find than other elements.

7 more serious crimes

No. The worst thing is worse. Some of the detailed design mistakes below will let me discard them. Don't let yourself be the victims of these careless mistakes.

No search function

Incorrect syntax or spelling

No call Function

Too many links appear in the text

Connected text

Ultra-small button

Poor layout and readability

Summary

Everyone can easily make these design mistakes (you will also find these potential problems on a well-designed website ).

Pay attention to these small details during the design and development process, and you can successfully avoid these mistakes. Don't make your users angry (serious face )!

10 immersive 404 pages

20 major uidesign principles

2015 ranking of graphic design software

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.