Common Mistakes in Web Design
Find this post interesting? Follow Jamie on twitter for more tips!
Find this post interesting? Follow Jamie on twitter for more tips!
We all screw up. It’s mankind’s nature. Nonetheless, in the website design industry, many elements can be implemented wrong, and with some tweaks made to become great. These go from typography to padding, where a single digit can radically damage your site design. Luckily, once you’re able to identify what the most common mistakes are, one or two clicks and a few taps on your keyboard can rescue a drowning design. Today, we are going to have a quick look at some design mistakes that all designers should look out for.
Typography is among the most crucial features of a design. In most designs, text rules the vast majority of the page so clean, well-tailored typography could be the key to freeing your theme’s potential. There’s many mistakes that new, or seasoned, designers can make that may just degrade the otherwise delightful appeal of a page’s typography.
In the interests of this piece, I assume the reader knows what a serif font is. There is a certain refinement in serif fonts being used on a web page, and a more modern feel when a designer uses the wide range of sans-serif fonts. However, these two effects do not mix to become the pinnacle of good typography when used concomitantly. Actually mixing the two under normal circumstances can create compound results that, to be blunt, simply don’t look great.
That is not to say that mixing serif and sans-serif fonts together never works. In fact, in a few cases, it works well, particularly when the sorts of fonts are used on different tiers of a hierarchy. For instance, A List Apart uses a serif font for a title, whilst employing a sans-serif font for the primary body content.
Another big mistake some designers walk into is using many various font families, rather than a select couple. Using multiple fonts could lead to a disconnected design that interrupts the readability of your content. Rather than multi-font content, making an attempt to use one font family per tier of the design’s visible power structure typically creates a better font scheme that looks much more united than a handful of random styles here and there.
A significant problem that may present itself is an absence of contrast between the typography and the background. This will bring real readability issues up, as some users will find it hard to differentiate between the two sets of colour. Take the example before, for instance. Which one is simpler to read, the left or the right?
There is not a complicated theory behind contrast. You would not put black writing on a black background, as you can’t establish what is writing and what’s the background. The only proposal is to get the text colour as near to the opposite extreme to the background, without damaging other artistic qualities, to avoid disappointment on the user’s end. The Ellipsis theme shows a good measure of contrast in the top header area. Would a light pink or purple work there instead?
No longer are we battling on small monitors (we’re thinking generally desktop reading here, not smartphone). As an alternative we’re living on 21+ screens and surfing on resolutions higher than HD giving designers much more space to work in. Therefore, you shouldn’t feel at all squashed and devote more space to padding and margins to improve the aesthetics of your design. Take Apple’s design for instance; it exploits a lot of white space concentrating all the colour and action on the content it cares about. That’s not to say you ought to have plenty of white space, but your designs could profit from being moved apart allowing more visibility in turn making it simpler to distinguish one from another.
It’s important to keep spacing consistent and equal through your design as best as possible in both internal padding and external margins. For an example, take a look at the diagram below. The latter half looks far 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 distinct from another, but it’s not really wasting any space.
Similarly, the grid is a very important feature of most successful website 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 organized. This section isn’t in this post because it’s a mistake not to use one, by regarding it as a solution if you should happen to feel like your designs are failing in an area it makes a contribution to.
You’ve also possibly heard about divine proportion, or “The Golden Ratio”. Whilst not every design wishes to adhere to this principle, most standard designs admittedly should try to at any cost. The proportion of 1 to 1.62 (in a rounded form) is generally called the Golden Ratio, and isn’t just utilized in web design though we merit some credit for employing it.
The Golden Ratio presents balance in a site design since we humans are used to it; the proportion of the forearm to the hand is 1 to 1.62 as is the human smile. Finding someone appealing 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 website design feel and luck better as it’s more natural to the user.
You can read more on the Golden Ratio and how mathematics influence web design here.
Forgetting the key purpose of your design is always bad. If your planning for ecommerce and you’ve got this revolutionary concept for a kick-ass slider that just doesn’t fit into the present project, don’t integrate it just for the heck of it. Similarly, if you’ve got a practice of using this awe-inspiring drop-down menu you spent numerous hours working on yet it just degrades the practicality of that particular site, don’t use it. Don’t get distracted by anything more, aside from what your design will ultimately be used for. Step back regularly and consider if the target matches the present design and, if not, manipulate it to do it.