Basix: Common Mistakes in Web Design

We all make mistakes. It’s human nature. However, in the web design industry, many elements can be put in place wrong with only a few tweaks needed to make them stellar. These range from typography to padding, where a single digit can drastically damage your web design. Luckily, once you’re able to identify what the most common mistakes are, a few clicks and a few taps on your keyboard can rescue a sinking design. Today, we’re going to take a look at some web design mistakes that every designer should watch out for.

We all make mistakes… some are messier than others.

About Basix

Our Basix posts are all about getting started with web design. Whether you’re brand new to web design or you’ve been designing on the web for a while and are interested in some “formal” training, the articles and tutorials in this library are dedicated to helping you get a bit of experience under you belt so you can start rocking out on more difficult projects later on!

Typography

Typography is one of the most important features of a design. In most designs, text dominates the majority of the page so clean, well-tailored typography can be the key to unlocking your theme’s potential. There’s many mistakes that new, or seasoned, designers can make that can just degrade the otherwise attractive appeal of a page’s typography.

Sans Serif vs Serif

For the sake of this article, I assume the reader knows what a serif font is. There’s a certain elegance in serif fonts being used on a web page, and a more modern feel when a designer utilizes the wide range of sans-serif fonts. However, these two effects do not mix to become the epitome of good typography when used concomitantly. In fact, mixing the two under normal circumstances can create hybrid results that, to be frank, just don’t look good.

That’s not to say that mixing serif and sans-serif fonts together never works. In fact, in some cases, it works pretty well, especially when the types of fonts are used on different tiers of a hierarchy. For example, A List Apart uses a serif font for a title, whilst using a sans-serif font for the main body content.

Number of Fonts

Another massive mistake some designers walk into is using many different font families, rather than a select couple. Using multiple fonts can result in a disconnected design that disrupts the readability of your content. Instead of multi-font content, attempting to use one font family per tier of the design’s visual hierarchy generally creates a nicer font scheme that looks much more united than a bunch of random styles here and there.

Likewise, too much varying in font size and line/letter spacing can create a disconnected reading experience and an overall bad end user experience. Keep it constant and familiar.

Lack of Contrast

A major problem that can present itself is a lack of contrast between the typography and the background. This can bring real readability issues up as some users will find it difficult to distinguish between the two sets of color. Take the example before, for example. Which one is easier to read, the left or the right? Right, the left!

There’s not a complex theory behind contrast. You wouldn’t put black writing on a black background because you can’t determine what is writing and what is the background. The only suggestion is to get the text colour as near to the opposite extreme to the background, without damaging other aesthetic qualities, to avoid frustration on the end user’s end. The Ellipsis theme shows good contrast in the top header area. Would a light pink or purple work there instead?

Padding, Margins and Spacing

No longer are we struggling on tiny monitors (we’re thinking mainly desktop browsing here, not smartphone). Instead, we’re living on 21″+ screens and browsing on resolutions higher than HD giving designers much more space to work in. Therefore, you shouldn’t feel at all squashed and dedicate more space to padding and margins to enhance the aesthetics of your design. Take Apple’s design for example; it uses a lot of white space concentrating all the colour and action on the content it cares about. That’s not to say you should have a lot of white space, but your designs could benefit from being moved apart more visibility so they are easily distinguished from one another.

It’s important to keep spacing consistent and equal throughout your design as best as possible in both internal padding and external margins. For an example, check out the diagram below. The latter half looks a lot better because all the margins are the same 18px space. Everything is aligned to the same grid layout. It’s clear and each area is distinguishable from another, but it’s not necessarily wasting any space.

Grid Systems

Likewise, the grid is an important feature of most successful web designers. Using a grid keeps everything in order and cleans up designs with consistent gutters to use. Grid-based design makes everything so much more organised. This section is not in this article because it’s a mistake not to use one, by consider it as a solution if you feel like your designs are failing in an area it contributes to.

Maintaining Ancient Values

The industry of web design is a fast paced one, with new developments appearing consistently. One of the worst things that can damage your design is to continue to develop and design in the ways popular years ago. In 2003, Microsoft Frontpage had a tool for “layout tables” but no good developer should ever dare to open a table tag in the name of layout. Likewise, the amazing animated GIFs and background music of yester-decade are a massive no-no. Oh, and don’t thinking of using frames as part of your web design. All these present usability and other issues and it’s just not how we do things anymore.

Speider Schneider has a great article on “The Stone Age of Web Design” here at Tuts+. Be sure to check it out for a tutorial on what your website shouldn’t look like.

Older techniques such as using tables or iFrames might seem tempting, but there is often a more graceful way to get things done if you look around at more modern approaches.

Proportion and Size

Your designs should always stick to some sort of hierarchy that is contributed to by size and proportion. In simple terms, your most important elements should be the biggest and let them decrease in size as you go on. That doesn’t mean that the least important item needs to be 4px tall, but it should be your roadmap towards the scale of elements on a page. They should still be in proportion for the input precision of whatever device you are designing for and easy enough to see. If they are there at all, they’ll be there for a reason.

This all stems from a usability perspective that suggests every elements should be easily accessible and needs no justification: don’t make the user do anything extra than just look at something. No squinting, no zooming, no excessive attempts at clicking something that’s tinier than a blade of grass.

You’ve also probably heard of divine proportion, or “The Golden Ratio”. Whilst not every design needs to adhear to this principle, most standard designs probably should try to at all costs. The ratio of 1 to 1.62 (in a rounded form) is commonly known as the Golden Ratio, and is not just used in web design although we do deserve some credit for utilizing it.

The Golden Ratio presents balance in a web design since we humans are used to it; the ratio of the forearm to the hand is 1 to 1.62 as is the human smile. Finding someone attractive can also be based from the Golden Ratio which is why we feel the Golden Ratio to be “natural”. Keeping everything just that balanced can make a web design feel and luck better as it’s more natural to the user.

You can read more about the Golden Ratio and how math affects web design here.

Forgetting Why You’re Doing This

Forgetting the main purpose of your design is always bad. If your designing for e-commerce and you have this brilliant idea for a kick-ass slider that just doesn’t fit into the current project, don’t integrate it just for the sake of it. Likewise, if you’ve got a habit of using this awesome drop-down menu you spent countless hours working on but it just degrades the usability of that particular site, don’t use it. Don’t get distracted by anything else, other than what your design will ultimately be used for. Step back at regular intervals and consider if the aim matches the current design and, if not, manipulate it to do so.

For the ThemeForest Inclined

Of course, there’s a higher chance that you might be a ThemeForest author if you’re reading this article. Therefore, I’ve got a few tips to share with you, based off the common rejection factors the review team regularly has to contend with.

• Line Height – the wiki suggests that a lot of submitted design templates lack a good amount of line height and/or spacing. Having a spacious line height of around 1.3-1.6em contributes to your design’s better usability but also makes it look cleaner. Using the “em” value for measuring the line height also helps keep it in proportion with your text.
• Visual Hierarchy – as mentioned before, having a strong, distinguishable visual hierarchy can also be advantageous since it helps your user determine what they should read first and then let them work their way down said hierarchy. This can be especially useful on sites that want to sell something, as it helps attract the reader’s attention towards a specific element on the page, like the amazing things a product can do, or it’s carefully captured shot, while keeping the less attractive things – like price – slightly more hidden.
• Browser Compatibility – One of the worst things you can do is alienate part of your website’s potential audience by making a website not work on their chosen browser. Chances are, the user will leave the site instead of spending time frustrated as they attempt to progress through the design. Making sure, at least, all major browsers are covered is always advisable, and proper testing should be ensured. If you don’t have a Mac, haul yourself down to an Apple Store and try your site out there if it contributes to your final design looking better.

Hopefully you’ve got some food for thought on what you shouldn’t do. Now, return to the homepage and discover what you should be doing!