Common Mistakes In Website Design
It’s not enough to simply build a webpage for your brand. It needs to embody your company’s personality while being intuitive and fun to use. Most of all, it needs to act as a resource. Think of your website as an employee—it’s a brand advocate and support person all in one. With that said, a badly designed web page can not only create a frustrating experience for your visitors—it’ll ultimately damage your entire brand. Luckily, the most common mistakes are easy to avoid.
1. Inconsistent Spacing
All websites are designed on a grid, no matter how asymmetric or unique they look. But beyond that, our eyes are subconsciously drawn to symmetry and spacing. And even if we don’t consciously realize it, bad use of space will turn us off of a website.
When designing your website, ensure that every element has consistent spacing. If one H1 heading has a bottom margin of 10 pixels, then they all should. You want to also consider each element of your site as a block and each block should fit against the other with equal spacing.
2. Illogical or Absent Hierarchies
Spacing is important! And with spacing your “design blocks” you also want to consider hierarchy. If you’re unsure of how that looks—take a peek at a newspaper. You can glance at each page and quickly prioritize each element’s importance by its size and the order in which it appears.
But how do you apply that to a website? It’s easy—give each “thought” plenty of breathing room so visitors clearly understand when one idea ends and another begins. The industry recommends at least 100 pixels above and below each element. Think of a “thought” as a single block of information, or a heading and a paragraph.
3. No Clear Visual Path
What is a “visual path”? It’s the route that your eyes naturally travel as they skim through a block of information. It’s important for you to not only understand your visual path, but to design your website so that it assists your visitors in finding that path as soon as your page loads. You want your users to be able to read content in the right order and feel satisfied that they’re following the right path.
To create a natural path, make sure you’re grouping similar elements together and building one thought atop another so that it all builds into one single, homogenous idea by the time your visitor is finished scrolling. It may even be easier to think of your web page as a scroll—a scroll of information wouldn’t jump around and it wouldn’t meander across multiple topics and ideas without clear transitions.
4. Disjointed Visual Style
We’ve all visited a web site that was all too keen on throwing the visual “kitchen sink” at us. You want your website to appear uniform and not look like a ransom note! It’s important to pick a visual style before you start the design process and stick with it.
How does that look? Settle on a maximum of three fonts and pick a color palette of about 5 complimentary colors. This will ensure that you don’t have too many design elements competing with each other. Best of all, your visitors will subconsciously pick up on your consistent use of style.
5. Headings Are Too Long
While the overlong headline may have been in vogue in the 1880s, it’s yet to come back into style. In that regard, you want to avoid the pitfall of overly wordy headings with your website. Your headings are meant to be bold and eye-catching, so making them too long will put strain on your visitors. And while you may want your headings to pop, you don’t want them to go screaming off the page. Keep the font size big and bold, but not too much so.
6. Menus Are Confusing & Complicated
We may think otherwise, but we do not actually like having too many options. It’s easy to feel overwhelmed and turned off by a navigation menu that is overburdened and confusing. You’re better off wire framing your navigation early on and finding simple and intuitive ways of organizing your content so that it fits in as few categories as possible while still making sense.
You want all of your content to have a home, but you don’t want to create a complicated cityscape of neighborhoods and subdivisions. Keep your navigation clean and simple while giving everything its rightful place.
7. Misuse of Text & Imagery
In the day of beautiful stock imagery, large and bold images are a great look for your website and brand. However, you want to make sure you’re not utilizing them at the expense of legibility. Text overlaying gorgeous photography is a pleasing design style, but it’s easy to overlook the legibility of your efforts.
Ensure your text isn’t on top of a busy visual element and be sure that the contrast of your image works well with the color of your type. If your typography is getting lost against the image, try lowering the contrast of the photo so that the heading pops more. At the end of the day, use your keen eye and make as many adjustments as needed until it’s perfect. Most of all, view your page across multiple platforms—contrasts differ on a smartphone, tablet, and computer monitor. What looks great on a sharp LED phone screen may look washed out on a monitor. Find a happy medium across all platforms.
Consistency & Hierarchy is the Name of the Game
All of these mistakes culminate into one thing—a lack of consistency and hierarchy. So much of our perception is subconscious, so you need to do everything you can to keep your visitors’ moving across your page. Think of every mistake you make as a stop sign—it kills momentum and may even cause your visitors to diverge from your page entirely.
Keeping a clear and consistent style, while prioritizing your information will ensure that whoever visits your website can quickly understand your brand and even get excited about it. And if you dodge the common design pitfalls in this article, you’ll be that much closer to the perfect web page.