Design mistakes can happen to anyone. Maybe you’re trying to finish a project too quickly, or you’re working on a complex site design where something gets merely overlooked. But, when they happen, you have to fix them… immediately!
Some design mistakes can ruin your content, cause users to abandon your site, or lose trust in the information you provide. It can be tough to recover from if you don’t make corrections. And so you aren’t confused, each of today’s tips comes with an example of a design that does it right from the Design Shack Gallery!
1. Sloppy Typography
The biggest typography offender is space. Line spacing, or leading, and the amount of space in text wraps are common offenders. While sometimes you see too much space, the more common problem is that the text does not have adequate room to breathe, making the design feel cluttered and difficult to read.
For most blocks of heavy copy – think paragraphs of body text – normal line spacing for the web is about 120 percent to 150 percent of the size of lettering. With smaller text, such as that rendering on mobile devices, you can even err on the side of a little extra line spacing to ensure readability.
The trick is in that happy medium, where the text is easy to read and has a natural flow, but does not become tiring on the eyes. Text that is too spaced out can be just as difficult to process as text that’s too close together.
When it comes to text wraps, follow that same general rule. For related elements that wrap, consider mirroring line spacing rules. That way everything will have a consistent feel that shows elements are similar but increases readability.
Doing it Right: House of Khlebny
2. Same Size Everything
All the photo boxes are the same size. All the text is the same size. All the buttons are the same size. While consistency is nice, all the monotony is plain boring.
Mix it up with a couple of size and scale options for each element type. That way you can keep that consistency, but also help drive the eye and create visual interest.
One of the best things you can do is think about photo scale within frames. The hero header on each page will likely be the same size, but how you position the photo in the frame can be different. Zoom out images for a far away feel that seems smaller with less visual weight; use a tight crop to make things appear closer and more prominent. Without changing the actual size – or even altering your website styles or template – you’ve created things that look to be different sizes.
Doing it Right: Brooke Promiitz
3. Forgetting Hierarchy
A user comes to a website expected to find or do something. Make it easy for them with a distinct hierarchy of elements that lead to this action.
The biggest things in the design should be the most important and scale down to items of lesser importance. Rank and group information into scannable bits that are easy for users to read at a glance and understand.
And then turn your hierarchy into a set of rules for consistency’s sake. That way a headline always looks like a headline and buttons follow the same sort of rules for placement, size, and interaction. All of these little things will make the entire set easier for users to engage with.
4. Neglecting the Basics
How many times have you come across a website, clicked a link and nothing happened? Or looked for an email address or contact form only to not find one?
Don’t forget to take care of all the housekeeping elements in the design and make sure that they are filled in, easy to find and accurate. Pay close attention to the navigation, search and the footer.
It’s important that these areas include updated links and information. Users expect a certain type of experience from these elements and can be frustrated easily if they don’t exist. It also provides legitimacy for your website – broken links or no contact information can lead to distrust from users.
5. Too Many Words
Edit your copy, set it aside and then edit it again.
The problem with many websites is that they use too much copy to explain simple things. Language should be clear and concise because attention spans are short.
Use active, descriptive words to best talk with users in the design. Provide clear instructions for actionable items that tell users exactly what to do and what will happen next.
This clarity in writing will help keep users interested and moving through the copy.
Doing it Right: A is for Albert
6. Poor Resolution Anything
A bad image of any kind should be avoided. Many users are viewing your design on high-resolution devices, from retina enabled screens on tablets to monitors that show every pixel in fine detail. A poor resolution image will kill any design.
The trick is rethinking what you know about file sizes and compression. While these things are quite significant, the rules have changed somewhat. Larger files are becoming more standard, and most internet connections can handle the load.
The reality is this: If you can’t use a sharp, clear image, don’t use an image at all. Your visual first impression tells users a lot about you. A poor image shows that you don’t care, aren’t credible or just don’t think about quality first. Assuredly, these are not things you want users to think when they visit your website design.
7. Too Many Tricks
Overdoing illustrations, using too many photos and drop shadows or dancing icons that go too far are some of the common design tricks that can distract users from the message in the design. Any design technique that exists for a visual reason can be considered a trick – unusual color, animation, odd photo combinations, and illustrations are all design tricks.
And they can be effective tools to help create interest and engagement.
When used sparingly.
Limit tricks to one thing that sets your design apart. And try not to overdo it. A great illustration, for example, can be a nice tool, but if parts of that illustration are chopped up and there are illustrations all over the design, it can get distracting. One “big trick” is better, and generally more effective than tons of little tricks.
Don’t get discouraged if you are guilty of committing one of these design mistakes. It happens to everyone. Recover well and your content will be safe.
It doesn’t take a redesign to correct these mistakes either. A few tweaks to design elements can be enough to clean up and streamline common design errors. The first step is auditing your design to find places that could use some special attention. Good luck!