Before we start, I have a question, what do you focus on most when designing a website?
Is it a beautiful interface? Cool effects? In fact, website function and user experience is the most important problem to be solved in website design. A good user experience will make your site memorable to visitors, which will help build your brand and drive traffic to your site.
So, how to build a site that users trust?
The key, again, is web design. Even for small startups, it’s best to find a web designer to help with design. So the question comes again, what kind of web design is good web design? What are some common web design mistakes? How can they be effectively avoided?
If you’re still struggling with these questions, take a look at this post, where I’m going to illustrate what good web design looks like from the opposite side by explaining 9 examples of bad web design. I hope you like it.
First, let’s look at some basic rules of web design.
Although web design trends change all the time, web design principles are hard to define. But there is still a golden rule. Here are some basic principles to keep in mind when designing a web page:
- Easy to understand navigation
- Reasonable use of color scheme
- Correct animation
- Easy to understand layout
- Visual friendly
- Design elements do not interfere with content presentation
Now, let’s take a look at nine examples of bad web design. These cases may violate one or more of the principles of web design, which is something you should learn to avoid in your design. In addition, these cases are for analysis only, with no malicious intent declared first.
1.Arngren – Design mess and missing grid
I have to say my eyes feel blinding every time I open this site. Fonts, graphics, content, links, and all the other elements are all jumbled up into a cluttered web interface. This web design can be said to be against all principles of web design, can not find any in line with the principles of web design clues. The biggest problem is the lack of a grid, so all the layout and content is haphazard. Second, the navigation structure is confusing, the font is too small and messy for visitors to read, and the color scheme is haphazard and unplanned.
A web design that uses grids to organize the layout of content and elements should look like this.
2. Typesetdesign – Lack of contrast in design
When browsing a website, we want to see clear and sharp contrast between page elements to ensure that information is highly readable. In the design of this website, the color of the background color related information is similar, and the contrast is very weak. Once the contrast between the picture background and the text is poor, the text will be blurred. Not only will users miss some of the text prompts, but they will also miss the important message you are trying to convey. Without contrast, the color combination and overall presentation of the site can overwhelm us.
For example, the contrast between fonts highlights important information and secondary information, the contrast between colors enhances visual effects, the contrast between white space and primary color makes the whole interface look comfortable and beautiful, and so on. In short, contrast can help us read and understand information better. You should use color, space and size wisely so that users know how to operate.
A good contrast web design should look something like this.
3. Theweddinglens — no responsive design
Be sure to use a responsive design framework. Your web page may need to run on a mobile phone, and it must run as smoothly on the phone as it does on the web. But the site, which is still a whole page when loaded on a phone, is not adaptive. Since the site does not have a mobile version of the view, users cannot use it on mobile devices at all. I think a lot of users, like me, just gave up on the site. Without an adaptive site, it is bound to lose many core users and potential customers.
Web design examples using responsive design:
4.Pacific Northwest X-ray Inc. – Wrong color match
The design of the site is a false palette, consisting of conflicting colors or text colors that mix too much with background colors for users to read. The colour scheme is unpleasant, the navigation is complicated and the whole site looks as if it was designed in 1997, but now looks outdated and the site has not been updated. While the site tries to explain that its service is largely straightforward and doesn’t cause users frustration, the confusion already exists.
And a good color matching web design, should be beautiful and simple or personality taste, is to allow users to operate simple and comfortable, so as to further reflect the site’s positioning and characteristics. Such as:
For information on UI color matching, I’ve written about it before, you can check it out here.
How to quickly master the right UI color scheme? 6 tips not to be missed!
5. Gatesnfences – Poor navigation and operation procedures
Navigation for the importance of the site is self-evident, users in your site, should be the first I understand what he can do next, which operations will take him to where. Therefore, make sure your navigation is visible. Suggested navigation and menu bars tend to be at the top of the page. Don’t go out of your way because navigation information is too important.
In addition, the content and performance of navigation tabs should be clear and intuitive. Do not use horizontal scroll bars or other unusual motion design, and if you do use them, be sure to give the user some indication of how your page will work. But really, an overly complex design can confuse users and shut your site down.
A good navigation should look something like this.
6. Uat – Missing links and incorrect CTA Settings
Missing links or missing links can be one of the biggest mistakes a website can make. Checking links on your web pages is one of the necessary tasks, either manually or using a tool like Website Link Checker.
Given the availability of links, especially those in text, links must be obvious and easy to click on to avoid misoperation. Therefore, it is recommended not to add a lot of text links to your text, especially on a small mobile device screen, where it is difficult for users to click on the right links.
Each small scrolling image on the site is a connection point, with images and text so blurry that users have no idea what information is being displayed.
CTA Settings, remember to be clear, do not give users too many choices of the same level of CTA, will cause user confusion. Take a look at an example:
Too many CTAs at the same level can cause user distress, while keeping one can highlight the point and improve the user experience. Here is a well-designed CTA.
7. The nMG-GROUP-interface primary color and picture background are not clear
A picture can be said to be the face of your entire web page, a beautiful picture can bring beautiful and comfortable effect to the web design, not to mention those who use the whole picture as the background of the web design. If the background image of your site is great on its own, it’s a waste of information to overwrite it or spoil it. The design of the site itself is good, but look closely and the text and background images can be confusing.
Here it is suggested to use transparent buttons, that is, in the design of buttons in the web page, no longer design complex colors, styles and textures, but only to outline with wire frame outside, only text inside the function, the background is transparent, and the whole page background as one.
8.Wateronwheels – Inconsistent style
If you want to keep the page smooth and simple, don’t try to mix and match. The text part of the website uses different colors and font sizes to contrast and highlight, a certain hierarchy, but the final text part is highlighted in blue, which actually breaks the unity.
Here are the details: Uniformity is essential to the overall beauty and smoothness of a web interface:
9.Greatdreams – Not using white space
The site looks rich in color and contrast, and fits the theme of children’s juice potions, but a lot of too bright colors are mixed together without any white space, making the use of color extreme and making the site look like a colorful paint painting. The text also has no substance, and the exaggerated color scheme makes the readability very poor, and the site has no navigation, so you have to go to the bottom to find some relevant information.
A web design with white space is simple and clean:
More web design errors:
1. Play music automatically (without the user’s knowledge)
2. Long page download times. If your page takes longer than 30 seconds to download, it’s hard to get people to like your site.
3. Website pages are too long. How many visitors do you think are interested in seeing the bottom of your page? Don’t try to test the user’s patience.
4. Expired information. Information that has not been updated for a long time is easy to make visitors feel disgusted, and in the mind of your site’s brand image will be compromised.
5. Isolated pages. The user does not know how to return to the home page. This is often the case in the information tip page or content survey results page. Poor user experience.
6. Lack of interactive content. Lack of interactive content, lack of user participation. Without allowing your friends to express their feelings and thoughts, your site may become dead.
Prototyping – The first step in web design
If you get one or more of the questions listed above, don’t be discouraged. There’s a saying, “Practice makes perfect.” You need more practice. So where to start? My advice is to start with prototyping.
You can start your web design career with Mockplus, the best prototyping tool in the country. Mockplus supports web projects, so let’s take a look at how you can do web design in Mockplus.
Step 1: Open Mockplus and create a Web project
In the launch screen, you can select individual projects or team projects, and in the pop-up window, you can select web projects. Here, you can also set the size of the site.
Next comes free design, with Mockplus featuring over 200 highly packaged components and over 3,000 vector ICONS to help you get your designs in quickly. Here are a few small points to start with.
1) Text hierarchy: Navigation bar, main heading, subheading, and body have different text sizes. Here, just use Mockplus’s single-line and multi-line text components and set the text size to highlight the text hierarchy.
2) Rapid design: use format brush, automatic data filling and other tools for rapid and repeated design. Format brush can quickly render text information of the same level in the same format, while automatic data fill can fill text data and images.
3) Attribute setting: component attribute functions can be set for color, transparency, border display and hiding, visible or not visible, etc. The superposition of attributes can create infinite design space.
4) Picture import: special picture components, you can import the picture you want as a page with pictures and background, but also free design, one key import, very convenient.
More designs for you to explore.
conclusion
Web design has to serve the function of the site and the communication of visitors, as well as the beauty of the requirements, all of which combine to make web design so difficult. But learn more practice is the only way you grow, I hope the above content to help your design, can let you understand what is bad web design, and in the future design effectively avoid, also know what kind of design is good, so, your design will be better and better.