Good web design is a difficult thing to achieve. A good web design is not only eye appealing, it’s usable, intuitive, simple in hierarchy yet complex enough to keep the user interested. The perfect balance of fonts, colors, whitespace and content can lead to a great looking design that keeps your visitors coming back for more. A bad web design, however, can send your users running from your site.
When working on a web design, there are a number of places that many designers begin to go astray. In this article, we’ll discuss 10 reasons your web design sucks and how to fix it.
Need to see some good web designs? Check out these posts for web design inspiration:
Let us know what you think, and if we missed any reasons your website design sucks, let us know in the comments!
1. Not Enough Whitespace
Whitespace is arguably one of the most important parts of design. It helps prevent a user from becoming fatigued while looking at a site, it allows separation between content, and it just looks good. Whitespace does not have to be white in color, instead, it is merely empty space that provides spacing and cushioning for the rest of the design elements.
Understanding Whitespace on AListApart
2. Too Many Fonts
Yes, I know you just bought that package of 5000 super-mega-awesome fonts, but for the sake of your web design, don’t use them all at once. Generally, limiting yourself to only a few font-families is a good way to go, particularly for beginning designers. While you can get some very good looking designs by mixing serif and sans-serif fonts, it’s a move best left for situations when you know what you’re doing and have a plan in mind. Otherwise, it just looks strange.
Typography Tips for Web Designers
3. Too Many Colors
Having a background color, a content text color, a link color, a header/lightbox color, a design color and a footer color is great, as it helps separate out useful content. However, having multiple gradients, several vivid colors and lots of contrasting hues and saturations will ruin any concept of whitespace or hierarchy your site has. Try to limit yourself to one color (such as blue) for your vivid color, and play with that against monochromatic (white, gray, black) colors to get a good looking result.
4. No Content Hierarchy
The user’s eye likes to order things on a design, such as a header with navigation and logo, a lightbox with featured content, three content columns, and a footer. It helps the mind organize important information and also guides the user’s eye to where you want it to go. In traditional art, beginning artists are taught about the rule of 3rds, color, value and linear perspectives and other artistic guidelines. In web design, there aren’t specifically named guidelines, but it’s a good rule of thumb to organize your content in an intuitive way.
Contrast and Content Hierarchy
5. Not Respecting User Resolution
Yes, having a 2560px wide resolution for your monitor is great. But a large number of people are still using 1024px resolution for their monitors, and some are still using 640×480 or 800×600. While the number of computer monitors with this size resolution is decreasing, mobile devices are coming in and taking over with smaller resolutions. The current standard for width of web designs is 960px, which isn’t respected everywhere but tends to look the best on the majority of resolutions. If you are expecting to deal with large numbers of mobile users, consider having a mobile design as well.
6. Contrast Problems
Have you ever looked at the difference between reading white text on a black background and black text on a white background? Have you ever tried reading a light gray font on a white background? Some values just look better against the others, and the reason for this is the way the eye perceives contrast. If you have a hard time leaning back and reading the text, consider changing the size or value.
Becoming a Master Web Designer: Contrast, Contrast, Contrast
7. Not Enough or Too Many Ways To Do The Same Thing
It’s nice to have multiple navigations, such as one in the header and one in the footer. Having a back to top button in the footer is great. But having multiple ways of accomplishing the same task tends to decrease usability, so try having your grandmother use your website. If she can’t figure it out, consider what might be confusing for first time users on the site.
Consistency is key in web design. It’s what holds a web design together, creates a cohesive feel, and in the case of a website network, it helps users tie everything together. If you keep changing fonts, sizes and colors throughout the website, users will quickly get lost in what they are doing.
9. Not Enough Text Spacing
Related to whitespace, text spacing has two parts, the first is kerning (which, while not directly adjustable in CSS, can be handled through some advanced techniques), which refers to the spacing between letters. The second, is line-spacing, which is directly editable in CSS and refers to the distance between two lines of text. It helps separate lines and paragraphs, and makes text easier to read for the user.
10. Poor Sizing
It’s standard practice that h1 text is bigger than h2, and header text is bigger than paragraph text. Try to keep sizing consistent, as it helps with consistency (see #8) and content hierarchy (see #4). Make it so your fonts are readable, but not obscenely large, and make the font-size indicate the importance of the information. Also, a font size below about 10px is probably too small for anyone to read in large amounts.
Well, there you have it. Now, you should be able to identify problems with your own designs, critique others, and become a master web designer. Did we miss any common reasons your website sucks? Let us know in the comments!